0.0.91

Fix #454

.eslintrc

@@ -9,8 +9,11 @@
     },
     "sourceType": "module"
   },
+  "extends": [
+    "prettier",
+    "prettier/react"
+  ],
   "plugins": [
-    "jsx-a11y",
     "promise",
     "react"
   ],
@@ -24,31 +27,12 @@
     "window": false
   },
   "rules": {
-    "accessor-pairs": 2,
-    "array-bracket-spacing": ["error", "always"],
-    "arrow-parens": [2, "always"],
-    "arrow-spacing": [2, { "before": true, "after": true }],
-    "block-spacing": [2, "always"],
-    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
     "camelcase": 0,
-    "comma-dangle": [2, "never"],
-    "comma-spacing": [2, { "before": false, "after": true }],
-    "comma-style": [2, "last"],
-    "computed-property-spacing": ["error", "never"],
     "constructor-super": 2,
-    "curly": [2, "all"],
     "default-case": [2, { commentPattern: '^no default$' }],
-    "dot-location": [2, "property"],
-    "eol-last": 2,
     "eqeqeq": [2, "allow-null"],
-    "generator-star-spacing": [2, { "before": true, "after": true }],
     "handle-callback-err": [2, "^(err|error)$" ],
-    "indent": [2, 2, { "SwitchCase": 1 }],
-    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
-    "keyword-spacing": [2, { "before": true, "after": true }],
-    "max-len": [2, 120, 4],
     "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
-    "new-parens": 2,
     "no-alert": 1,
     "no-array-constructor": 2,
     "no-caller": 2,
@@ -71,8 +55,6 @@
     "no-extend-native": 2,
     "no-extra-bind": 2,
     "no-extra-boolean-cast": 2,
-    "no-extra-parens": [2, "functions"],
-    "no-extra-semi": 2,
     "no-fallthrough": 2,
     "no-floating-decimal": 2,
     "no-func-assign": 2,
@@ -85,10 +67,7 @@
     "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
     "no-lone-blocks": 2,
     "no-loop-func": 2,
-    "no-mixed-spaces-and-tabs": 2,
-    "no-multi-spaces": 2,
     "no-multi-str": 2,
-    "no-multiple-empty-lines": [2, { "max": 1 }],
     "no-native-reassign": 2,
     "no-negated-in-lhs": 2,
     "no-new": 2,
@@ -110,11 +89,9 @@
     "no-self-compare": 2,
     "no-sequences": 2,
     "no-shadow-restricted-names": 2,
-    "no-spaced-func": 2,
     "no-sparse-arrays": 2,
     "no-this-before-super": 2,
     "no-throw-literal": 2,
-    "no-trailing-spaces": 2,
     "no-undef": 2,
     "no-undef-init": 2,
     "no-unexpected-multiline": 2,
@@ -129,66 +106,23 @@
     "no-useless-constructor": 2,
     "no-useless-escape": 2,
     "no-var": 2,
-    "no-whitespace-before-property": 2,
     "no-with": 2,
-    "object-curly-spacing": ["error", "always"],
-    "operator-linebreak": [2, "after"],
-    "padded-blocks": [2, "never"],
     "prefer-const": 2,
     "prefer-rest-params": 2,
-    "prefer-template": 2,
     "quotes": [2, "single", "avoid-escape"],
     "radix": 2,
-    "rest-spread-spacing": ["error"],
-    "semi": [2, "always"],
-    "semi-spacing": [2, { "before": false, "after": true }],
-    "space-before-blocks": [2, "always"],
-    "space-before-function-paren": [2, { "anonymous": "always", "named": "never" }],
-    "space-in-parens": [2, "never"],
-    "space-infix-ops": 2,
-    "space-unary-ops": [2, { "words": true, "nonwords": false }],
-    "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] }],
-    "template-curly-spacing": [2, "never"],
     "use-isnan": 2,
     "valid-typeof": 2,
-    "wrap-iife": [2, "outside"],
-    "yield-star-spacing": [2, "both"],
     "yoda": [2, "never"],
 
     // promise
     "promise/param-names": 2,
 
-    // jsx accessibility
-    "jsx-a11y/aria-props": 2,
-    "jsx-a11y/aria-proptypes": 2,
-    "jsx-a11y/aria-role": 2,
-    "jsx-a11y/aria-unsupported-elements": 2,
-    "jsx-a11y/heading-has-content": 2,
-    "jsx-a11y/href-no-hash": 2,
-    "jsx-a11y/html-has-lang": 2,
-    "jsx-a11y/img-has-alt": 2,
-    "jsx-a11y/img-redundant-alt": 2,
-    "jsx-a11y/label-has-for": 2,
-    "jsx-a11y/mouse-events-have-key-events": 2,
-    "jsx-a11y/no-access-key": 2,
-    "jsx-a11y/no-marquee": 2,
-    "jsx-a11y/no-onchange": 0,
-    "jsx-a11y/onclick-has-focus": 2,
-    "jsx-a11y/onclick-has-role": 2,
-    "jsx-a11y/role-has-required-aria-props": 2,
-    "jsx-a11y/role-supports-aria-props": 2,
-    "jsx-a11y/scope": 2,
-    "jsx-a11y/tabindex-no-positive": 2,
-
     // react
-    "jsx-quotes": [2, "prefer-single"],
     "react/display-name": 0,
-    "react/jsx-boolean-value": 2,
     "react/jsx-handler-names": [2, {
       "eventHandlerPrefix": "_handle"
     }],
-    "react/jsx-indent": [2, 2],
-    "react/jsx-indent-props": [2, 2],
     "react/jsx-no-bind": 2,
     "react/jsx-no-duplicate-props": 2,
     "react/jsx-no-undef": 2,

.gitignore

@@ -1,4 +1,3 @@
-/dist
-/dist-examples
-/dist-performance
-/node_modules
+node_modules
+dist
+dist-examples

README.md

@@ -20,17 +20,17 @@ touch handling to the Web. [Read more](#why).
 
 Browse the UI Explorer to see React Native [examples running on
 Web](https://necolas.github.io/react-native-web/storybook/). Or try it out
-online with [React Native for Web: Playground](http://codepen.io/necolas/pen/PZzwBR).
+online with [React Native for Web: Playground](https://www.webpackbin.com/bins/-KgucwxRbn7HRU-V-3Bc).
 
 ## Quick start
 
 To install in your app:
 
 ```
-npm install --save react@15.4 react-native-web
+npm install --save react@15.4 react-dom@15.4 react-native-web
 ```
 
-Read the [Client and Server rendering](docs/guides/rendering.md) guide.
+Read the [Getting Started](docs/guides/getting-started.md) guide.
 
 Alternatively, you can quickly setup a local project
 using [create-react-app](https://github.com/facebookincubator/create-react-app)
@@ -41,12 +41,11 @@ using [create-react-app](https://github.com/facebookincubator/create-react-app)
 
 Guides:
 
+* [Getting started](docs/guides/getting-started.md)
 * [Accessibility](docs/guides/accessibility.md)
-* [Client and server rendering](docs/guides/rendering.md)
 * [Direct manipulation](docs/guides/direct-manipulation.md)
 * [Internationalization](docs/guides/internationalization.md)
 * [Known issues](docs/guides/known-issues.md)
-* [React Native](docs/guides/react-native.md)
 * [Style](docs/guides/style.md)
 
 Exported modules:
@@ -143,9 +142,9 @@ AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-ro
 
 * [react-native-web-starter](https://github.com/grabcode/react-native-web-starter)
 * [react-native-web-player](https://github.com/dabbott/react-native-web-player)
+* [reactxp](https://github.com/microsoft/reactxp)
 * [react-web](https://github.com/taobaofed/react-web)
-* [react-native-for-web](https://github.com/KodersLab/react-native-for-web)
-* [rhinos-app](https://github.com/rhinos-app/rhinos-app-dev)
+* [react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack)
 
 ## License
 

docs/components/ActivityIndicator.md

@@ -4,19 +4,19 @@
 
 [...View props](./View.md)
 
-**animating**: bool = true
+**animating**: boolean = true
 
 Whether to show the indicator or hide it.
 
-**color**: string = '#1976D2'
+**color**: ?color = '#1976D2'
 
 The foreground color of the spinner.
 
-**hidesWhenStopped**: bool = true
+**hidesWhenStopped**: ?boolean = true
 
 Whether the indicator should hide when not animating.
 
-**size**: oneOf('small, 'large') | number = 'small'
+**size**: ?enum('small, 'large') | number = 'small'
 
 Size of the indicator. Small has a height of `20`, large has a height of `36`.
 

docs/components/Button.md

@@ -6,23 +6,27 @@ build your own custom button using `TouchableOpacity` or
 
 ## Props
 
-**accessibilityLabel**: string
+**accessibilityLabel**: ?string
 
-Defines the text available to assistive technologies upon interaction with the
-element. (This is implemented using `aria-label`.)
+Overrides the text that's read by a screen reader when the user interacts
+with the element.
 
-**color**: string
+**color**: ?string
 
 Background color of the button.
 
-**disabled**: bool = false
+**disabled**: ?boolean
 
-If true, disable all interactions for this component
+If `true`, disable all interactions for this element.
 
 **onPress**: function
 
 This function is called on press.
 
+testID: ?string
+
+Used to locate this view in end-to-end tests.
+
 **title**: string
 
 Text to display inside the button.

docs/components/Image.md

@@ -9,65 +9,66 @@ Unsupported React Native props:
 
 ## Props
 
-**accessibilityLabel**: string
+**accessibilityLabel**: ?string
 
 The text that's read by a screenreader when someone interacts with the image.
 
-**accessible**: bool
+**accessible**: ?boolean
 
-When `false`, the view is hidden from screenreaders. Default: `true`.
+When `true`, indicates the image is an accessibility element.
 
-**children**: any
+**children**: ?any
 
 Content to display over the image.
 
-**defaultSource**: { uri: string }
+**defaultSource**: ?object
 
-An image to display as a placeholder while downloading the final image off the network.
+An image to display as a placeholder while downloading the final image off the
+network. `{ uri: string, width, height }`
 
-**onError**: function
+**onError**: ?function
 
 Invoked on load error with `{nativeEvent: {error}}`.
 
-**onLayout**: function
+**onLayout**: ?function
 
 Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
 height } } }`, where `x` and `y` are the offsets from the parent node.
 
-**onLoad**: function
+**onLoad**: ?function
 
 Invoked when load completes successfully.
 
-**onLoadEnd**: function
+**onLoadEnd**: ?function
 
 Invoked when load either succeeds or fails,
 
-**onLoadStart**: function
+**onLoadStart**: ?function
 
 Invoked on load start.
 
-**resizeMode**: oneOf('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'cover'
+**resizeMode**: ?enum('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'cover'
 
 Determines how to resize the image when the frame doesn't match the raw image
 dimensions.
 
-**source**: { uri: string }
+**source**: ?object
 
 `uri` is a string representing the resource identifier for the image, which
-could be an http address or a base64 encoded image.
+could be an http address or a base64 encoded image. `{ uri: string, width, height }`
 
-**style**: style
+**style**: ?style
 
 + ...[View#style](./View.md)
 + `resizeMode`
 
-**testID**: string
+**testID**: ?string
 
 Used to locate a view in end-to-end tests.
 
 ## Properties
 
-static **resizeMode**: Object
+static **resizeMode**: object
 
 Example usage:
 

docs/components/ProgressBar.md

@@ -6,18 +6,22 @@ Display an activity progress bar.
 
 [...View props](./View.md)
 
-**color**: string = '#1976D2'
+**color**: ?string = '#1976D2'
 
 Color of the progress bar.
 
-**indeterminate**: bool = true
+**indeterminate**: ?boolean = true
 
 Whether the progress bar will show indeterminate progress.
 
-**progress**: number
+**progress**: ?number
 
 The progress value (between 0 and 1).
 
-(web) **trackColor**: string = 'transparent'
+**testID**: ?string
+
+Used to locate this view in end-to-end tests.
+
+(web) **trackColor**: ?string = 'transparent'
 
 Color of the track bar.

docs/components/ScrollView.md

@@ -9,17 +9,17 @@ view directly (discouraged) or make sure all parent views have bounded height
 
 [...View props](./View.md)
 
-**contentContainerStyle**: style
+**contentContainerStyle**: ?style
 
 These styles will be applied to the scroll view content container which wraps
 all of the child views.
 
-**horizontal**: bool = false
+**horizontal**: ?boolean = false
 
-When true, the scroll view's children are arranged horizontally in a row
+When `true`, the scroll view's children are arranged horizontally in a row
 instead of vertically in a column.
 
-**keyboardDismissMode**: oneOf('none', 'on-drag') = 'none'
+**keyboardDismissMode**: ?enum('none', 'on-drag') = 'none'
 
 Determines whether the keyboard gets dismissed in response to a scroll drag.
 
@@ -27,13 +27,13 @@ Determines whether the keyboard gets dismissed in response to a scroll drag.
 * `on-drag`, the keyboard is dismissed when a drag begins.
 * `interactive` (not supported on web; same as `none`)
 
-**onContentSizeChange**: function
+**onContentSizeChange**: ?function
 
 Called when scrollable content view of the `ScrollView` changes. It's
 implemented using the `onLayout` handler attached to the content container
 which this `ScrollView` renders.
 
-**onScroll**: function
+**onScroll**: ?function
 
 Fires at most once per frame during scrolling. The frequency of the events can
 be contolled using the `scrollEventThrottle` prop.
@@ -50,18 +50,18 @@ Invoked on scroll with the following event:
 }
 ```
 
-**refreshControl**: element
+**refreshControl**: ?element
 
 TODO
 
 A [RefreshControl](../RefreshControl) component, used to provide
 pull-to-refresh functionality for the `ScrollView`.
 
-**scrollEnabled**: bool = true
+**scrollEnabled**: ?boolean = true
 
 When false, the content does not scroll.
 
-**scrollEventThrottle**: number = 0
+**scrollEventThrottle**: ?number = 0
 
 This controls how often the scroll event will be fired while scrolling (as a
 time interval in ms). A lower number yields better accuracy for code that is

docs/components/Switch.md

@@ -9,31 +9,31 @@ supplied `value` prop instead of the expected result of any user actions.
 
 [...View props](./View.md)
 
-**disabled**: bool = false
+**disabled**: ?boolean = false
 
 If `true` the user won't be able to interact with the switch.
 
-**onValueChange**: func
+**onValueChange**: ?function
 
 Invoked with the new value when the value changes.
 
-**value**: bool = false
+**value**: ?boolean = false
 
 The value of the switch. If `true` the switch will be turned on.
 
-(web) **activeThumbColor**: color = #009688
+(web) **activeThumbColor**: ?color = #009688
 
 The color of the thumb grip when the switch is turned on.
 
-(web) **activeTrackColor**: color = #A3D3CF
+(web) **activeTrackColor**: ?color = #A3D3CF
 
 The color of the track when the switch is turned on.
 
-(web) **thumbColor**: color = #FAFAFA
+(web) **thumbColor**: ?color = #FAFAFA
 
 The color of the thumb grip when the switch is turned off.
 
-(web) **trackColor**: color = #939393
+(web) **trackColor**: ?color = #939393
 
 The color of the track when the switch is turned off.
 

docs/components/Text.md

@@ -16,76 +16,90 @@ Unsupported React Native props:
 
 NOTE: `Text` will transfer all other props to the rendered HTML element.
 
-(web) **accessibilityLabel**: string
+(web) **accessibilityLabel**: ?string
 
-Defines the text available to assistive technologies upon interaction with the
-element. (This is implemented using `aria-label`.)
+Overrides the text that's read by a screen reader when the user interacts
+with the element. (This is implemented using `aria-label`.)
 
-(web) **accessibilityRole**: oneOf(roles)
+See the [Accessibility guide](../guides/accessibility) for more information.
+
+(web) **accessibilityRole**: ?oneOf(roles)
 
 Allows assistive technologies to present and support interaction with the view
 in a manner that is consistent with user expectations for similar views of that
 type. For example, marking a touchable view with an `accessibilityRole` of
 `button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
 
-Note: Avoid changing `accessibilityRole` values over time or after user
-actions. Generally, accessibility APIs do not provide a means of notifying
-assistive technologies of a `role` value change.
+See the [Accessibility guide](../guides/accessibility) for more information.
 
-**accessible**: bool = true
+**accessible**: ?boolean
 
-When `false`, the text is hidden from assistive technologies. (This is
-implemented using `aria-hidden`.)
+When `true`, indicates that the view is an accessibility element (i.e.,
+focusable) and groups its child content. By default, all the touchable elements
+and elements with `accessibilityRole` of `button` and `link` are accessible.
+(This is implemented using `tabindex`.)
 
-**children**: any
+See the [Accessibility guide](../guides/accessibility) for more information.
+
+**children**: ?any
 
 Child content.
 
-**numberOfLines**: number
+**importantForAccessibility**: ?enum('auto', 'no-hide-descendants', 'yes')
+
+A value of `no` will remove the element from the tab flow.
+
+A value of `no-hide-descendants` will hide the element and its children from
+assistive technologies. (This is implemented using `aria-hidden`.)
+
+See the [Accessibility guide](../guides/accessibility) for more information.
+
+**numberOfLines**: ?number
 
 Truncates the text with an ellipsis after this many lines. Currently only supports `1`.
 
-**onLayout**: function
+**onLayout**: ?function
 
 Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
 height } } }`, where `x` and `y` are the offsets from the parent node.
 
-**onPress**: function
+**onPress**: ?function
 
 This function is called on press.
 
-**selectable**: bool = true
+**selectable**: ?boolean
 
-Lets the user select the text.
+When `false`, the text is not selectable.
 
-**style**: style
+**style**: ?style
 
 + ...[View#style](View.md)
 + `color`
 + `fontFamily`
++ `fontFeatureSettings` ‡
 + `fontSize`
 + `fontStyle`
 + `fontWeight`
 + `letterSpacing`
 + `lineHeight`
-+ `textAlign`‡
++ `textAlign`
 + `textAlignVertical`
 + `textDecorationLine`
-+ `textOverflow`
-+ `textRendering`
++ `textIndent` ‡
++ `textOverflow` ‡
++ `textRendering` ‡
 + `textShadowColor`
-+ `textShadowOffset`‡
++ `textShadowOffset`
 + `textShadowRadius`
-+ `textTransform`
-+ `unicodeBidi`
++ `textTransform` ‡
++ `unicodeBidi` ‡
 + `whiteSpace`
-+ `wordWrap`
-+ `writingDirection`‡
++ `wordWrap` ‡
++ `writingDirection`
 
-‡ This property can be suffixed with `$noI18n` to prevent automatic
-bidi-flipping in RTL mode. This is only supported if `Platform.OS === 'web'`.
+‡ web only.
 
-**testID**: string
+**testID**: ?string
 
 Used to locate this view in end-to-end tests.
 

docs/components/TextInput.md

@@ -18,7 +18,7 @@ Unsupported React Native props:
 
 [...View props](./View.md)
 
-**autoCapitalize**: oneOf('characters', 'none', 'sentences', 'words') = 'sentences'
+**autoCapitalize**: ?enum('characters', 'none', 'sentences', 'words') = 'sentences'
 
 Automatically capitalize certain characters (only available in Chrome and iOS Safari).
 
@@ -27,21 +27,21 @@ Automatically capitalize certain characters (only available in Chrome and iOS Sa
 * `sentences`: Automatically capitalize the first letter of sentences.
 * `words`: Automatically capitalize the first letter of words.
 
-(web) **autoComplete**: string
+(web) **autoComplete**: ?string
 
 Indicates whether the value of the control can be automatically completed by
 the browser. [Accepted values](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
 
-**autoCorrect**: bool = true
+**autoCorrect**: ?boolean = true
 
 Automatically correct spelling mistakes  (only available in iOS Safari).
 
-**autoFocus**: bool = false
+**autoFocus**: ?boolean = false
 
 If `true`, focuses the input on `componentDidMount`. Only the first form element
 in a document with `autofocus` is focused.
 
-**blurOnSubmit**: bool
+**blurOnSubmit**: ?boolean
 
 If `true`, the text field will blur when submitted. The default value is `true`
 for single-line fields and `false` for multiline fields. Note, for multiline
@@ -49,108 +49,104 @@ fields setting `blurOnSubmit` to `true` means that pressing return will blur
 the field and trigger the `onSubmitEditing` event instead of inserting a
 newline into the field.
 
-**clearTextOnFocus**: bool = false
+**clearTextOnFocus**: ?boolean = false
 
 If `true`, clears the text field automatically when focused.
 
-**defaultValue**: string
+**defaultValue**: ?string
 
 Provides an initial value that will change when the user starts typing. Useful
 for simple use-cases where you don't want to deal with listening to events and
 updating the `value` prop to keep the controlled state in sync.
 
-**editable**: bool = true
+**editable**: ?boolean = true
 
 If `false`, text is not editable (i.e., read-only).
 
-**keyboardType**: oneOf('default', 'email-address', 'numeric', 'phone-pad', 'search', 'url', 'web-search') = 'default'
+**keyboardType**: enum('default', 'email-address', 'numeric', 'phone-pad', 'search', 'url', 'web-search') = 'default'
 
 Determines which keyboard to open. (NOTE: Safari iOS requires an ancestral
 `<form action>` element to display the `search` keyboard).
 
 (Not available when `multiline` is `true`.)
 
-**maxLength**: number
+**maxLength**: ?number
 
 Limits the maximum number of characters that can be entered.
 
-(web) **maxNumberOfLines**: number = numberOfLines
-
-Limits the maximum number of lines for a multiline `TextInput`.
-
-(Requires `multiline` to be `true`.)
-
-**multiline**: bool = false
+**multiline**: ?boolean = false
 
 If true, the text input can be multiple lines.
 
-**numberOfLines**: number = 2
+**numberOfLines**: ?number = 2
 
-Sets the initial number of lines for a multiline `TextInput`.
+Sets the number of lines for a multiline `TextInput`.
 
 (Requires `multiline` to be `true`.)
 
-**onBlur**: function
+**onBlur**: ?function
 
 Callback that is called when the text input is blurred.
 
-**onChange**: function
+**onChange**: ?function
 
 Callback that is called when the text input's text changes.
 
-**onChangeText**: function
+**onChangeText**: ?function
 
 Callback that is called when the text input's text changes. The text is passed
 as an argument to the callback handler.
 
-**onFocus**: function
+**onFocus**: ?function
 
 Callback that is called when the text input is focused.
 
-**onKeyPress**: function
+**onKeyPress**: ?function
 
 Callback that is called when a key is pressed. Pressed key value is passed as
 an argument to the callback handler. Fires before `onChange` callbacks.
 
-**onSelectionChange**: function
+**onSelectionChange**: ?function
 
 Callback that is called when the text input's selection changes. This will be called with
 `{ nativeEvent: { selection: { start, end } } }`.
 
-**onSubmitEditing**: function
+**onSubmitEditing**: ?function
 
 Callback that is called when the keyboard's submit button is pressed.
 
-**placeholder**: string
+**placeholder**: ?string
 
 The string that will be rendered in an empty `TextInput` before text has been
 entered.
 
-**secureTextEntry**: bool = false
+**secureTextEntry**: ?boolean = false
 
 If true, the text input obscures the text entered so that sensitive text like
 passwords stay secure.
 
 (Not available when `multiline` is `true`.)
 
-**selection**: { start: number, end: ?number }
+**selection**: ?{ start: number, end: ?number }
 
 The start and end of the text input's selection. Set start and end to the same value to position the cursor.
 
-**selectTextOnFocus**: bool = false
+**selectTextOnFocus**: ?boolean = false
 
 If `true`, all text will automatically be selected on focus.
 
-**style**: style
+**style**: ?style
 
 + ...[Text#style](./Text.md)
-+ `outline`
++ `resize` ‡
 
-**testID**: string
+‡ web only.
+
+**testID**: ?string
 
 Used to locate this view in end-to-end tests.
 
-**value**: string
+**value**: ?string
 
 The value to show for the text input. `TextInput` is a controlled component,
 which means the native `value` will be forced to match this prop if provided.

docs/components/TouchableWithoutFeedback.md

@@ -11,60 +11,33 @@ several child components, wrap them in a View.
 
 [...View props](./View.md)
 
-**accessibilityLabel**: string
-
-Overrides the text that's read by the screen reader when the user interacts
-with the element.
-
-(web) **accessibilityRole**: oneOf(roles) = 'button'
-
-Allows assistive technologies to present and support interaction with the view
-
-**accessible**: bool = true
-
-When `false`, the view is hidden from screenreaders.
-
-**children**: View
-
-**delayLongPress**: number
+**delayLongPress**: ?number
 
 Delay in ms, from `onPressIn`, before `onLongPress` is called.
 
-**delayPressIn**: number
+**delayPressIn**: ?number
 
 Delay in ms, from the start of the touch, before `onPressIn` is called.
 
-**delayPressOut**: number
+**delayPressOut**: ?number
 
 Delay in ms, from the release of the touch, before `onPressOut` is called.
 
-**disabled**: bool
+**disabled**: ?boolean
 
-If true, disable all interactions for this component.
+If `true`, disable all interactions for this component.
 
-**hitSlop**: `{top: number, left: number, bottom: number, right: number}`
+**onLongPress**: ?function
 
-This defines how far your touch can start away from the button. This is added
-to `pressRetentionOffset` when moving off of the button. **NOTE**: The touch
-area never extends past the parent view bounds and the z-index of sibling views
-always takes precedence if a touch hits two overlapping views.
-
-**onLayout**: function
-
-Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
-height } } }`, where `x` and `y` are the offsets from the parent node.
-
-**onLongPress**: function
-
-**onPress**: function
+**onPress**: ?function
 
 Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).
 
-**onPressIn**: function
+**onPressIn**: ?function
 
-**onPressOut**: function
+**onPressOut**: ?function
 
-**pressRetentionOffset**: `{top: number, left: number, bottom: number, right: number}`
+**pressRetentionOffset**: ?`{top: number, left: number, bottom: number, right: number}`
 
 When the scroll view is disabled, this defines how far your touch may move off
 of the button, before deactivating the button. Once deactivated, try moving it

docs/components/View.md

@@ -7,21 +7,20 @@ inside another `View` and has 0-to-many children of any type.
 Also, refer to React Native's documentation about the [Gesture Responder
 System](http://facebook.github.io/react-native/releases/0.22/docs/gesture-responder-system.html).
 
-Unsupported React Native props:
-`onAccessibilityTap`,
-`hitSlop`,
-`onMagicTap`
+Unsupported React Native props: `collapsable`, `onAccessibilityTap`, `onMagicTap`.
 
 ## Props
 
 NOTE: `View` will transfer all other props to the rendered HTML element.
 
-**accessibilityLabel**: string
+**accessibilityLabel**: ?string
 
-Defines the text available to assistive technologies upon interaction with the
-element. (This is implemented using `aria-label`.)
+Overrides the text that's read by a screen reader when the user interacts
+with the element. (This is implemented using `aria-label`.)
 
-**accessibilityLiveRegion**: oneOf('assertive', 'off', 'polite') = 'off'
+See the [Accessibility guide](../guides/accessibility) for more information.
+
+**accessibilityLiveRegion**: ?enum('assertive', 'none', 'polite')
 
 Indicates to assistive technologies whether to notify the user when the view
 changes. The values of this attribute are expressed in degrees of importance.
@@ -30,55 +29,105 @@ priority. When regions are specified as `assertive`, assistive technologies
 will interrupt and immediately notify the user. (This is implemented using
 [`aria-live`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-live).)
 
-(web) **accessibilityRole**: oneOf(roles)
+See the [Accessibility guide](../guides/accessibility) for more information.
+
+(web) **accessibilityRole**: ?enum(roles)
 
 Allows assistive technologies to present and support interaction with the view
 in a manner that is consistent with user expectations for similar views of that
 type. For example, marking a touchable view with an `accessibilityRole` of
 `button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
 
-Note: Avoid changing `accessibilityRole` values over time or after user
-actions. Generally, accessibility APIs do not provide a means of notifying
-assistive technologies of a `role` value change.
+See the [Accessibility guide](../guides/accessibility) for more information.
 
-**accessible**: bool = true
+**accessible**: ?boolean
 
-When `false`, the view is hidden from assistive technologies. (This is
-implemented using `aria-hidden`.)
+When `true`, indicates that the view is an accessibility element (i.e.,
+focusable) and groups its child content. By default, all the touchable elements
+and elements with `accessibilityRole` of `button` and `link` are accessible.
+(This is implemented using `tabindex`.)
 
-**onLayout**: function
+See the [Accessibility guide](../guides/accessibility) for more information.
+
+**children**: ?element
+
+Child content.
+
+**hitSlop**: ?object
+
+This defines how far a touch event can start away from the view (in pixels).
+Typical interface guidelines recommend touch targets that are at least 30 - 40
+points/density-independent pixels.
+
+For example, if a touchable view has a height of `20` the touchable height can
+be extended to `40` with `hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}`.
+
+**importantForAccessibility**: ?enum('auto', 'no', 'no-hide-descendants', 'yes')
+
+A value of `no` will remove the element from the tab flow.
+
+A value of `no-hide-descendants` will hide the element and its children from
+assistive technologies. (This is implemented using `aria-hidden`.)
+
+See the [Accessibility guide](../guides/accessibility) for more information.
+
+**onLayout**: ?function
 
 Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
 height } } }`, where `x` and `y` are the offsets from the parent node.
 
-**onMoveShouldSetResponder**: function
+**onMoveShouldSetResponder**: ?function => boolean
 
-**onMoveShouldSetResponderCapture**: function
+Does this view want to "claim" touch responsiveness? This is called for every
+touch move on the `View` when it is not the responder.
 
-**onResponderGrant**: function
+**onMoveShouldSetResponderCapture**: ?function => boolean
 
-For most touch interactions, you'll simply want to wrap your component in
-`TouchableHighlight` or `TouchableOpacity`.
+If a parent `View` wants to prevent a child `View` from becoming responder on a
+move, it should have this handler return `true`.
 
-**onResponderMove**: function
+**onResponderGrant**: ?function
 
-**onResponderReject**: function
+The `View` is now responding to touch events. This is the time to highlight and
+show the user what is happening.  For most touch interactions, you'll simply
+want to wrap your component in `TouchableHighlight` or `TouchableOpacity`.
 
-**onResponderRelease**: function
+**onResponderMove**: ?function
 
-**onResponderTerminate**: function
+The user is moving their finger.
 
-**onResponderTerminationRequest**: function
+**onResponderReject**: ?function
 
-**onStartShouldSetResponder**: function
+Another responder is already active and will not release it to the `View`
+asking to be the responder.
 
-**onStartShouldSetResponderCapture**: function
+**onResponderRelease**: ?function
 
-**pointerEvents**: oneOf('auto', 'box-only', 'box-none', 'none') = 'auto'
+Fired at the end of the touch.
 
-Configure the `pointerEvents` of the view. The enhanced `pointerEvents` modes
-provided are not part of the CSS spec, therefore, `pointerEvents` is excluded
-from `style`.
+**onResponderTerminate**: ?function
+
+The responder has been taken from the `View`.
+
+**onResponderTerminationRequest**: ?function
+
+Some other `View` wants to become responder and is asking this `View` to
+release its responder. Returning `true` allows its release.
+
+**onStartShouldSetResponder**: ?function => boolean
+
+Does this view want to become responder on the start of a touch?
+
+**onStartShouldSetResponderCapture**: ?function => boolean
+
+If a parent `View` wants to prevent a child `View` from becoming the responder
+on a touch start, it should have this handler return `true`.
+
+**pointerEvents**: ?enum('auto', 'box-only', 'box-none', 'none') = 'auto'
+
+Controls whether the View can be the target of touch events. The enhanced
+`pointerEvents` modes provided are not part of the CSS spec, therefore,
+`pointerEvents` is excluded from `style`.
 
 `box-none` is the equivalent of:
 
@@ -94,66 +143,81 @@ from `style`.
 .box-only * { pointer-events: none }
 ```
 
-**style**: style
+**style**: ?style
 
 + `alignContent`
 + `alignItems`
 + `alignSelf`
-+ `animationDelay`
-+ `animationDirection`
-+ `animationDuration`
-+ `animationFillMode`
-+ `animationIterationCount`
-+ `animationName`
-+ `animationPlayState`
-+ `animationTimingFunction`
++ `animationDelay` ‡
++ `animationDirection` ‡
++ `animationDuration` ‡
++ `animationFillMode` ‡
++ `animationIterationCount` ‡
++ `animationName` ‡
++ `animationPlayState` ‡
++ `animationTimingFunction` ‡
 + `backfaceVisibility`
-+ `backgroundAttachment`
-+ `backgroundClip`
++ `backgroundAttachment` ‡
++ `backgroundClip` ‡
 + `backgroundColor`
-+ `backgroundImage`
-+ `backgroundOrigin`
-+ `backgroundPosition`
-+ `backgroundRepeat`
-+ `backgroundSize`
++ `backgroundImage` ‡
++ `backgroundOrigin` ‡
++ `backgroundPosition` ‡
++ `backgroundRepeat` ‡
++ `backgroundSize` ‡
 + `borderColor` (single value)
 + `borderTopColor`
 + `borderBottomColor`
-+ `borderRightColor`‡
-+ `borderLeftColor`‡
++ `borderRightColor`
++ `borderLeftColor`
 + `borderRadius` (single value)
-+ `borderTopLeftRadius`‡
-+ `borderTopRightRadius`‡
-+ `borderBottomLeftRadius`‡
-+ `borderBottomRightRadius`‡
++ `borderTopLeftRadius`
++ `borderTopRightRadius`
++ `borderBottomLeftRadius`
++ `borderBottomRightRadius`
 + `borderStyle` (single value)
 + `borderTopStyle`
-+ `borderRightStyle`‡
++ `borderRightStyle`
 + `borderBottomStyle`
-+ `borderLeftStyle`‡
++ `borderLeftStyle`
 + `borderWidth` (single value)
 + `borderBottomWidth`
-+ `borderLeftWidth`‡
-+ `borderRightWidth`‡
++ `borderLeftWidth`
++ `borderRightWidth`
 + `borderTopWidth`
 + `bottom`
-+ `boxShadow`
++ `boxShadow` ‡
 + `boxSizing`
-+ `cursor`
++ `clip` ‡
++ `cursor` ‡
++ `display`
++ `filter` ‡
 + `flex` (number)
 + `flexBasis`
 + `flexDirection`
 + `flexGrow`
 + `flexShrink`
 + `flexWrap`
++ `gridAutoColumns` ‡
++ `gridAutoFlow` ‡
++ `gridAutoRows` ‡
++ `gridColumnEnd` ‡
++ `gridColumnGap` ‡
++ `gridColumnStart` ‡
++ `gridRowEnd` ‡
++ `gridRowGap` ‡
++ `gridRowStart` ‡
++ `gridTemplateColumns` ‡
++ `gridTemplateRows` ‡
++ `gridTemplateAreas` ‡
 + `height`
 + `justifyContent`
-+ `left`‡
++ `left`
 + `margin` (single value)
 + `marginBottom`
 + `marginHorizontal`
-+ `marginLeft`‡
-+ `marginRight`‡
++ `marginLeft`
++ `marginRight`
 + `marginTop`
 + `marginVertical`
 + `maxHeight`
@@ -162,34 +226,40 @@ from `style`.
 + `minWidth`
 + `opacity`
 + `order`
++ `outline` ‡
++ `outlineColor` ‡
 + `overflow`
-+ `overflowX`
-+ `overflowY`
++ `overflowX` ‡
++ `overflowY` ‡
 + `padding` (single value)
 + `paddingBottom`
 + `paddingHorizontal`
-+ `paddingLeft`‡
-+ `paddingRight`‡
++ `paddingLeft`
++ `paddingRight`
 + `paddingTop`
 + `paddingVertical`
-+ `perspective`
-+ `perspectiveOrigin`
++ `perspective` ‡
++ `perspectiveOrigin` ‡
 + `position`
-+ `right`‡
++ `right`
++ `shadowColor`
++ `shadowOffset`
++ `shadowOpacity`
++ `shadowRadius`
 + `top`
 + `transform`
-+ `transformOrigin`
-+ `transitionDelay`
-+ `transitionDuration`
-+ `transitionProperty`
-+ `transitionTimingFunction`
-+ `userSelect`
-+ `visibility`
++ `transformOrigin` ‡
++ `transitionDelay` ‡
++ `transitionDuration` ‡
++ `transitionProperty` ‡
++ `transitionTimingFunction` ‡
++ `userSelect` ‡
++ `visibility` ‡
 + `width`
++ `willChange` ‡
 + `zIndex`
 
-‡ This property can be suffixed with `$noI18n` to prevent automatic
-bidi-flipping in RTL mode. This is only supported if `Platform.OS === 'web'`.
+‡ web only.
 
 Default:
 
@@ -211,7 +281,7 @@ Default:
 
 (See [facebook/css-layout](https://github.com/facebook/css-layout)).
 
-**testID**: string
+**testID**: ?string
 
 Used to locate this view in end-to-end tests.
 

docs/guides/accessibility.md

@@ -1,21 +1,54 @@
 # Accessibility
 
-On the Web, assistive technologies derive useful information about the
-structure, purpose, and interactivity of apps from their [HTML
-elements][html-accessibility-url], attributes, and [ARIA in
-HTML][aria-in-html-url].
+On the Web, assistive technologies (e.g., VoiceOver, TalkBack screen readers)
+derive useful information about the structure, purpose, and interactivity of
+apps from their [HTML elements][html-accessibility-url], attributes, and [ARIA
+in HTML][aria-in-html-url]. React Native for Web includes APIs designed to
+provide developers with support for making apps more accessible. The most
+common and best supported accessibility features of the Web are exposed as the
+props: `accessible`, `accessibilityLabel`, `accessibilityLiveRegion`,
+`accessibilityRole`, and `importantForAccessibility`.
 
-The most common and best supported accessibility features of the Web are
-exposed as the props: `accessible`, `accessibilityLabel`,
-`accessibilityLiveRegion`, and `accessibilityRole`.
+## Accessibility properties
 
-React Native for Web does not provide a way to directly control the type of the
-rendered HTML element. The `accessibilityRole` prop is used to infer an
-[analogous HTML element][html-aria-url] to use in addition to the resulting
-ARIA `role`, where possible. While this may contradict some ARIA
-recommendations, it also helps avoid certain HTML5 conformance errors and
-accessibility anti-patterns (e.g., giving a `heading` role to a `button`
-element).
+### accessible
+
+When `true`, indicates that the view is an accessibility element. When a view
+is an accessibility element, it groups its children into a single focusable
+component. By default, all touchable elements, buttons, and links are
+"accessible". Prefer using `accessibilityRole` (e.g., `button`, `link`) to
+create focusable HTML elements wherever possible. On web, `accessible={true}`
+is implemented using `tabIndex`.
+
+### accessibilityLabel
+
+When a view is marked as `accessible`, it is a good practice to set an
+`accessibilityLabel` on the view, so that people who use screen readers know
+what element they have selected. On web, `accessibilityLabel` is implemented
+using `aria-label`.
+
+```
+<TouchableOpacity accessibilityLabel={'Tap me!'} accessible={true} onPress={this._onPress}>
+  <View style={styles.button}>
+    <Text style={styles.buttonText}>Press me!</Text>
+  </View>
+</TouchableOpacity>
+```
+
+### accessibilityRole
+
+In some cases, we also want to alert the end user of the type of selected
+component (i.e., that it is a “button”). To provide more context to screen
+readers, you should specify the `accessibilityRole` property. (Note that React
+Native for Web provides a compatibility mapping of equivalent
+`accessibilityTraits` and `accessibilityComponentType` values to
+`accessibilityRole`).
+
+The `accessibilityRole` prop is used to infer an [analogous HTML
+element][html-aria-url] to use in addition to the resulting ARIA `role`, where
+possible. While this may contradict some ARIA recommendations, it also helps
+avoid certain HTML5 conformance errors and accessibility anti-patterns (e.g.,
+giving a `heading` role to a `button` element).
 
 For example:
 
@@ -25,8 +58,62 @@ For example:
 * `<Text accessibilityRole='link' href='/' />` => `<a role='link' href='/' />`.
 * `<View accessibilityRole='main' />` => `<main role='main' />`.
 
-Other ARIA properties should be set via [direct
-manipulation](./direct-manipulation.md).
+In the example below, the `TouchableWithoutFeedback` is announced by screen
+readers as a native Button.
+
+```
+<TouchableWithoutFeedback accessibilityRole="button" onPress={this._onPress}>
+  <View style={styles.button}>
+    <Text style={styles.buttonText}>Press me!</Text>
+  </View>
+</TouchableWithoutFeedback>
+```
+
+Note: Avoid changing `accessibilityRole` values over time or after user
+actions. Generally, accessibility APIs do not provide a means of notifying
+assistive technologies of a `role` value change.
+
+### accessibilityLiveRegion
+
+When components dynamically change we may need to inform the user.  The
+`accessibilityLiveRegion` property serves this purpose and can be set to
+`none`, `polite` and `assertive`. On web, `accessibilityLiveRegion` is
+implemented using `aria-live`.
+
+* `none`: Accessibility services should not announce changes to this view.
+* `polite`: Accessibility services should announce changes to this view.
+* `assertive`: Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+```
+<TouchableWithoutFeedback onPress={this._addOne}>
+  <View style={styles.embedded}>
+    <Text>Click me</Text>
+  </View>
+</TouchableWithoutFeedback>
+
+<Text accessibilityLiveRegion="polite">
+  Clicked {this.state.count} times
+</Text>
+```
+
+In the above example, method `_addOne` changes the `state.count` variable. As
+soon as an end user clicks the `TouchableWithoutFeedback`, screen readers
+announce text in the `Text` view because of its
+`accessibilityLiveRegion="polite"` property.
+
+### importantForAccessibility
+
+The `importantForAccessibility` property controls if a view appears in the
+accessibility tree and if it is reported to accessibility services. On web, a
+value of `no` will remove a focusable element from the tab flow, and a value of
+`no-hide-descendants` will also hide the entire subtree from assistive
+technologies (this is implemented using `aria-hidden`).
+
+### Other
+
+Other ARIA properties can be set via [direct
+manipulation](./direct-manipulation.md) or props (this may change in the
+future).
 
 [aria-in-html-url]: https://w3c.github.io/aria-in-html/
 [html-accessibility-url]: http://www.html5accessibility.com/

docs/guides/getting-started.md

@@ -0,0 +1,167 @@
+# Getting started
+
+It is recommended that your application provide a `Promise` and `Array.from`
+polyfill.
+
+## Webpack and Babel
+
+[Webpack](webpack.js.org) is a popular build tool for web apps. Below is an
+example of how to configure a build that uses [Babel](https://babeljs.io/) to
+compile your JavaScript for the web.
+
+```js
+// webpack.config.js
+
+// This is needed for webpack to compile JavaScript.
+// Many OSS React Native packages are not compiled to ES5 before being
+// published. If you depend on uncompiled packages they may cause webpack build
+// errors. To fix this webpack can be configured to compile to the necessary
+// `node_module`.
+const babelLoaderConfiguration = {
+  test: /\.js$/,
+  // Add every directory that needs to be compiled by Babel during the build
+  include: [
+    path.resolve(__dirname, 'src'),
+    path.resolve(__dirname, 'node_modules/react-native-uncompiled')
+  ],
+  use: {
+    loader: 'babel-loader',
+    options: {
+      cacheDirectory: true,
+      // The 'react-native' preset is recommended
+      presets: ['react-native']
+    }
+  }
+};
+
+// This is needed for webpack to import static images in JavaScript files
+const imageLoaderConfiguration = {
+  test: /\.(gif|jpe?g|png|svg)$/,
+  use: {
+    loader: 'url-loader',
+    options: {
+      name: '[name].[ext]'
+    }
+  }
+};
+
+module.exports = {
+  // ...the rest of your config
+
+  module: {
+    rules: [
+      babelLoaderConfiguration,
+      imageLoaderConfiguration
+    ]
+  },
+
+  plugins: [
+    // `process.env.NODE_ENV === 'production'` must be `true` for production
+    // builds to eliminate development checks and reduce build size.
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ],
+
+  resolve: {
+    // Maps the 'react-native' import to 'react-native-web'.
+    alias: {
+      'react-native': 'react-native-web'
+    },
+    // If you're working on a multi-platform React Native app, web-specific
+    // module implementations should be written in files using the extension
+    // `.web.js`.
+    extensions: [ '.web.js', '.js' ]
+  }
+}
+```
+
+A more complex example setup for web apps can be found in various starter kits
+(e.g., create-react-app and
+[react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack))
+
+Please refer to the Webpack documentation for more information.
+
+## Jest
+
+[Jest](https://facebook.github.io/jest/) also needs to map `react-native` to `react-native-web`.
+
+```
+"jest": {
+  "moduleNameMapper": {
+    "react-native": "<rootDir>/node_modules/react-native-web"
+  }
+}
+```
+
+Please refer to the Jest documentation for more information.
+
+## Web-specific code
+
+Minor platform differences can use the `Platform` module.
+
+```js
+import { AppRegistry, Platform } from 'react-native'
+
+AppRegistry.registerComponent('MyApp', () => MyApp)
+
+if (Platform.OS === 'web') {
+  AppRegistry.runApplication('MyApp', {
+    rootTag: document.getElementById('react-root')
+  });
+}
+```
+
+## Client-side rendering
+
+Rendering using `ReactNative`:
+
+```js
+import React from 'react'
+import ReactNative from 'react-native'
+
+// component that renders the app
+const AppHeaderContainer = (props) => { /* ... */ }
+
+ReactNative.render(<AppHeaderContainer />, document.getElementById('react-app-header'))
+```
+
+Rendering using `AppRegistry`:
+
+```js
+import React from 'react'
+import ReactNative, { AppRegistry } from 'react-native'
+
+// component that renders the app
+const AppContainer = (props) => { /* ... */ }
+
+// register the app
+AppRegistry.registerComponent('App', () => AppContainer)
+
+AppRegistry.runApplication('App', {
+  initialProps: {},
+  rootTag: document.getElementById('react-app')
+})
+```
+
+Rendering within `ReactDOM.render` also works when introduce `react-native-web`
+to an existing web app, but it is not recommended oherwise.
+
+## Server-side rendering
+
+Rendering using the `AppRegistry`:
+
+```js
+import ReactDOMServer from 'react-dom/server'
+import ReactNative, { AppRegistry } from 'react-native'
+
+// component that renders the app
+const AppContainer = (props) => { /* ... */ }
+
+// register the app
+AppRegistry.registerComponent('App', () => AppContainer)
+
+// prerender the app
+const { element, stylesheet } = AppRegistry.getApplication('App', { initialProps });
+const initialHTML = ReactDOMServer.renderToString(element);
+```

docs/guides/internationalization.md

@@ -4,11 +4,6 @@ To support right-to-left languages, application layout can be automatically
 flipped from LTR to RTL. The `I18nManager` API can be used to help with more
 fine-grained control and testing of RTL layouts.
 
-React Native for Web provides an experimental feature to support "true left"
-and "true right" styles. For example, `left` will be flipped to `right` in RTL
-mode, but `left$noI18n` will not. More information is available in the `Text`
-and `View` documentation.
-
 ## Working with icons and images
 
 Icons and images that must match the LTR or RTL layout of the app need to be manually flipped.

docs/guides/known-issues.md

@@ -1,10 +1,18 @@
 # Known issues
 
-## Missing modules and Views
+## Safari flexbox performance
 
-This is an initial release of React Native for Web, therefore, not all of the
-views present on iOS/Android are released on Web. We are very much interested in
-the community's feedback on the next set of modules and views.
+Safari version prior to 10.1 can suffer from extremely [poor flexbox
+performance](https://bugs.webkit.org/show_bug.cgi?id=150445). The recommended
+way to work around this issue (as used on mobile.twitter.com) is to set
+`display:block` on Views in your element hierarchy that you know don't need
+flexbox layout.
+
+## Missing modules and components
+
+Not all of the views present on iOS/Android are currently available on Web. We
+are very much interested in the community's feedback on the next set of modules
+and views.
 
 Not all the modules or views for iOS/Android can be implemented on Web. In some
 cases it will be necessary to use a Web counterpart or to guard the use of a

docs/guides/react-native.md

@@ -1,107 +0,0 @@
-# React Native
-
-Use a module loader that supports package aliases (e.g., webpack), and alias
-`react-native` to `react-native-web`.
-
-```js
-// webpack.config.js
-
-module.exports = {
-  // ...
-  resolve: {
-    alias: {
-      'react-native': 'react-native-web'
-    }
-  }
-}
-```
-
-## Image assets
-
-In order to require image assets (e.g. `require('assets/myimage.png')`), add
-the `url-loader` to the webpack config:
-
-```js
-// webpack.config.js
-
-module.exports = {
-  // ...
-  module: {
-    loaders: [
-      {
-        test: /\.(gif|jpe?g|png|svg)$/,
-        loader: 'url-loader',
-        query: { name: '[name].[hash:16].[ext]' }
-      }
-    ]
-  }
-};
-```
-
-## Dependencies
-
-Many OSS React Native packages are not compiled to ES5 before being published.
-This can result in webpack build errors. To avoid this issue you should
-configure webpack (or your bundler of choice) to run
-`babel-preset-react-native` over the necessary `node_module`. For example:
-
-```js
-// webpack.config.js
-
-module.exports = {
-  // ...
-  module: {
-    loaders: [
-      {
-        // transpile to ES5
-        test: /\.jsx?$/,
-        include: [
-          path.resolve(__dirname, 'src'),
-          path.resolve(__dirname, 'node_modules/react-native-something')
-        ],
-        loader: 'babel-loader',
-        query: { cacheDirectory: true }
-      }
-    ]
-  }
-};
-```
-
-Please refer to the webpack documentation for more information.
-
-## Web-specific code
-
-Minor platform differences can use the `Platform` module.
-
-```js
-import { AppRegistry, Platform } from 'react-native'
-
-AppRegistry.registerComponent('MyApp', () => MyApp)
-
-if (Platform.OS === 'web') {
-  AppRegistry.runApplication('MyApp', {
-    rootTag: document.getElementById('react-root')
-  });
-}
-```
-
-More substantial Web-specific implementation code should be written in files
-with the extension `.web.js`, which webpack will automatically resolve.
-
-## Optimizations
-
-Production builds can benefit from dead-code elimination by defining the
-following variables:
-
-```js
-// webpack.config.js
-
-module.exports = {
-  // ...
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    })
-  }
-}
-```

docs/guides/rendering.md

@@ -1,89 +0,0 @@
-# Client and Server rendering
-
-It's recommended that you use a module loader that supports package aliases
-(e.g., webpack), and alias `react-native` to `react-native-web`.
-
-```js
-// webpack.config.js
-
-module.exports = {
-  // ...other configuration
-  resolve: {
-    alias: {
-      'react-native': 'react-native-web'
-    }
-  }
-}
-```
-
-The `react-native-web` package also includes a `core` module that exports a
-subset of modules: `ReactNative`, `I18nManager`, `Platform`, `StyleSheet`,
-`Image`, `Text`, `TextInput`, `Touchable`, and `View`.
-
-```js
-// webpack.config.js
-
-module.exports = {
-  // ...other configuration
-  resolve: {
-    alias: {
-      'react-native': 'react-native-web/core'
-    }
-  }
-}
-```
-
-## Client-side rendering
-
-Rendering without using the `AppRegistry`:
-
-```js
-import React from 'react'
-import ReactNative from 'react-native'
-
-// component that renders the app
-const AppHeaderContainer = (props) => { /* ... */ }
-
-ReactNative.render(<AppHeaderContainer />, document.getElementById('react-app-header'))
-```
-
-Rendering using the `AppRegistry`:
-
-```js
-import React from 'react'
-import ReactNative, { AppRegistry } from 'react-native'
-
-// component that renders the app
-const AppContainer = (props) => { /* ... */ }
-
-// register the app
-AppRegistry.registerComponent('App', () => AppContainer)
-
-AppRegistry.runApplication('App', {
-  initialProps: {},
-  rootTag: document.getElementById('react-app')
-})
-```
-
-Setting `process.env.__REACT_NATIVE_DEBUG_ENABLED__` to `true` will expose some
-debugging logs. This can help track down when you're rendering without the
-performance benefit of cached styles.
-
-## Server-side rendering
-
-Rendering using the `AppRegistry`:
-
-```js
-import ReactDOMServer from 'react-dom/server'
-import ReactNative, { AppRegistry } from 'react-native'
-
-// component that renders the app
-const AppContainer = (props) => { /* ... */ }
-
-// register the app
-AppRegistry.registerComponent('App', () => AppContainer)
-
-// prerender the app
-const { element, stylesheet } = AppRegistry.getApplication('App', { initialProps });
-const initialHTML = ReactDOMServer.renderToString(element);
-```

examples/.storybook/webpack.config.js

@@ -23,12 +23,11 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
       'process.env.__REACT_NATIVE_DEBUG_ENABLED__': DEV
-    }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    })
   ],
   resolve: {
     alias: {
-      'react-native': path.join(__dirname, '../../src')
+      'react-native': path.join(__dirname, '../../src/module')
     }
   }
 }

examples/apis/I18nManager/I18nManagerExample.js

@@ -14,14 +14,22 @@ class I18nManagerExample extends Component {
           LTR/RTL layout example!
         </Text>
         <Text style={styles.text}>
-          This is sample text. The writing direction can be changed by pressing the button below.
-        </Text>
-        <Text style={[ styles.text, styles.ltrText ]}>
-          This is text that will always display LTR.
+          The writing direction of text is automatically determined by the browser, independent of the global writing direction of the app.
         </Text>
         <Text style={[ styles.text, styles.rtlText ]}>
-          This is text that will always display RTL.
+          أحب اللغة العربية
         </Text>
+        <Text style={[ styles.text, styles.textAlign ]}>
+          textAlign toggles
+        </Text>
+        <View style={styles.horizontal}>
+          <View style={[ styles.box, { backgroundColor: 'lightblue' } ]}>
+            <Text>One</Text>
+          </View>
+          <View style={[ styles.box ]}>
+            <Text>Two</Text>
+          </View>
+        </View>
         <TouchableHighlight
           onPress={this._handleToggle}
           style={styles.toggle}
@@ -34,8 +42,8 @@ class I18nManagerExample extends Component {
   }
 
   _handleToggle = () => {
-    this._isRTL = !this._isRTL
-    I18nManager.setPreferredLanguageRTL(this._isRTL)
+    I18nManager.setPreferredLanguageRTL(!I18nManager.isRTL)
+    this.forceUpdate();
   }
 }
 
@@ -55,13 +63,16 @@ const styles = StyleSheet.create({
     fontSize: 18,
     marginBottom: 5
   },
-  ltrText: {
-    textAlign$noI18n: 'left',
-    writingDirection$noI18n: 'ltr'
+  textAlign: {
+    textAlign: 'left'
   },
-  rtlText: {
-    textAlign$noI18n: 'right',
-    writingDirection$noI18n: 'rtl'
+  horizontal: {
+    flexDirection: 'row',
+    marginVertical: 10
+  },
+  box: {
+    borderWidth: 1,
+    flex: 1
   },
   toggle: {
     alignSelf: 'center',

examples/apis/Linking/LinkingExample.js

@@ -2,11 +2,19 @@ import { Linking, StyleSheet, Text, View } from 'react-native'
 import React, { Component } from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 
+const url = 'https://mathiasbynens.github.io/rel-noopener/malicious.html';
+
 class LinkingExample extends Component {
+  handlePress() {
+    Linking.canOpenURL(url).then((supported) => {
+      return Linking.openURL(url);
+    });
+  }
+
   render() {
     return (
       <View>
-        <Text onPress={() => { Linking.openURL('https://mathiasbynens.github.io/rel-noopener/malicious.html'); }} style={styles.text}>
+        <Text onPress={this.handlePress} style={styles.text}>
           Linking.openURL (Expect: "The previous tab is safe and intact")
         </Text>
         <Text accessibilityRole='link' href='https://mathiasbynens.github.io/rel-noopener/malicious.html' style={styles.text} target='_blank'>

examples/apis/PanResponder/PanResponderExample.js

@@ -1,5 +1,6 @@
 'use strict';
 
+import createReactClass from 'create-react-class';
 import { storiesOf, action } from '@kadira/storybook';
 
 var React = require('react');
@@ -12,7 +13,7 @@ var {
 
 var CIRCLE_SIZE = 80;
 
-var PanResponderExample = React.createClass({
+var PanResponderExample = createReactClass({
   _panResponder: {},
   _previousLeft: 0,
   _previousTop: 0,

examples/components/ActivityIndicator/ActivityIndicatorExample.js

@@ -1,3 +1,4 @@
+import createReactClass from 'create-react-class';
 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import { ActivityIndicator, StyleSheet, View } from 'react-native'
@@ -26,7 +27,7 @@ import TimerMixin from 'react-timer-mixin';
  * @flow
  */
 
-const ToggleAnimatingActivityIndicator = React.createClass({
+const ToggleAnimatingActivityIndicator = createReactClass({
   mixins: [TimerMixin],
 
   getInitialState() {

examples/components/Image/ImageExample.js

@@ -1,3 +1,4 @@
+import createReactClass from 'create-react-class';
 import React from 'react';
 import { storiesOf, action, addDecorator } from '@kadira/storybook';
 import { ActivityIndicator, Image, Platform, StyleSheet, Text, View } from 'react-native'
@@ -31,7 +32,7 @@ var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACS
 const IMAGE_PREFETCH_URL = 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
 var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
 
-var NetworkImageCallbackExample = React.createClass({
+var NetworkImageCallbackExample = createReactClass({
   getInitialState: function() {
     return {
       events: [],
@@ -88,7 +89,7 @@ var NetworkImageCallbackExample = React.createClass({
   }
 });
 
-var NetworkImageExample = React.createClass({
+var NetworkImageExample = createReactClass({
   getInitialState: function() {
     return {
       error: false,
@@ -116,7 +117,7 @@ var NetworkImageExample = React.createClass({
   }
 });
 
-var ImageSizeExample = React.createClass({
+var ImageSizeExample = createReactClass({
   getInitialState: function() {
     return {
       width: 0,
@@ -150,7 +151,7 @@ var ImageSizeExample = React.createClass({
 });
 
 /*
-var MultipleSourcesExample = React.createClass({
+var MultipleSourcesExample = createReactClass({
   getInitialState: function() {
     return {
       width: 30,

examples/components/ProgressBar/ProgressBarExample.js

@@ -1,3 +1,4 @@
+import createReactClass from 'create-react-class';
 import { ProgressBar, StyleSheet, View } from 'react-native'
 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
@@ -26,7 +27,7 @@ import TimerMixin from 'react-timer-mixin';
  * @flow
  */
 
-var ProgressBarExample = React.createClass({
+var ProgressBarExample = createReactClass({
   mixins: [TimerMixin],
 
   getInitialState() {

examples/components/Switch/SwitchExample.js

@@ -1,3 +1,4 @@
+import createReactClass from 'create-react-class';
 import { Platform, Switch, Text, View } from 'react-native'
 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
@@ -25,7 +26,7 @@ import { storiesOf, action } from '@kadira/storybook';
  * @flow
  */
 
-var BasicSwitchExample = React.createClass({
+var BasicSwitchExample = createReactClass({
   getInitialState() {
     return {
       trueSwitchIsOn: true,
@@ -49,7 +50,7 @@ var BasicSwitchExample = React.createClass({
   }
 });
 
-var DisabledSwitchExample = React.createClass({
+var DisabledSwitchExample = createReactClass({
   render() {
     return (
       <View>
@@ -65,7 +66,7 @@ var DisabledSwitchExample = React.createClass({
   },
 });
 
-var ColorSwitchExample = React.createClass({
+var ColorSwitchExample = createReactClass({
   getInitialState() {
     return {
       colorTrueSwitchIsOn: true,
@@ -95,7 +96,7 @@ var ColorSwitchExample = React.createClass({
   },
 });
 
-var EventSwitchExample = React.createClass({
+var EventSwitchExample = createReactClass({
   getInitialState() {
     return {
       eventSwitchIsOn: false,
@@ -132,7 +133,7 @@ var EventSwitchExample = React.createClass({
   }
 });
 
-var SizeSwitchExample = React.createClass({
+var SizeSwitchExample = createReactClass({
   getInitialState() {
     return {
       trueSwitchIsOn: true,

examples/components/Text/TextExample.js

@@ -1,3 +1,4 @@
+import createReactClass from 'create-react-class';
 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import { Image, StyleSheet, Text, View } from 'react-native'
@@ -25,7 +26,7 @@ import { Image, StyleSheet, Text, View } from 'react-native'
  * @flow
  */
 
-var Entity = React.createClass({
+var Entity = createReactClass({
   render: function() {
     return (
       <Text style={{fontWeight: '500', color: '#527fe4'}}>
@@ -35,7 +36,7 @@ var Entity = React.createClass({
   }
 });
 
-var AttributeToggler = React.createClass({
+var AttributeToggler = createReactClass({
   getInitialState: function() {
     return {fontWeight: 'bold', fontSize: 15};
   },
@@ -271,7 +272,7 @@ const examples = [
         <Text>
           auto (default) - english LTR
         </Text>
-        <Text style={{ writingDirection$noI18n: 'rtl' }}>
+        <Text>
           أحب اللغة العربية auto (default) - arabic RTL
         </Text>
         <Text style={{textAlign: 'left'}}>

examples/components/Touchable/TouchableExample.js

@@ -1,3 +1,4 @@
+import createReactClass from 'create-react-class';
 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import {
@@ -57,7 +58,6 @@ const examples = [
           <TouchableHighlight
             style={styles.wrapper}
             activeOpacity={1}
-            animationVelocity={0}
             underlayColor="rgb(210, 230, 255)"
             onPress={() => console.log('custom THW text - highlight')}>
             <View style={styles.wrapperCustom}>
@@ -113,7 +113,7 @@ const examples = [
    },
  }];
 
-var TextOnPressBox = React.createClass({
+var TextOnPressBox = createReactClass({
   getInitialState: function() {
     return {
       timesPressed: 0,
@@ -149,7 +149,7 @@ var TextOnPressBox = React.createClass({
   }
 });
 
-var TouchableFeedbackEvents = React.createClass({
+var TouchableFeedbackEvents = createReactClass({
   getInitialState: function() {
     return {
       eventLog: [],
@@ -188,7 +188,7 @@ var TouchableFeedbackEvents = React.createClass({
   },
 });
 
-var TouchableDelayEvents = React.createClass({
+var TouchableDelayEvents = createReactClass({
   getInitialState: function() {
     return {
       eventLog: [],
@@ -227,7 +227,7 @@ var TouchableDelayEvents = React.createClass({
   },
 });
 
-var ForceTouchExample = React.createClass({
+var ForceTouchExample = createReactClass({
   getInitialState: function() {
     return {
       force: 0,
@@ -261,7 +261,7 @@ var ForceTouchExample = React.createClass({
   },
 });
 
-var TouchableHitSlop = React.createClass({
+var TouchableHitSlop = createReactClass({
   getInitialState: function() {
     return {
       timesPressed: 0,
@@ -303,7 +303,7 @@ var TouchableHitSlop = React.createClass({
   }
 });
 
-var TouchableDisabled = React.createClass({
+var TouchableDisabled = createReactClass({
   render: function() {
     return (
       <View>
@@ -318,7 +318,6 @@ var TouchableDisabled = React.createClass({
         <TouchableHighlight
           activeOpacity={1}
           disabled={true}
-          animationVelocity={0}
           underlayColor="rgb(210, 230, 255)"
           style={[styles.row, styles.block]}
           onPress={action('TouchableHighlight')}>
@@ -329,7 +328,6 @@ var TouchableDisabled = React.createClass({
 
         <TouchableHighlight
           activeOpacity={1}
-          animationVelocity={0}
           underlayColor="rgb(210, 230, 255)"
           style={[styles.row, styles.block]}
           onPress={action('TouchableHighlight')}>

examples/components/View/ViewExample.js

@@ -1,3 +1,4 @@
+import createReactClass from 'create-react-class';
 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
@@ -50,7 +51,7 @@ var styles = StyleSheet.create({
   },
 });
 
-var ViewBorderStyleExample = React.createClass({
+var ViewBorderStyleExample = createReactClass({
   getInitialState() {
     return {
       showBorder: true
@@ -91,7 +92,7 @@ var ViewBorderStyleExample = React.createClass({
   }
 });
 
-var ZIndexExample = React.createClass({
+var ZIndexExample = createReactClass({
   getInitialState() {
     return {
       flipped: false

examples/components/View/ViewTransformsExample.js

@@ -1,3 +1,4 @@
+import createReactClass from 'create-react-class';
 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import { Animated, StyleSheet, Text, View } from 'react-native'
@@ -24,7 +25,7 @@ import { Animated, StyleSheet, Text, View } from 'react-native'
  * @flow
  */
 
-var Flip = React.createClass({
+var Flip = createReactClass({
   getInitialState() {
     return {
       theta: new Animated.Value(45),

examples/demos/TicTacToe/TicTacToe.js

@@ -16,6 +16,7 @@
  */
 'use strict';
 
+import createReactClass from 'create-react-class';
 var React = require('react');
 var ReactNative = require('react-native');
 var {
@@ -94,7 +95,7 @@ class Board {
   }
 }
 
-var Cell = React.createClass({
+var Cell = createReactClass({
   cellStyle() {
     switch (this.props.player) {
       case 1:
@@ -144,7 +145,7 @@ var Cell = React.createClass({
   }
 });
 
-var GameEndOverlay = React.createClass({
+var GameEndOverlay = createReactClass({
   render() {
     var board = this.props.board;
 
@@ -177,7 +178,7 @@ var GameEndOverlay = React.createClass({
   }
 });
 
-var TicTacToeApp = React.createClass({
+var TicTacToeApp = createReactClass({
   getInitialState() {
     return { board: new Board(), player: 1 };
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.0.68",
+  "version": "0.0.91",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [
@@ -11,57 +11,61 @@
   "scripts": {
     "build": "del ./dist && mkdir dist && babel src -d dist --ignore **/__tests__",
     "build:examples": "build-storybook -o dist-examples -c ./examples/.storybook",
-    "build:performance": "cd performance && webpack",
+    "build:performance": "cd performance && yarn && webpack",
     "build:umd": "webpack --config webpack.config.js --sort-assets-by --progress",
     "deploy:examples": "git checkout gh-pages && rm -rf ./storybook && mv dist-examples storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -",
     "examples": "start-storybook -p 9001 -c ./examples/.storybook --dont-track",
-    "lint": "eslint performance src",
-    "prepublish": "npm run build && npm run build:umd",
+    "fmt": "find performance src -name '*.js' | grep -v -E '(node_modules|dist)' | xargs prettier --print-width=100 --single-quote --write",
+    "lint": "eslint performance src --ignore-path .gitignore",
+    "release": "npm run build && npm run build:umd && npm publish",
     "test": "npm run lint && npm run test:jest",
     "test:jest": "jest",
     "test:watch": "npm run test:jest -- --watch"
   },
   "dependencies": {
-    "animated": "^0.1.5",
+    "animated": "^0.2.0",
     "array-find-index": "^1.0.2",
-    "asap": "^2.0.5",
-    "babel-runtime": "^6.20.0",
-    "debounce": "^1.0.0",
+    "babel-runtime": "^6.23.0",
+    "create-react-class": "^15.5.2",
+    "debounce": "1.0.2",
     "deep-assign": "^2.0.0",
     "fbjs": "^0.8.8",
-    "inline-style-prefixer": "^2.0.5",
+    "hyphenate-style-name": "^1.0.2",
+    "inline-style-prefixer": "^3.0.2",
     "normalize-css-color": "^1.0.2",
-    "react-dom": "~15.4.1",
-    "react-textarea-autosize": "^4.0.4",
+    "prop-types": "^15.5.8",
     "react-timer-mixin": "^0.13.3"
   },
   "devDependencies": {
     "@kadira/storybook": "^2.5.1",
-    "babel-cli": "^6.14.0",
-    "babel-core": "^6.21.0",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.10",
-    "babel-plugin-transform-react-remove-prop-types": "^0.2.11",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.2",
+    "babel-loader": "^6.4.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.2",
     "babel-preset-react-native": "^1.9.1",
     "del-cli": "^0.2.1",
-    "enzyme": "^2.4.1",
-    "eslint": "^3.4.0",
-    "eslint-plugin-jsx-a11y": "^2.2.0",
-    "eslint-plugin-promise": "^2.0.1",
-    "eslint-plugin-react": "^6.1.2",
-    "file-loader": "^0.9.0",
-    "jest": "^16.0.2",
-    "marky": "^1.1.1",
+    "enzyme": "^2.8.2",
+    "enzyme-to-json": "^1.5.1",
+    "eslint": "^3.19.0",
+    "eslint-config-prettier": "^1.7.0",
+    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-react": "^6.10.3",
+    "file-loader": "^0.11.1",
+    "jest": "^19.0.2",
     "node-libs-browser": "^0.5.3",
+    "prettier": "^1.2.2",
     "react": "~15.4.1",
     "react-addons-test-utils": "~15.4.1",
-    "react-test-renderer": "~15.4.1",
-    "url-loader": "^0.5.7",
-    "webpack": "^1.13.2",
-    "webpack-bundle-analyzer": "^1.5.3"
+    "react-dom": "~15.4.1",
+    "react-test-renderer": "^15.5.4",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.3.3",
+    "webpack-bundle-analyzer": "^2.4.0"
   },
   "peerDependencies": {
-    "react": "~15.4.1"
+    "react": "15.4.x || 15.5.x",
+    "react-dom": "15.4.x || 15.5.x"
   },
   "author": "Nicolas Gallagher",
   "license": "BSD-3-Clause",
@@ -80,6 +84,9 @@
   ],
   "jest": {
     "testEnvironment": "jsdom",
-    "timers": "fake"
+    "timers": "fake",
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/enzyme-to-json/serializer"
+    ]
   }
 }

performance/README.md

@@ -0,0 +1,40 @@
+# Performance
+
+To run these benchmarks:
+
+```
+npm run build:performance
+open ./performance/index.html
+```
+
+## Notes
+
+The components used in the render benchmarks are simple enough to be
+implemented by multiple UI or style libraries. The implementations are not
+equivalent in functionality.
+
+`react-native-web/stylesheet` is a comparative baseline that implements a
+simple `View` without much of React Native's functionality.
+
+## Benchmark results
+
+Typical render timings*: mean ± two standard deviations
+
+| Implementation                       | Deep tree (ms)    | Wide tree (ms)    | Tweets (ms)       |
+| :--- | ---: | ---: | ---: |
+| `css-modules`                        |  `87.67` `±15.22` | `170.85` `±16.87` | |
+| `react-native-web/stylesheet@0.0.84` |  `90.02` `±13.16` | `186.66` `±19.23` | |
+| `react-native-web@0.0.84`            | `102.72` `±19.26` | `222.35` `±18.95` | `12.81` `±5.45ms` |
+
+Other libraries
+
+| Implementation                       | Deep tree (ms)    | Wide tree (ms)    |
+| :--- | ---: | ---: |
+| `styletron@2.5.1`                    |  `88.48` `±12.00` | `171.89` `±13.28` |
+| `aphrodite@1.2.0`                    | `101.32` `±20.33` | `220.33` `±31.41` |
+| `glamor@3.0.0-1`                     | `129.00` `±14.92` | `264.57` `±28.54` |
+| `react-jss@5.4.1`                    | `137.33` `±21.55` | `314.91` `±29.03` |
+| `reactxp@0.34.3`                     | `223.82` `±32.77` | `461.56` `±34.43` |
+| `styled-components@2.0.0-11`         | `277.53` `±28.83` | `627.91` `±43.13` |
+
+*MacBook Pro (13-inch, Early 2011); 2.7 GHz Intel Core i7; 16 GB 1600 MHz DDR3. Google Chrome 56.

performance/benchmark.js

@@ -1,17 +1,46 @@
 import * as marky from 'marky';
 
-const fmt = (time) => `${Math.round(time * 100) / 100}ms`;
+const fmt = time => `${Math.round(time * 100) / 100}ms`;
 
 const measure = (name, fn) => {
   marky.mark(name);
   fn();
   const performanceMeasure = marky.stop(name);
-  return performanceMeasure;
+  return performanceMeasure.duration;
+};
+
+const mean = values => {
+  const sum = values.reduce((sum, value) => sum + value, 0);
+  return sum / values.length;
+};
+
+const median = values => {
+  if (!Array.isArray(values)) {
+    return 0;
+  }
+  if (values.length === 1) {
+    return values[0];
+  }
+
+  const numbers = [...values].sort((a, b) => a - b);
+  return (numbers[(numbers.length - 1) >> 1] + numbers[numbers.length >> 1]) / 2;
+};
+
+const standardDeviation = values => {
+  const avg = mean(values);
+
+  const squareDiffs = values.map(value => {
+    const diff = value - avg;
+    return diff * diff;
+  });
+
+  const meanSquareDiff = mean(squareDiffs);
+  return Math.sqrt(meanSquareDiff);
 };
 
 const benchmark = ({ name, description, setup, teardown, task, runs }) => {
-  return new Promise((resolve) => {
-    const performanceMeasures = [];
+  return new Promise(resolve => {
+    const durations = [];
     let i = 0;
 
     setup();
@@ -19,17 +48,21 @@ const benchmark = ({ name, description, setup, teardown, task, runs }) => {
     teardown();
 
     const done = () => {
-      const mean = performanceMeasures.reduce((sum, performanceMeasure) => {
-        return sum + performanceMeasure.duration;
-      }, 0) / runs;
+      const stdDev = standardDeviation(durations);
+      const formattedFirst = fmt(first);
+      const formattedMean = fmt(mean(durations));
+      const formattedMedian = fmt(median(durations));
+      const formattedStdDev = fmt(stdDev);
 
-      const firstDuration = fmt(first.duration);
-      const meanDuration = fmt(mean);
-
-      console.log(`First: ${firstDuration}`);
-      console.log(`Mean: ${meanDuration}`);
+      console.groupCollapsed(`${name}\n${formattedMean} ±${fmt(2 * stdDev)}`);
+      description && console.log(description);
+      console.log(`First: ${formattedFirst}`);
+      console.log(`Median: ${formattedMedian}`);
+      console.log(`Mean: ${formattedMean}`);
+      console.log(`Standard deviation: ${formattedStdDev}`);
+      console.log(durations);
       console.groupEnd();
-      resolve(mean);
+      resolve();
     };
 
     const a = () => {
@@ -38,7 +71,8 @@ const benchmark = ({ name, description, setup, teardown, task, runs }) => {
     };
 
     const b = () => {
-      performanceMeasures.push(measure('mean', task));
+      const duration = measure('mean', task);
+      durations.push(duration);
       window.requestAnimationFrame(c);
     };
 
@@ -56,10 +90,8 @@ const benchmark = ({ name, description, setup, teardown, task, runs }) => {
       }
     };
 
-    console.group(`[benchmark] ${name}`);
-    console.log(description);
     window.requestAnimationFrame(a);
   });
 };
 
-module.exports = benchmark;
+export default benchmark;

performance/benchmarks/deepTree/createDeepTree.js

@@ -1,88 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-
-const createDeepTree = ({ StyleSheet, View }, options = {}) => {
-  class DeepTree extends Component {
-    static propTypes = {
-      breadth: PropTypes.number.isRequired,
-      depth: PropTypes.number.isRequired,
-      id: PropTypes.number.isRequired,
-      wrap: PropTypes.number.isRequired
-    };
-
-    render() {
-      const { breadth, depth, id, wrap } = this.props;
-
-      let result = (
-        <View
-          style={[
-            styles.outer,
-            depth % 2 === 0 ? styles.even : styles.odd,
-            styles[`custom${id % 3}`]
-          ]}
-        >
-          {depth === 0 && (
-            <View
-              style={[
-                styles.terminal,
-                styles[`terminal${id % 3}`]
-              ]}
-            />
-          )}
-          {depth !== 0 && Array.from({ length: breadth }).map((el, i) => (
-            <DeepTree
-              breadth={breadth}
-              depth={depth - 1}
-              id={i}
-              key={i}
-              wrap={wrap}
-            />
-          ))}
-        </View>
-      );
-      for (let i = 0; i < wrap; i++) {
-        result = <View>{result}</View>;
-      }
-      return result;
-    }
-  }
-
-  const stylesObject = {
-    outer: {
-      padding: 4
-    },
-    odd: {
-      flexDirection: 'row'
-    },
-    even: {
-      flexDirection: 'column'
-    },
-    custom0: {
-      backgroundColor: '#222'
-    },
-    custom1: {
-      backgroundColor: '#666'
-    },
-    custom2: {
-      backgroundColor: '#999'
-    },
-    terminal: {
-      width: 20,
-      height: 20
-    },
-    terminal0: {
-      backgroundColor: 'blue'
-    },
-    terminal1: {
-      backgroundColor: 'orange'
-    },
-    terminal2: {
-      backgroundColor: 'red'
-    }
-  };
-
-  const styles = options.registerStyles ? StyleSheet.create(stylesObject) : stylesObject;
-
-  return DeepTree;
-};
-
-module.exports = createDeepTree;

performance/benchmarks/deepTree/index.js

@@ -1,24 +0,0 @@
-import benchmark from '../../benchmark';
-import createDeepTree from './createDeepTree';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactNative from 'react-native';
-
-const deepTreeBenchmark = ({ breadth, depth, registerStyles = true, runs, wrap }, node) => () => {
-  // React Native for Web implementation of the tree
-  const DeepTree = createDeepTree(ReactNative, { registerStyles });
-
-  const setup = () => {};
-  const teardown = () => ReactDOM.unmountComponentAtNode(node);
-
-  return benchmark({
-    name: `DeepTree (${registerStyles ? 'registered' : 'unregistered'}) styles)`,
-    description: `depth=${depth}, breadth=${breadth}, wrap=${wrap}`,
-    runs,
-    setup,
-    teardown,
-    task: () => ReactDOM.render(<DeepTree breadth={breadth} depth={depth} id={0} wrap={wrap} />, node)
-  });
-};
-
-module.exports = deepTreeBenchmark;

performance/createRenderBenchmark.js

@@ -0,0 +1,20 @@
+import benchmark from './benchmark';
+import ReactDOM from 'react-dom';
+
+const node = document.querySelector('.root');
+
+const createRenderBenchmark = ({ description, getElement, name, runs }) => () => {
+  const setup = () => {};
+  const teardown = () => ReactDOM.unmountComponentAtNode(node);
+
+  return benchmark({
+    name,
+    description,
+    runs,
+    setup,
+    teardown,
+    task: () => ReactDOM.render(getElement(), node)
+  });
+};
+
+export default createRenderBenchmark;

performance/index.html

@@ -2,10 +2,10 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Title</title>
+  <title>Performance tests</title>
 </head>
 <body>
   <div class="root"></div>
-  <script src="../dist-performance/performance.bundle.js"></script>
+  <script src="dist/performance.bundle.js"></script>
 </body>
 </html>

performance/index.js

@@ -1,16 +1,49 @@
-import createDeepTree from './benchmarks/deepTree/createDeepTree';
-import deepTree from './benchmarks/deepTree';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactNative from 'react-native';
+import aphrodite from './src/aphrodite';
+import cssModules from './src/css-modules';
+import glamor from './src/glamor';
+import jss from './src/jss';
+import reactNative from './src/react-native';
+import reactNativeStyleSheet from './src/react-native-stylesheet';
+import styledComponents from './src/styled-components';
+import styletron from './src/styletron';
+import xp from './src/reactxp';
 
-const node = document.querySelector('.root');
-const DeepTree = createDeepTree(ReactNative);
+import renderDeepTree from './tests/renderDeepTree';
+import renderTweet from './tests/renderTweet';
+import renderWideTree from './tests/renderWideTree';
 
-Promise.resolve()
-  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10, registerStyles: false }, node))
-  .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 20, registerStyles: false }, node))
-  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10 }, node))
-  .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 20 }, node))
-  .then(() => ReactDOM.render(<DeepTree breadth={3} depth={5} id={0} wrap={1} />, node));
+const testAll = window.location.search === '?all';
 
+const coreTests = [
+  () => renderTweet('react-native-web', reactNative),
+
+  () => renderDeepTree('css-modules', cssModules),
+  () => renderWideTree('css-modules', cssModules),
+  () => renderDeepTree('react-native-web/stylesheet', reactNativeStyleSheet),
+  () => renderWideTree('react-native-web/stylesheet', reactNativeStyleSheet),
+  () => renderDeepTree('react-native-web', reactNative),
+  () => renderWideTree('react-native-web', reactNative)
+];
+
+/**
+ * Optionally run tests using other libraries
+ */
+const extraTests = [
+  () => renderDeepTree('styletron', styletron),
+  () => renderWideTree('styletron', styletron),
+  () => renderDeepTree('aphrodite', aphrodite),
+  () => renderWideTree('aphrodite', aphrodite),
+  () => renderDeepTree('glamor', glamor),
+  () => renderWideTree('glamor', glamor),
+  () => renderDeepTree('react-jss', jss),
+  () => renderWideTree('react-jss', jss),
+  () => renderDeepTree('reactxp', xp),
+  () => renderWideTree('reactxp', xp),
+  () => renderDeepTree('styled-components', styledComponents),
+  () => renderWideTree('styled-components', styledComponents)
+];
+
+const tests = testAll ? coreTests.concat(extraTests) : coreTests;
+
+// run benchmarks
+tests.reduce((promise, test) => promise.then(test()), Promise.resolve());

performance/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "performance",
+  "private": true,
+  "dependencies": {
+    "aphrodite": "^1.2.0",
+    "classnames": "^2.2.5",
+    "glamor": "3.0.0-1",
+    "marky": "^1.2.0",
+    "react-jss": "^6.1.1",
+    "reactxp": "^0.34.3",
+    "styled-components": "2.0.0-15",
+    "styletron-client": "^2.5.1",
+    "styletron-utils": "^2.5.4"
+  },
+  "devDependencies": {
+    "css-loader": "^0.28.0",
+    "react-addons-perf": "^15.4.2",
+    "style-loader": "^0.16.1"
+  }
+}

performance/src/aphrodite.js

@@ -0,0 +1,7 @@
+import Box from './components/Box/aphrodite';
+import View from './components/View/aphrodite';
+
+export default {
+  Box,
+  View
+};

performance/src/components/AppText/index.js

@@ -0,0 +1,107 @@
+import theme from '../theme';
+import React, { PropTypes, PureComponent } from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+class AppText extends PureComponent {
+  static displayName = 'AppText';
+
+  static propTypes = {
+    align: PropTypes.oneOf(['center', 'left', 'right']),
+    color: PropTypes.oneOf(['blue', 'deepGray', 'normal', 'red', 'white']),
+    fontStyle: PropTypes.oneOf(['normal', 'italic']),
+    size: PropTypes.oneOf(['small', 'normal', 'large']),
+    uppercase: PropTypes.bool,
+    weight: PropTypes.oneOf(['normal', 'bold'])
+  };
+
+  render() {
+    const { align, color, fontStyle, size, uppercase, weight, ...other } = this.props;
+
+    const style = [
+      styles.root,
+      align && alignStyles[align],
+      color && colorStyles[color],
+      fontStyle && fontStyles[fontStyle],
+      size && sizeStyles[size],
+      weight && weightStyles[weight],
+      uppercase === true && styles.uppercase
+    ];
+
+    return <Text {...other} style={style} />;
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    fontFamily: theme.fontFamily,
+    fontSize: theme.fontSize.normal,
+    fontWeight: 'normal',
+    lineHeight: theme.createLength(theme.lineHeight),
+    wordWrap: 'break-word'
+  },
+  uppercase: {
+    textTransform: 'uppercase'
+  }
+});
+
+const alignStyles = StyleSheet.create({
+  center: {
+    textAlign: 'center'
+  },
+  left: {
+    textAlign: 'left'
+  },
+  right: {
+    textAlign: 'right'
+  }
+});
+
+const colorStyles = StyleSheet.create({
+  blue: {
+    color: theme.colors.blue
+  },
+  deepGray: {
+    color: theme.colors.deepGray
+  },
+  normal: {
+    color: theme.colors.textBlack
+  },
+  red: {
+    color: theme.colors.red
+  },
+  white: {
+    color: theme.colors.white
+  }
+});
+
+const fontStyles = StyleSheet.create({
+  normal: {
+    fontStyle: 'normal'
+  },
+  italic: {
+    fontStyle: 'italic'
+  }
+});
+
+const sizeStyles = StyleSheet.create({
+  small: {
+    fontSize: theme.fontSize.small
+  },
+  normal: {
+    fontSize: theme.fontSize.normal
+  },
+  large: {
+    fontSize: theme.fontSize.large
+  }
+});
+
+const weightStyles = StyleSheet.create({
+  normal: {
+    fontWeight: '400'
+  },
+  bold: {
+    fontWeight: 'bold'
+  }
+});
+
+export default AppText;

performance/src/components/AspectRatio/index.js

@@ -0,0 +1,40 @@
+import React, { PureComponent, PropTypes } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+class AspectRatio extends PureComponent {
+  static displayName = 'AspectRatio';
+
+  static propTypes = {
+    children: PropTypes.any,
+    ratio: PropTypes.number,
+    style: PropTypes.object
+  };
+
+  static defaultProps = {
+    ratio: 1
+  };
+
+  render() {
+    const { children, ratio, style } = this.props;
+    const percentage = 100 / ratio;
+
+    return (
+      <View style={[styles.root, style]}>
+        <View style={[styles.shim, { paddingBottom: `${percentage}%` }]} />
+        <View style={StyleSheet.absoluteFill}>{children}</View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    overflow: 'hidden'
+  },
+  shim: {
+    display: 'block',
+    width: '100%'
+  }
+});
+
+export default AspectRatio;

performance/src/components/Box/aphrodite.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import View from '../View/aphrodite';
+import { StyleSheet } from 'aphrodite';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = StyleSheet.create({
+  outer: {
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#222'
+  },
+  color1: {
+    backgroundColor: '#666'
+  },
+  color2: {
+    backgroundColor: '#999'
+  },
+  color3: {
+    backgroundColor: 'blue'
+  },
+  color4: {
+    backgroundColor: 'orange'
+  },
+  color5: {
+    backgroundColor: 'red'
+  },
+  fixed: {
+    width: 20,
+    height: 20
+  }
+});
+
+module.exports = Box;

performance/src/components/Box/css-modules.js

@@ -0,0 +1,18 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import React from 'react';
+import View from '../View/css-modules';
+import styles from './styles.css';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    className={classnames(styles[`color${color}`], {
+      [styles.fixed]: fixed,
+      [styles.outer]: outer,
+      [styles.row]: layout === 'row'
+    })}
+  />
+);
+
+module.exports = Box;

performance/src/components/Box/glamor.js

@@ -0,0 +1,48 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import View from '../View/glamor';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = {
+  outer: {
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#222'
+  },
+  color1: {
+    backgroundColor: '#666'
+  },
+  color2: {
+    backgroundColor: '#999'
+  },
+  color3: {
+    backgroundColor: 'blue'
+  },
+  color4: {
+    backgroundColor: 'orange'
+  },
+  color5: {
+    backgroundColor: 'red'
+  },
+  fixed: {
+    width: 20,
+    height: 20
+  }
+};
+
+module.exports = Box;

performance/src/components/Box/jss.js

@@ -0,0 +1,50 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import injectSheet from 'react-jss';
+import React from 'react';
+import View from '../View/jss';
+
+const Box = ({ classes, color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    className={classnames({
+      [classes[`color${color}`]]: true,
+      [classes.fixed]: fixed,
+      [classes.row]: layout === 'row',
+      [classes.outer]: outer
+    })}
+  />
+);
+
+const styles = {
+  outer: {
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#222'
+  },
+  color1: {
+    backgroundColor: '#666'
+  },
+  color2: {
+    backgroundColor: '#999'
+  },
+  color3: {
+    backgroundColor: 'blue'
+  },
+  color4: {
+    backgroundColor: 'orange'
+  },
+  color5: {
+    backgroundColor: 'red'
+  },
+  fixed: {
+    width: 20,
+    height: 20
+  }
+};
+
+module.exports = injectSheet(styles)(Box);

performance/src/components/Box/react-native-stylesheet.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import StyleSheet from 'react-native/apis/StyleSheet';
+import View from '../View/react-native-stylesheet';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = StyleSheet.create({
+  outer: {
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#222'
+  },
+  color1: {
+    backgroundColor: '#666'
+  },
+  color2: {
+    backgroundColor: '#999'
+  },
+  color3: {
+    backgroundColor: 'blue'
+  },
+  color4: {
+    backgroundColor: 'orange'
+  },
+  color5: {
+    backgroundColor: 'red'
+  },
+  fixed: {
+    width: 20,
+    height: 20
+  }
+});
+
+module.exports = Box;

performance/src/components/Box/react-native.js

@@ -0,0 +1,48 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = StyleSheet.create({
+  outer: {
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#222'
+  },
+  color1: {
+    backgroundColor: '#666'
+  },
+  color2: {
+    backgroundColor: '#999'
+  },
+  color3: {
+    backgroundColor: 'blue'
+  },
+  color4: {
+    backgroundColor: 'orange'
+  },
+  color5: {
+    backgroundColor: 'red'
+  },
+  fixed: {
+    width: 20,
+    height: 20
+  }
+});
+
+module.exports = Box;

performance/src/components/Box/reactxp.js

@@ -0,0 +1,48 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { Styles, View } from 'reactxp';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = {
+  outer: Styles.createViewStyle({
+    padding: 4
+  }),
+  row: Styles.createViewStyle({
+    flexDirection: 'row'
+  }),
+  color0: Styles.createViewStyle({
+    backgroundColor: '#222'
+  }),
+  color1: Styles.createViewStyle({
+    backgroundColor: '#666'
+  }),
+  color2: Styles.createViewStyle({
+    backgroundColor: '#999'
+  }),
+  color3: Styles.createViewStyle({
+    backgroundColor: 'blue'
+  }),
+  color4: Styles.createViewStyle({
+    backgroundColor: 'orange'
+  }),
+  color5: Styles.createViewStyle({
+    backgroundColor: 'red'
+  }),
+  fixed: Styles.createViewStyle({
+    width: 20,
+    height: 20
+  })
+};
+
+module.exports = Box;

performance/src/components/Box/styled-components.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import View from '../View/styled-components';
+
+const getColor = color => {
+  switch (color) {
+    case 0:
+      return '#222';
+    case 1:
+      return '#666';
+    case 2:
+      return '#999';
+    case 3:
+      return 'blue';
+    case 4:
+      return 'orange';
+    case 5:
+      return 'red';
+    default:
+      return 'transparent';
+  }
+};
+
+const Box = styled(View)`
+  flex-direction: ${props => (props.layout === 'column' ? 'column' : 'row')};
+  padding: ${props => (props.outer ? '4px' : '0')};
+  height: ${props => (props.fixed ? '20px' : 'auto')};
+  width: ${props => (props.fixed ? '20px' : 'auto')};
+  background-color: ${props => getColor(props.color)};
+`;
+
+module.exports = Box;

performance/src/components/Box/styles.css

@@ -0,0 +1,36 @@
+.outer {
+  padding: 4px;
+}
+
+.row {
+  flex-direction: row;
+}
+
+.color0 {
+  background-color: #222;
+}
+
+.color1 {
+  background-color: #666;
+}
+
+.color2 {
+  background-color: #999;
+}
+
+.color3 {
+  background-color: blue;
+}
+
+.color4 {
+  background-color: orange;
+}
+
+.color5 {
+  background-color: red;
+}
+
+.fixed {
+  width: 20px;
+  height: 20px;
+}

performance/src/components/Box/styletron.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import { injectStylePrefixed } from 'styletron-utils';
+import React from 'react';
+import View, { styletron } from '../View/styletron';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = {
+  outer: injectStylePrefixed(styletron, {
+    padding: '4px'
+  }),
+  row: injectStylePrefixed(styletron, {
+    flexDirection: 'row'
+  }),
+  color0: injectStylePrefixed(styletron, {
+    backgroundColor: '#222'
+  }),
+  color1: injectStylePrefixed(styletron, {
+    backgroundColor: '#666'
+  }),
+  color2: injectStylePrefixed(styletron, {
+    backgroundColor: '#999'
+  }),
+  color3: injectStylePrefixed(styletron, {
+    backgroundColor: 'blue'
+  }),
+  color4: injectStylePrefixed(styletron, {
+    backgroundColor: 'orange'
+  }),
+  color5: injectStylePrefixed(styletron, {
+    backgroundColor: 'red'
+  }),
+  fixed: injectStylePrefixed(styletron, {
+    width: '20px',
+    height: '20px'
+  })
+};
+
+module.exports = Box;

performance/src/components/GridView/index.js

@@ -0,0 +1,52 @@
+import { StyleSheet, View } from 'react-native';
+import React, { Component, PropTypes } from 'react';
+import theme from '../theme';
+
+class GridView extends Component {
+  static displayName = 'GridView';
+
+  static propTypes = {
+    children: PropTypes.node,
+    hasGap: PropTypes.bool,
+    style: PropTypes.object
+  };
+
+  render() {
+    const { children, hasGap, style, ...other } = this.props;
+
+    return (
+      <View {...other} style={[style, styles.root, hasGap && styles.hasGap]}>
+        {React.Children.map(children, child => {
+          return (
+            child &&
+            React.cloneElement(child, {
+              style: [child.props.style, styles.column, hasGap && styles.hasGapColumn]
+            })
+          );
+        })}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row'
+  },
+  /**
+   * 1. Distribute all space (rather than extra space)
+   * 2. Prevent wide content from forcing wider flex columns
+   */
+  column: {
+    flexBasis: 0, // 1
+    minWidth: 0 // 2
+  },
+  hasGap: {
+    marginHorizontal: theme.createLength(theme.spaceX * -0.5, 'rem')
+  },
+  hasGapColumn: {
+    marginHorizontal: theme.createLength(theme.spaceX * 0.5, 'rem')
+  }
+});
+
+export default GridView;

performance/src/components/Icons/DirectMessage.js

@@ -0,0 +1,19 @@
+import { createDOMElement } from 'react-native';
+import React from 'react';
+import styles from './styles';
+
+const IconDirectMessage = props =>
+  createDOMElement('svg', {
+    children: (
+      <g>
+        <path d="M43.34 14H12.66L28 27.946z" />
+        <path d="M51.392 14.789L30.018 34.22c-.009.008-.028.006-.039.012-.563.5-1.266.768-1.98.768-.72 0-1.442-.258-2.017-.78L4.609 14.79A3.957 3.957 0 0 0 3 18v37a1.998 1.998 0 0 0 2 2c.464 0 .924-.162 1.292-.473L19 46h30c2.243 0 4-1.757 4-4V18a3.96 3.96 0 0 0-1.608-3.211z" />
+      </g>
+    ),
+    style: [styles.icon, props.style],
+    viewBox: '0 0 56 72'
+  });
+
+IconDirectMessage.metadata = { height: 72, width: 56 };
+
+export default IconDirectMessage;

performance/src/components/Icons/Heart.js

@@ -0,0 +1,18 @@
+import { createDOMElement } from 'react-native';
+import React from 'react';
+import styles from './styles';
+
+const IconHeart = props =>
+  createDOMElement('svg', {
+    children: (
+      <g>
+        <path d="M38.723 12c-7.187 0-11.16 7.306-11.723 8.131C26.437 19.306 22.504 12 15.277 12 8.791 12 3.533 18.163 3.533 24.647 3.533 39.964 21.891 55.907 27 56c5.109-.093 23.467-16.036 23.467-31.353C50.467 18.163 45.209 12 38.723 12z" />
+      </g>
+    ),
+    style: [styles.icon, props.style],
+    viewBox: '0 0 54 72'
+  });
+
+IconHeart.metadata = { height: 72, width: 54 };
+
+export default IconHeart;

performance/src/components/Icons/Reply.js

@@ -0,0 +1,18 @@
+import { createDOMElement } from 'react-native';
+import React from 'react';
+import styles from './styles';
+
+const IconReply = props =>
+  createDOMElement('svg', {
+    children: (
+      <g>
+        <path d="M41 31h-9V19a2.999 2.999 0 0 0-4.817-2.386l-21 16a3 3 0 0 0-.001 4.773l21 16a3.006 3.006 0 0 0 3.15.301A2.997 2.997 0 0 0 32 51V39h9c5.514 0 10 4.486 10 10a4 4 0 0 0 8 0c0-9.925-8.075-18-18-18z" />
+      </g>
+    ),
+    style: [styles.icon, props.style],
+    viewBox: '0 0 62 72'
+  });
+
+IconReply.metadata = { height: 72, width: 62 };
+
+export default IconReply;

performance/src/components/Icons/Retweet.js

@@ -0,0 +1,18 @@
+import { createDOMElement } from 'react-native';
+import React from 'react';
+import styles from './styles';
+
+const IconRetweet = props =>
+  createDOMElement('svg', {
+    children: (
+      <g>
+        <path d="M70.676 36.644A3 3 0 0 0 68 35h-7V19a4 4 0 0 0-4-4H34a4 4 0 0 0 0 8h18a1 1 0 0 1 1 .998V35h-7a3.001 3.001 0 0 0-2.419 4.775l11 15a3.003 3.003 0 0 0 4.839-.001l11-15a3.001 3.001 0 0 0 .256-3.13zM40.001 48H22a.995.995 0 0 1-.992-.96L21.001 36h7a3.001 3.001 0 0 0 2.419-4.775l-11-15a3.003 3.003 0 0 0-4.839.001l-11 15A3 3 0 0 0 6.001 36h7l.011 16.003a4 4 0 0 0 4 3.997h22.989a4 4 0 0 0 0-8z" />
+      </g>
+    ),
+    style: [styles.icon, props.style],
+    viewBox: '0 0 74 72'
+  });
+
+IconRetweet.metadata = { height: 72, width: 74 };
+
+export default IconRetweet;

performance/src/components/Icons/styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  icon: {
+    display: 'inline-block',
+    fill: 'currentcolor',
+    height: '1.25em',
+    maxWidth: '100%',
+    position: 'relative',
+    userSelect: 'none',
+    verticalAlign: 'text-bottom'
+  }
+});
+
+export default styles;

performance/src/components/NestedTree/index.js

@@ -0,0 +1,39 @@
+import React, { Component, PropTypes } from 'react';
+
+class DeepTree extends Component {
+  static propTypes = {
+    breadth: PropTypes.number.isRequired,
+    components: PropTypes.object,
+    depth: PropTypes.number.isRequired,
+    id: PropTypes.number.isRequired,
+    wrap: PropTypes.number.isRequired
+  };
+
+  render() {
+    const { breadth, components, depth, id, wrap } = this.props;
+    const { Box } = components;
+
+    let result = (
+      <Box color={id % 3} components={components} layout={depth % 2 === 0 ? 'column' : 'row'} outer>
+        {depth === 0 && <Box color={id % 3 + 3} components={components} fixed />}
+        {depth !== 0 &&
+          Array.from({ length: breadth }).map((el, i) => (
+            <DeepTree
+              breadth={breadth}
+              components={components}
+              depth={depth - 1}
+              id={i}
+              key={i}
+              wrap={wrap}
+            />
+          ))}
+      </Box>
+    );
+    for (let i = 0; i < wrap; i++) {
+      result = <Box components={components}>{result}</Box>;
+    }
+    return result;
+  }
+}
+
+module.exports = DeepTree;

performance/src/components/Tweet/index.js

@@ -0,0 +1,144 @@
+import AspectRatio from '../AspectRatio';
+import GridView from '../GridView';
+import TweetActionsBar from '../TweetActionsBar';
+import TweetText from '../TweetText';
+import UserAvatar from '../UserAvatar';
+import UserNames from '../UserNames';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import React, { Component, PropTypes } from 'react';
+import theme from '../theme';
+
+export class Tweet extends Component {
+  static displayName = 'Tweet';
+
+  static propTypes = {
+    tweet: PropTypes.object.isRequired
+  };
+
+  render() {
+    const { tweet } = this.props;
+    const { id, lang, media, textParts, timestamp, user } = tweet;
+    const { fullName, profileImageUrl, screenName } = user;
+
+    return (
+      <View accessibilityRole="article" accessible style={styles.root}>
+        <GridView hasGap>
+          <View style={styles.avatarColumn}>
+            <View
+              accessibilityRole="link"
+              accessible
+              href={`/${screenName}`}
+              style={styles.avatarLink}
+            >
+              <UserAvatar style={styles.avatar} uri={profileImageUrl} />
+            </View>
+          </View>
+
+          <View style={styles.bodyColumn}>
+            <View style={styles.body}>
+              <View style={styles.row}>
+                <Text
+                  accessibilityRole="link"
+                  children={timestamp}
+                  href={`/${screenName}/status/${id}`}
+                  style={styles.timestamp}
+                />
+                <UserNames fullName={fullName} screenName={screenName} />
+              </View>
+
+              <View accessibilityRole="heading" aria-level="4">
+                <TweetText displayMode={'links'} lang={lang} textParts={textParts} />
+              </View>
+
+              {media
+                ? <View style={styles.richContent}>
+                    <AspectRatio ratio={16 / 9}>
+                      <Image
+                        resizeMode={Image.resizeMode.cover}
+                        source={media.source}
+                        style={styles.media}
+                      />
+                    </AspectRatio>
+                  </View>
+                : null}
+
+            </View>
+
+            <TweetActionsBar
+              actions={[
+                { name: 'reply', label: 'Reply' },
+                {
+                  name: 'retweet',
+                  label: 'Retweet',
+                  count: tweet.retweet_count,
+                  highlighted: tweet.retweeted
+                },
+                {
+                  name: 'like',
+                  label: 'Like',
+                  count: tweet.favorite_count,
+                  highlighted: tweet.favorited
+                },
+                { name: 'directMessage', label: 'Direct Message' }
+              ]}
+              style={styles.actionBar}
+            />
+          </View>
+        </GridView>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    paddingVertical: theme.createLength(theme.spaceY * 0.75, 'rem'),
+    paddingHorizontal: theme.createLength(theme.spaceX, 'rem')
+  },
+  avatarColumn: {
+    flexGrow: 1,
+    minWidth: 32
+  },
+  bodyColumn: {
+    flexGrow: 7
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  avatarLink: {
+    display: 'block',
+    flexShrink: 1,
+    flexGrow: 0,
+    width: '100%'
+  },
+  avatar: {
+    width: '100%'
+  },
+  body: {
+    marginTop: '-0.15rem'
+  },
+  timestamp: {
+    color: theme.colors.deepGray,
+    marginLeft: theme.createLength(theme.spaceX, 'rem'),
+    order: 1,
+    textDecorationLine: 'none',
+    whiteSpace: 'nowrap'
+  },
+  actionBar: {
+    marginTop: theme.createLength(theme.spaceY * 0.5, 'rem')
+  },
+  richContent: {
+    borderRadius: '0.35rem',
+    marginTop: theme.createLength(theme.spaceY * 0.5, 'rem'),
+    overflow: 'hidden'
+  },
+  media: {
+    ...StyleSheet.absoluteFillObject,
+    margin: 'auto',
+    width: 'auto',
+    height: 'auto'
+  }
+});
+
+export default Tweet;

performance/src/components/TweetAction/index.js

@@ -0,0 +1,77 @@
+import IconReply from '../Icons/Reply';
+import IconHeart from '../Icons/Heart';
+import IconRetweet from '../Icons/Retweet';
+import IconDirectMessage from '../Icons/DirectMessage';
+import { Text, View, StyleSheet } from 'react-native';
+import React, { PropTypes } from 'react';
+import theme from '../theme';
+
+const getIcon = (icon, highlighted) => {
+  switch (icon) {
+    case 'like':
+      return <IconHeart />;
+    case 'reply':
+      return <IconReply />;
+    case 'retweet':
+      return <IconRetweet />;
+    case 'directMessage':
+      return <IconDirectMessage />;
+    default:
+      return null;
+  }
+};
+
+export default class TweetAction extends React.Component {
+  static displayName = 'TweetAction';
+
+  static propTypes = {
+    count: PropTypes.number,
+    displayMode: PropTypes.oneOf(['like', 'reply', 'retweet', 'directMessage']),
+    highlighted: PropTypes.bool,
+    onPress: PropTypes.func,
+    style: PropTypes.object
+  };
+
+  render() {
+    const { count, displayMode, highlighted, onPress, style } = this.props;
+
+    return (
+      <View accessibilityRole="button" onPress={onPress} style={[styles.root, style]}>
+        <Text
+          style={[
+            styles.inner,
+            displayMode === 'like' && highlighted && styles.likedColor,
+            displayMode === 'retweet' && highlighted && styles.retweetedColor
+          ]}
+        >
+          {getIcon(displayMode, highlighted)}
+          {count > 0 ? <Text style={styles.count}>{count}</Text> : null}
+        </Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    minHeight: theme.createLength(theme.lineHeight, 'rem'),
+    overflow: 'visible',
+    userSelect: 'none',
+    whiteSpace: 'nowrap'
+  },
+  inner: {
+    alignItems: 'center',
+    color: theme.colors.deepGray,
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  count: {
+    marginLeft: '0.25em'
+  },
+  retweetedColor: {
+    color: theme.colors.green
+  },
+  likedColor: {
+    color: theme.colors.red
+  }
+});

performance/src/components/TweetActionsBar/index.js

@@ -0,0 +1,51 @@
+import TweetAction from '../TweetAction';
+import { View, StyleSheet } from 'react-native';
+import React, { PropTypes, PureComponent } from 'react';
+
+const actionNames = ['reply', 'retweet', 'like', 'directMessage'];
+
+export default class TweetActionsBar extends PureComponent {
+  static propTypes = {
+    actions: PropTypes.arrayOf(
+      PropTypes.shape({
+        count: PropTypes.number,
+        label: PropTypes.string,
+        highlighted: PropTypes.bool,
+        name: PropTypes.oneOf(actionNames).isRequired,
+        onPress: PropTypes.func
+      })
+    ),
+    style: PropTypes.object
+  };
+
+  render() {
+    const { actions, style } = this.props;
+
+    /* eslint-disable react/jsx-handler-names */
+    return (
+      <View style={[styles.root, style]}>
+        {actions.map((action, i) => (
+          <TweetAction
+            accessibilityLabel={actions.label}
+            count={action.count}
+            displayMode={action.name}
+            highlighted={action.highlighted}
+            key={i}
+            onPress={action.onPress}
+            style={styles.action}
+          />
+        ))}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row'
+  },
+  action: {
+    display: 'block',
+    marginRight: '10%'
+  }
+});

performance/src/components/TweetText/index.js

@@ -0,0 +1,28 @@
+import AppText from '../AppText';
+import TweetTextPart from '../TweetTextPart';
+import React, { PropTypes } from 'react';
+
+class TweetText extends React.Component {
+  static displayName = 'TweetText';
+
+  static propTypes = {
+    displayMode: TweetTextPart.propTypes.displayMode,
+    lang: PropTypes.string,
+    numberOfLines: PropTypes.number,
+    textParts: PropTypes.array.isRequired
+  };
+
+  render() {
+    const { displayMode, lang, numberOfLines, textParts, ...other } = this.props;
+
+    return (
+      <AppText {...other} lang={lang} numberOfLines={numberOfLines}>
+        {textParts.map((part, i) => (
+          <TweetTextPart displayMode={displayMode} key={i} part={part} />
+        ))}
+      </AppText>
+    );
+  }
+}
+
+export default TweetText;

performance/src/components/TweetTextPart/index.js

@@ -0,0 +1,112 @@
+/* eslint-disable react/prop-types */
+import { Image, StyleSheet, Text } from 'react-native';
+import React, { PropTypes } from 'react';
+import theme from '../theme';
+
+const createTextEntity = ({ part }) => <Text>{`${part.prefix}${part.text}`}</Text>;
+
+const createTwemojiEntity = ({ part }) => (
+  <Image
+    accessibilityLabel={part.text}
+    draggable={false}
+    source={{ uri: part.emoji }}
+    style={styles.twemoji}
+  />
+);
+
+// @mention, #hashtag, $cashtag
+const createSymbolEntity = ({ displayMode, part }) => {
+  const links = displayMode === 'links';
+  return (
+    <Text accessibilityRole={links ? 'link' : null} href={part.url} style={[links && styles.link]}>
+      {`${part.prefix}${part.text}`}
+    </Text>
+  );
+};
+
+// internal links
+const createLinkEntity = ({ displayMode, part }) => {
+  const { displayUrl, linkRelation, url } = part;
+  const links = displayMode === 'links';
+
+  return (
+    <Text
+      accessibilityRole={links ? 'link' : null}
+      href={url}
+      rel={links ? linkRelation : null}
+      style={[links && styles.link]}
+    >
+      {displayUrl}
+    </Text>
+  );
+};
+
+// external links
+const createExternalLinkEntity = ({ displayMode, part }) => {
+  const { displayUrl, linkRelation, url } = part;
+  const links = displayMode === 'links';
+
+  return (
+    <Text
+      accessibilityRole={links ? 'link' : null}
+      href={url}
+      rel={links ? linkRelation : null}
+      style={[links && styles.link]}
+      target="_blank"
+    >
+      {displayUrl}
+    </Text>
+  );
+};
+
+class TweetTextPart extends React.Component {
+  static displayName = 'TweetTextPart';
+
+  static propTypes = {
+    displayMode: PropTypes.oneOf(['links', 'no-links']),
+    part: PropTypes.object
+  };
+
+  static defaultProps = {
+    displayMode: 'links'
+  };
+
+  render() {
+    let renderer;
+    const { isEmoji, isEntity, isHashtag, isMention, isMedia, isUrl } = this.props.part;
+
+    if (isEmoji || isEntity || isUrl || isMedia) {
+      if (isUrl) {
+        renderer = createExternalLinkEntity;
+      } else if (isHashtag || isMention) {
+        renderer = createSymbolEntity;
+      } else if (isEmoji) {
+        renderer = createTwemojiEntity;
+      } else {
+        renderer = createLinkEntity;
+      }
+    } else {
+      renderer = createTextEntity;
+    }
+
+    return renderer(this.props);
+  }
+}
+
+const styles = StyleSheet.create({
+  link: {
+    color: theme.colors.blue,
+    textDecorationLine: 'none',
+    unicodeBidi: 'embed'
+  },
+  twemoji: {
+    display: 'inline-block',
+    height: '1.25em',
+    width: '1.25em',
+    paddingRight: '0.05em',
+    paddingLeft: '0.1em',
+    verticalAlign: '-0.2em'
+  }
+});
+
+export default TweetTextPart;

performance/src/components/UserAvatar/index.js

@@ -0,0 +1,64 @@
+import AspectRatio from '../AspectRatio';
+import { Image, StyleSheet } from 'react-native';
+import React, { PropTypes, PureComponent } from 'react';
+import theme from '../theme';
+
+class UserAvatar extends PureComponent {
+  static displayName = 'UserAvatar';
+
+  static propTypes = {
+    accessibilityLabel: PropTypes.string,
+    circle: PropTypes.bool,
+    style: PropTypes.object,
+    uri: PropTypes.string
+  };
+
+  static defaultProps = {
+    circle: false
+  };
+
+  render() {
+    const { accessibilityLabel, circle, style, uri } = this.props;
+
+    return (
+      <AspectRatio ratio={1} style={[styles.root, style]}>
+        {uri
+          ? <Image
+              accessibilityLabel={accessibilityLabel}
+              onLoad={this._handleLoad}
+              ref={this._setImageRef}
+              source={{ uri }}
+              style={[styles.image, circle && styles.circle]}
+            />
+          : null}
+      </AspectRatio>
+    );
+  }
+
+  _handleLoad = () => {
+    this._imageRef && this._imageRef.setNativeProps(nativeProps);
+  };
+
+  _setImageRef = component => {
+    this._imageRef = component;
+  };
+}
+
+const nativeProps = { style: { backgroundColor: '#fff' } };
+
+const styles = StyleSheet.create({
+  root: {
+    borderRadius: '0.35rem'
+  },
+  circle: {
+    borderRadius: '9999px'
+  },
+  image: {
+    backgroundColor: theme.colors.fadedGray,
+    display: 'block',
+    height: '100%',
+    width: '100%'
+  }
+});
+
+export default UserAvatar;

performance/src/components/UserNames/index.js

@@ -0,0 +1,49 @@
+import AppText from '../AppText';
+import { StyleSheet } from 'react-native';
+import React, { PropTypes, PureComponent } from 'react';
+
+class UserNames extends PureComponent {
+  static displayName = 'UserNames';
+
+  static propTypes = {
+    fullName: PropTypes.string,
+    layout: PropTypes.oneOf(['nowrap', 'stack']),
+    onPress: PropTypes.func,
+    screenName: PropTypes.string,
+    style: PropTypes.object
+  };
+
+  static defaultProps = {
+    layout: 'nowrap'
+  };
+
+  render() {
+    const { fullName, layout, onPress, screenName, style, ...other } = this.props;
+
+    return (
+      <AppText
+        {...other}
+        color="deepGray"
+        numberOfLines={layout === 'nowrap' ? 1 : null}
+        onPress={onPress}
+        style={[styles.root, style]}
+      >
+        <AppText color="normal" weight="bold">{fullName}</AppText>
+        {layout === 'stack' ? ' \u000A' : ' '}
+        <AppText color="deepGray" style={styles.screenName}>{`@${screenName}`}</AppText>
+      </AppText>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    display: 'inline-block'
+  },
+  screenName: {
+    unicodeBidi: 'embed',
+    writingDirection: 'ltr'
+  }
+});
+
+export default UserNames;

performance/src/components/View/aphrodite.js

@@ -0,0 +1,26 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { css, StyleSheet } from 'aphrodite';
+
+const View = ({ style, ...other }) => <div {...other} className={css(styles.root, style)} />;
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'stretch',
+    borderWidth: 0,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    margin: 0,
+    padding: 0,
+    position: 'relative',
+    // fix flexbox bugs
+    minHeight: 0,
+    minWidth: 0
+  }
+});
+
+module.exports = View;

performance/src/components/View/css-modules.js

@@ -0,0 +1,8 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import React from 'react';
+import styles from './styles.css';
+
+const View = props => <div {...props} className={classnames(styles.initial, props.className)} />;
+
+module.exports = View;

performance/src/components/View/glamor.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+import { css } from 'glamor';
+import React from 'react';
+
+const View = ({ style, ...other }) => <div {...other} className={css(viewStyle, ...style)} />;
+
+const viewStyle = {
+  alignItems: 'stretch',
+  borderWidth: 0,
+  borderStyle: 'solid',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexBasis: 'auto',
+  flexDirection: 'column',
+  flexShrink: 0,
+  margin: 0,
+  padding: 0,
+  position: 'relative',
+  // fix flexbox bugs
+  minHeight: 0,
+  minWidth: 0
+};
+
+module.exports = View;

performance/src/components/View/jss.js

@@ -0,0 +1,29 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import injectSheet from 'react-jss';
+import React from 'react';
+
+const View = ({ classes, className, ...other }) => (
+  <div {...other} className={classnames(classes.root, className)} />
+);
+
+const styles = {
+  root: {
+    alignItems: 'stretch',
+    borderWidth: 0,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    margin: 0,
+    padding: 0,
+    position: 'relative',
+    // fix flexbox bugs
+    minHeight: 0,
+    minWidth: 0
+  }
+};
+
+module.exports = injectSheet(styles)(View);

performance/src/components/View/react-native-stylesheet.js

@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import StyleSheet from 'react-native/apis/StyleSheet';
+import registry from 'react-native/apis/StyleSheet/registry';
+import createDOMProps from 'react-native/modules/createDOMProps';
+
+const View = props => (
+  <div {...createDOMProps(props, style => registry.resolve([styles.root, style]))} />
+);
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'stretch',
+    borderWidth: 0,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    margin: 0,
+    padding: 0,
+    position: 'relative',
+    // fix flexbox bugs
+    minHeight: 0,
+    minWidth: 0
+  }
+});
+
+module.exports = View;

performance/src/components/View/styled-components.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const View = styled.div`
+  align-items: stretch;
+  border-width: 0;
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  flex-basis: auto;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  min-height: 0;
+  min-width: 0;
+`;
+
+module.exports = View;

performance/src/components/View/styles.css

@@ -0,0 +1,15 @@
+.initial {
+  align-items: stretch;
+  border-width: 0;
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  flex-basis: auto;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  min-height: 0;
+  min-width: 0;
+}

performance/src/components/View/styletron.js

@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import Styletron from 'styletron-client';
+import { injectStylePrefixed } from 'styletron-utils';
+import React from 'react';
+
+export const styletron = new Styletron();
+
+const View = ({ style, ...other }) => (
+  <div {...other} className={classnames(viewStyle, ...style)} />
+);
+
+const viewStyle = injectStylePrefixed(styletron, {
+  alignItems: 'stretch',
+  borderWidth: '0px',
+  borderStyle: 'solid',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexBasis: 'auto',
+  flexDirection: 'column',
+  flexShrink: '0',
+  margin: '0px',
+  padding: '0px',
+  position: 'relative',
+  // fix flexbox bugs
+  minHeight: '0px',
+  minWidth: '0px'
+});
+
+export default View;

performance/src/components/theme.js

@@ -0,0 +1,37 @@
+const colors = {
+  blue: '#1B95E0',
+  lightBlue: '#71C9F8',
+  green: '#17BF63',
+  orange: '#F45D22',
+  purple: '#794BC4',
+  red: '#E0245E',
+  white: '#FFFFFF',
+  yellow: '#FFAD1F',
+  deepGray: '#657786',
+  fadedGray: '#E6ECF0',
+  faintGray: '#F5F8FA',
+  gray: '#AAB8C2',
+  lightGray: '#CCD6DD',
+  textBlack: '#14171A'
+};
+
+const fontSize = {
+  root: '14px',
+  // font scale
+  small: '0.85rem',
+  normal: '1rem',
+  large: '1.25rem'
+};
+
+module.exports = {
+  colors,
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif, ' +
+    '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', // emoji fonts
+  fontSize,
+  lineHeight: 1.3125,
+  spaceX: 0.6,
+  spaceY: 1.3125,
+  createLength(num, unit) {
+    return `${num}${unit}`;
+  }
+};

performance/src/css-modules.js

@@ -0,0 +1,7 @@
+import Box from './components/Box/css-modules';
+import View from './components/View/css-modules';
+
+export default {
+  Box,
+  View
+};

performance/src/glamor.js

@@ -0,0 +1,7 @@
+import Box from './components/Box/glamor';
+import View from './components/View/glamor';
+
+export default {
+  Box,
+  View
+};

performance/src/jss.js

@@ -0,0 +1,7 @@
+import Box from './components/Box/jss';
+import View from './components/View/jss';
+
+export default {
+  Box,
+  View
+};

performance/src/react-native-stylesheet.js

@@ -0,0 +1,7 @@
+import Box from './components/Box/react-native-stylesheet';
+import View from './components/View/react-native-stylesheet';
+
+export default {
+  Box,
+  View
+};

performance/src/react-native.js

@@ -0,0 +1,9 @@
+import Box from './components/Box/react-native';
+import Tweet from './components/Tweet';
+import { View } from 'react-native';
+
+export default {
+  Box,
+  Tweet,
+  View
+};

performance/src/reactxp.js

@@ -0,0 +1,7 @@
+import Box from './components/Box/reactxp';
+import { View } from 'reactxp';
+
+export default {
+  Box,
+  View
+};

performance/src/styled-components.js

@@ -0,0 +1,7 @@
+import Box from './components/Box/styled-components';
+import View from './components/View/styled-components';
+
+export default {
+  Box,
+  View
+};

performance/src/styletron.js

@@ -0,0 +1,7 @@
+import Box from './components/Box/styletron';
+import View from './components/View/styletron';
+
+export default {
+  Box,
+  View
+};

performance/tests/renderDeepTree.js

@@ -0,0 +1,14 @@
+import createRenderBenchmark from '../createRenderBenchmark';
+import NestedTree from '../src/components/NestedTree';
+import React from 'react';
+
+const renderDeepTree = (label, components) =>
+  createRenderBenchmark({
+    name: `Deep tree [${label}]`,
+    runs: 20,
+    getElement() {
+      return <NestedTree breadth={3} components={components} depth={6} id={0} wrap={1} />;
+    }
+  });
+
+export default renderDeepTree;

performance/tests/renderTweet.js

@@ -0,0 +1,113 @@
+import createRenderBenchmark from '../createRenderBenchmark';
+import Tweet from '../src/components/Tweet';
+import React from 'react';
+
+const tweet1 = {
+  favorite_count: 30,
+  favorited: true,
+  id: '834889712556875776',
+  lang: 'en',
+  retweet_count: 6,
+  retweeted: false,
+  textParts: [
+    {
+      prefix: '',
+      text: 'Living burrito to burrito '
+    },
+    {
+      emoji: 'https://abs-0.twimg.com/emoji/v2/svg/1f32f.svg',
+      isEmoji: true,
+      prefix: '',
+      text: '🌯'
+    },
+    {
+      emoji: 'https://abs-0.twimg.com/emoji/v2/svg/1f32f.svg',
+      isEmoji: true,
+      prefix: '',
+      text: '🌯'
+    },
+    {
+      emoji: 'https://abs-0.twimg.com/emoji/v2/svg/1f32f.svg',
+      isEmoji: true,
+      prefix: '',
+      text: '🌯'
+    }
+  ],
+  timestamp: 'Feb 23',
+  user: {
+    fullName: 'Nicolas',
+    screenName: 'necolas',
+    profileImageUrl: 'https://pbs.twimg.com/profile_images/804365942360719360/dQnPejph_normal.jpg'
+  }
+};
+
+const tweet2 = {
+  favorite_count: 84,
+  favorited: false,
+  id: '730896800060579840',
+  lang: 'en',
+  media: {
+    source: {
+      uri: 'https://pbs.twimg.com/media/CiSqvsJVEAAtLZ1.jpg',
+      width: 600,
+      height: 338
+    }
+  },
+  retweet_count: 4,
+  retweeted: true,
+  textParts: [
+    {
+      prefix: '',
+      text: 'Presenting '
+    },
+    {
+      displayUrl: 'mobile.twitter.com',
+      expandedUrl: 'https://mobile.twitter.com',
+      isEntity: true,
+      isUrl: true,
+      linkRelation: 'nofollow',
+      prefix: '',
+      text: '',
+      textDirection: 'ltr',
+      url: 'https://t.co/4hRCAxiUUG'
+    },
+    {
+      prefix: '',
+      text: ' with '
+    },
+    {
+      isEntity: true,
+      isMention: true,
+      prefix: '@',
+      text: 'davidbellona',
+      textDirection: 'ltr',
+      url: '/davidbellona'
+    },
+    {
+      prefix: '',
+      text: " at Twitter's all hands meeting "
+    }
+  ],
+  timestamp: 'May 12',
+  user: {
+    fullName: 'Nicolas',
+    screenName: 'necolas',
+    profileImageUrl: 'https://pbs.twimg.com/profile_images/804365942360719360/dQnPejph_normal.jpg'
+  }
+};
+
+const renderTweet = (label, components) =>
+  createRenderBenchmark({
+    name: `Tweet [${label}]`,
+    runs: 10,
+    getElement() {
+      return (
+        <div style={{ width: 500 }}>
+          <Tweet tweet={tweet1} />
+          <Tweet tweet={tweet2} />
+        </div>
+      );
+    }
+  });
+
+export default renderTweet;

performance/tests/renderWideTree.js

@@ -0,0 +1,14 @@
+import createRenderBenchmark from '../createRenderBenchmark';
+import NestedTree from '../src/components/NestedTree';
+import React from 'react';
+
+const renderWideTree = (label, components) =>
+  createRenderBenchmark({
+    name: `Wide tree [${label}]`,
+    runs: 20,
+    getElement() {
+      return <NestedTree breadth={10} components={components} depth={3} id={0} wrap={4} />;
+    }
+  });
+
+export default renderWideTree;

performance/webpack.config.js

@@ -1,39 +1,49 @@
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const path = require('path');
 const webpack = require('webpack');
-// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {
-  entry: {
-    performance: './index'
-  },
+  context: __dirname,
+  entry: './index',
   output: {
-    path: path.resolve(__dirname, '../dist-performance'),
+    path: path.resolve(__dirname, 'dist'),
     filename: 'performance.bundle.js'
   },
   module: {
-    loaders: [
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: { module: true, localIdentName: '[hash:base64:8]' }
+          }
+        ]
+      },
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: { cacheDirectory: true }
+        use: {
+          loader: 'babel-loader',
+          options: { cacheDirectory: true }
+        }
       }
     ]
   },
   plugins: [
-    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
-    new webpack.optimize.DedupePlugin(),
-    // https://github.com/animatedjs/animated/issues/40
-    new webpack.NormalModuleReplacementPlugin(
-      /es6-set/,
-      path.join(__dirname, '../src/modules/polyfills/Set.js')
-    ),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         dead_code: true,
         screw_ie8: true,
-        warnings: true
+        warnings: false
       }
     })
   ],

src/apis/AppRegistry/ReactNativeApp.js

@@ -1,12 +1,13 @@
 import StyleSheet from '../StyleSheet';
 import View from '../../components/View';
-import React, { Component, PropTypes } from 'react';
+import { any, object } from 'prop-types';
+import React, { Component } from 'react';
 
 class ReactNativeApp extends Component {
   static propTypes = {
-    initialProps: PropTypes.object,
-    rootComponent: PropTypes.any.isRequired,
-    rootTag: PropTypes.any
+    initialProps: object,
+    rootComponent: any.isRequired,
+    rootTag: any
   };
 
   render() {

src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap

@@ -1,48 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
 exports[`apis/AppRegistry/renderApplication getApplication 1`] = `
-"<style id=\"react-native-stylesheet\">
-/* React Native StyleSheet*/
-html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}
-body{margin:0}
-button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
-input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}
-@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform: rotate(0deg); transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg); transform: rotate(360deg);}}
-@keyframes rn-ProgressBar-animation{0%{-webkit-transform: translateX(-100%); transform: translateX(-100%);}100%{-webkit-transform: translateX(400%); transform: translateX(400%);}}
-.rn-pointerEvents\\:auto,.rn_pointerEvents\\:box-only,.rn-pointerEvents\\:box-none *{pointer-events:auto}.rn-pointerEvents\\:none,.rn_pointerEvents\\:box-only *,.rn-pointerEvents\\:box-none{pointer-events:none}
-.rn-bottom\\:0px{bottom:0px}
-.rn-left\\:0px{left:0px}
-.rn-position\\:absolute{position:absolute}
-.rn-right\\:0px{right:0px}
-.rn-top\\:0px{top:0px}
-.rn-alignItems\\:stretch{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
-.rn-backgroundColor\\:transparent{background-color:transparent}
-.rn-borderTopStyle\\:solid{border-top-style:solid}
-.rn-borderRightStyle\\:solid{border-right-style:solid}
-.rn-borderBottomStyle\\:solid{border-bottom-style:solid}
-.rn-borderLeftStyle\\:solid{border-left-style:solid}
-.rn-borderTopWidth\\:0px{border-top-width:0px}
-.rn-borderRightWidth\\:0px{border-right-width:0px}
-.rn-borderBottomWidth\\:0px{border-bottom-width:0px}
-.rn-borderLeftWidth\\:0px{border-left-width:0px}
-.rn-boxSizing\\:border-box{-moz-box-sizing:border-box;box-sizing:border-box}
-.rn-color\\:inherit{color:inherit}
-.rn-display\\:flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
-.rn-flexBasis\\:auto{-ms-preferred-size:auto;-webkit-flex-basis:auto;flex-basis:auto}
-.rn-flexDirection\\:column{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
-.rn-font\\:inherit{font:inherit}
-.rn-listStyle\\:none{list-style:none}
-.rn-marginTop\\:0px{margin-top:0px}
-.rn-marginRight\\:0px{margin-right:0px}
-.rn-marginBottom\\:0px{margin-bottom:0px}
-.rn-marginLeft\\:0px{margin-left:0px}
-.rn-minHeight\\:0px{min-height:0px}
-.rn-minWidth\\:0px{min-width:0px}
-.rn-paddingTop\\:0px{padding-top:0px}
-.rn-paddingRight\\:0px{padding-right:0px}
-.rn-paddingBottom\\:0px{padding-bottom:0px}
-.rn-paddingLeft\\:0px{padding-left:0px}
-.rn-position\\:relative{position:relative}
-.rn-textAlign\\:inherit{text-align:inherit}
-.rn-textDecoration\\:none{text-decoration:none}
-.rn-flexShrink\\:0{-ms-flex-negative:0px;-webkit-flex-shrink:0px;flex-shrink:0}
+"<style id=\\"react-native-stylesheet-static\\">
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
+.rn-pointerEvents-105ug2t{pointer-events:auto;}
+.rn-pointerEvents-12vffkv{pointer-events:none;}
+.rn-pointerEvents-12vffkv *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
+.rn-pointerEvents-633pao{pointer-events:none;}
+</style>
+<style id=\\"react-native-stylesheet\\">
+.rn-bottom-1p0dtai{bottom:0px}
+.rn-left-1d2f490{left:0px}
+.rn-position-u8s1d{position:absolute}
+.rn-position-bnwqim{position:relative}
+.rn-right-zchlnj{right:0px}
+.rn-top-ipm5af{top:0px}
+.rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none}
+.rn-backgroundColor-wib322{background-color:transparent}
+.rn-color-homxoj{color:inherit}
+.rn-font-1lw9tu2{font:inherit}
+.rn-textAlign-1ttztb7{text-align:inherit}
+.rn-textDecoration-bauka4{text-decoration:none}
+.rn-listStyle-1ebb2ja{list-style:none}
+.rn-alignItems-1oszu61{-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
+.rn-borderTopStyle-1efd50x{border-top-style:solid}
+.rn-borderRightStyle-14skgim{border-right-style:solid}
+.rn-borderBottomStyle-rull8r{border-bottom-style:solid}
+.rn-borderLeftStyle-mm0ijv{border-left-style:solid}
+.rn-borderTopWidth-13yce4e{border-top-width:0px}
+.rn-borderRightWidth-fnigne{border-right-width:0px}
+.rn-borderBottomWidth-ndvcnb{border-bottom-width:0px}
+.rn-borderLeftWidth-gxnn5r{border-left-width:0px}
+.rn-boxSizing-deolkf{box-sizing:border-box}
+.rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
+.rn-flexShrink-1qe8dj5{-webkit-flex-shrink:0;flex-shrink:0}
+.rn-flexBasis-1mlwlqe{-webkit-flex-basis:auto;flex-basis:auto}
+.rn-flexDirection-eqz5dr{-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
+.rn-marginTop-1mnahxq{margin-top:0px}
+.rn-marginRight-61z16t{margin-right:0px}
+.rn-marginBottom-p1pxzi{margin-bottom:0px}
+.rn-marginLeft-11wrixw{margin-left:0px}
+.rn-minHeight-ifefl9{min-height:0px}
+.rn-minWidth-bcqeeo{min-width:0px}
+.rn-paddingTop-wk8lta{padding-top:0px}
+.rn-paddingRight-9aemit{padding-right:0px}
+.rn-paddingBottom-1mdbw0j{padding-bottom:0px}
+.rn-paddingLeft-gy4na3{padding-left:0px}
+.rn-zIndex-1lgpqti{z-index:0}
+.rn-zIndex-1wyyakw{z-index:-1}
 </style>"
 `;

src/apis/AppRegistry/index.js

@@ -8,18 +8,18 @@
 
 import { Component } from 'react';
 import invariant from 'fbjs/lib/invariant';
-import { unmountComponentAtNode } from 'react-dom/lib/ReactMount';
+import { unmountComponentAtNode } from 'react-dom';
 import renderApplication, { getApplication } from './renderApplication';
 
 const emptyObject = {};
 const runnables = {};
 
-type ComponentProvider = () => Component<any, any, any>
+type ComponentProvider = () => Component<any, any, any>;
 
 type AppConfig = {
-  appKey: string;
-  component?: ComponentProvider;
-  run?: Function;
+  appKey: string,
+  component?: ComponentProvider,
+  run?: Function
 };
 
 /**
@@ -34,7 +34,7 @@ class AppRegistry {
     invariant(
       runnables[appKey] && runnables[appKey].getApplication,
       `Application ${appKey} has not been registered. ` +
-      'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
+        'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
     );
 
     return runnables[appKey].getApplication(appParameters);
@@ -42,8 +42,10 @@ class AppRegistry {
 
   static registerComponent(appKey: string, getComponentFunc: ComponentProvider): string {
     runnables[appKey] = {
-      getApplication: ({ initialProps } = emptyObject) => getApplication(getComponentFunc(), initialProps),
-      run: ({ initialProps = emptyObject, rootTag }) => renderApplication(getComponentFunc(), initialProps, rootTag)
+      getApplication: ({ initialProps } = emptyObject) =>
+        getApplication(getComponentFunc(), initialProps),
+      run: ({ initialProps = emptyObject, rootTag }) =>
+        renderApplication(getComponentFunc(), initialProps, rootTag)
     };
     return appKey;
   }
@@ -72,14 +74,14 @@ class AppRegistry {
 
     console.log(
       `Running application "${appKey}" with appParams: ${JSON.stringify(params)}. ` +
-      `development-level warnings are ${isDevelopment ? 'ON' : 'OFF'}, ` +
-      `performance optimizations are ${isDevelopment ? 'OFF' : 'ON'}`
+        `development-level warnings are ${isDevelopment ? 'ON' : 'OFF'}, ` +
+        `performance optimizations are ${isDevelopment ? 'OFF' : 'ON'}`
     );
 
     invariant(
       runnables[appKey] && runnables[appKey].run,
       `Application "${appKey}" has not been registered. ` +
-      'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
+        'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
     );
 
     runnables[appKey].run(appParameters);

src/apis/AppRegistry/renderApplication.js

@@ -7,31 +7,26 @@
  */
 
 import invariant from 'fbjs/lib/invariant';
-import { render } from 'react-dom/lib/ReactMount';
+import { render } from 'react-dom';
 import ReactNativeApp from './ReactNativeApp';
 import StyleSheet from '../../apis/StyleSheet';
 import React, { Component } from 'react';
 
-export default function renderApplication(RootComponent: Component, initialProps: Object, rootTag: any) {
+export default function renderApplication(
+  RootComponent: Component,
+  initialProps: Object,
+  rootTag: any
+) {
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
   const component = (
-    <ReactNativeApp
-      initialProps={initialProps}
-      rootComponent={RootComponent}
-      rootTag={rootTag}
-    />
+    <ReactNativeApp initialProps={initialProps} rootComponent={RootComponent} rootTag={rootTag} />
   );
   render(component, rootTag);
 }
 
 export function getApplication(RootComponent: Component, initialProps: Object): Object {
-  const element = (
-    <ReactNativeApp
-      initialProps={initialProps}
-      rootComponent={RootComponent}
-    />
-  );
+  const element = <ReactNativeApp initialProps={initialProps} rootComponent={RootComponent} />;
   const stylesheet = StyleSheet.renderToString();
   return { element, stylesheet };
 }

src/apis/AppState/__tests__/index-test.js

@@ -6,7 +6,9 @@ describe('apis/AppState', () => {
   const handler = () => {};
 
   afterEach(() => {
-    try { AppState.removeEventListener('change', handler); } catch (e) {}
+    try {
+      AppState.removeEventListener('change', handler);
+    } catch (e) {}
   });
 
   describe('addEventListener', () => {

src/apis/AppState/index.js

@@ -2,7 +2,7 @@ import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 import findIndex from 'array-find-index';
 import invariant from 'fbjs/lib/invariant';
 
-const EVENT_TYPES = [ 'change' ];
+const EVENT_TYPES = ['change'];
 const VISIBILITY_CHANGE_EVENT = 'visibilitychange';
 
 const AppStates = {
@@ -13,10 +13,10 @@ const AppStates = {
 const listeners = [];
 
 class AppState {
-  static isSupported = ExecutionEnvironment.canUseDOM && document.visibilityState
+  static isAvailable = ExecutionEnvironment.canUseDOM && document.visibilityState;
 
   static get currentState() {
-    if (!AppState.isSupported) {
+    if (!AppState.isAvailable) {
       return AppState.ACTIVE;
     }
 
@@ -31,19 +31,30 @@ class AppState {
   }
 
   static addEventListener(type: string, handler: Function) {
-    if (AppState.isSupported) {
-      invariant(EVENT_TYPES.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+    if (AppState.isAvailable) {
+      invariant(
+        EVENT_TYPES.indexOf(type) !== -1,
+        'Trying to subscribe to unknown event: "%s"',
+        type
+      );
       const callback = () => handler(AppState.currentState);
-      listeners.push([ handler, callback ]);
+      listeners.push([handler, callback]);
       document.addEventListener(VISIBILITY_CHANGE_EVENT, callback, false);
     }
   }
 
   static removeEventListener(type: string, handler: Function) {
-    if (AppState.isSupported) {
-      invariant(EVENT_TYPES.indexOf(type) !== -1, 'Trying to remove listener for unknown event: "%s"', type);
-      const listenerIndex = findIndex(listeners, (pair) => pair[0] === handler);
-      invariant(listenerIndex !== -1, 'Trying to remove AppState listener for unregistered handler');
+    if (AppState.isAvailable) {
+      invariant(
+        EVENT_TYPES.indexOf(type) !== -1,
+        'Trying to remove listener for unknown event: "%s"',
+        type
+      );
+      const listenerIndex = findIndex(listeners, pair => pair[0] === handler);
+      invariant(
+        listenerIndex !== -1,
+        'Trying to remove AppState listener for unregistered handler'
+      );
       const callback = listeners[listenerIndex][1];
       document.removeEventListener(VISIBILITY_CHANGE_EVENT, callback, false);
       listeners.splice(listenerIndex, 1);

src/apis/AsyncStorage/__tests__/__snapshots__/index-test.js.snap

@@ -1,4 +1,6 @@
-exports[`apis/AsyncStorage mergeLocalStorageItem should have same behavior as react-native 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apis/AsyncStorage mergeItem calls callback after setting item 1`] = `
 Object {
   "age": 31,
   "name": "Chris",
@@ -9,3 +11,63 @@ Object {
   },
 }
 `;
+
+exports[`apis/AsyncStorage mergeItem promise after setting item 1`] = `
+Object {
+  "age": 31,
+  "name": "Chris",
+  "traits": Object {
+    "eyes": "blue",
+    "hair": "brown",
+    "shoe_size": 10,
+  },
+}
+`;
+
+exports[`apis/AsyncStorage multiMerge calls callback after setting items 1`] = `
+Object {
+  "age": 31,
+  "name": "Chris",
+  "traits": Object {
+    "eyes": "blue",
+    "hair": "brown",
+    "shoe_size": 10,
+  },
+}
+`;
+
+exports[`apis/AsyncStorage multiMerge calls callback after setting items 2`] = `
+Object {
+  "age": 31,
+  "name": "Amy",
+  "traits": Object {
+    "eyes": "blue",
+    "hair": "black",
+    "shoe_size": 10,
+  },
+}
+`;
+
+exports[`apis/AsyncStorage multiMerge promise after setting items 1`] = `
+Object {
+  "age": 31,
+  "name": "Chris",
+  "traits": Object {
+    "eyes": "blue",
+    "hair": "brown",
+    "shoe_size": 10,
+  },
+}
+`;
+
+exports[`apis/AsyncStorage multiMerge promise after setting items 2`] = `
+Object {
+  "age": 31,
+  "name": "Amy",
+  "traits": Object {
+    "eyes": "blue",
+    "hair": "black",
+    "shoe_size": 10,
+  },
+}
+`;

src/apis/AsyncStorage/__tests__/index-test.js

@@ -1,72 +1,273 @@
 /* eslint-env jasmine, jest */
 import AsyncStorage from '..';
 
-const waterfall = (fns, cb) => {
-  const _waterfall = (...args) => {
-    const fn = (fns || []).shift();
-    if (typeof fn === 'function') {
-      fn(...args, (err, ...nextArgs) => {
-        if (err) {
-          return cb(err);
-        } else {
-          return _waterfall(...nextArgs);
-        }
-      });
-    } else {
-      cb(null, ...args);
-    }
-  };
-  _waterfall();
-};
+const originalLocalStorage = window.localStorage;
 
-const obj = {};
+let obj = {};
 const mockLocalStorage = {
+  length: 0,
+  clear() {
+    obj = {};
+    mockLocalStorage.length = 0;
+  },
   getItem(key) {
     return obj[key];
   },
+  key(index) {
+    return Object.keys(obj)[index];
+  },
+  removeItem(key) {
+    delete obj[key];
+    mockLocalStorage.length -= 1;
+  },
   setItem(key, value) {
     obj[key] = value;
+    mockLocalStorage.length += 1;
   }
 };
-const originalLocalStorage = window.localStorage;
+
+const uid123Object = {
+  name: 'Chris',
+  age: 30,
+  traits: { hair: 'brown', eyes: 'green' }
+};
+const uid123Delta = {
+  age: 31,
+  traits: { eyes: 'blue', shoe_size: 10 }
+};
+const uid124Object = {
+  name: 'Amy',
+  age: 28,
+  traits: { hair: 'black', eyes: 'brown' }
+};
 
 describe('apis/AsyncStorage', () => {
-  describe('mergeLocalStorageItem', () => {
-    test('should have same behavior as react-native', (done) => {
-      window.localStorage = mockLocalStorage;
-      // https://facebook.github.io/react-native/docs/asyncstorage.html
-      const UID123_object = {
-        name: 'Chris',
-        age: 30,
-        traits: { hair: 'brown', eyes: 'brown' }
-      };
-      const UID123_delta = {
-        age: 31,
-        traits: { eyes: 'blue', shoe_size: 10 }
-      };
+  beforeEach(() => {
+    mockLocalStorage.setItem('UID123', JSON.stringify(uid123Object));
+    mockLocalStorage.setItem('UID124', JSON.stringify(uid124Object));
+    window.localStorage = mockLocalStorage;
+  });
 
-      waterfall([
-        (cb) => {
-          AsyncStorage.setItem('UID123', JSON.stringify(UID123_object))
-            .then(() => cb(null))
-            .catch(cb);
-        },
-        (cb) => {
-          AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta))
-            .then(() => cb(null))
-            .catch(cb);
-        },
-        (cb) => {
-          AsyncStorage.getItem('UID123')
-            .then((result) => {
-              cb(null, JSON.parse(result));
-            })
-            .catch(cb);
-        }
-      ], (err, result) => {
+  afterEach(() => {
+    mockLocalStorage.clear();
+    window.localStorage = originalLocalStorage;
+  });
+
+  describe('clear', () => {
+    const assertResult = () => {
+      expect(mockLocalStorage.length).toEqual(0);
+    };
+
+    test('promise of erased keys', () => {
+      expect(mockLocalStorage.length).toEqual(2);
+      return AsyncStorage.clear().then(() => {
+        assertResult();
+      });
+    });
+
+    test('calls callback after erasing keys', done => {
+      expect(mockLocalStorage.length).toEqual(2);
+      AsyncStorage.clear(err => {
         expect(err).toEqual(null);
-        expect(result).toMatchSnapshot();
-        window.localStorage = originalLocalStorage;
+        assertResult();
+        done();
+      });
+    });
+  });
+
+  describe('getAllKeys', () => {
+    const assertResult = result => {
+      expect(result).toEqual(['UID123', 'UID124']);
+    };
+
+    test('promise of keys', () => {
+      return AsyncStorage.getAllKeys().then(result => {
+        assertResult(result);
+      });
+    });
+
+    test('calls callback with keys', done => {
+      AsyncStorage.getAllKeys((err, result) => {
+        expect(err).toEqual(null);
+        assertResult(result);
+        done();
+      });
+    });
+  });
+
+  describe('getItem', () => {
+    const assertResult = result => {
+      expect(result).toEqual(JSON.stringify(uid123Object));
+    };
+
+    test('promise of item', () => {
+      return AsyncStorage.getItem('UID123').then(result => {
+        assertResult(result);
+      });
+    });
+
+    test('calls callback with item', done => {
+      AsyncStorage.getItem('UID123', (err, result) => {
+        expect(err).toEqual(null);
+        assertResult(result);
+        done();
+      });
+    });
+  });
+
+  describe('multiGet', () => {
+    const assertResult = result => {
+      expect(result).toEqual([
+        ['UID123', JSON.stringify(uid123Object)],
+        ['UID124', JSON.stringify(uid124Object)]
+      ]);
+    };
+
+    test('promise of items', () => {
+      return AsyncStorage.multiGet(['UID123', 'UID124']).then(result => {
+        assertResult(result);
+      });
+    });
+
+    test('calls callback with items', done => {
+      AsyncStorage.multiGet(['UID123', 'UID124'], (err, result) => {
+        expect(err).toEqual(null);
+        assertResult(result);
+        done();
+      });
+    });
+  });
+
+  describe('setItem', () => {
+    const assertResult = () => {
+      expect(mockLocalStorage.getItem('UID123')).toEqual(JSON.stringify(uid123Object));
+    };
+
+    test('promise after setting item', () => {
+      return AsyncStorage.setItem('UID123', JSON.stringify(uid123Object)).then(() => {
+        assertResult();
+      });
+    });
+
+    test('calls callback after setting item', done => {
+      AsyncStorage.setItem('UID123', JSON.stringify(uid123Object), (err, result) => {
+        expect(err).toEqual(null);
+        assertResult();
+        done();
+      });
+    });
+  });
+
+  describe('multiSet', () => {
+    const assertResult = result => {
+      expect(mockLocalStorage.getItem('UID123')).toEqual(JSON.stringify(uid123Object));
+      expect(mockLocalStorage.getItem('UID124')).toEqual(JSON.stringify(uid124Object));
+    };
+
+    test('promise after setting items', () => {
+      return AsyncStorage.multiSet([
+        ['UID123', JSON.stringify(uid123Object)],
+        ['UID124', JSON.stringify(uid124Object)]
+      ]).then(() => {
+        assertResult();
+      });
+    });
+
+    test('calls callback after setting items', done => {
+      AsyncStorage.multiSet(
+        [['UID123', JSON.stringify(uid123Object)], ['UID124', JSON.stringify(uid124Object)]],
+        (err, result) => {
+          expect(err).toEqual(null);
+          assertResult();
+          done();
+        }
+      );
+    });
+  });
+
+  describe('mergeItem', () => {
+    const assertResult = () => {
+      expect(JSON.parse(mockLocalStorage.getItem('UID123'))).toMatchSnapshot();
+    };
+
+    test('promise after setting item', () => {
+      return AsyncStorage.mergeItem('UID123', JSON.stringify(uid123Delta)).then(() => {
+        assertResult();
+      });
+    });
+
+    test('calls callback after setting item', done => {
+      AsyncStorage.mergeItem('UID123', JSON.stringify(uid123Delta), (err, result) => {
+        expect(err).toEqual(null);
+        assertResult();
+        done();
+      });
+    });
+  });
+
+  describe('multiMerge', () => {
+    const assertResult = result => {
+      expect(JSON.parse(mockLocalStorage.getItem('UID123'))).toMatchSnapshot();
+      expect(JSON.parse(mockLocalStorage.getItem('UID124'))).toMatchSnapshot();
+    };
+
+    test('promise after setting items', () => {
+      return AsyncStorage.multiMerge([
+        ['UID123', JSON.stringify(uid123Delta)],
+        ['UID124', JSON.stringify(uid123Delta)]
+      ]).then(() => {
+        assertResult();
+      });
+    });
+
+    test('calls callback after setting items', done => {
+      AsyncStorage.multiMerge(
+        [['UID123', JSON.stringify(uid123Delta)], ['UID124', JSON.stringify(uid123Delta)]],
+        (err, result) => {
+          expect(err).toEqual(null);
+          assertResult();
+          done();
+        }
+      );
+    });
+  });
+
+  describe('removeItem', () => {
+    const assertResult = () => {
+      expect(mockLocalStorage.getItem('UID123')).toBeUndefined();
+    };
+
+    test('promise after setting item', () => {
+      return AsyncStorage.removeItem('UID123').then(() => {
+        assertResult();
+      });
+    });
+
+    test('calls callback after setting item', done => {
+      AsyncStorage.removeItem('UID123', (err, result) => {
+        expect(err).toEqual(null);
+        assertResult();
+        done();
+      });
+    });
+  });
+
+  describe('multiRemove', () => {
+    const assertResult = result => {
+      expect(mockLocalStorage.getItem('UID123')).toBeUndefined();
+      expect(mockLocalStorage.getItem('UID124')).toBeUndefined();
+    };
+
+    test('promise after setting items', () => {
+      return AsyncStorage.multiRemove(['UID123', 'UID124']).then(() => {
+        assertResult();
+      });
+    });
+
+    test('calls callback after setting items', done => {
+      AsyncStorage.multiRemove(['UID123', 'UID124'], (err, result) => {
+        expect(err).toEqual(null);
+        assertResult();
         done();
       });
     });

src/apis/AsyncStorage/index.js

@@ -13,66 +13,69 @@ const mergeLocalStorageItem = (key, value) => {
   window.localStorage.setItem(key, nextValue);
 };
 
+const createPromise = (getValue, callback) => {
+  return new Promise((resolve, reject) => {
+    try {
+      const value = getValue();
+      if (callback) {
+        callback(null, value);
+      }
+      resolve(value);
+    } catch (err) {
+      if (callback) {
+        callback(err);
+      }
+      reject(err);
+    }
+  });
+};
+
+const createPromiseAll = (promises, callback, processResult) => {
+  return Promise.all(promises).then(
+    result => {
+      const value = processResult ? processResult(result) : null;
+      callback && callback(null, value);
+      return Promise.resolve(value);
+    },
+    errors => {
+      callback && callback(errors);
+      return Promise.reject(errors);
+    }
+  );
+};
+
 class AsyncStorage {
   /**
    * Erases *all* AsyncStorage for the domain.
    */
-  static clear() {
-    return new Promise((resolve, reject) => {
-      try {
-        window.localStorage.clear();
-        resolve(null);
-      } catch (err) {
-        reject(err);
-      }
-    });
+  static clear(callback) {
+    return createPromise(() => {
+      window.localStorage.clear();
+    }, callback);
   }
 
   /**
    * Gets *all* keys known to the app, for all callers, libraries, etc.
    */
-  static getAllKeys() {
-    return new Promise((resolve, reject) => {
-      try {
-        const numberOfKeys = window.localStorage.length;
-        const keys = [];
-        for (let i = 0; i < numberOfKeys; i += 1) {
-          const key = window.localStorage.key(i);
-          keys.push(key);
-        }
-        resolve(keys);
-      } catch (err) {
-        reject(err);
+  static getAllKeys(callback) {
+    return createPromise(() => {
+      const numberOfKeys = window.localStorage.length;
+      const keys = [];
+      for (let i = 0; i < numberOfKeys; i += 1) {
+        const key = window.localStorage.key(i);
+        keys.push(key);
       }
-    });
+      return keys;
+    }, callback);
   }
 
   /**
    * Fetches `key` value.
    */
-  static getItem(key: string) {
-    return new Promise((resolve, reject) => {
-      try {
-        const value = window.localStorage.getItem(key);
-        resolve(value);
-      } catch (err) {
-        reject(err);
-      }
-    });
-  }
-
-  /**
-   * Merges existing value with input value, assuming they are stringified JSON.
-   */
-  static mergeItem(key: string, value: string) {
-    return new Promise((resolve, reject) => {
-      try {
-        mergeLocalStorageItem(key, value);
-        resolve(null);
-      } catch (err) {
-        reject(err);
-      }
-    });
+  static getItem(key: string, callback) {
+    return createPromise(() => {
+      return window.localStorage.getItem(key);
+    }, callback);
   }
 
   /**
@@ -81,13 +84,37 @@ class AsyncStorage {
    *
    *   multiGet(['k1', 'k2']) -> [['k1', 'val1'], ['k2', 'val2']]
    */
-  static multiGet(keys: Array<string>) {
-    const promises = keys.map((key) => AsyncStorage.getItem(key));
+  static multiGet(keys: Array<string>, callback) {
+    const promises = keys.map(key => AsyncStorage.getItem(key));
+    const processResult = result => result.map((value, i) => [keys[i], value]);
+    return createPromiseAll(promises, callback, processResult);
+  }
 
-    return Promise.all(promises).then(
-      (result) => Promise.resolve(result.map((value, i) => [ keys[i], value ])),
-      (error) => Promise.reject(error)
-    );
+  /**
+   * Sets `value` for `key`.
+   */
+  static setItem(key: string, value: string, callback) {
+    return createPromise(() => {
+      window.localStorage.setItem(key, value);
+    }, callback);
+  }
+
+  /**
+   * Takes an array of key-value array pairs.
+   *   multiSet([['k1', 'val1'], ['k2', 'val2']])
+   */
+  static multiSet(keyValuePairs: Array<Array<string>>, callback) {
+    const promises = keyValuePairs.map(item => AsyncStorage.setItem(item[0], item[1]));
+    return createPromiseAll(promises, callback);
+  }
+
+  /**
+   * Merges existing value with input value, assuming they are stringified JSON.
+   */
+  static mergeItem(key: string, value: string, callback) {
+    return createPromise(() => {
+      mergeLocalStorageItem(key, value);
+    }, callback);
   }
 
   /**
@@ -96,66 +123,26 @@ class AsyncStorage {
    *
    *   multiMerge([['k1', 'val1'], ['k2', 'val2']])
    */
-  static multiMerge(keyValuePairs: Array<Array<string>>) {
-    const promises = keyValuePairs.map((item) => AsyncStorage.mergeItem(item[0], item[1]));
-
-    return Promise.all(promises).then(
-      () => Promise.resolve(null),
-      (error) => Promise.reject(error)
-    );
-  }
-
-  /**
-   * Delete all the keys in the `keys` array.
-   */
-  static multiRemove(keys: Array<string>) {
-    const promises = keys.map((key) => AsyncStorage.removeItem(key));
-
-    return Promise.all(promises).then(
-      () => Promise.resolve(null),
-      (error) => Promise.reject(error)
-    );
-  }
-
-  /**
-   * Takes an array of key-value array pairs.
-   *   multiSet([['k1', 'val1'], ['k2', 'val2']])
-   */
-  static multiSet(keyValuePairs: Array<Array<string>>) {
-    const promises = keyValuePairs.map((item) => AsyncStorage.setItem(item[0], item[1]));
-
-    return Promise.all(promises).then(
-      () => Promise.resolve(null),
-      (error) => Promise.reject(error)
-    );
+  static multiMerge(keyValuePairs: Array<Array<string>>, callback) {
+    const promises = keyValuePairs.map(item => AsyncStorage.mergeItem(item[0], item[1]));
+    return createPromiseAll(promises, callback);
   }
 
   /**
    * Removes a `key`
    */
-  static removeItem(key: string) {
-    return new Promise((resolve, reject) => {
-      try {
-        window.localStorage.removeItem(key);
-        resolve(null);
-      } catch (err) {
-        reject(err);
-      }
-    });
+  static removeItem(key: string, callback) {
+    return createPromise(() => {
+      return window.localStorage.removeItem(key);
+    }, callback);
   }
 
   /**
-   * Sets `value` for `key`.
+   * Delete all the keys in the `keys` array.
    */
-  static setItem(key: string, value: string) {
-    return new Promise((resolve, reject) => {
-      try {
-        window.localStorage.setItem(key, value);
-        resolve(null);
-      } catch (err) {
-        reject(err);
-      }
-    });
+  static multiRemove(keys: Array<string>, callback) {
+    const promises = keys.map(key => AsyncStorage.removeItem(key));
+    return createPromiseAll(promises, callback);
   }
 }
 

src/apis/Clipboard/index.js

@@ -1,19 +1,43 @@
+/* global window */
+
 class Clipboard {
+  static isSupported() {
+    return (
+      typeof document.queryCommandSupported === 'function' && document.queryCommandSupported('copy')
+    );
+  }
+
   static getString() {
     return Promise.resolve('');
   }
 
   static setString(text) {
     let success = false;
-    const textField = document.createElement('textarea');
-    textField.innerText = text;
-    document.body.appendChild(textField);
-    textField.select();
+
+    // add the text to a hidden node
+    const node = document.createElement('span');
+    node.textContent = text;
+    node.style.position = 'absolute';
+    node.style.opacity = '0';
+    document.body.appendChild(node);
+
+    // select the text
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    selection.addRange(range);
+
+    // attempt to copy
     try {
       document.execCommand('copy');
       success = true;
     } catch (e) {}
-    document.body.removeChild(textField);
+
+    // remove selection and node
+    selection.removeAllRanges();
+    document.body.removeChild(node);
+
     return success;
   }
 }