0.0.109

Ref #491

.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": [
-    "react-native"
-  ],
-  "plugins": [
-    [ "transform-react-remove-prop-types", { "mode": "wrap" } ]
-  ]
-}

.editorconfig

@@ -1,9 +0,0 @@
-# EditorConfig: http://editorconfig.org
-
-root = true
-
-[*]
-end_of_line = lf
-insert_final_newline = true
-indent_style = space
-indent_size = 2

.eslintrc

@@ -24,7 +24,16 @@
   "globals": {
     "document": false,
     "navigator": false,
-    "window": false
+    "window": false,
+    // Flow global types
+    "HTMLInputElement": false,
+    "ReactClass": false,
+    "ReactComponent": false,
+    "ReactElement": false,
+    "ReactPropsChainableTypeChecker": false,
+    "ReactPropsCheckType": false,
+    "ReactPropTypes": false,
+    "SyntheticEvent": false
   },
   "rules": {
     "camelcase": 0,
@@ -120,9 +129,6 @@
 
     // react
     "react/display-name": 0,
-    "react/jsx-handler-names": [2, {
-      "eventHandlerPrefix": "_handle"
-    }],
     "react/jsx-no-bind": 2,
     "react/jsx-no-duplicate-props": 2,
     "react/jsx-no-undef": 2,

.flowconfig

@@ -0,0 +1,14 @@
+[ignore]
+.*/__tests__/.*
+.*/benchmarks/.*
+.*/docs/.*
+.*/node_modules/animated/*
+.*/node_modules/babel-plugin-transform-react-remove-prop-types/*
+
+[include]
+
+[libs]
+types
+
+[options]
+unsafe.enable_getters_and_setters=true

.github/CONTRIBUTING.md

@@ -6,7 +6,7 @@ Before opening an issue, please search the [issue
 tracker](https://github.com/necolas/react-native-web/issues) to make sure your
 issue hasn't already been reported.
 
-## Development
+## Getting started
 
 Visit the [Issue tracker](https://github.com/necolas/react-native-web/issues)
 to find a list of open issues that need attention.
@@ -23,48 +23,79 @@ Install dependencies (requires [yarn](https://yarnpkg.com/en/docs/install):
 yarn
 ```
 
-Run the examples:
+## Automated tests
+
+To run flow:
 
 ```
-npm run examples
+yarn flow
 ```
 
-Run the benchmarks in a browser by opening `./performance/index.html` after running:
+To run the unit tests:
 
 ```
-npm run build:performance
+yarn jest
 ```
 
-### Building
+…in watch mode:
 
 ```
-npm run build
+yarn jest:watch
 ```
 
-To create a UMD build:
+To run all automated tests:
 
 ```
-npm run build:umd
+yarn test
 ```
 
-### Testing and Linting
+## Visual tests
 
-To run the tests:
+To run the interactive storybook:
 
 ```
-npm run test
+yarn docs:start
 ```
 
-To continuously watch and run tests, run the following:
+To generate a static build of the storybook:
 
 ```
-npm run test:watch
+yarn docs:build
 ```
 
-To perform only linting, run the following:
+To run the performance benchmarks in a browser (opening `./benchmarks/index.html`):
 
 ```
-npm run lint
+yarn benchmarks
+```
+
+## Compile and build
+
+To compile the source code to `dist`:
+
+```
+yarn compile
+```
+
+To create a UMD bundle of the library:
+
+```
+yarn build
+```
+
+### Pre-commit
+
+To format and lint code before commit:
+
+```
+yarn precommit
+```
+
+To format and lint the entire project:
+
+```
+yarn fmt
+yarn lint
 ```
 
 ### New Features
@@ -81,8 +112,10 @@ that we won't want to accept.
 * Make sure all tests pass and there are no linting errors.
 * Submit a pull request, referencing any issues it addresses.
 
-Please try to keep your pull request focused in scope and avoid including unrelated commits.
+Please try to keep your pull request focused in scope and avoid including
+unrelated commits.
 
-After you have submitted your pull request, we'll try to get back to you as soon as possible. We may suggest some changes or improvements.
+After you have submitted your pull request, we'll try to get back to you as
+soon as possible. We may suggest some changes or improvements.
 
 Thank you for contributing!

.gitignore

@@ -1,3 +1,2 @@
 node_modules
 dist
-dist-examples

.travis.yml

@@ -5,4 +5,5 @@ before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
 script:
+  - npm run lint
   - npm test

README.md

@@ -16,88 +16,38 @@ Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
 ## Overview
 
 "React Native for Web" is a project to bring React Native's building blocks and
-touch handling to the Web. [Read more](#why).
+touch handling to the Web.
 
-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](https://www.webpackbin.com/bins/-KgucwxRbn7HRU-V-3Bc).
+Browse the [UI Explorer](https://necolas.github.io/react-native-web/storybook/)
+to see React Native examples running on Web. Or try it out 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-dom@15.4 react-native-web
+npm install --save react@15.6 react-dom@15.6 react-native-web
 ```
 
-Read the [Getting Started](docs/guides/getting-started.md) guide.
+NOTE: React Native for Web supports React/ReactDOM 15.4, 15.5, or 15.6.
 
-Alternatively, you can quickly setup a local project
-using [create-react-app](https://github.com/facebookincubator/create-react-app)
-(which supports `react-native-web` out-of-the-box once installed) and
-[react-native-web-starter](https://github.com/grabcode/react-native-web-starter).
+Then read the [Getting Started](docs/guides/getting-started.md) guide.
 
 ## Documentation
 
+The [UI Explorer](https://necolas.github.io/react-native-web/storybook/)
+interactively documents all the APIs and Components.
+
 Guides:
 
 * [Getting started](docs/guides/getting-started.md)
+* [Style](docs/guides/style.md)
 * [Accessibility](docs/guides/accessibility.md)
 * [Direct manipulation](docs/guides/direct-manipulation.md)
 * [Internationalization](docs/guides/internationalization.md)
+* [Advanced use](docs/guides/advanced.md)
 * [Known issues](docs/guides/known-issues.md)
-* [Style](docs/guides/style.md)
-
-Exported modules:
-
-* Components
-  * [`ActivityIndicator`](docs/components/ActivityIndicator.md)
-  * [`Button`](docs/components/Button.md)
-  * [`Image`](docs/components/Image.md)
-  * [`ListView`](docs/components/ListView.md)
-  * [`ProgressBar`](docs/components/ProgressBar.md)
-  * [`ScrollView`](docs/components/ScrollView.md)
-  * [`Switch`](docs/components/Switch.md)
-  * [`Text`](docs/components/Text.md)
-  * [`TextInput`](docs/components/TextInput.md)
-  * [`TouchableHighlight`](http://facebook.github.io/react-native/releases/0.22/docs/touchablehighlight.html) (mirrors React Native)
-  * [`TouchableOpacity`](http://facebook.github.io/react-native/releases/0.22/docs/touchableopacity.html) (mirrors React Native)
-  * [`TouchableWithoutFeedback`](docs/components/TouchableWithoutFeedback.md)
-  * [`View`](docs/components/View.md)
-* APIs
-  * [`Animated`](http://facebook.github.io/react-native/releases/0.20/docs/animated.html) (mirrors React Native)
-  * [`AppRegistry`](docs/apis/AppRegistry.md)
-  * [`AppState`](docs/apis/AppState.md)
-  * [`AsyncStorage`](docs/apis/AsyncStorage.md)
-  * [`Clipboard`](docs/apis/Clipboard.md)
-  * [`Dimensions`](docs/apis/Dimensions.md)
-  * [`I18nManager`](docs/apis/I18nManager.md)
-  * [`NativeMethods`](docs/apis/NativeMethods.md)
-  * [`NetInfo`](docs/apis/NetInfo.md)
-  * [`PanResponder`](http://facebook.github.io/react-native/releases/0.20/docs/panresponder.html#content) (mirrors React Native)
-  * [`PixelRatio`](docs/apis/PixelRatio.md)
-  * [`Platform`](docs/apis/Platform.md)
-  * [`StyleSheet`](docs/apis/StyleSheet.md)
-  * [`Vibration`](docs/apis/Vibration.md)
-
-<span id="#why"></span>
-
-## Why?
-
-There are many different teams at Twitter building web applications with React.
-We want to share React components, libraries, and APIs between teams…much like
-the OSS community tries to do. At our scale, this involves dealing with
-multiple, inter-related problems including: a common way to handle style,
-animation, touch, viewport adaptation, accessibility, themes, RTL layout, and
-server-rendering.
-
-This is hard to do with React DOM, as the components are essentially the same
-low-level building blocks that the browser provides. However, React Native
-avoids, solves, or can solve almost all these problems facing Web teams.
-Central to this is React Native's JavaScript style API (not strictly
-"CSS-in-JS") which avoids the key [problems with
-CSS](https://speakerdeck.com/vjeux/react-css-in-js) by giving up some of the
-complexity of CSS.
 
 ## Example code
 
@@ -140,11 +90,13 @@ AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-ro
 
 ## Related projects
 
-* [react-native-web-starter](https://github.com/grabcode/react-native-web-starter)
+* [react-primitives](https://github.com/lelandrichardson/react-primitives/)
 * [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-web-starter](https://github.com/grabcode/react-native-web-starter)
 * [react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack)
+* [react-sketchapp](https://github.com/airbnb/react-sketchapp)
+* [react-web](https://github.com/taobaofed/react-web)
+* [reactxp](https://github.com/microsoft/reactxp)
 
 ## License
 

benchmarks/README.md

@@ -0,0 +1,47 @@
+# 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. For example, React Native for Web's stylesheet is
+unique in that it also converts React Native styles to DOM styles, has
+deterministic resolution, and supports RTL layout.
+
+`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`                         |  `94.96` `±31.01` | `200.43` `±38.90` | |
+| `react-native-web/stylesheet@0.0.107` |  `98.58` `±10.83` | `218.59` `±36.52` | |
+| `react-native-web@0.0.107`            | `117.45` `±18.76` | `288.27` `±33.50` | `15.10` `±5.45ms` |
+
+Other libraries
+
+| Implementation                       | Deep tree (ms)    | Wide tree (ms)    |
+| :--- | ---: | ---: |
+| `styletron@2.5.1`                    |  `90.38` `±15.15` | `197.40` `±29.02` |
+| `aphrodite@1.2.0`                    |  `88.65` `±19.62` | `187.35` `±24.60` |
+| `glamor@3.0.0-1`                     | `145.64` `±21.93` | `283.60` `±23.26` |
+| `react-jss@5.4.1`                    | `143.17` `±19.14` | `361.80` `±33.39` |
+| `reactxp@0.34.3`                     | `227.18` `±28.75` | `496.08` `±59.96` |
+| `styled-components@2.1.0`            | `262.85` `±46.12` | `578.43` `±35.86` |
+| `styled-components/primitives@2.1.0` | `261.43` `±44.14` | `569.65` `±22.19` |
+
+These results indicate that render performance is not a significant
+differentiating factor between `aphrodite`, `styletron`, and
+`react-native-web/stylesheet`.
+
+*MacBook Pro (13-inch, Early 2015); 3.1 GHz Intel Core i7; 16 GB 1867 MHz DDR3. Google Chrome 58 (2x CPU slowdown).

benchmarks/index.js

@@ -5,6 +5,7 @@ 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 styledComponentsPrimitives from './src/styled-components-primitives';
 import styletron from './src/styletron';
 import xp from './src/reactxp';
 
@@ -40,7 +41,9 @@ const extraTests = [
   () => renderDeepTree('reactxp', xp),
   () => renderWideTree('reactxp', xp),
   () => renderDeepTree('styled-components', styledComponents),
-  () => renderWideTree('styled-components', styledComponents)
+  () => renderWideTree('styled-components', styledComponents),
+  () => renderDeepTree('styled-components/primitives', styledComponentsPrimitives),
+  () => renderWideTree('styled-components/primitives', styledComponentsPrimitives)
 ];
 
 const tests = testAll ? coreTests.concat(extraTests) : coreTests;

benchmarks/package.json

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

benchmarks/src/components/Box/aphrodite.js

@@ -3,7 +3,7 @@ import React from 'react';
 import View from '../View/aphrodite';
 import { StyleSheet } from 'aphrodite';
 
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
   <View
     {...other}
     style={[
@@ -12,8 +12,7 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
       layout === 'row' && styles.row,
       outer && styles.outer
     ]}
-  />
-);
+  />;
 
 const styles = StyleSheet.create({
   outer: {

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

@@ -4,7 +4,7 @@ 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 }) => (
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
   <View
     {...other}
     className={classnames(styles[`color${color}`], {
@@ -12,7 +12,6 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
       [styles.outer]: outer,
       [styles.row]: layout === 'row'
     })}
-  />
-);
+  />;
 
 module.exports = Box;

benchmarks/src/components/Box/glamor.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import View from '../View/glamor';
 
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
   <View
     {...other}
     style={[
@@ -11,8 +11,7 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
       layout === 'row' && styles.row,
       outer && styles.outer
     ]}
-  />
-);
+  />;
 
 const styles = {
   outer: {

benchmarks/src/components/Box/jss.js

@@ -4,7 +4,7 @@ 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 }) => (
+const Box = ({ classes, color, fixed = false, layout = 'column', outer = false, ...other }) =>
   <View
     {...other}
     className={classnames({
@@ -13,8 +13,7 @@ const Box = ({ classes, color, fixed = false, layout = 'column', outer = false,
       [classes.row]: layout === 'row',
       [classes.outer]: outer
     })}
-  />
-);
+  />;
 
 const styles = {
   outer: {

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

@@ -3,7 +3,7 @@ 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 }) => (
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
   <View
     {...other}
     style={[
@@ -12,8 +12,7 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
       layout === 'row' && styles.row,
       outer && styles.outer
     ]}
-  />
-);
+  />;
 
 const styles = StyleSheet.create({
   outer: {

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

@@ -2,7 +2,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
   <View
     {...other}
     style={[
@@ -11,8 +11,7 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
       layout === 'row' && styles.row,
       outer && styles.outer
     ]}
-  />
-);
+  />;
 
 const styles = StyleSheet.create({
   outer: {

benchmarks/src/components/Box/reactxp.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { Styles, View } from 'reactxp';
 
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
   <View
     {...other}
     style={[
@@ -11,8 +11,7 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
       layout === 'row' && styles.row,
       outer && styles.outer
     ]}
-  />
-);
+  />;
 
 const styles = {
   outer: Styles.createViewStyle({

benchmarks/src/components/Box/styled-components-primitives.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components/primitives';
+
+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;

benchmarks/src/components/Box/styletron.js

@@ -3,7 +3,7 @@ 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 }) => (
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
   <View
     {...other}
     style={[
@@ -12,8 +12,7 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
       layout === 'row' && styles.row,
       outer && styles.outer
     ]}
-  />
-);
+  />;
 
 const styles = {
   outer: injectStylePrefixed(styletron, {

benchmarks/src/components/NestedTree/index.js

@@ -17,7 +17,7 @@ class DeepTree extends Component {
       <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) => (
+          Array.from({ length: breadth }).map((el, i) =>
             <DeepTree
               breadth={breadth}
               components={components}
@@ -26,7 +26,7 @@ class DeepTree extends Component {
               key={i}
               wrap={wrap}
             />
-          ))}
+          )}
       </Box>
     );
     for (let i = 0; i < wrap; i++) {

benchmarks/src/components/TweetActionsBar/index.js

@@ -24,7 +24,7 @@ export default class TweetActionsBar extends PureComponent {
     /* eslint-disable react/jsx-handler-names */
     return (
       <View style={[styles.root, style]}>
-        {actions.map((action, i) => (
+        {actions.map((action, i) =>
           <TweetAction
             accessibilityLabel={actions.label}
             count={action.count}
@@ -34,7 +34,7 @@ export default class TweetActionsBar extends PureComponent {
             onPress={action.onPress}
             style={styles.action}
           />
-        ))}
+        )}
       </View>
     );
   }

benchmarks/src/components/TweetText/index.js

@@ -17,9 +17,9 @@ class TweetText extends React.Component {
 
     return (
       <AppText {...other} lang={lang} numberOfLines={numberOfLines}>
-        {textParts.map((part, i) => (
+        {textParts.map((part, i) =>
           <TweetTextPart displayMode={displayMode} key={i} part={part} />
-        ))}
+        )}
       </AppText>
     );
   }

benchmarks/src/components/TweetTextPart/index.js

@@ -5,14 +5,13 @@ import theme from '../theme';
 
 const createTextEntity = ({ part }) => <Text>{`${part.prefix}${part.text}`}</Text>;
 
-const createTwemojiEntity = ({ part }) => (
+const createTwemojiEntity = ({ part }) =>
   <Image
     accessibilityLabel={part.text}
     draggable={false}
     source={{ uri: part.emoji }}
     style={styles.twemoji}
-  />
-);
+  />;
 
 // @mention, #hashtag, $cashtag
 const createSymbolEntity = ({ displayMode, part }) => {

benchmarks/src/components/View/aphrodite.js

@@ -2,7 +2,12 @@
 import React from 'react';
 import { css, StyleSheet } from 'aphrodite';
 
-const View = ({ style, ...other }) => <div {...other} className={css(styles.root, style)} />;
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    return <div {...other} className={css(styles.root, style)} />;
+  }
+}
 
 const styles = StyleSheet.create({
   root: {

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

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

benchmarks/src/components/View/glamor.js

@@ -2,7 +2,12 @@
 import { css } from 'glamor';
 import React from 'react';
 
-const View = ({ style, ...other }) => <div {...other} className={css(viewStyle, ...style)} />;
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    return <div {...other} className={css(viewStyle, ...style)} />;
+  }
+}
 
 const viewStyle = {
   alignItems: 'stretch',

benchmarks/src/components/View/jss.js

@@ -3,9 +3,12 @@ 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)} />
-);
+class View extends React.Component {
+  render() {
+    const { classes, className, ...other } = this.props;
+    return <div {...other} className={classnames(classes.root, className)} />;
+  }
+}
 
 const styles = {
   root: {

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

@@ -2,11 +2,16 @@
 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 emptyObject = {};
+
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    const styleProps = registry.resolve([styles.root, style]) || emptyObject;
+    return <div {...other} {...styleProps} />;
+  }
+}
 
 const styles = StyleSheet.create({
   root: {

benchmarks/src/components/View/styletron.js

@@ -6,9 +6,12 @@ import React from 'react';
 
 export const styletron = new Styletron();
 
-const View = ({ style, ...other }) => (
-  <div {...other} className={classnames(viewStyle, ...style)} />
-);
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    return <div {...other} className={classnames(viewStyle, ...style)} />;
+  }
+}
 
 const viewStyle = injectStylePrefixed(styletron, {
   alignItems: 'stretch',

benchmarks/src/components/theme.js

@@ -25,8 +25,9 @@ const fontSize = {
 
 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
+  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,

benchmarks/src/styled-components-primitives.js

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

benchmarks/yarn.lock

@@ -2,10 +2,33 @@
 # yarn lockfile v1
 
 
+ajv@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.0.tgz#c1735024c5da2ef75cc190713073d44f098bf486"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^0.1.0"
+    json-schema-traverse "^0.3.0"
+    json-stable-stringify "^1.0.1"
+
 alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
 
+animated@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/animated/-/animated-0.1.5.tgz#83df8dc443d57abab7b0bb04818b0b655b31c9b9"
+  dependencies:
+    invariant "^2.2.0"
+    normalize-css-color "^1.0.1"
+
+animated@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/animated/-/animated-0.2.0.tgz#1a0e96f097b3fbc5b64d7eddc723bcc0a6f97633"
+  dependencies:
+    invariant "^2.2.0"
+    normalize-css-color "^1.0.1"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -14,9 +37,9 @@ ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
 
-aphrodite@^1.2.0:
-  version "1.2.0"
-  resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/aphrodite/-/aphrodite-1.2.0.tgz#c2f30bd1cdf6a550f4a29a0f1cf22ed10e825764"
+aphrodite@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-1.2.1.tgz#a7b5066b198730be7b7a88f78dbefd77d4df5683"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^3.0.1"
@@ -28,7 +51,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-asap@^2.0.3, asap@~2.0.3:
+array-find-index@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+asap@^2.0.3, asap@^2.0.5, asap@~2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
 
@@ -57,7 +84,7 @@ babel-code-frame@^6.11.0:
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-babel-runtime@^6.18.0:
+babel-runtime@^6.18.0, babel-runtime@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
   dependencies:
@@ -131,6 +158,10 @@ clone@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
 
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
 coa@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
@@ -181,6 +212,14 @@ core-js@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
 
+create-react-class@^15.6.0:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 css-color-keywords@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
@@ -195,13 +234,14 @@ css-in-js-utils@^1.0.3:
   dependencies:
     hyphenate-style-name "^1.0.2"
 
-css-loader@^0.28.0:
-  version "0.28.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.0.tgz#417cfa9789f8cde59a30ccbf3e4da7a806889bad"
+css-loader@^0.28.4:
+  version "0.28.4"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
   dependencies:
     babel-code-frame "^6.11.0"
     css-selector-tokenizer "^0.7.0"
     cssnano ">=2.6.1 <4"
+    icss-utils "^2.1.0"
     loader-utils "^1.0.2"
     lodash.camelcase "^4.3.0"
     object-assign "^4.0.1"
@@ -210,6 +250,7 @@ css-loader@^0.28.0:
     postcss-modules-local-by-default "^1.0.1"
     postcss-modules-scope "^1.0.0"
     postcss-modules-values "^1.1.0"
+    postcss-value-parser "^3.3.0"
     source-list-map "^0.1.7"
 
 css-selector-tokenizer@^0.6.0:
@@ -290,14 +331,28 @@ csso@~2.3.1:
     clap "^1.0.9"
     source-map "^0.5.3"
 
+debounce@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.0.2.tgz#503cc674d8d7f737099664fb75ddbd36b9626dc6"
+
 decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
+deep-assign@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-2.0.0.tgz#ebe06b1f07f08dae597620e3dd1622f371a1c572"
+  dependencies:
+    is-obj "^1.0.0"
+
 defined@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
 
+deline@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/deline/-/deline-1.0.4.tgz#6c05c87836926e1a1c63e47882f3d2eb2c6f14c9"
+
 electron-to-chromium@^1.2.3:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.2.4.tgz#9751cbea89fa120bf88c226ba41eb8d0b6f1b597"
@@ -324,10 +379,26 @@ esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
 
+fast-deep-equal@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-0.1.0.tgz#5c6f4599aba6b333ee3342e2ed978672f1001f8d"
+
 fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
 
+fbjs@^0.8.12:
+  version "0.8.12"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
 fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.8, fbjs@^0.8.9:
   version "0.8.9"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14"
@@ -344,17 +415,22 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+flexibility@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/flexibility/-/flexibility-2.0.1.tgz#ad323aafc40f469ce624286518fc4d7cd72b7c77"
+
 function-bind@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
 
-glamor@3.0.0-1:
-  version "3.0.0-1"
-  resolved "https://registry.yarnpkg.com/glamor/-/glamor-3.0.0-1.tgz#60f489e96d96c12620803d3677ac26413cb76a95"
+glamor@2.20.25:
+  version "2.20.25"
+  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.25.tgz#71b84b82b67a9327771ac59de53ee915d148a4a3"
   dependencies:
     babel-runtime "^6.18.0"
     fbjs "^0.8.8"
     object-assign "^4.1.0"
+    prop-types "^15.5.8"
 
 has-ansi@^2.0.0:
   version "2.0.0"
@@ -366,6 +442,10 @@ has-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
 
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+
 has@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
@@ -392,6 +472,12 @@ icss-replace-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
 
+icss-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  dependencies:
+    postcss "^6.0.1"
+
 ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
@@ -422,6 +508,19 @@ inline-style-prefixer@^3.0.1:
     bowser "^1.6.0"
     css-in-js-utils "^1.0.3"
 
+inline-style-prefixer@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.6.tgz#b27fe309b4168a31eaf38c8e8c60ab9e7c11731f"
+  dependencies:
+    bowser "^1.6.0"
+    css-in-js-utils "^1.0.3"
+
+invariant@^2.2.0, invariant@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  dependencies:
+    loose-envify "^1.0.0"
+
 is-absolute-url@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
@@ -434,6 +533,10 @@ is-in-browser@1.0.2, is-in-browser@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.0.2.tgz#f688bea8f1e5aadc3244ebc870d188cfb9b613cf"
 
+is-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+
 is-plain-obj@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
@@ -484,10 +587,24 @@ jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
 json5@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
 
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+
 jss-camel-case@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-4.0.0.tgz#39ef2a137aaa1e2f160ab826845305f8efabcfd5"
@@ -577,7 +694,7 @@ lodash@^4.17.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -612,6 +729,10 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
+normalize-css-color@^1.0.1, normalize-css-color@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
+
 normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
@@ -629,7 +750,7 @@ num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -871,6 +992,14 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postcss@^6.0.1:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.3.tgz#b7f565b3d956fbb8565ca7c1e239d0506e427d8b"
+  dependencies:
+    chalk "^1.1.3"
+    source-map "^0.5.6"
+    supports-color "^4.0.0"
+
 prepend-http@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
@@ -881,6 +1010,13 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types@^15.5.10:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 prop-types@^15.5.4, prop-types@^15.5.8:
   version "15.5.8"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
@@ -914,6 +1050,43 @@ react-jss@^6.1.1:
     jss-preset-default "^2.0.0"
     prop-types "^15.5.8"
 
+react-native-web@0.0.x:
+  version "0.0.106"
+  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.0.106.tgz#928427320b5963548b372a32b62459154f1e1d7e"
+  dependencies:
+    animated "^0.2.0"
+    array-find-index "^1.0.2"
+    babel-runtime "^6.23.0"
+    create-react-class "^15.6.0"
+    debounce "1.0.2"
+    deep-assign "^2.0.0"
+    fbjs "^0.8.12"
+    hyphenate-style-name "^1.0.2"
+    inline-style-prefixer "^3.0.6"
+    normalize-css-color "^1.0.2"
+    prop-types "^15.5.10"
+    react-timer-mixin "^0.13.3"
+
+react-primitives@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/react-primitives/-/react-primitives-0.4.2.tgz#cb001c1122734f177559f5bf590aadd5129b0914"
+  dependencies:
+    animated "^0.1.5"
+    asap "^2.0.5"
+    deline "^1.0.4"
+    flexibility "^2.0.1"
+    inline-style-prefixer "^2.0.5"
+    invariant "^2.2.1"
+    normalize-css-color "^1.0.1"
+    prop-types "^15.5.10"
+    react-native-web "0.0.x"
+    react-timer-mixin "^0.13.3"
+    string-hash "^1.1.3"
+
+react-timer-mixin@^0.13.3:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.3.tgz#0da8b9f807ec07dc3e854d082c737c65605b3d22"
+
 reactxp@^0.34.3:
   version "0.34.3"
   resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.34.3.tgz#6481992e57758ae6ffffbfde3d497527bb495032"
@@ -972,6 +1145,12 @@ sax@~1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
 
+schema-utils@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+  dependencies:
+    ajv "^5.0.0"
+
 setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
@@ -1008,35 +1187,36 @@ strip-ansi@^3.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-style-loader@^0.16.1:
-  version "0.16.1"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.16.1.tgz#50e325258d4e78421dd9680636b41e8661595d10"
+style-loader@^0.18.2:
+  version "0.18.2"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
   dependencies:
     loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
 
-styled-components@2.0.0-15:
-  version "2.0.0-15"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.0.0-15.tgz#77843c9f5267c60a97e28c97719d1ee89ea28be1"
+styled-components@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.1.0.tgz#425805fca7efa5880aad2171f986bfd8a2f0808f"
   dependencies:
     buffer "^5.0.3"
     css-to-react-native "^2.0.3"
     fbjs "^0.8.9"
-    inline-style-prefixer "^2.0.5"
+    hoist-non-react-statics "^1.2.0"
     is-function "^1.0.1"
     is-plain-object "^2.0.1"
     prop-types "^15.5.4"
-    stylis "^2.0.0"
+    stylis "^3.0.19"
     supports-color "^3.2.3"
 
-styletron-client@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/styletron-client/-/styletron-client-2.5.1.tgz#df0b6fd65965b035d2ff58df61b422aa80e23577"
+styletron-client@^2.5.7:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/styletron-client/-/styletron-client-2.5.7.tgz#104fa4dc564cd3fe78eb92488e5ef9039c9e242f"
   dependencies:
-    styletron-core "^2.5.1"
+    styletron-core "^2.5.7"
 
-styletron-core@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/styletron-core/-/styletron-core-2.5.1.tgz#bf9e8aebc41461b81fdd22b1062f6e25862286fd"
+styletron-core@^2.5.7:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/styletron-core/-/styletron-core-2.5.7.tgz#2c4a1fae537b42235462e438c24ab619bbf8993e"
 
 styletron-utils@^2.5.4:
   version "2.5.4"
@@ -1044,9 +1224,9 @@ styletron-utils@^2.5.4:
   dependencies:
     inline-style-prefixer "^2.0.1"
 
-stylis@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-2.0.3.tgz#054b0ad1f636181664246c103adf506c84b502e7"
+stylis@^3.0.19:
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.1.9.tgz#638370451f980437f57c59e58d2e296be29fafb7"
 
 supports-color@^2.0.0:
   version "2.0.0"
@@ -1058,6 +1238,12 @@ supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
+supports-color@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.0.0.tgz#33a7c680aa512c9d03ef929cacbb974d203d2790"
+  dependencies:
+    has-flag "^2.0.0"
+
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"

core.js

@@ -1 +1 @@
-module.exports = require('./dist/core')
+module.exports = require('./dist/core');

docs/apis/AppRegistry.md

@@ -3,8 +3,7 @@
 `AppRegistry` is the control point for registering, running, prerendering, and
 unmounting all apps. App root components should register themselves with
 `AppRegistry.registerComponent`. Apps can be run by invoking
-`AppRegistry.runApplication` (see the [client and server rendering
-guide](../guides/rendering.md) for more details).
+`AppRegistry.runApplication` (see the [getting started guide](../guides/getting-started.md) for more details).
 
 To "stop" an application when a view should be destroyed, call
 `AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was passed
@@ -15,8 +14,7 @@ into `runApplication`. These should always be used as a pair.
 (web) static **getApplication**(appKey:string, appParameters: object)
 
 Returns the given application element. Use this for server-side rendering.
-Return object is of type `{ element: ReactElement; stylesheet: ReactElement }`.
-It's recommended that you use `sheetsheet` to render the style sheet in an app
+Return object is of type `{ element: ReactElement; stylesheets: [ ReactElement ] }`.
 
 static **registerConfig**(config: Array<AppConfig>)
 
@@ -42,6 +40,9 @@ Runs the application that was registered under `appKey`. The `appParameters`
 must include the `rootTag` into which the application is rendered, and
 optionally any `initialProps`.
 
+On web, if the `rootTag` is a sub-section of your application it should be
+styled as `position:relative` and given an explicit height.
+
 static **unmountApplicationComponentAtRootTag**(rootTag: HTMLElement)
 
 To "stop" an application when a view should be destroyed, call

docs/apis/NativeMethods.md

@@ -1,42 +0,0 @@
-# NativeMethods
-
-React Native for Web provides several methods to directly access the underlying
-DOM node. This can be useful in cases when you want to focus a view or measure
-its on-screen dimensions, for example.
-
-The methods described are available on most of the default components provided
-by React Native for Web. Note, however, that they are *not* available on the
-composite components that you define in your own app. For more information, see
-[Direct Manipulation](../guides/direct-manipulation.md).
-
-## Methods
-
-**blur**()
-
-Removes focus from an input or view. This is the opposite of `focus()`.
-
-**focus**()
-
-Requests focus for the given input or view. The exact behavior triggered will
-depend the type of view.
-
-**measure**(callback: (x, y, width, height, pageX, pageY) => void)
-
-For a given view, `measure` determines the offset relative to the parent view,
-width, height, and the offset relative to the viewport. Returns the values via
-an async callback.
-
-Note that these measurements are not available until after the rendering has
-been completed.
-
-**measureLayout**(relativeToNativeNode: DOMNode, onSuccess: (x, y, width, height) => void)
-
-Like `measure`, but measures the view relative to another view, specified as
-`relativeToNativeNode`. This means that the returned `x`, `y` are relative to
-the origin `x`, `y` of the ancestor view.
-
-**setNativeProps**(nativeProps: Object)
-
-This function sends props straight to the underlying DOM node. See the [direct
-manipulation](../guides/direct-manipulation.md) guide for cases where
-`setNativeProps` should be used.

docs/apis/NetInfo.md

@@ -32,7 +32,7 @@ static **removeEventListener**(eventName: ChangeEventName, handler: Function)
 **isConnected**: bool = true
 
 Available on all user agents. Asynchronously fetch a boolean to determine
-internet connectivity.
+internet connectivity. Use this if you are only interested with whether the device has internet connectivity.
 
 **isConnected.addEventListener**(eventName: ChangeEventName, handler: Function)
 

docs/apis/StyleSheet.md

@@ -1,9 +1,10 @@
 # StyleSheet
 
 The `StyleSheet` abstraction converts predefined styles to (vendor-prefixed)
-CSS without requiring a compile-time step. Some styles cannot be resolved
-outside of the render loop and are applied as inline styles. Read more about
-[how to style your application](../guides/style.md).
+CSS without requiring a compile-time step. Styles that cannot be resolved
+outside of the render loop (e.g., dynamic positioning) are usually applied as
+inline styles. Read more about [how to style your
+application](../guides/style.md).
 
 ## Methods
 
@@ -15,9 +16,10 @@ Each key of the object passed to `create` must define a style object.
 
 Flattens an array of styles into a single style object.
 
-**renderToString**: function
+(web) **getStyleSheets**: function
 
-Returns a string of the stylesheet for use in server-side rendering.
+Returns an array of stylesheets (`{ id, textContent }`). Useful for
+compile-time or server-side rendering.
 
 ## Properties
 

docs/components/Button.md

@@ -23,7 +23,7 @@ If `true`, disable all interactions for this element.
 
 This function is called on press.
 
-testID: ?string
+**testID**: ?string
 
 Used to locate this view in end-to-end tests.
 

docs/components/ListView.md

@@ -1,34 +0,0 @@
-# ListView
-
-TODO
-
-## Props
-
-[...ScrollView props](./ScrollView.md)
-
-**children**: any
-
-Content to display over the image.
-
-**style**: style
-
-+ ...[View#style](View.md)
-
-## Examples
-
-```js
-import React, { Component, PropTypes } from 'react'
-import { ListView } from 'react-native'
-
-export default class ListViewExample extends Component {
-  static propTypes = {}
-
-  static defaultProps = {}
-
-  render() {
-    return (
-      <ListView />
-    )
-  }
-}
-```

docs/components/TextInput.md

@@ -103,8 +103,11 @@ Callback that is called when the text input is focused.
 
 **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.
+Callback that is called when a key is pressed. This will be called with `{
+nativeEvent: { key: keyValue } }` where keyValue is 'Enter` or 'Backspace' for
+respective keys and the typed-in character otherwise including ' ' for space.
+Modifier keys are also included in the nativeEvent. Fires before onChange
+callbacks.
 
 **onSelectionChange**: ?function
 

docs/components/View.md

@@ -18,7 +18,7 @@ NOTE: `View` will transfer all other props to the rendered HTML element.
 Overrides the text that's read by a screen reader when the user interacts
 with the element. (This is implemented using `aria-label`.)
 
-See the [Accessibility guide](../guides/accessibility) for more information.
+See the [Accessibility guide](../guides/accessibility.md) for more information.
 
 **accessibilityLiveRegion**: ?enum('assertive', 'none', 'polite')
 
@@ -29,7 +29,7 @@ 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).)
 
-See the [Accessibility guide](../guides/accessibility) for more information.
+See the [Accessibility guide](../guides/accessibility.md) for more information.
 
 (web) **accessibilityRole**: ?enum(roles)
 
@@ -38,7 +38,7 @@ 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)).
 
-See the [Accessibility guide](../guides/accessibility) for more information.
+See the [Accessibility guide](../guides/accessibility.md) for more information.
 
 **accessible**: ?boolean
 
@@ -47,7 +47,7 @@ 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`.)
 
-See the [Accessibility guide](../guides/accessibility) for more information.
+See the [Accessibility guide](../guides/accessibility.md) for more information.
 
 **children**: ?element
 
@@ -69,7 +69,7 @@ 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.
+See the [Accessibility guide](../guides/accessibility.md) for more information.
 
 **onLayout**: ?function
 
@@ -132,15 +132,15 @@ Controls whether the View can be the target of touch events. The enhanced
 `box-none` is the equivalent of:
 
 ```css
-.box-none { pointer-events: none }
-.box-none * { pointer-events: auto }
+.box-none { pointer-events: none !important; }
+.box-none > * { pointer-events: auto; }
 ```
 
 `box-only` is the equivalent of:
 
 ```css
-.box-only { pointer-events: auto }
-.box-only * { pointer-events: none }
+.box-only { pointer-events: auto !important; }
+.box-only > * { pointer-events: none; }
 ```
 
 **style**: ?style
@@ -158,6 +158,7 @@ Controls whether the View can be the target of touch events. The enhanced
 + `animationTimingFunction` ‡
 + `backfaceVisibility`
 + `backgroundAttachment` ‡
++ `backgroundBlendMode` ‡
 + `backgroundClip` ‡
 + `backgroundColor`
 + `backgroundImage` ‡
@@ -279,7 +280,7 @@ Default:
 };
 ```
 
-(See [facebook/css-layout](https://github.com/facebook/css-layout)).
+(See [facebook/yoga](https://github.com/facebook/yoga)).
 
 **testID**: ?string
 

docs/guides/advanced.md

@@ -0,0 +1,104 @@
+# Advanced use
+
+## Use with existing React DOM components
+
+React Native for Web exports a web-specific module called `createDOMElement`,
+which can be used to wrap React DOM components. This allows you to use React
+Native's accessibility and style optimizations.
+
+In the example below, `Video` will now accept common React Native props such as
+`accessibilityLabel`, `accessible`, `style`, and even the Responder event
+props.
+
+```js
+import { createDOMElement } from 'react-native';
+
+const Video = (props) => createDOMElement('video', props);
+```
+
+This also works with composite components defined in your existing component
+gallery or dependencies ([live example](https://www.webpackbin.com/bins/-KiTSGFw3fB9Szg7quLI)).
+
+```js
+import RaisedButton from 'material-ui/RaisedButton';
+import { createDOMElement, StyleSheet } from 'react-native';
+
+const CustomButton = (props) => createDOMElement(RaisedButton, {
+  ...props,
+  style: [ styles.button, props.style ]
+});
+
+const styles = StyleSheet.create({
+  button: {
+    padding: 20
+  }
+});
+```
+
+Remember that React Native styles are not the same as React DOM styles, and
+care needs to be taken not to pass React DOM styles into your React Native
+wrapped components.
+
+## Use as a library framework
+
+The React Native (for Web) building blocks can be used to create higher-level
+components and abstractions. In the example below, a `styled` function provides
+an API inspired by styled-components ([live
+example](https://www.webpackbin.com/bins/-KjT9ziwv4O7FDZdvsnX)).
+
+```js
+const { createDOMElement, StyleSheet } = ReactNative;
+
+/**
+ * styled API
+ */
+const styled = (Component, styler) => {
+  const isDOMComponent = typeof Component === 'string';
+
+  class Styled extends React.Component {
+    static contextTypes = {
+      getTheme: React.PropTypes.func
+    };
+
+    render() {
+      const theme = this.context.getTheme && this.context.getTheme();
+      const localProps = { ...this.props, theme };
+      const nextProps = { ...this.props }
+      const style = typeof styler === 'function' ? styler(localProps) : styler;
+      nextProps.style = [ style, this.props.style ];
+
+      return (
+        isDOMComponent
+          ? createDOMElement(Component, nextProps)
+          : <Component {...nextProps} />
+      );
+    }
+  }
+  return Styled;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: '#2196F3',
+    flex: 1,
+    justifyContent: 'center'
+  }
+});
+
+const StyledView = styled(View, styles.container);
+```
+
+## Use with react-sketchapp
+
+Use with [react-sketchapp](http://airbnb.io/react-sketchapp/) requires that you
+alias `react-native` to `react-sketchapp`. This will allow you to render your
+existing React Native components in Sketch. Sketch-specific components like
+`Artboard` should be imported from `react-sketchapp`.
+
+If you're using `skpm`, you can rely on an [undocumented
+feature](https://github.com/sketch-pm/skpm/blob/master/lib/utils/webpackConfig.js)
+which will merge your `webpack.config.js`, `.babelrc`, or `package.json` Babel
+config into its internal webpack config. The simplest option may be to use the
+[babel-plugin-module-alias](https://www.npmjs.com/package/babel-plugin-module-alias)
+and configure it in your `package.json`.

docs/guides/direct-manipulation.md

@@ -1,27 +1,68 @@
 # Direct manipulation
 
-It is sometimes necessary to make changes directly to a component without using
-state/props to trigger a re-render of the entire subtree – in the browser, this
-is done by directly modifying a DOM node. `setNativeProps` is the React Native
-equivalent to setting properties directly on a DOM node. Use direct
-manipulation when frequent re-rendering creates a performance bottleneck. Direct
-manipulation will not be a tool that you reach for frequently.
+React Native for Web provides several methods to directly access the underlying
+DOM node. This can be useful when you need to make changes directly to a
+component without using state/props to trigger a re-render of the entire
+subtree, or when you want to focus a view or measure its on-screen dimensions.
 
-## `setNativeProps` and `shouldComponentUpdate`
+The methods described are available on most of the default components provided
+by React Native for Web. Note, however, that they are *not* available on the
+composite components that you define in your own app.
+
+## Instance methods
+
+**blur**()
+
+Removes focus from an input or view. This is the opposite of `focus()`.
+
+**focus**()
+
+Requests focus for the given input or view. The exact behavior triggered will
+depend the type of view.
+
+**measure**(callback: (x, y, width, height, pageX, pageY) => void)
+
+For a given view, `measure` determines the offset relative to the parent view,
+width, height, and the offset relative to the viewport. Returns the values via
+an async callback.
+
+Note that these measurements are not available until after the rendering has
+been completed.
+
+**measureLayout**(relativeToNativeNode: DOMNode, onSuccess: (x, y, width, height) => void)
+
+Like `measure`, but measures the view relative to another view, specified as
+`relativeToNativeNode`. This means that the returned `x`, `y` are relative to
+the origin `x`, `y` of the ancestor view.
+
+**setNativeProps**(nativeProps: Object)
+
+This function sends props straight to the underlying DOM node. See the [direct
+manipulation](../guides/direct-manipulation.md) guide for cases where
+`setNativeProps` should be used.
+
+## About `setNativeProps`
+
+`setNativeProps` is the React Native equivalent to setting properties directly
+on a DOM node. Use direct manipulation when frequent re-rendering creates a
+performance bottleneck. Direct manipulation will not be a tool that you reach
+for frequently.
+
+### `setNativeProps` and `shouldComponentUpdate`
 
 `setNativeProps` is imperative and stores state in the native layer (DOM,
 UIView, etc.) and not within your React components, which makes your code more
 difficult to reason about. Before you use it, try to solve your problem with
 `setState` and `shouldComponentUpdate`.
 
-## Avoiding conflicts with the render function
+### Avoiding conflicts with the render function
 
 If you update a property that is also managed by the render function, you might
 end up with some unpredictable and confusing bugs because anytime the component
 re-renders and that property changes, whatever value was previously set from
 `setNativeProps` will be completely ignored and overridden.
 
-## Why use `setNativeProps` on Web?
+### Why use `setNativeProps` on Web?
 
 Using `setNativeProps` in web-specific code is required when making changes to
 `className` or `style`, as these properties are controlled by React Native for
@@ -35,7 +76,7 @@ setOpacityTo(value) {
 }
 ```
 
-## Composite components and `setNativeProps`
+### Composite components and `setNativeProps`
 
 Composite components are not backed by a DOM node, so you cannot call
 `setNativeProps` on them. Consider this example:
@@ -63,7 +104,7 @@ prop on it and have that work - you would need to pass the style prop down to a
 child, unless you are wrapping a native component. Similarly, we are going to
 forward `setNativeProps` to a native-backed child component.
 
-## Forward `setNativeProps` to a child
+### Forward `setNativeProps` to a child
 
 All we need to do is provide a `setNativeProps` method on our component that
 calls `setNativeProps` on the appropriate child with the given arguments.
@@ -86,7 +127,7 @@ class MyButton extends React.Component {
 
 You can now use `MyButton` inside of `TouchableOpacity`!
 
-## `setNativeProps` to clear `TextInput` value
+### `setNativeProps` to clear `TextInput` value
 
 Another very common use case of `setNativeProps` is to clear the value of a
 `TextInput`. For example, the following code demonstrates clearing the input

docs/guides/getting-started.md

@@ -1,11 +1,20 @@
 # Getting started
 
+This guide will help you to correctly configure build and test tools to work
+with React Native for Web.
+
+Alternatively, you can quickly setup a local project using
+[create-react-app](https://github.com/facebookincubator/create-react-app)
+(which supports `react-native-web` out-of-the-box once installed),
+[react-native-web-starter](https://github.com/grabcode/react-native-web-starter),
+or [react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack).
+
 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
+[Webpack](https://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.
 
@@ -76,10 +85,6 @@ module.exports = {
 }
 ```
 
-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
@@ -112,6 +117,26 @@ if (Platform.OS === 'web') {
 }
 ```
 
+More significant platform differences should use platform-specific files (see
+the webpack configuration above for resolving `*.web.js` files):
+
+For example, with the following files in your project:
+
+```
+MyComponent.android.js
+MyComponent.ios.js
+MyComponent.web.js
+```
+
+And the following import:
+
+```js
+import MyComponent from './MyComponent';
+```
+
+React Native will automatically import the correct variant for each specific
+target platform.
+
 ## Client-side rendering
 
 Rendering using `ReactNative`:
@@ -144,8 +169,8 @@ AppRegistry.runApplication('App', {
 })
 ```
 
-Rendering within `ReactDOM.render` also works when introduce `react-native-web`
-to an existing web app, but it is not recommended oherwise.
+Rendering within `ReactDOM.render` also works when introducing
+`react-native-web` to an existing web app, but otherwise it is not recommended.
 
 ## Server-side rendering
 
@@ -162,6 +187,18 @@ const AppContainer = (props) => { /* ... */ }
 AppRegistry.registerComponent('App', () => AppContainer)
 
 // prerender the app
-const { element, stylesheet } = AppRegistry.getApplication('App', { initialProps });
+const { element, stylesheets } = AppRegistry.getApplication('App', { initialProps });
 const initialHTML = ReactDOMServer.renderToString(element);
+const initialStyles = stylesheets.map((sheet) => ReactDOMServer.renderToStaticMarkup(sheet)).join('\n');
+
+// construct HTML document
+const document = `
+<!DOCTYPE html>
+<html>
+<head>
+${initialStyles}
+</head>
+<body>
+${initialHTML}
+`
 ```

docs/guides/style.md

@@ -1,73 +1,90 @@
 # Style
 
-React Native for Web relies on JavaScript to define styles for your
-application. This allows you to avoid issues arising from the [7 deadly sins of
-CSS](https://speakerdeck.com/vjeux/react-css-in-js):
+React Native relies on JavaScript to define and resolve the styles of your
+application. React Native for Web implements the React Native style API in a
+way that avoids *all* the [problems with CSS at
+scale](https://speakerdeck.com/vjeux/react-css-in-js):
 
-1. Global namespace
-2. Dependency hell
+1. No local variables
+2. Implicit dependencies
 3. No dead code elimination
 4. No code minification
 5. No sharing of constants
 6. Non-deterministic resolution
-7. Lack of isolation
+7. No isolation
+
+At the same time, it has several benefits:
+
+1. Simple API and expressive subset of CSS
+2. Generates CSS; the minimum required
+3. Good runtime performance
+4. Support for static and dynamic styles
+5. Support for RTL layouts
+6. Easy pre-rendering of critical CSS
 
 ## Defining styles
 
-Styles should be defined outside of the component:
+Styles should be defined outside of the component. Using `StyleSheet.create` is
+optional but provides the best performance (by relying on generated CSS
+stylesheets). Avoid creating unregistered style objects.
 
 ```js
-class Example extends React.Component {}
-
 const styles = StyleSheet.create({
   heading: {
     color: 'gray',
     fontSize: '2rem'
   },
   text: {
-    color: 'gray',
-    fontSize: '1.25rem'
+    marginTop: '1rem',
+    margin: 10
   }
 })
 ```
 
-Using `StyleSheet.create` is optional but provides the best performance
-(`style` is resolved to CSS stylesheets). Avoid creating unregistered style
-objects.
-
-The attribute names and values are a subset of CSS. See the `style`
-documentation of individual components.
+See the `style` documentation of individual components for supported properties.
 
 ## Using styles
 
-All the React Native components accept a `style` attribute.
+All the React Native components accept a `style` property. The value can be a
+registered object, a plain object, or an array.
 
 ```js
-<Text style={styles.text} />
+// registered object
 <View style={styles.view} />
+
+// plain object
+<View style={{ transform: [ { translateX } ] }} />
+
+// array of registered or plain objects
+<View style={[ styles.container, this.props.style ]} />
 ```
 
-A common pattern is to conditionally add style based on a condition:
+The array syntax will merge styles from left-to-right as normal JavaScript
+objects, and can be used to conditionally apply styles:
 
 ```js
-// either
 <View style={[
-  styles.base,
+  styles.container,
   this.state.active && styles.active
 ]} />
 ```
 
+When styles are registered with `StyleSheet.create`, the return value is a
+number and not a style object. This is important for performance optimizations,
+but still allows you to merge styles in a deterministic manner at runtime. If
+you need access to the underlying style objects you need to use
+`StyleSheet.flatten` (but be aware that this is not the optimized path).
+
 ## Composing styles
 
-In order to let a call site customize the style of your component children, you
-can pass styles around. Use `View.propTypes.style` and `Text.propTypes.style` in
-order to make sure only valid styles are being passed.
+To let other components customize the style of a component's children you can
+expose a prop so styles can be explicitly passed into the component.
 
 ```js
 class List extends React.Component {
   static propTypes = {
-    style: View.propTypes.style,
-    elementStyle: View.propTypes.style,
+    style: ViewPropTypes.style,
+    elementStyle: ViewPropTypes.style,
   }
 
   render() {
@@ -90,56 +107,126 @@ In another file:
 
 You also have much greater control over how styles are composed when compared
 to using class names. For example, you may choose to accept a limited subset
-of style props in the component's API, and control when they are applied:
+of style props in the component's API, and control when they are applied.
 
-```js
-class List extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.any,
-    // limit which styles are accepted
-    style: React.PropTypes.shape({
-      borderColor: View.propTypes.borderColor,
-      borderWidth: View.propTypes.borderWidth
-    })
-  }
+## How styles are resolved
 
-  render() {
-    return (
-      <View
-        children={children}
-        style={[
-          this.props.style,
-          // override border-color when scrolling
-          isScrolling && { borderColor: 'transparent' }
-        ]}
-      />
-    )
-  }
-}
+React Native style resolution is deterministic and slightly different from CSS.
+
+In the following HTML/CSS example, the `.margin` selector is defined last in
+the CSS and takes precedence over the previous rules, resulting in a margin of
+`0, 0, 0, 0`.
+
+```html
+<style>
+.marginTop { margin-top: 10px; }
+.marginBottom { margin-bottom: 20px; }
+.margin { margin: 0; }
+</style>
+<div class="marginTop marginBottom margin"></div>
 ```
 
-## Media Queries
+But in React Native the most *specific* style property takes precedence,
+resulting in margins of `10, 0, 20, 0`.
+
+```js
+const style = [
+  { marginTop: 10 },
+  { marginBottom: 20 },
+  { margin: 0 }
+];
+
+const Box = () => <View style={style} />
+```
+
+## Implementation details
+
+React Native for Web transforms React Native styles into React DOM styles. Any
+styles defined using `StyleSheet.create` will ultimately be rendered using CSS
+class names.
+
+React Native for Web introduced a novel strategy to achieve this. Each rule is
+broken down into declarations, properties are expanded to their long-form, and
+the resulting key-value pairs are mapped to unique "atomic CSS" class names.
+
+Input:
+
+```js
+const Box = () => <View style={styles.box} />
+
+const styles = StyleSheet.create({
+  box: {
+    margin: 0
+  }
+});
+```
+
+Output:
+
+```html
+<style>
+.rn-1mnahxq { margin-top: 0px; }
+.rn-61z16t { margin-right: 0px; }
+.rn-p1pxzi { margin-bottom: 0px; }
+.rn-11wrixw { margin-left: 0px; }
+</style>
+
+<div class="rn-156q2ks rn-61z16t rn-p1pxzi rn-11wrixw"></div>
+```
+
+This ensures that CSS order doesn't impact rendering and CSS rules are
+efficiently deduplicated. Rather than the total CSS growing in proportion to
+the number of *rules*, it grows in proportion to the number of *unique
+declarations*. As a result, the DOM style sheet is only written to when new
+unique declarations are defined and it is usually small enough to be
+pre-rendered and inlined.
+
+Class names are deterministic, which means that the resulting CSS and HTML is
+consistent across builds – important for large apps using code-splitting and
+deploying incremental updates.
+
+At runtime registered styles are resolved to DOM style props and memoized.
+Any dynamic styles that contain declarations previously registered as static
+styles can also be converted to CSS class names. Otherwise, they render as
+inline styles.
+
+All this allows React Native for Web to support the rich functionality of React
+Native styles (including RTL layouts and `setNativeProps`) while providing one
+of the [fastest](https://github.com/necolas/react-native-web/blob/master/benchmarks/README.md),
+safest, and most efficient styles-in-JavaScript solutions.
+
+## FAQs
+
+### What about Media Queries?
 
 `StyleSheet.create` is a way of defining the styles your application requires;
 it does not concern itself with _where_ or _when_ those styles are applied to
 elements.
 
-There are various React libraries wrapping JavaScript Media Query API's, e.g.,
+Media Queries may not be most appropriate for component-based designs. React
+Native provides the `Dimensions` API and `onLayout` props.  If you do need Media
+Queries, using the `matchMedia` DOM API has the benefit of allowing you to swap
+out entire components, not just styles. There are also many React libraries
+wrapping JavaScript Media Query API's, e.g.,
+[react-media](https://github.com/reacttraining/react-media),
 [react-media-queries](https://github.com/bloodyowl/react-media-queries),
 [media-query-fascade](https://github.com/tanem/media-query-facade), or
-[react-responsive](https://github.com/contra/react-responsive). This has the
-benefit of co-locating breakpoint-specific DOM and style changes.
+[react-responsive](https://github.com/contra/react-responsive).
 
-## Pseudo-classes and pseudo-elements
+### What about pseudo-classes and pseudo-elements?
 
 Pseudo-classes like `:hover` and `:focus` can be implemented with events (e.g.
 `onFocus`). Pseudo-elements are not supported; elements should be used instead.
 
-### Reset
+### Do I need a CSS reset?
 
-You **do not** need to include a CSS reset or
-[normalize.css](https://necolas.github.io/normalize.css/).
+No. React Native for Web includes a very small CSS reset that removes unwanted
+User Agent styles from (pseudo-)elements beyond the reach of React (e.g.,
+`html`, `body`) or inline styles (e.g., `::-moz-focus-inner`). The rest is
+handled at the component-level.
 
-React Native for Web includes a very small CSS reset taken from normalize.css.
-It removes unwanted User Agent styles from (pseudo-)elements beyond the reach
-of React (e.g., `html`, `body`) or inline styles (e.g., `::-moz-focus-inner`).
+### What about using Dev Tools?
+
+React Dev Tools supports inspecting and editing of React Native styles. It's
+recommended that you rely more on React Dev Tools and live/hot-reloading rather
+than inspecting and editing the DOM directly.

docs/storybook/.storybook/addons.js

@@ -0,0 +1 @@
+import '@kadira/storybook-addon-options/register';

docs/storybook/.storybook/config.js

@@ -0,0 +1,23 @@
+import { setOptions } from '@kadira/storybook-addon-options';
+import centered from './decorator-centered';
+import { configure, addDecorator } from '@kadira/storybook';
+
+const context = require.context('../', true, /Docs\.js$/);
+
+addDecorator(centered);
+
+setOptions({
+  name: 'React Native Web',
+  url: 'https://necolas.github.io/react-native-web',
+  goFullScreen: false,
+  showLeftPanel: true,
+  showDownPanel: false,
+  showSearchBox: false,
+  downPanelInRight: false
+});
+
+function loadStories() {
+  context.keys().forEach(context);
+}
+
+configure(loadStories, module);

docs/storybook/.storybook/decorator-centered.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+const styles = StyleSheet.create({
+  root: {
+    minHeight: '100vh',
+    maxWidth: 680,
+    marginHorizontal: 'auto'
+  }
+});
+
+export default function(renderStory) {
+  return (
+    <View style={styles.root}>
+      {renderStory()}
+    </View>
+  );
+}

docs/storybook/.storybook/webpack.config.js

@@ -1,5 +1,5 @@
-const path = require('path')
-const webpack = require('webpack')
+const path = require('path');
+const webpack = require('webpack');
 
 const DEV = process.env.NODE_ENV !== 'production';
 
@@ -27,7 +27,7 @@ module.exports = {
   ],
   resolve: {
     alias: {
-      'react-native': path.join(__dirname, '../../src/module')
+      'react-native': path.join(__dirname, '../../../src/module')
     }
   }
-}
+};

docs/storybook/1-components/ActivityIndicator/ActivityIndicatorDocs.js

@@ -0,0 +1,67 @@
+/* eslint-disable react/jsx-sort-props */
+
+/**
+ * @flow
+ */
+
+import PropAnimating from './examples/PropAnimating';
+import PropColor from './examples/PropColor';
+import PropHidesWhenStopped from './examples/PropHidesWhenStopped';
+import PropSize from './examples/PropSize';
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import UIExplorer, { DocItem } from '../../ui-explorer';
+
+const sections = [
+  {
+    title: 'Props',
+    entries: [
+      <DocItem name="...View props" />,
+
+      <DocItem
+        name="animating"
+        typeInfo="?boolean = true"
+        description="Whether to show the indicator or hide it."
+        example={{
+          render: () => <PropAnimating />
+        }}
+      />,
+
+      <DocItem
+        name="color"
+        typeInfo="?color = #1976D2"
+        description="The foreground color of the spinner."
+        example={{
+          render: () => <PropColor />
+        }}
+      />,
+
+      <DocItem
+        name="hidesWhenStopped"
+        typeInfo="?boolean = true"
+        description="Whether the indicator should hide when not animating."
+        example={{
+          render: () => <PropHidesWhenStopped />
+        }}
+      />,
+
+      <DocItem
+        name="size"
+        typeInfo="?enum('small', 'large') | number = 'small'"
+        description="Size of the indicator. Small has a height of 20px, large has a height of 36px."
+        example={{
+          render: () => <PropSize />
+        }}
+      />
+    ]
+  }
+];
+
+storiesOf('Components', module).add('ActivityIndicator', () =>
+  <UIExplorer
+    description="Displays a customizable activity indicator"
+    sections={sections}
+    title="ActivityIndicator"
+    url="components/ActivityIndicator"
+  />
+);

docs/storybook/1-components/ActivityIndicator/examples/PropAnimating.js

@@ -0,0 +1,21 @@
+/**
+ * @flow
+ */
+
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import React from 'react';
+
+const ActivityIndicatorAnimatingExample = () =>
+  <View style={styles.horizontal}>
+    <ActivityIndicator />
+    <ActivityIndicator animating={false} />
+  </View>;
+
+const styles = StyleSheet.create({
+  horizontal: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  }
+});
+
+export default ActivityIndicatorAnimatingExample;

docs/storybook/1-components/ActivityIndicator/examples/PropColor.js

@@ -0,0 +1,33 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+const ActivityIndicatorColorExample = () =>
+  <View style={styles.horizontal}>
+    <ActivityIndicator color="#1DA1F2" style={styles.rightPadding} />
+    <ActivityIndicator color="#17BF63" style={styles.rightPadding} />
+    <ActivityIndicator color="#F45D22" style={styles.rightPadding} />
+    <ActivityIndicator color="#794BC4" style={styles.rightPadding} />
+    <ActivityIndicator color="#E0245E" style={styles.rightPadding} />
+    <ActivityIndicator color="#FFAD1F" style={styles.rightPadding} />
+  </View>;
+
+const styles = StyleSheet.create({
+  horizontal: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  rightPadding: {
+    paddingRight: 10
+  }
+});
+
+ActivityIndicatorColorExample.metadata = {
+  id: 'ActivityIndicator.props.color',
+  description: ''
+};
+
+export default ActivityIndicatorColorExample;

docs/storybook/1-components/ActivityIndicator/examples/PropHidesWhenStopped.js

@@ -0,0 +1,67 @@
+/**
+ * @flow
+ */
+
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { bool } from 'prop-types';
+import React, { PureComponent } from 'react';
+
+class ToggleAnimatingActivityIndicator extends PureComponent {
+  static propTypes = {
+    hidesWhenStopped: bool,
+    style: ActivityIndicator.propTypes.style
+  };
+
+  state = {
+    animating: true
+  };
+
+  setToggleTimeout = () => {
+    this._timer = setTimeout(() => {
+      this.setState({ animating: !this.state.animating });
+      this.setToggleTimeout();
+    }, 2000);
+  };
+
+  componentDidMount() {
+    this.setToggleTimeout();
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this._timer);
+  }
+
+  render() {
+    return (
+      <ActivityIndicator
+        animating={this.state.animating}
+        hidesWhenStopped={this.props.hidesWhenStopped}
+        size="large"
+        style={[styles.centering, this.props.style]}
+      />
+    );
+  }
+}
+
+const ActivityIndicatorHidesWhenStoppedExample = () =>
+  <View style={[styles.horizontal]}>
+    <ToggleAnimatingActivityIndicator hidesWhenStopped={false} style={styles.rightPadding} />
+    <ToggleAnimatingActivityIndicator />
+  </View>;
+
+const styles = StyleSheet.create({
+  horizontal: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  rightPadding: {
+    paddingRight: 10
+  }
+});
+
+ActivityIndicatorHidesWhenStoppedExample.metadata = {
+  id: 'ActivityIndicator.props.hidesWhenStopped',
+  description: ''
+};
+
+export default ActivityIndicatorHidesWhenStoppedExample;

docs/storybook/1-components/ActivityIndicator/examples/PropSize.js

@@ -0,0 +1,32 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+const sizes = [20, 'small', 36, 'large', 60];
+
+const ActivityIndicatorSizeExample = () =>
+  <View style={styles.horizontal}>
+    {sizes.map((size, i) => <ActivityIndicator key={i} size={size} style={styles.rightPadding} />)}
+    <ActivityIndicator size="large" style={styles.large} />
+  </View>;
+
+const styles = StyleSheet.create({
+  horizontal: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  rightPadding: {
+    paddingRight: 10
+  },
+  large: { marginLeft: 20, transform: [{ scale: 1.75 }] }
+});
+
+ActivityIndicatorSizeExample.metadata = {
+  id: 'ActivityIndicator.props.size',
+  description: ''
+};
+
+export default ActivityIndicatorSizeExample;

docs/storybook/1-components/Button/ButtonDocs.js

@@ -0,0 +1,75 @@
+/* eslint-disable react/jsx-sort-props */
+
+/**
+ * @flow
+ */
+
+import React from 'react';
+import PropColor from './examples/PropColor';
+import PropDisabled from './examples/PropDisabled';
+import PropOnPress from './examples/PropOnPress';
+import UIExplorer, { AppText, Code, DocItem } from '../../ui-explorer';
+import { storiesOf } from '@kadira/storybook';
+
+const sections = [
+  {
+    title: 'Props',
+    entries: [
+      <DocItem
+        name="accessibilityLabel"
+        typeInfo="?string"
+        description="Overrides the text that's read by a screen reader when the user interacts with the element."
+      />,
+
+      <DocItem
+        name="color"
+        typeInfo="?string"
+        description="Background color of the button."
+        example={{
+          render: () => <PropColor />
+        }}
+      />,
+
+      <DocItem
+        name="disabled"
+        typeInfo="?boolean"
+        description="If `true`, disable all interactions for this element."
+        example={{
+          render: () => <PropDisabled />
+        }}
+      />,
+
+      <DocItem
+        name="onPress"
+        typeInfo="function"
+        description="This function is called on press."
+        example={{
+          render: () => <PropOnPress />
+        }}
+      />,
+
+      <DocItem
+        name="testID"
+        typeInfo="?string"
+        description="Used to locate this view in end-to-end tests."
+      />,
+
+      <DocItem name="title" typeInfo="string" description="Text to display inside the button." />
+    ]
+  }
+];
+
+storiesOf('Components', module).add('Button', () =>
+  <UIExplorer
+    description={[
+      <AppText>
+        A basic button component. Supports a minimal level of customization.
+        You can build your own custom button using <Code>TouchableOpacity</Code>
+        or <Code>TouchableNativeFeedback</Code>.
+      </AppText>
+    ]}
+    sections={sections}
+    title="Button"
+    url="components/Button"
+  />
+);

docs/storybook/1-components/Button/examples/PropColor.js

@@ -0,0 +1,22 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { DividerVertical } from '../helpers';
+import { Button, View } from 'react-native';
+
+const emptyFunction = () => {};
+
+const ButtonColorExample = () =>
+  <View>
+    <Button color="#17BF63" onPress={emptyFunction} title="Press me" />
+    <DividerVertical />
+    <Button color="#F45D22" onPress={emptyFunction} title="Press me" />
+    <DividerVertical />
+    <Button color="#794BC4" onPress={emptyFunction} title="Press me" />
+    <DividerVertical />
+    <Button color="#E0245E" onPress={emptyFunction} title="Press me" />
+  </View>;
+
+export default ButtonColorExample;

docs/storybook/1-components/Button/examples/PropDisabled.js

@@ -0,0 +1,13 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { Button } from 'react-native';
+
+const onPress = () => {
+  console.error('Disabled button should not trigger onPress!');
+};
+const ButtonDisabledExample = () => <Button disabled onPress={onPress} title="Disabled button" />;
+
+export default ButtonDisabledExample;

docs/storybook/1-components/Button/examples/PropOnPress.js

@@ -0,0 +1,28 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { DividerHorizontal } from '../helpers';
+import { Button, StyleSheet, View } from 'react-native';
+
+const emptyFunction = () => {};
+
+const ButtonOnPressExample = () =>
+  <View style={styles.horizontal}>
+    <Button
+      accessibilityLabel="This sounds great!"
+      onPress={emptyFunction}
+      title="This looks great!"
+    />
+    <DividerHorizontal />
+    <Button color="#841584" onPress={emptyFunction} title="Ok!" />
+  </View>;
+
+const styles = StyleSheet.create({
+  horizontal: {
+    flexDirection: 'row'
+  }
+});
+
+export default ButtonOnPressExample;

docs/storybook/1-components/Button/helpers.js

@@ -0,0 +1,20 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+const DividerHorizontal = () => <View style={styles.horizontalDivider} />;
+const DividerVertical = () => <View style={styles.verticalDivider} />;
+
+const styles = StyleSheet.create({
+  horizontalDivider: {
+    width: '0.6rem'
+  },
+  verticalDivider: {
+    height: '1.3125rem'
+  }
+});
+
+export { DividerHorizontal, DividerVertical };

docs/storybook/1-components/Image/ImageDocs.js

@@ -0,0 +1,158 @@
+/* eslint-disable react/jsx-sort-props */
+
+/**
+ * @flow
+ */
+
+import React from 'react';
+import PropChildren from './examples/PropChildren';
+import PropDefaultSource from './examples/PropDefaultSource';
+import PropDraggable from './examples/PropDraggable';
+import PropOnError from './examples/PropOnError';
+import PropOnLoad from './examples/PropOnLoad';
+import PropOnLoadEnd from './examples/PropOnLoadEnd';
+import PropOnLoadStart from './examples/PropOnLoadStart';
+import PropResizeMode from './examples/PropResizeMode';
+import PropSource from './examples/PropSource';
+import StaticGetSizeExample from './examples/StaticGetSize';
+import StaticPrefetchExample from './examples/StaticPrefetch';
+import { storiesOf } from '@kadira/storybook';
+import UIExplorer, { DocItem } from '../../ui-explorer';
+
+const sections = [
+  {
+    title: 'Props',
+    entries: [
+      <DocItem name="...View props" />,
+
+      <DocItem
+        name="children"
+        typeInfo="?any"
+        description="Content to display over the image."
+        example={{
+          render: () => <PropChildren />
+        }}
+      />,
+
+      <DocItem
+        name="defaultSource"
+        typeInfo="?object"
+        description="An image to display as a placeholder while downloading the final image off the network. `{ uri: string, width, height }`"
+        example={{
+          render: () => <PropDefaultSource />
+        }}
+      />,
+
+      <DocItem
+        name="draggable"
+        typeInfo="?boolean = true"
+        description="When false, the image will not be draggable"
+        example={{
+          render: () => <PropDraggable />
+        }}
+      />,
+
+      <DocItem
+        name="onError"
+        typeInfo="?function"
+        description="Invoked on load error with `{nativeEvent: {error}}`."
+        example={{
+          render: () => <PropOnError />
+        }}
+      />,
+
+      <DocItem
+        name="onLoad"
+        typeInfo="?function"
+        description="Invoked when load completes successfully."
+        example={{
+          render: () => <PropOnLoad />
+        }}
+      />,
+
+      <DocItem
+        name="onLoadEnd"
+        typeInfo="?function"
+        description="Invoked when load either succeeds or fails."
+        example={{
+          render: () => <PropOnLoadEnd />
+        }}
+      />,
+
+      <DocItem
+        name="onLoadStart"
+        typeInfo="?function"
+        description="Invoked on load start."
+        example={{
+          render: () => <PropOnLoadStart />
+        }}
+      />,
+
+      <DocItem
+        name="resizeMode"
+        typeInfo="?enum('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'cover';"
+        description="Determines how to resize the image when the frame doesn't match the raw image dimensions."
+        example={{
+          render: () => <PropResizeMode />
+        }}
+      />,
+
+      <DocItem
+        name="source"
+        typeInfo="?object"
+        description="`uri` is a string representing the resource identifier for the image, which could be an http address or a base64 encoded image. `{ uri: string, width, height }`"
+        example={{
+          code: '',
+          render: () => <PropSource />
+        }}
+      />,
+
+      <DocItem name="style" typeInfo="?style" />
+    ]
+  },
+
+  {
+    title: 'Properties',
+    entries: [
+      <DocItem
+        name="static resizeMode"
+        typeInfo="object"
+        example={{
+          code: '<Image resizeMode={Image.resizeMode.contain} />'
+        }}
+      />
+    ]
+  },
+
+  {
+    title: 'Methods',
+    entries: [
+      <DocItem
+        name="static getSize"
+        typeInfo="(uri: string, success: (width, height) => {}, failure: function) => void"
+        description="Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download.\n\n(In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data.)"
+        example={{
+          render: () => <StaticGetSizeExample />
+        }}
+      />,
+
+      <DocItem
+        name="static prefetch"
+        typeInfo="(url: string) => Promise"
+        description="Prefetches a remote image for later use by downloading it."
+        example={{
+          render: () => <StaticPrefetchExample />
+        }}
+      />
+    ]
+  }
+];
+
+storiesOf('Components', module).add('Image', () =>
+  <UIExplorer
+    description="An accessibile image component with support for image resizing, default image, and child content."
+    sections={sections}
+    title="Image"
+    url="components/Image"
+  />
+);

docs/storybook/1-components/Image/examples/MultipleSources.js

@@ -0,0 +1,72 @@
+/**
+ * @flow
+ */
+
+/*
+import React, { PureComponent } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+
+export default class MultipleSourcesExample extends PureComponent {
+  state = {
+    width: 30,
+    height: 30
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Text style={styles.touchableText} onPress={this.decreaseImageSize}>
+            Decrease image size
+          </Text>
+          <Text style={styles.touchableText} onPress={this.increaseImageSize}>
+            Increase image size
+          </Text>
+        </View>
+        <Text>Container image size: {this.state.width}x{this.state.height} </Text>
+        <View style={{ height: this.state.height, width: this.state.width }}>
+          <Image
+            style={{ flex: 1 }}
+            source={[
+              { uri: 'http://facebook.github.io/react/img/logo_small.png', width: 38, height: 38 },
+              {
+                uri: 'http://facebook.github.io/react/img/logo_small_2x.png',
+                width: 76,
+                height: 76
+              },
+              { uri: 'http://facebook.github.io/react/img/logo_og.png', width: 400, height: 400 }
+            ]}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  increaseImageSize = () => {
+    if (this.state.width >= 100) {
+      return;
+    }
+    this.setState(state => ({
+      width: state.width + 10,
+      height: state.height + 10
+    }));
+  };
+
+  decreaseImageSize = () => {
+    if (this.state.width <= 10) {
+      return;
+    }
+    this.setState(state => ({
+      width: state.width - 10,
+      height: state.height - 10
+    }));
+  };
+}
+
+const styles = StyleSheet.create({
+  touchableText: {
+    color: 'blue',
+    fontWeight: '500'
+  }
+});
+*/

docs/storybook/1-components/Image/examples/NetworkImage.js

@@ -0,0 +1,84 @@
+/**
+ * @flow
+ */
+
+import * as helpers from '../helpers';
+import { oneOf } from 'prop-types';
+import sources from '../sources';
+import React, { PureComponent } from 'react';
+import { ActivityIndicator, Image, Text, View } from 'react-native';
+
+class NetworkImageExample extends PureComponent {
+  state = {
+    error: false,
+    loading: false
+  };
+
+  static propTypes = {
+    logMethod: oneOf(['onError', 'onLoad', 'onLoadEnd', 'onLoadStart']),
+    source: Image.propTypes.source
+  };
+
+  static defaultProps = {
+    logList: []
+  };
+
+  render() {
+    const loader = this.state.loading
+      ? <View>
+          <ActivityIndicator />
+        </View>
+      : null;
+
+    return (
+      <View style={[helpers.styles.row, helpers.styles.centerRow]}>
+        <Image
+          defaultSource={sources.placeholder}
+          onError={this._handleError}
+          onLoad={this._handleLoad}
+          onLoadEnd={this._handleLoadEnd}
+          onLoadStart={this._handleLoadStart}
+          source={this.props.source}
+          style={helpers.styles.base}
+        >
+          {loader}
+        </Image>
+        {this.state.message && <Text style={helpers.styles.marginLeft}>{this.state.message}</Text>}
+      </View>
+    );
+  }
+
+  _handleError = e => {
+    const nextState = { loading: false };
+    if (this.props.logMethod === 'onError') {
+      nextState.message = `✘ onError ${JSON.stringify(e.nativeEvent)}`;
+    }
+    this.setState(() => nextState);
+  };
+
+  _handleLoad = () => {
+    const nextState = { loading: false };
+    if (this.props.logMethod === 'onLoad') {
+      nextState.message = '✔ onLoad';
+    }
+    this.setState(() => nextState);
+  };
+
+  _handleLoadEnd = () => {
+    const nextState = { loading: false };
+    if (this.props.logMethod === 'onLoadEnd') {
+      nextState.message = '✔ onLoadEnd';
+    }
+    this.setState(() => nextState);
+  };
+
+  _handleLoadStart = () => {
+    const nextState = { loading: true };
+    if (this.props.logMethod === 'onLoadStart') {
+      nextState.message = '✔ onLoadStart';
+    }
+    this.setState(() => nextState);
+  };
+}
+
+export default NetworkImageExample;

docs/storybook/1-components/Image/examples/PropChildren.js

@@ -0,0 +1,30 @@
+/**
+ * @flow
+ */
+
+import sources from '../sources';
+import React from 'react';
+import { Image, StyleSheet, Text } from 'react-native';
+
+const ImageChildrenExample = () =>
+  <Image source={sources.large} style={styles.image}>
+    <Text style={styles.text}>
+      React
+    </Text>
+  </Image>;
+
+const styles = StyleSheet.create({
+  image: {
+    width: 60,
+    height: 60,
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  text: {
+    backgroundColor: 'transparent',
+    color: 'white'
+  }
+});
+
+export default ImageChildrenExample;

docs/storybook/1-components/Image/examples/PropDefaultSource.js

@@ -0,0 +1,17 @@
+/**
+ * @flow
+ */
+
+import * as helpers from '../helpers';
+import sources from '../sources';
+import React from 'react';
+import { Image } from 'react-native';
+
+const ImageDefaultSourceExample = () =>
+  <Image
+    defaultSource={sources.placeholder}
+    source={sources.largeAlt}
+    style={helpers.styles.base}
+  />;
+
+export default ImageDefaultSourceExample;

docs/storybook/1-components/Image/examples/PropDraggable.js

@@ -0,0 +1,26 @@
+/**
+ * @flow
+ */
+
+import sources from '../sources';
+import React from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+
+const ImageDraggableExample = () =>
+  <View style={styles.container}>
+    <Image draggable={false} source={sources.large} style={styles.image} />
+  </View>;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  },
+  image: {
+    width: 60,
+    height: 60,
+    backgroundColor: 'transparent',
+    marginRight: 10
+  }
+});
+
+export default ImageDraggableExample;