0.0.111

Problem:

Although 'Touchable' supports basic keyboard usage, it doesn't support
delays or interaction via the Space key.

Solution:

Extend the 'Touchable' mixin to better support keyboard interactions.
All touchable callbacks and delays are now supported when interacted
with via a keyboard's Enter and Space keys (as would be expected of
native 'button' elements). However, events are not normalized to mimic
touch events.

Minor upstream changes to the Touchables in React Native are also
included.

README.md

@@ -32,10 +32,13 @@ npm install --save react@15.6 react-dom@15.6 react-native-web
 
 NOTE: React Native for Web supports React/ReactDOM 15.4, 15.5, or 15.6.
 
-Read the [Getting Started](docs/guides/getting-started.md) guide.
+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)
@@ -46,36 +49,6 @@ Guides:
 * [Advanced use](docs/guides/advanced.md)
 * [Known issues](docs/guides/known-issues.md)
 
-Exported modules:
-
-* Components
-  * [`ActivityIndicator`](docs/components/ActivityIndicator.md)
-  * [`Button`](docs/components/Button.md)
-  * [`Image`](docs/components/Image.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)
-  * [`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)
-
 ## Example code
 
 ```js
@@ -121,6 +94,7 @@ AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-ro
 * [react-native-web-player](https://github.com/dabbott/react-native-web-player)
 * [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)
 

benchmarks/README.md

@@ -11,30 +11,37 @@ open ./performance/index.html
 
 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.
+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
+Typical render timings*: mean ± two standard deviations.
 
-| Implementation                       | Deep tree (ms)    | Wide tree (ms)    | Tweets (ms)       |
+| Implementation                        | Deep tree (ms)    | Wide tree (ms)    | Tweets (ms)       |
 | :--- | ---: | ---: | ---: |
-| `css-modules`                        |  `87.67` `±15.22` | `170.85` `±16.87` | |
-| `react-native-web/stylesheet@0.0.84` |  `90.02` `±13.16` | `186.66` `±19.23` | |
-| `react-native-web@0.0.84`            | `102.72` `±19.26` | `222.35` `±18.95` | `12.81` `±5.45ms` |
+| `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`                    |  `88.48` `±12.00` | `171.89` `±13.28` |
-| `aphrodite@1.2.0`                    | `101.32` `±20.33` | `220.33` `±31.41` |
-| `glamor@3.0.0-1`                     | `129.00` `±14.92` | `264.57` `±28.54` |
-| `react-jss@5.4.1`                    | `137.33` `±21.55` | `314.91` `±29.03` |
-| `reactxp@0.34.3`                     | `223.82` `±32.77` | `461.56` `±34.43` |
-| `styled-components@2.0.0-11`         | `277.53` `±28.83` | `627.91` `±43.13` |
+| `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` |
 
-*MacBook Pro (13-inch, Early 2011); 2.7 GHz Intel Core i7; 16 GB 1600 MHz DDR3. Google Chrome 56.
+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/createRenderBenchmark.js

@@ -5,7 +5,9 @@ const node = document.querySelector('.root');
 
 const createRenderBenchmark = ({ description, getElement, name, runs }) => () => {
   const setup = () => {};
-  const teardown = () => ReactDOM.unmountComponentAtNode(node);
+  const teardown = () => {
+    ReactDOM.unmountComponentAtNode(node);
+  };
 
   return benchmark({
     name,
@@ -13,7 +15,9 @@ const createRenderBenchmark = ({ description, getElement, name, runs }) => () =>
     runs,
     setup,
     teardown,
-    task: () => ReactDOM.render(getElement(), node)
+    task: () => {
+      ReactDOM.render(getElement(), node);
+    }
   });
 };
 

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

@@ -4,17 +4,18 @@
   "dependencies": {
     "aphrodite": "^1.2.1",
     "classnames": "^2.2.5",
-    "glamor": "2.20.25",
+    "glamor": "^3.0.0-2",
     "marky": "^1.2.0",
-    "react-jss": "^6.1.1",
-    "reactxp": "^0.34.3",
-    "styled-components": "2.0.0-17",
+    "react-jss": "^7.0.0-pre.1",
+    "react-primitives": "^0.4.3",
+    "reactxp": "0.34.3",
+    "styled-components": "^2.1.1",
     "styletron-client": "^2.5.7",
     "styletron-utils": "^2.5.4"
   },
   "devDependencies": {
-    "css-loader": "^0.28.1",
+    "css-loader": "^0.28.4",
     "react-addons-perf": "^15.4.2",
-    "style-loader": "^0.17.0"
+    "style-loader": "^0.18.2"
   }
 }

benchmarks/src/components/AppText/index.js

@@ -1,5 +1,6 @@
+import PropTypes from 'prop-types';
 import theme from '../theme';
-import React, { PropTypes, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { StyleSheet, Text } from 'react-native';
 
 class AppText extends PureComponent {

benchmarks/src/components/AspectRatio/index.js

@@ -1,4 +1,5 @@
-import React, { PureComponent, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 class AspectRatio extends PureComponent {
@@ -21,7 +22,9 @@ class AspectRatio extends PureComponent {
     return (
       <View style={[styles.root, style]}>
         <View style={[styles.shim, { paddingBottom: `${percentage}%` }]} />
-        <View style={StyleSheet.absoluteFill}>{children}</View>
+        <View style={StyleSheet.absoluteFill}>
+          {children}
+        </View>
       </View>
     );
   }

benchmarks/src/components/Box/aphrodite.js

@@ -45,4 +45,4 @@ const styles = StyleSheet.create({
   }
 });
 
-module.exports = Box;
+export default Box;

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

@@ -14,4 +14,4 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
     })}
   />;
 
-module.exports = Box;
+export default Box;

benchmarks/src/components/Box/glamor.js

@@ -44,4 +44,4 @@ const styles = {
   }
 };
 
-module.exports = Box;
+export default Box;

benchmarks/src/components/Box/jss.js

@@ -46,4 +46,4 @@ const styles = {
   }
 };
 
-module.exports = injectSheet(styles)(Box);
+export default injectSheet(styles)(Box);

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

@@ -45,4 +45,4 @@ const styles = StyleSheet.create({
   }
 });
 
-module.exports = Box;
+export default Box;

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

@@ -44,4 +44,4 @@ const styles = StyleSheet.create({
   }
 });
 
-module.exports = Box;
+export default Box;

benchmarks/src/components/Box/reactxp.js

@@ -44,4 +44,4 @@ const styles = {
   })
 };
 
-module.exports = Box;
+export default Box;

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)};
+`;
+
+export default Box;

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

@@ -28,4 +28,4 @@ const Box = styled(View)`
   background-color: ${props => getColor(props.color)};
 `;
 
-module.exports = Box;
+export default Box;

benchmarks/src/components/Box/styletron.js

@@ -45,4 +45,4 @@ const styles = {
   })
 };
 
-module.exports = Box;
+export default Box;

benchmarks/src/components/GridView/index.js

@@ -1,5 +1,6 @@
+import PropTypes from 'prop-types';
 import { StyleSheet, View } from 'react-native';
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import theme from '../theme';
 
 class GridView extends Component {

benchmarks/src/components/NestedTree/index.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 class DeepTree extends Component {
   static propTypes = {
@@ -30,10 +31,14 @@ class DeepTree extends Component {
       </Box>
     );
     for (let i = 0; i < wrap; i++) {
-      result = <Box components={components}>{result}</Box>;
+      result = (
+        <Box components={components}>
+          {result}
+        </Box>
+      );
     }
     return result;
   }
 }
 
-module.exports = DeepTree;
+export default DeepTree;

benchmarks/src/components/Tweet/index.js

@@ -1,11 +1,12 @@
 import AspectRatio from '../AspectRatio';
 import GridView from '../GridView';
+import PropTypes from 'prop-types';
 import TweetActionsBar from '../TweetActionsBar';
 import TweetText from '../TweetText';
 import UserAvatar from '../UserAvatar';
 import UserNames from '../UserNames';
 import { Image, StyleSheet, Text, View } from 'react-native';
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import theme from '../theme';
 
 export class Tweet extends Component {
@@ -61,7 +62,6 @@ export class Tweet extends Component {
                     </AspectRatio>
                   </View>
                 : null}
-
             </View>
 
             <TweetActionsBar

benchmarks/src/components/TweetAction/index.js

@@ -2,9 +2,10 @@ import IconReply from '../Icons/Reply';
 import IconHeart from '../Icons/Heart';
 import IconRetweet from '../Icons/Retweet';
 import IconDirectMessage from '../Icons/DirectMessage';
-import { Text, View, StyleSheet } from 'react-native';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import theme from '../theme';
+import { Text, View, StyleSheet } from 'react-native';
 
 const getIcon = (icon, highlighted) => {
   switch (icon) {
@@ -45,7 +46,11 @@ export default class TweetAction extends React.Component {
           ]}
         >
           {getIcon(displayMode, highlighted)}
-          {count > 0 ? <Text style={styles.count}>{count}</Text> : null}
+          {count > 0
+            ? <Text style={styles.count}>
+                {count}
+              </Text>
+            : null}
         </Text>
       </View>
     );

benchmarks/src/components/TweetActionsBar/index.js

@@ -1,6 +1,7 @@
+import PropTypes from 'prop-types';
 import TweetAction from '../TweetAction';
 import { View, StyleSheet } from 'react-native';
-import React, { PropTypes, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 
 const actionNames = ['reply', 'retweet', 'like', 'directMessage'];
 

benchmarks/src/components/TweetText/index.js

@@ -1,15 +1,16 @@
 import AppText from '../AppText';
+import React from 'react';
 import TweetTextPart from '../TweetTextPart';
-import React, { PropTypes } from 'react';
+import { array, number, string } from 'prop-types';
 
 class TweetText extends React.Component {
   static displayName = 'TweetText';
 
   static propTypes = {
     displayMode: TweetTextPart.propTypes.displayMode,
-    lang: PropTypes.string,
-    numberOfLines: PropTypes.number,
-    textParts: PropTypes.array.isRequired
+    lang: string,
+    numberOfLines: number,
+    textParts: array.isRequired
   };
 
   render() {

benchmarks/src/components/TweetTextPart/index.js

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import { Image, StyleSheet, Text } from 'react-native';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import theme from '../theme';
 
 const createTextEntity = ({ part }) => <Text>{`${part.prefix}${part.text}`}</Text>;

benchmarks/src/components/UserAvatar/index.js

@@ -1,6 +1,7 @@
 import AspectRatio from '../AspectRatio';
+import PropTypes from 'prop-types';
 import { Image, StyleSheet } from 'react-native';
-import React, { PropTypes, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import theme from '../theme';
 
 class UserAvatar extends PureComponent {

benchmarks/src/components/UserNames/index.js

@@ -1,6 +1,7 @@
 import AppText from '../AppText';
+import PropTypes from 'prop-types';
 import { StyleSheet } from 'react-native';
-import React, { PropTypes, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 
 class UserNames extends PureComponent {
   static displayName = 'UserNames';
@@ -28,7 +29,9 @@ class UserNames extends PureComponent {
         onPress={onPress}
         style={[styles.root, style]}
       >
-        <AppText color="normal" weight="bold">{fullName}</AppText>
+        <AppText color="normal" weight="bold">
+          {fullName}
+        </AppText>
         {layout === 'stack' ? ' \u000A' : ' '}
         <AppText color="deepGray" style={styles.screenName}>{`@${screenName}`}</AppText>
       </AppText>

benchmarks/src/components/View/aphrodite.js

@@ -28,4 +28,4 @@ const styles = StyleSheet.create({
   }
 });
 
-module.exports = View;
+export default View;

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

@@ -10,4 +10,4 @@ class View extends React.Component {
   }
 }
 
-module.exports = View;
+export default View;

benchmarks/src/components/View/glamor.js

@@ -26,4 +26,4 @@ const viewStyle = {
   minWidth: 0
 };
 
-module.exports = View;
+export default View;

benchmarks/src/components/View/jss.js

@@ -29,4 +29,4 @@ const styles = {
   }
 };
 
-module.exports = injectSheet(styles)(View);
+export default injectSheet(styles)(View);

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

@@ -32,4 +32,4 @@ const styles = StyleSheet.create({
   }
 });
 
-module.exports = View;
+export default View;

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

@@ -16,4 +16,4 @@ const View = styled.div`
   min-width: 0;
 `;
 
-module.exports = View;
+export default View;

benchmarks/src/components/theme.js

@@ -23,11 +23,11 @@ const fontSize = {
   large: '1.25rem'
 };
 
-module.exports = {
+const theme = {
   colors,
   fontFamily:
     '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif, ' +
-      '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', // emoji fonts
+    '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', // emoji fonts
   fontSize,
   lineHeight: 1.3125,
   spaceX: 0.6,
@@ -36,3 +36,5 @@ module.exports = {
     return `${num}${unit}`;
   }
 };
+
+export default theme;

benchmarks/src/css-modules.js

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

benchmarks/src/jss.js

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

benchmarks/src/react-native-stylesheet.js

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

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/tests/renderTweet.js

@@ -96,7 +96,7 @@ const tweet2 = {
   }
 };
 
-const renderTweet = (label, components) =>
+const renderTweet = label =>
   createRenderBenchmark({
     name: `Tweet [${label}]`,
     runs: 10,

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"
@@ -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:
@@ -80,6 +107,10 @@ bowser@^1.0.0, bowser@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.6.0.tgz#37fc387b616cb6aef370dab4d6bd402b74c5c54d"
 
+brcast@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brcast/-/brcast-2.0.1.tgz#4311508f0634a6f5a2465b6cf2db27f06902aaca"
+
 browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.5:
   version "1.7.5"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.5.tgz#eca4713897b51e444283241facf3985de49a9e2b"
@@ -131,6 +162,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"
@@ -173,6 +208,12 @@ colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
 
+common-tags@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.4.0.tgz#1187be4f3d4cf0c0427d43f74eef1f73501614c0"
+  dependencies:
+    babel-runtime "^6.18.0"
+
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@@ -181,6 +222,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 +244,14 @@ css-in-js-utils@^1.0.3:
   dependencies:
     hyphenate-style-name "^1.0.2"
 
-css-loader@^0.28.1:
-  version "0.28.1"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.1.tgz#220325599f8f00452d9ceb4c3ca6c8a66798642d"
+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"
@@ -291,14 +341,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"
@@ -325,13 +389,17 @@ 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.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"
+fbjs@^0.8.12, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
+  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"
@@ -345,18 +413,21 @@ 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@2.20.25:
-  version "2.20.25"
-  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.25.tgz#71b84b82b67a9327771ac59de53ee915d148a4a3"
+glamor@^3.0.0-2:
+  version "3.0.0-2"
+  resolved "https://registry.yarnpkg.com/glamor/-/glamor-3.0.0-2.tgz#cb28eb450a437c63c9911421a4bb74711c473dad"
   dependencies:
-    babel-runtime "^6.18.0"
-    fbjs "^0.8.8"
-    object-assign "^4.1.0"
-    prop-types "^15.5.8"
+    fbjs "^0.8.12"
+    inline-style-prefixer "^3.0.3"
+    react-css-property-operations "^15.4.1"
 
 has-ansi@^2.0.0:
   version "2.0.0"
@@ -368,6 +439,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"
@@ -394,6 +469,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"
@@ -424,6 +505,19 @@ inline-style-prefixer@^3.0.1:
     bowser "^1.6.0"
     css-in-js-utils "^1.0.3"
 
+inline-style-prefixer@^3.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"
@@ -432,10 +526,14 @@ is-function@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
 
-is-in-browser@1.0.2, 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"
@@ -486,74 +584,88 @@ 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"
 
-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"
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
 
-jss-compose@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-3.0.1.tgz#0ac07f20baf1d523c211016d383dab08dcfe4186"
+jss-camel-case@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-5.0.0.tgz#886c1fe56a8a11577454d6a8b4133caa6c1f53a0"
+
+jss-compose@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-4.0.0.tgz#f0109e8e8301a2678279301c24523dbc76115b9b"
   dependencies:
     warning "^3.0.0"
 
-jss-default-unit@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-6.1.0.tgz#ea6ca838de119c17adbce597b21ba9c20f7f4d84"
+jss-default-unit@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-7.0.0.tgz#176c1db91da870e3ad16301f6f4b4cfc6fe1e90a"
 
-jss-expand@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-3.0.0.tgz#ce22bf8f9d99afa822738d82dcc3bdbf32766b1d"
-
-jss-extend@^4.0.0:
+jss-expand@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-4.0.0.tgz#1c377d4efd67f34c997b699aa8bc1dab1c7edf95"
+  resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-4.0.0.tgz#71ec15386d7839bb23892acf9dcaa40b7fe9c785"
+
+jss-extend@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-5.0.0.tgz#08a1d4015d05dfe011e3a281457d471226865387"
   dependencies:
     warning "^3.0.0"
 
-jss-global@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-1.0.0.tgz#ba87850cd56d32e0623c3878fd5ef376a61e6f65"
-
-jss-nested@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-4.0.0.tgz#70d8aaaeb0ae1c0ca6ac74b329255b71e58bf72e"
-  dependencies:
-    warning "^3.0.0"
-
-jss-preset-default@^2.0.0:
+jss-global@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-2.0.0.tgz#0368d99626b31067e8d04ab3c7cb17ba8354d422"
+  resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-2.0.0.tgz#a162f822f17e5d760151d908bdb41d7f2824c28f"
+
+jss-nested@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-5.0.0.tgz#c0752f31f2d465110d7de6ac83583dbed669faa0"
   dependencies:
-    jss-camel-case "^4.0.0"
-    jss-compose "^3.0.0"
-    jss-default-unit "^6.0.0"
-    jss-expand "^3.0.0"
-    jss-extend "^4.0.0"
-    jss-global "^1.0.0"
-    jss-nested "^4.0.0"
-    jss-props-sort "^4.0.0"
-    jss-vendor-prefixer "^5.0.0"
+    warning "^3.0.0"
 
-jss-props-sort@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-4.0.0.tgz#ef4239c6795ca304c18dce9e0395a1789ed9f78a"
+jss-preset-default@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-3.0.0.tgz#e43ee1ac526f689baf2bfd28ae95a6fdc3a02663"
+  dependencies:
+    jss-camel-case "^5.0.0"
+    jss-compose "^4.0.0"
+    jss-default-unit "^7.0.0"
+    jss-expand "^4.0.0"
+    jss-extend "^5.0.0"
+    jss-global "^2.0.0"
+    jss-nested "^5.0.0"
+    jss-props-sort "^5.0.0"
+    jss-vendor-prefixer "^6.0.0"
 
-jss-vendor-prefixer@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-5.1.0.tgz#59b73544de81e6b2efd71f6d3b744671826865a2"
+jss-props-sort@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-5.0.0.tgz#8839c88433f64e8c1dab1a7068796f19b84f9195"
+
+jss-vendor-prefixer@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-6.0.0.tgz#be58124f0cbed76e98cc8eb5219dbb260f057d0b"
   dependencies:
     css-vendor "^0.3.8"
 
-jss@^7.0.0:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-7.0.3.tgz#87a4ff5c9398f7ee7ddc06a6b02255a4c74d9e1b"
+jss@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-8.0.0.tgz#7b6e3153a5045d396245adc3fad5817d00c59457"
   dependencies:
-    is-in-browser "1.0.2"
-    warning "3.0.0"
+    is-in-browser "^1.0.2"
+    warning "^3.0.0"
 
 loader-utils@^1.0.2:
   version "1.0.2"
@@ -579,7 +691,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.1.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:
@@ -614,6 +726,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"
@@ -631,7 +747,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"
 
@@ -873,6 +989,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"
@@ -883,11 +1007,12 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-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"
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8:
+  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"
 
 q@^1.1.2:
   version "1.4.1"
@@ -907,16 +1032,69 @@ react-addons-perf@^15.4.2:
     fbjs "^0.8.4"
     object-assign "^4.1.0"
 
-react-jss@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-6.1.1.tgz#01a548e6531b691186c3e8d8250980fb2938f1fe"
-  dependencies:
-    hoist-non-react-statics "^1.2.0"
-    jss "^7.0.0"
-    jss-preset-default "^2.0.0"
-    prop-types "^15.5.8"
+react-css-property-operations@^15.4.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react-css-property-operations/-/react-css-property-operations-15.4.1.tgz#4c0e305df4cc35f0f5fd2d65a79214c8b012db35"
 
-reactxp@^0.34.3:
+react-jss@^7.0.0-pre.1:
+  version "7.0.0-pre.1"
+  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-7.0.0-pre.1.tgz#948127be53cd8c9fbd2362e87c1f4a93382aeb26"
+  dependencies:
+    common-tags "^1.4.0"
+    hoist-non-react-statics "^1.2.0"
+    jss "^8.0.0"
+    jss-preset-default "^3.0.0"
+    prop-types "^15.5.8"
+    theming "^1.0.1"
+
+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.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/react-primitives/-/react-primitives-0.4.3.tgz#4970afda5a32dccf5ea180380e3a0e16192e4b83"
+  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"
+
+react@^15.5.4:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
+  dependencies:
+    create-react-class "^15.6.0"
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
+reactxp@0.34.3:
   version "0.34.3"
   resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.34.3.tgz#6481992e57758ae6ffffbfde3d497527bb495032"
   dependencies:
@@ -974,6 +1152,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"
@@ -1010,25 +1194,25 @@ strip-ansi@^3.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-style-loader@^0.17.0:
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.17.0.tgz#e8254bccdb7af74bd58274e36107b4d5ab4df310"
+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-17:
-  version "2.0.0-17"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.0.0-17.tgz#9d49e5b351f2c3e13698ee00d189a3c951735088"
+styled-components@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.1.1.tgz#7e9b5bc319ee3963b47aebb74f4658119ea9d484"
   dependencies:
     buffer "^5.0.3"
     css-to-react-native "^2.0.3"
     fbjs "^0.8.9"
     hoist-non-react-statics "^1.2.0"
-    inline-style-prefixer "^2.0.5"
     is-function "^1.0.1"
     is-plain-object "^2.0.1"
     prop-types "^15.5.4"
-    stylis "^2.0.0"
+    stylis "^3.2.1"
     supports-color "^3.2.3"
 
 styletron-client@^2.5.7:
@@ -1047,9 +1231,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.2.1:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.3.tgz#fed751d792af3f48a247769f55aca05c1a100a09"
 
 supports-color@^2.0.0:
   version "2.0.0"
@@ -1061,6 +1245,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"
@@ -1077,6 +1267,16 @@ synctasks@^0.2.9:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/synctasks/-/synctasks-0.2.17.tgz#38852f008878de2e941b6e458ddf552245268da1"
 
+theming@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/theming/-/theming-1.0.1.tgz#a3838c9de635e2f29fc9cd3dea4bf68d3c5a650a"
+  dependencies:
+    brcast "^2.0.0"
+    is-function "^1.0.1"
+    is-plain-object "^2.0.1"
+    prop-types "^15.5.8"
+    react "^15.5.4"
+
 ua-parser-js@^0.7.9:
   version "0.7.12"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
@@ -1105,7 +1305,7 @@ vendors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
 
-warning@3.0.0, warning@^3.0.0:
+warning@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
   dependencies:

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/guides/accessibility.md

@@ -40,35 +40,40 @@ using `aria-label`.
 In some cases, we also want to alert the end user of the type of selected
 component (i.e., that it is a “button”). To provide more context to screen
 readers, you should specify the `accessibilityRole` property. (Note that React
-Native for Web provides a compatibility mapping of equivalent
+Native for Web also provides a compatibility mapping of equivalent
 `accessibilityTraits` and `accessibilityComponentType` values to
 `accessibilityRole`).
 
 The `accessibilityRole` prop is used to infer an [analogous HTML
-element][html-aria-url] to use in addition to the resulting ARIA `role`, where
-possible. While this may contradict some ARIA recommendations, it also helps
-avoid certain HTML5 conformance errors and accessibility anti-patterns (e.g.,
-giving a `heading` role to a `button` element).
+element][html-aria-url] and ARIA `role`, where possible. In most cases, both
+the element and ARIA `role` are rendered. While this may contradict some ARIA
+recommendations, it also helps avoid certain HTML5 conformance errors and
+accessibility anti-patterns (e.g., giving a `heading` role to a `button`
+element) and browser bugs.
 
 For example:
 
 * `<View accessibilityRole='article' />` => `<article role='article' />`.
 * `<View accessibilityRole='banner' />` => `<header role='banner' />`.
-* `<View accessibilityRole='button' />` => `<button type='button' role='button' />`.
+* `<View accessibilityRole='button' />` => `<div role='button' tabIndex='0' />`.
+* `<Text accessibilityRole='label' />` => `<label />`.
 * `<Text accessibilityRole='link' href='/' />` => `<a role='link' href='/' />`.
 * `<View accessibilityRole='main' />` => `<main role='main' />`.
 
-In the example below, the `TouchableWithoutFeedback` is announced by screen
-readers as a native Button.
+In the example below, the `TouchableHighlight` is announced by screen
+readers as a button.
 
-```
-<TouchableWithoutFeedback accessibilityRole="button" onPress={this._onPress}>
+```js
+<TouchableHighlight accessibilityRole="button" onPress={this._handlePress}>
   <View style={styles.button}>
     <Text style={styles.buttonText}>Press me!</Text>
   </View>
-</TouchableWithoutFeedback>
+</TouchableHighlight>
 ```
 
+Note: The `button` role is not implemented using the native `button` element
+due to browsers limiting the use of flexbox layout on its children.
+
 Note: Avoid changing `accessibilityRole` values over time or after user
 actions. Generally, accessibility APIs do not provide a means of notifying
 assistive technologies of a `role` value change.

docs/storybook/.storybook/addons.js

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

docs/storybook/.storybook/config.js

@@ -1,10 +1,21 @@
-import { configure, addDecorator } from '@kadira/storybook';
+import { setOptions } from '@kadira/storybook-addon-options';
 import centered from './decorator-centered';
+import { configure, addDecorator } from '@kadira/storybook';
 
-const context = require.context('../', true, /Example\.js$/);
+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);
 }

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

@@ -3,7 +3,9 @@ import { StyleSheet, View } from 'react-native';
 
 const styles = StyleSheet.create({
   root: {
-    minHeight: '100vh'
+    minHeight: '100vh',
+    maxWidth: 680,
+    marginHorizontal: 'auto'
   }
 });
 

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,87 @@
+/**
+ * @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,28 @@
+/**
+ * @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;

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

@@ -0,0 +1,11 @@
+/**
+ * @flow
+ */
+
+import NetworkImage from './NetworkImage';
+import React from 'react';
+import sources from '../sources';
+
+const ImageOnErrorExample = () => <NetworkImage logMethod="onError" source={sources.broken} />;
+
+export default ImageOnErrorExample;

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

@@ -0,0 +1,13 @@
+/**
+ * @flow
+ */
+
+import { createUncachedURI } from '../helpers';
+import NetworkImage from './NetworkImage';
+import React from 'react';
+import sources from '../sources';
+
+const ImageOnLoadExample = () =>
+  <NetworkImage logMethod="onLoad" source={createUncachedURI(sources.small)} />;
+
+export default ImageOnLoadExample;

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

@@ -0,0 +1,13 @@
+/**
+ * @flow
+ */
+
+import { createUncachedURI } from '../helpers';
+import NetworkImage from './NetworkImage';
+import React from 'react';
+import sources from '../sources';
+
+const ImageOnLoadEndExample = () =>
+  <NetworkImage logMethod="onLoadEnd" source={createUncachedURI(sources.small)} />;
+
+export default ImageOnLoadEndExample;

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

@@ -0,0 +1,13 @@
+/**
+ * @flow
+ */
+
+import { createUncachedURI } from '../helpers';
+import NetworkImage from './NetworkImage';
+import React from 'react';
+import sources from '../sources';
+
+const ImageOnLoadStartExample = () =>
+  <NetworkImage logMethod="onLoadStart" source={createUncachedURI(sources.small)} />;
+
+export default ImageOnLoadStartExample;

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

@@ -0,0 +1,74 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import sources from '../sources';
+import { Image, StyleSheet, Text, View } from 'react-native';
+
+const ImageResizeModeExample = () =>
+  <View>
+    {[sources.small, sources.large].map((source, i) => {
+      return (
+        <View key={i}>
+          <View style={styles.horizontal}>
+            <View>
+              <Text style={[styles.resizeModeText]}>Contain</Text>
+              <Image
+                resizeMode={Image.resizeMode.contain}
+                source={source}
+                style={styles.resizeMode}
+              />
+            </View>
+            <View>
+              <Text style={[styles.resizeModeText]}>Cover</Text>
+              <Image
+                resizeMode={Image.resizeMode.cover}
+                source={source}
+                style={styles.resizeMode}
+              />
+            </View>
+            <View>
+              <Text style={[styles.resizeModeText]}>Stretch</Text>
+              <Image
+                resizeMode={Image.resizeMode.stretch}
+                source={source}
+                style={styles.resizeMode}
+              />
+            </View>
+            <View>
+              <Text style={[styles.resizeModeText]}>Repeat</Text>
+              <Image resizeMode={'repeat'} source={source} style={styles.resizeMode} />
+            </View>
+            <View>
+              <Text style={[styles.resizeModeText]}>Center</Text>
+              <Image resizeMode={'center'} source={source} style={styles.resizeMode} />
+            </View>
+          </View>
+        </View>
+      );
+    })}
+  </View>;
+
+const styles = StyleSheet.create({
+  horizontal: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between'
+  },
+  resizeMode: {
+    borderColor: 'black',
+    borderWidth: 0.5,
+    height: 60,
+    width: 90
+  },
+  resizeModeText: {
+    fontSize: 11,
+    marginBottom: 3
+  },
+  leftMargin: {
+    marginLeft: 10
+  }
+});
+
+export default ImageResizeModeExample;

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

@@ -0,0 +1,47 @@
+/**
+ * @flow
+ */
+
+import sources from '../sources';
+import React from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+
+const ImageSourceExample = () =>
+  <View style={styles.row}>
+    <View style={styles.column}>
+      <Text style={styles.text}>Static image</Text>
+      <Image source={sources.static} style={styles.image} />
+    </View>
+    <View style={styles.column}>
+      <Text style={styles.text}>Animated GIF</Text>
+      <Image source={sources.animatedGif} style={styles.image} />
+    </View>
+    <View style={styles.column}>
+      <Text style={styles.text}>Data PNG</Text>
+      <Image source={sources.dataPng} style={styles.image} />
+    </View>
+    <View style={styles.column}>
+      <Text style={styles.text}>Data SVG</Text>
+      <Image source={sources.dataSvg} style={styles.image} />
+    </View>
+  </View>;
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  column: {
+    marginRight: '1rem'
+  },
+  text: {
+    marginBottom: '0.5rem'
+  },
+  image: {
+    flex: 1,
+    height: 50,
+    resizeMode: 'contain'
+  }
+});
+
+export default ImageSourceExample;

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

@@ -0,0 +1,66 @@
+/**
+ * @flow
+ */
+
+import { createUncachedURI } from '../helpers';
+import sources from '../sources';
+import React, { PureComponent } from 'react';
+import { Button, Image, StyleSheet, Text, View } from 'react-native';
+
+class ImageGetSizeExample extends PureComponent {
+  static propTypes = {
+    source: Image.propTypes.source
+  };
+
+  state = {
+    showButton: true,
+    startLoad: false,
+    width: 0,
+    height: 0
+  };
+
+  render() {
+    const { showButton, startLoad } = this.state;
+
+    return (
+      <View>
+        {showButton
+          ? <View style={styles.button}>
+              <Button onPress={this._handlePress} title="(4.7MB) Get image dimensions" />
+            </View>
+          : null}
+        {startLoad
+          ? <View>
+              <Text>
+                Source dimensions:{' '}
+                {JSON.stringify({ width: this.state.width, height: this.state.height })}
+              </Text>
+              <Image source={createUncachedURI(this.props.source.uri)} style={styles.image} />
+            </View>
+          : null}
+      </View>
+    );
+  }
+
+  _handlePress = () => {
+    Image.getSize(this.props.source.uri, (width, height) => {
+      this.setState({ startLoad: true, showButton: false, width, height });
+    });
+  };
+}
+
+const styles = StyleSheet.create({
+  button: {
+    maxWidth: 300
+  },
+  image: {
+    backgroundColor: '#eee',
+    height: 227,
+    marginTop: 10,
+    width: 323
+  }
+});
+
+const StaticGetSizeExample = () => <ImageGetSizeExample source={sources.huge} />;
+
+export default StaticGetSizeExample;

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

@@ -0,0 +1,98 @@
+/**
+ * @flow
+ */
+
+import { createUncachedURI } from '../helpers';
+import sources from '../sources';
+import React, { PureComponent } from 'react';
+import { Button, Image, StyleSheet, Text, View } from 'react-native';
+
+class ImagePrefetchExample extends PureComponent {
+  static propTypes = {
+    source: Image.propTypes.source
+  };
+
+  state = {
+    events: [],
+    showButton: true,
+    startLoad: false
+  };
+
+  render() {
+    const { showButton, startLoad } = this.state;
+
+    return (
+      <View>
+        {showButton
+          ? <View style={styles.button}>
+              <Button onPress={this._handlePress} title="Prefetch image" />
+            </View>
+          : null}
+        {startLoad
+          ? <View>
+              <Text>
+                {this.state.events.join('\n')}
+              </Text>
+              <Image
+                onLoad={this._handleLoad}
+                onLoadEnd={this._handleLoadEnd}
+                onLoadStart={this._handleLoadStart}
+                source={this.props.source}
+                style={styles.image}
+              />
+            </View>
+          : null}
+      </View>
+    );
+  }
+
+  _handleLoad = () => {
+    const startTime = this._startTime;
+    this._loadEventFired(`✔ (prefetched) onLoad (+${Date.now() - startTime}ms)`);
+  };
+
+  _handleLoadEnd = () => {
+    const startTime = this._startTime;
+    this._loadEventFired(`✔ (prefetched) onLoadEnd (+${Date.now() - startTime}ms)`);
+  };
+
+  _handleLoadStart = () => {
+    const startTime = this._startTime;
+    this._loadEventFired(`✔ (prefetched) onLoadStart (+${Date.now() - startTime}ms)`);
+  };
+
+  _handlePress = () => {
+    this._startTime = this._startTime || Date.now();
+
+    Image.prefetch(createUncachedURI(this.props.source.uri)).then(
+      () => {
+        this._loadEventFired('✔ Prefetch OK');
+        this.setState(() => ({ startLoad: true }));
+      },
+      error => {
+        this._loadEventFired(`✘ Prefetch failed (+${Date.now() - this._startTime}ms)`);
+        console.log(error);
+      }
+    );
+  };
+
+  _loadEventFired = event => {
+    this.setState(state => ({ events: [...state.events, event], showButton: false }));
+  };
+}
+
+const styles = StyleSheet.create({
+  button: {
+    maxWidth: 300
+  },
+  image: {
+    backgroundColor: '#eee',
+    height: 150,
+    marginTop: 10,
+    width: 150
+  }
+});
+
+const StaticPrefetchExample = () => <ImagePrefetchExample source={sources.prefetchable} />;
+
+export default StaticPrefetchExample;

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

@@ -0,0 +1,30 @@
+/**
+ * @flow
+ */
+
+// import React from 'react';
+import { StyleSheet } from 'react-native';
+
+const createUncachedURI = source => {
+  const helper = str => `${str}?t=${Date.now()}`;
+  const uri = typeof source === 'string' ? source : source.uri;
+  return typeof source === 'string' ? helper(uri) : { ...source, uri: helper(uri) };
+};
+
+const styles = StyleSheet.create({
+  base: {
+    height: 38,
+    width: 38
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  centerRow: {
+    alignItems: 'center'
+  },
+  marginLeft: {
+    marginLeft: '1rem'
+  }
+});
+
+export { createUncachedURI, styles };

docs/storybook/1-components/Image/sources/index.js

@@ -0,0 +1,28 @@
+import placeholder from './bunny.png';
+import staticImage from './uie_thumb_normal@2x.png';
+
+const dataPng =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
+const dataSvg =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>';
+
+const sources = {
+  animatedGif: {
+    uri:
+      'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'
+  },
+  broken: { uri: 'http://TYPO_ERROR.github.io/image.png' },
+  small: { uri: 'http://facebook.github.io/react/img/logo_small_2x.png' },
+  large: { uri: 'http://facebook.github.io/react/img/logo_og.png' },
+  largeAlt: { uri: 'http://facebook.github.io/origami/public/images/birds.jpg' },
+  placeholder,
+  prefetchable: { uri: 'http://origami.design/public/images/bird-logo.png' },
+  static: staticImage,
+  huge: {
+    uri: 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Chestnut-mandibled_Toucan.jpg'
+  },
+  dataPng,
+  dataSvg
+};
+
+export default sources;

docs/storybook/1-components/ProgressBar/ProgressDocs.js

@@ -0,0 +1,78 @@
+/**
+ * @flow
+ */
+
+import PropColor from './examples/PropColor';
+import CustomSize from './examples/CustomSize';
+import PropIndeterminate from './examples/PropIndeterminate';
+import PropProgress from './examples/PropProgress';
+import PropTrackColor from './examples/PropTrackColor';
+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
+        description="Color of the progress bar."
+        example={{
+          render: () => <PropColor />
+        }}
+        name="color"
+        typeInfo="?string = #1976D2"
+      />,
+
+      <DocItem
+        description="Whether the progress bar will show indeterminate progress."
+        example={{
+          render: () => <PropIndeterminate />
+        }}
+        name="indeterminate"
+        typeInfo="?boolean = true"
+      />,
+
+      <DocItem
+        description="The progress value (between 0 and 1)."
+        example={{
+          render: () => <PropProgress />
+        }}
+        name="progress"
+        typeInfo="?number"
+      />,
+
+      <DocItem
+        description="Color of the track bar."
+        example={{
+          render: () => <PropTrackColor />
+        }}
+        name="trackColor"
+        typeInfo="?string = 'transparent'"
+      />
+    ]
+  },
+  {
+    title: 'More examples',
+    entries: [
+      <DocItem
+        description="Custom sizes can be created using styles"
+        example={{
+          code: '<ProgressBar style={{ borderRadius: 10, height: 10 }} trackColor="#D1E3F6" />',
+          render: () => <CustomSize />
+        }}
+      />
+    ]
+  }
+];
+
+storiesOf('Components', module).add('ProgressBar', () =>
+  <UIExplorer
+    description="Display an activity progress bar"
+    sections={sections}
+    title="ProgressBar"
+    url="components/ProgressBar"
+  />
+);

docs/storybook/1-components/ProgressBar/examples/CustomSize.js

@@ -0,0 +1,27 @@
+/**
+ * @flow
+ */
+
+import { DividerVertical } from '../helpers';
+import React from 'react';
+import { ProgressBar, StyleSheet, View } from 'react-native';
+
+const ProgressBarCustomSizeExample = () =>
+  <View>
+    <ProgressBar color="#1DA1F2" progress={0.33} style={styles.one} trackColor="#D1E3F6" />
+    <DividerVertical />
+    <ProgressBar color="#1DA1F2" progress={0.33} style={styles.two} trackColor="#D1E3F6" />
+  </View>;
+
+const styles = StyleSheet.create({
+  one: {
+    borderRadius: 10,
+    height: 10
+  },
+  two: {
+    borderRadius: 10,
+    height: 20
+  }
+});
+
+export default ProgressBarCustomSizeExample;

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

@@ -0,0 +1,22 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { DividerVertical } from '../helpers';
+import { ProgressBar, View } from 'react-native';
+
+const ProgressBarColorExample = () =>
+  <View>
+    <ProgressBar color="#1DA1F2" progress={0.2} />
+    <DividerVertical />
+    <ProgressBar color="#17BF63" progress={0.4} />
+    <DividerVertical />
+    <ProgressBar color="#F45D22" progress={0.6} />
+    <DividerVertical />
+    <ProgressBar color="#794BC4" progress={0.8} />
+    <DividerVertical />
+    <ProgressBar color="#E0245E" progress={1.0} />
+  </View>;
+
+export default ProgressBarColorExample;

docs/storybook/1-components/ProgressBar/examples/PropIndeterminate.js

@@ -0,0 +1,10 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { ProgressBar } from 'react-native';
+
+const ProgressBarIndeterminateExample = () => <ProgressBar indeterminate trackColor="#D1E3F6" />;
+
+export default ProgressBarIndeterminateExample;

docs/storybook/1-components/ProgressBar/examples/PropProgress.js

@@ -0,0 +1,48 @@
+/**
+ * @flow
+ */
+
+import { DividerVertical } from '../helpers';
+import React, { PureComponent } from 'react';
+import { ProgressBar, StyleSheet, View } from 'react-native';
+
+class ProgressBarProgressExample extends PureComponent {
+  state = { progress: 0 };
+
+  componentDidMount() {
+    this._updateProgress();
+  }
+
+  componentWillUnmount() {
+    window.cancelAnimationFrame(this._frame);
+  }
+
+  render() {
+    return (
+      <View>
+        <ProgressBar color="#794BC4" progress={0.2} style={styles.progress} />
+        <DividerVertical />
+        <ProgressBar color="#794BC4" progress={this._getProgress(0.2)} style={styles.progress} />
+      </View>
+    );
+  }
+
+  _getProgress(offset) {
+    const progress = this.state.progress + offset;
+    return Math.sin(progress % Math.PI) % 1;
+  }
+
+  _updateProgress() {
+    const progress = this.state.progress + 0.01;
+    this.setState(() => ({ progress }));
+    this._frame = window.requestAnimationFrame(() => this._updateProgress());
+  }
+}
+
+const styles = StyleSheet.create({
+  progress: {
+    minWidth: 200
+  }
+});
+
+export default ProgressBarProgressExample;

docs/storybook/1-components/ProgressBar/examples/PropTrackColor.js

@@ -0,0 +1,18 @@
+/**
+ * @flow
+ */
+
+import { DividerVertical } from '../helpers';
+import React from 'react';
+import { ProgressBar, View } from 'react-native';
+
+const ProgressBarTrackColorExample = () =>
+  <View>
+    <ProgressBar color="#1DA1F2" progress={0.1} trackColor="#17BF63" />
+    <DividerVertical />
+    <ProgressBar color="#1DA1F2" progress={0.2} trackColor="#F45D22" />
+    <DividerVertical />
+    <ProgressBar color="#1DA1F2" progress={0.3} trackColor="#794BC4" />
+  </View>;
+
+export default ProgressBarTrackColorExample;

docs/storybook/1-components/ProgressBar/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/ScrollView/ScrollViewDocs.js

@@ -0,0 +1,173 @@
+/* eslint-disable react/jsx-no-bind, react/jsx-sort-props */
+
+/**
+ * @flow
+ */
+
+import { HorizontalExample } from './examples/Horizontal';
+import ScrollToExample from './examples/ScrollTo';
+import ScrollToEndExample from './examples/ScrollToEnd';
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import UIExplorer, { AppText, Code, DocItem, TextList } from '../../ui-explorer';
+
+const sections = [
+  {
+    title: 'Props',
+    entries: [
+      <DocItem name="...View props" />,
+
+      <DocItem
+        name="contentContainerStyle"
+        typeInfo="?style"
+        description="These styles will be applied to the scroll view content container which wraps all of the child views."
+      />,
+
+      <DocItem
+        name="horizontal"
+        typeInfo="?boolean = false"
+        description="When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column."
+        example={{
+          render: () => <HorizontalExample />
+        }}
+      />,
+
+      <DocItem
+        name="keyboardDismissMode"
+        typeInfo="?enum('none', 'on-drag') = 'none'"
+        description={[
+          <AppText>
+            Determines whether the keyboard gets dismissed in response to a scroll drag.
+          </AppText>,
+          <TextList
+            items={[
+              <AppText>
+                <Code>none</Code> (the default): drags do not dismiss the keyboard.
+              </AppText>,
+              <AppText>
+                <Code>on-drag</Code>: the keyboard is dismissed when a drag begins.
+              </AppText>,
+              <AppText>
+                <Code>interactive</Code> (not supported on web; same as <Code>none</Code>)
+              </AppText>
+            ]}
+          />
+        ]}
+      />,
+
+      <DocItem
+        name="onContentSizeChange"
+        typeInfo="?function"
+        description={
+          <AppText>
+            Called when scrollable content view of the <Code>ScrollView</Code> changes. It's
+            implemented using the <Code>onLayout</Code> handler attached to the content container
+            which this <Code>ScrollView</Code> renders.
+          </AppText>
+        }
+      />,
+
+      <DocItem
+        name="onScroll"
+        typeInfo="?function"
+        description={[
+          <AppText>
+            Fires at most once per frame during scrolling. The frequency of the events can be
+            contolled using the <Code>scrollEventThrottle</Code> prop.
+          </AppText>,
+          <AppText>Invoked on scroll with the following event:</AppText>,
+          <Code>{`{
+  nativeEvent: {
+    contentOffset: { x, y },
+    contentSize: { height, width },
+    layoutMeasurement: { height, width }
+  }
+}`}</Code>
+        ]}
+      />,
+
+      <DocItem
+        name="scrollEnabled"
+        typeInfo="?boolean = true"
+        description="When false, the content does not scroll."
+      />,
+
+      <DocItem
+        name="scrollEventThrottle"
+        typeInfo="?number = 0"
+        description={
+          <AppText>
+            This controls how often the scroll event will be fired while scrolling (as a time
+            interval in ms). A lower number yields better accuracy for code that is tracking the
+            scroll position, but can lead to scroll performance problems. The default value is{' '}
+            <Code>0</Code>, which means the scroll event will be sent only once each time the view
+            is scrolled.
+          </AppText>
+        }
+      />
+    ]
+  },
+  {
+    title: 'Instance methods',
+    entries: [
+      <DocItem
+        name="getInnerViewNode"
+        typeInfo="() => node"
+        description="Returns a reference to the underlying content container DOM node within the ScrollView."
+      />,
+
+      <DocItem
+        name="getScrollableNode"
+        typeInfo="() => node"
+        description="Returns a reference to the underlying scrollable DOM node."
+      />,
+
+      <DocItem
+        name="getScrollResponder"
+        typeInfo="() => ScrollResponder"
+        description={
+          <AppText>
+            Returns a reference to the underlying scroll responder, which supports operations like{' '}
+            <Code>scrollTo</Code>. All <Code>ScrollView</Code>-like components should implement this
+            method so that they can be composed while providing access to the underlying scroll
+            responder's methods.
+          </AppText>
+        }
+      />,
+
+      <DocItem
+        name="scrollTo"
+        typeInfo="(options: { x: number = 0; y: number = 0; animated: boolean = true }) => void"
+        description="Scrolls to a given `x`, `y` offset (animation is not currently supported)."
+        example={{
+          render: () => <ScrollToExample />
+        }}
+      />,
+
+      <DocItem
+        name="scrollToEnd"
+        typeInfo="(options: { animated: boolean = true }) => void"
+        description="Scrolls to the end of the scroll view."
+        example={{
+          render: () => <ScrollToEndExample />
+        }}
+      />
+    ]
+  }
+];
+
+storiesOf('Components', module).add('ScrollView', () =>
+  <UIExplorer
+    description={
+      <AppText>
+        A scrollable <Code>View</Code> that provides itegration with the touch-locking responder
+        system. <Code>ScrollView</Code>'s must have a bounded height: either set the height of the
+        view directly (discouraged) or make sure all parent views have bounded height (e.g.,
+        transfer <Code>{'{ flex: 1}'}</Code> down the view stack).
+      </AppText>
+    }
+    sections={sections}
+    title="ScrollView"
+    url="components/ScrollView"
+  />
+);

docs/storybook/1-components/ScrollView/examples/Horizontal.js

@@ -0,0 +1,69 @@
+/* eslint-disable react/jsx-no-bind */
+
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { action } from '@kadira/storybook';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+const onScroll = action('ScrollView.onScroll');
+
+const VerticalExample = () =>
+  <View style={styles.scrollViewContainer}>
+    <ScrollView
+      contentContainerStyle={styles.scrollViewContentContainerStyle}
+      onScroll={onScroll}
+      scrollEventThrottle={16} // ~60 events per second
+      style={styles.scrollViewStyle}
+    >
+      {Array.from({ length: 50 }).map((item, i) =>
+        <View key={i} style={[styles.box, styles.horizontalBox]}>
+          <Text>
+            {i}
+          </Text>
+        </View>
+      )}
+    </ScrollView>
+  </View>;
+
+const HorizontalExample = () =>
+  <View style={styles.scrollViewContainer}>
+    <ScrollView
+      contentContainerStyle={styles.scrollViewContentContainerStyle}
+      horizontal
+      onScroll={onScroll}
+      scrollEventThrottle={16} // ~60 events per second
+      style={styles.scrollViewStyle}
+    >
+      {Array.from({ length: 50 }).map((item, i) =>
+        <View key={i} style={[styles.box, styles.horizontalBox]}>
+          <Text>
+            {i}
+          </Text>
+        </View>
+      )}
+    </ScrollView>
+  </View>;
+
+export { HorizontalExample, VerticalExample };
+
+const styles = StyleSheet.create({
+  box: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    borderWidth: 1
+  },
+  scrollViewContainer: {
+    height: 200,
+    width: 300
+  },
+  scrollViewStyle: {
+    borderWidth: 1
+  },
+  scrollViewContentContainerStyle: {
+    backgroundColor: '#eee',
+    padding: 10
+  }
+});

docs/storybook/1-components/ScrollView/examples/ScrollTo.js

@@ -0,0 +1,59 @@
+/* eslint-disable react/jsx-no-bind */
+
+/**
+ * @flow
+ */
+
+import React, { PureComponent } from 'react';
+import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+export default class ScrollToExample extends PureComponent {
+  render() {
+    return (
+      <View style={styles.scrollViewContainer}>
+        <ScrollView
+          contentContainerStyle={styles.scrollViewContentContainerStyle}
+          ref={scrollview => {
+            this.scrollview = scrollview;
+          }}
+          scrollEventThrottle={16} // ~60 events per second
+          style={styles.scrollViewStyle}
+        >
+          {Array.from({ length: 50 }).map((item, i) =>
+            <View key={i} style={[styles.box, styles.horizontalBox]}>
+              <Text>
+                {i}
+              </Text>
+            </View>
+          )}
+        </ScrollView>
+        <Button
+          onPress={() => {
+            this.scrollview.scrollTo({ y: 100 });
+          }}
+          title="Scroll to 100px"
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  box: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    borderWidth: 1
+  },
+  scrollViewContainer: {
+    height: 150,
+    width: 300
+  },
+  scrollViewStyle: {
+    borderWidth: 1,
+    marginBottom: '1.3125rem'
+  },
+  scrollViewContentContainerStyle: {
+    backgroundColor: '#eee',
+    padding: 10
+  }
+});

docs/storybook/1-components/ScrollView/examples/ScrollToEnd.js

@@ -0,0 +1,59 @@
+/* eslint-disable react/jsx-no-bind */
+
+/**
+ * @flow
+ */
+
+import React, { PureComponent } from 'react';
+import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+export default class ScrollToEndExample extends PureComponent {
+  render() {
+    return (
+      <View style={styles.scrollViewContainer}>
+        <ScrollView
+          contentContainerStyle={styles.scrollViewContentContainerStyle}
+          ref={scrollview => {
+            this.scrollview = scrollview;
+          }}
+          scrollEventThrottle={16} // ~60 events per second
+          style={styles.scrollViewStyle}
+        >
+          {Array.from({ length: 50 }).map((item, i) =>
+            <View key={i} style={[styles.box, styles.horizontalBox]}>
+              <Text>
+                {i}
+              </Text>
+            </View>
+          )}
+        </ScrollView>
+        <Button
+          onPress={() => {
+            this.scrollview.scrollToEnd();
+          }}
+          title="Scroll to end"
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  box: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    borderWidth: 1
+  },
+  scrollViewContainer: {
+    height: 150,
+    width: 300
+  },
+  scrollViewStyle: {
+    borderWidth: 1,
+    marginBottom: '1.3125rem'
+  },
+  scrollViewContentContainerStyle: {
+    backgroundColor: '#eee',
+    padding: 10
+  }
+});

docs/storybook/1-components/Switch/SwitchDocs.js

@@ -0,0 +1,139 @@
+/* eslint-disable react/jsx-sort-props */
+
+/**
+ * @flow
+ */
+
+import CustomSize from './examples/CustomSize';
+import PropActiveThumbColor from './examples/PropActiveThumbColor';
+import PropActiveTrackColor from './examples/PropActiveTrackColor';
+import PropDisabled from './examples/PropDisabled';
+import PropOnValueChange from './examples/PropOnValueChange';
+import PropThumbColor from './examples/PropThumbColor';
+import PropTrackColor from './examples/PropTrackColor';
+import PropValue from './examples/PropValue';
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import UIExplorer, { AppText, Code, DocItem } from '../../ui-explorer';
+
+const sections = [
+  {
+    title: 'Props',
+    entries: [
+      <DocItem name="...View props" />,
+
+      <DocItem
+        description="The color of the thumb grip when the switch is turned on."
+        example={{
+          render: () => <PropActiveThumbColor />
+        }}
+        name="activeThumbColor"
+        typeInfo="?color = #009688"
+      />,
+
+      <DocItem
+        description="The color of the track when the switch is turned on."
+        example={{
+          render: () => <PropActiveTrackColor />
+        }}
+        name="activeTrackColor"
+        typeInfo="?color = #A3D3CF"
+      />,
+
+      <DocItem
+        description="If `true` the user won't be able to interact with the switch."
+        example={{
+          render: () => <PropDisabled />
+        }}
+        name="disabled"
+        typeInfo="?boolean = false"
+      />,
+
+      <DocItem
+        description="Invoked with the new value when the value changes."
+        example={{
+          render: () => <PropOnValueChange />
+        }}
+        name="onValueChange"
+        typeInfo="?function"
+      />,
+
+      <DocItem
+        description="The color of the thumb grip when the switch is turned off."
+        example={{
+          render: () => <PropThumbColor />
+        }}
+        name="thumbColor"
+        typeInfo="?color = #FAFAFA"
+      />,
+
+      <DocItem
+        description="The color of the track when the switch is turned off."
+        example={{
+          render: () => <PropTrackColor />
+        }}
+        name="trackColor"
+        typeInfo="?color = #939393"
+      />,
+
+      <DocItem
+        description="The value of the switch. If `true` the switch will be turned on."
+        example={{
+          render: () => <PropValue />
+        }}
+        name="value"
+        typeInfo="?boolean = false"
+      />,
+
+      <DocItem
+        description="(For compatibility with React Native. Equivalent to &quot;activeTrackColor&quot;)"
+        label="compat"
+        name="onTintColor"
+        typeInfo="?color"
+      />,
+
+      <DocItem
+        description="(For compatibility with React Native. Equivalent to &quot;trackColor&quot;)"
+        label="compat"
+        name="tintColor"
+        typeInfo="?color"
+      />,
+
+      <DocItem
+        description="(For compatibility with React Native. Equivalent to &quot;thumbColor&quot;)"
+        label="compat"
+        name="thumbTintColor"
+        typeInfo="?color"
+      />
+    ]
+  },
+
+  {
+    title: 'More examples',
+    entries: [
+      <DocItem
+        description="Custom sizes can be created using styles"
+        example={{
+          code: '<Switch style={{ height: 30 }} />',
+          render: () => <CustomSize />
+        }}
+      />
+    ]
+  }
+];
+
+storiesOf('Components', module).add('Switch', () =>
+  <UIExplorer
+    description={
+      <AppText>
+        This is a controlled component that requires an <Code>onValueChange</Code> callback that
+        updates the value prop in order for the component to reflect user actions. If the{' '}
+        <Code>value</Code> prop is not updated, the component will continue to render the supplied{' '}
+        <Code>value</Code> prop instead of the expected result of any user actions.
+      </AppText>
+    }
+    sections={sections}
+    title="Switch"
+    url="components/Switch"
+  />
+);

docs/storybook/1-components/Switch/examples/CustomSize.js

@@ -0,0 +1,42 @@
+/**
+ * @flow
+ */
+
+import React, { PureComponent } from 'react';
+import { Switch, View } from 'react-native';
+
+class CustomSizeExample extends PureComponent {
+  state = {
+    firstIsOn: true,
+    secondIsOn: false
+  };
+
+  render() {
+    const { firstIsOn, secondIsOn } = this.state;
+
+    return (
+      <View>
+        <Switch
+          onValueChange={this._handleFirst}
+          style={{ marginBottom: 10, height: 30 }}
+          value={firstIsOn}
+        />
+        <Switch
+          onValueChange={this._handleSecond}
+          style={{ height: 30, width: 150 }}
+          value={secondIsOn}
+        />
+      </View>
+    );
+  }
+
+  _handleFirst = value => {
+    this.setState({ firstIsOn: value });
+  };
+
+  _handleSecond = value => {
+    this.setState({ secondIsOn: value });
+  };
+}
+
+export default CustomSizeExample;

docs/storybook/1-components/Switch/examples/PropActiveThumbColor.js

@@ -0,0 +1,24 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { styles } from '../helpers';
+import { Switch, View } from 'react-native';
+
+const colors = ['#1DA1F2', '#17BF63', '#F45D22', '#794BC4', '#E0245E'];
+const itemStyle = [styles.marginVertical, styles.marginRight];
+
+const SwitchActiveThumbColorExample = () =>
+  <View style={styles.row}>
+    <View style={itemStyle}>
+      <Switch value={true} />
+    </View>
+    {colors.map((color, i) =>
+      <View key={i} style={itemStyle}>
+        <Switch activeThumbColor={color} activeTrackColor="#ccc" value={true} />
+      </View>
+    )}
+  </View>;
+
+export default SwitchActiveThumbColorExample;

docs/storybook/1-components/Switch/examples/PropActiveTrackColor.js

@@ -0,0 +1,24 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { styles } from '../helpers';
+import { Switch, View } from 'react-native';
+
+const colors = ['#1DA1F2', '#17BF63', '#F45D22', '#794BC4', '#E0245E'];
+const itemStyle = [styles.marginVertical, styles.marginRight];
+
+const SwitchActiveTrackColorExample = () =>
+  <View style={styles.row}>
+    <View style={itemStyle}>
+      <Switch value={true} />
+    </View>
+    {colors.map((color, i) =>
+      <View key={i} style={itemStyle}>
+        <Switch activeThumbColor="#ccc" activeTrackColor={color} value={true} />
+      </View>
+    )}
+  </View>;
+
+export default SwitchActiveTrackColorExample;

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

@@ -0,0 +1,19 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { styles } from '../helpers';
+import { Switch, View } from 'react-native';
+
+const SwitchDisabledExample = () =>
+  <View style={styles.row}>
+    <View style={styles.marginRight}>
+      <Switch disabled={true} value={false} />
+    </View>
+    <View style={styles.marginRight}>
+      <Switch disabled={true} value={true} />
+    </View>
+  </View>;
+
+export default SwitchDisabledExample;

docs/storybook/1-components/Switch/examples/PropOnValueChange.js

@@ -0,0 +1,63 @@
+/**
+ * @flow
+ */
+
+import { styles } from '../helpers';
+import React, { PureComponent } from 'react';
+import { Switch, Text, View } from 'react-native';
+
+class SwitchOnValueChangeExample extends PureComponent {
+  state = {
+    eventSwitchIsOn: false,
+    eventSwitchRegressionIsOn: true
+  };
+
+  render() {
+    const { eventSwitchIsOn, eventSwitchRegressionIsOn } = this.state;
+
+    return (
+      <View style={styles.row}>
+        <View style={[styles.alignCenter, styles.marginRight]}>
+          <Switch
+            onValueChange={this._handleEventSwitch}
+            style={styles.marginBottom}
+            value={eventSwitchIsOn}
+          />
+          <Switch
+            onValueChange={this._handleEventSwitch}
+            style={styles.marginBottom}
+            value={eventSwitchIsOn}
+          />
+          <Text>
+            {eventSwitchIsOn ? 'On' : 'Off'}
+          </Text>
+        </View>
+        <View style={styles.alignCenter}>
+          <Switch
+            onValueChange={this._handleEventSwitchRegression}
+            style={styles.marginBottom}
+            value={eventSwitchRegressionIsOn}
+          />
+          <Switch
+            onValueChange={this._handleEventSwitchRegression}
+            style={styles.marginBottom}
+            value={eventSwitchRegressionIsOn}
+          />
+          <Text>
+            {eventSwitchRegressionIsOn ? 'On' : 'Off'}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  _handleEventSwitch = value => {
+    this.setState({ eventSwitchIsOn: value });
+  };
+
+  _handleEventSwitchRegression = value => {
+    this.setState({ eventSwitchRegressionIsOn: value });
+  };
+}
+
+export default SwitchOnValueChangeExample;

docs/storybook/1-components/Switch/examples/PropThumbColor.js

@@ -0,0 +1,24 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { styles } from '../helpers';
+import { Switch, View } from 'react-native';
+
+const colors = ['#ddd', '#aaa', '#999', '#666', '#000'];
+const itemStyle = [styles.marginVertical, styles.marginRight];
+
+const SwitchThumbColorExample = () =>
+  <View style={styles.row}>
+    <View style={itemStyle}>
+      <Switch value={false} />
+    </View>
+    {colors.map((color, i) =>
+      <View key={i} style={itemStyle}>
+        <Switch thumbColor={color} value={false} />
+      </View>
+    )}
+  </View>;
+
+export default SwitchThumbColorExample;

docs/storybook/1-components/Switch/examples/PropTrackColor.js

@@ -0,0 +1,24 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { styles } from '../helpers';
+import { Switch, View } from 'react-native';
+
+const colors = ['#ddd', '#aaa', '#999', '#666', '#000'];
+const itemStyle = [styles.marginVertical, styles.marginRight];
+
+const SwitchTrackColorExample = () =>
+  <View style={styles.row}>
+    <View style={itemStyle}>
+      <Switch value={false} />
+    </View>
+    {colors.map((color, i) =>
+      <View key={i} style={itemStyle}>
+        <Switch trackColor={color} value={false} />
+      </View>
+    )}
+  </View>;
+
+export default SwitchTrackColorExample;

docs/storybook/1-components/Switch/examples/PropValue.js

@@ -0,0 +1,19 @@
+/**
+ * @flow
+ */
+
+import { styles } from '../helpers';
+import React from 'react';
+import { Switch, View } from 'react-native';
+
+const SwitchValueExample = () =>
+  <View style={styles.row}>
+    <View style={styles.marginRight}>
+      <Switch value={false} />
+    </View>
+    <View style={styles.marginRight}>
+      <Switch value={true} />
+    </View>
+  </View>;
+
+export default SwitchValueExample;

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

@@ -0,0 +1,36 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+const DividerHorizontal = () => <View style={styles.horizontalDivider} />;
+const DividerVertical = () => <View style={styles.verticalDivider} />;
+
+export const styles = StyleSheet.create({
+  horizontalDivider: {
+    width: '0.6rem'
+  },
+  verticalDivider: {
+    height: '1.3125rem'
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  marginRight: {
+    marginRight: 10
+  },
+  marginBottom: {
+    marginBottom: 10
+  },
+  marginVertical: {
+    marginVertical: 5
+  },
+  alignCenter: {
+    alignItems: 'center'
+  }
+});
+
+export { DividerHorizontal, DividerVertical };

docs/storybook/1-components/Text/TextDocs.js

@@ -0,0 +1,253 @@
+/* eslint-disable react/jsx-sort-props */
+
+/**
+ * @flow
+ */
+
+import PropChildren from './examples/PropChildren';
+import PropNumberOfLines from './examples/PropNumberOfLines';
+import PropOnPress from './examples/PropOnPress';
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import UIExplorer, { AppText, Code, DocItem, StyleList } from '../../ui-explorer';
+
+const stylePropTypes = [
+  {
+    name: '...View#style'
+  },
+  {
+    name: 'color',
+    typeInfo: 'color'
+  },
+  {
+    name: 'fontFamily',
+    typeInfo: 'string'
+  },
+  {
+    label: 'web',
+    name: 'fontFeatureSettings',
+    typeInfo: 'string'
+  },
+  {
+    name: 'fontSize',
+    typeInfo: 'number | string'
+  },
+  {
+    name: 'fontStyle',
+    typeInfo: 'string'
+  },
+  {
+    name: 'fontWeight',
+    typeInfo: 'string'
+  },
+  {
+    name: 'letterSpacing',
+    typeInfo: 'string'
+  },
+  {
+    name: 'lineHeight',
+    typeInfo: 'string'
+  },
+  {
+    name: 'textAlign',
+    typeInfo: 'string'
+  },
+  {
+    name: 'textAlignVertical',
+    typeInfo: 'string'
+  },
+  {
+    name: 'textDecorationLine',
+    typeInfo: 'string'
+  },
+  {
+    label: 'web',
+    name: 'textIndent',
+    typeInfo: 'string'
+  },
+  {
+    label: 'web',
+    name: 'textOverflow',
+    typeInfo: 'string'
+  },
+  {
+    label: 'web',
+    name: 'textRendering',
+    typeInfo: 'string'
+  },
+  {
+    name: 'textShadowColor',
+    typeInfo: 'color'
+  },
+  {
+    name: 'textShadowOffset',
+    typeInfo: '{ height: number, width: number }'
+  },
+  {
+    name: 'textShadowRadius',
+    typeInfo: 'number | string'
+  },
+  {
+    label: 'web',
+    name: 'textTransform',
+    typeInfo: 'string'
+  },
+  {
+    label: 'web',
+    name: 'unicodeBidi',
+    typeInfo: 'string'
+  },
+  {
+    name: 'whiteSpace',
+    typeInfo: 'string'
+  },
+  {
+    label: 'web',
+    name: 'wordWrap',
+    typeInfo: 'string'
+  },
+  {
+    name: 'writingDirection',
+    typeInfo: 'string'
+  }
+];
+
+const sections = [
+  {
+    title: 'Props',
+    entries: [
+      <DocItem
+        name="accessibilityLabel"
+        typeInfo="?string"
+        description="Overrides the text that is read by a screen reader when the user interacts with the element. (This is implemented using 'aria-label'.)"
+      />,
+
+      <DocItem
+        name="accessibilityLiveRegion"
+        typeInfo="?enum('assertive', 'none', 'polite')"
+        description={
+          <AppText>
+            Indicates to assistive technologies whether to notify the user when the view changes.
+            The values of this attribute are expressed in degrees of importance. When regions are
+            specified as <Code>polite</Code> (recommended), updates take low priority. When regions
+            are specified as <Code>assertive</Code>, assistive technologies will interrupt and
+            immediately notify the user. (This is implemented using 'aria-live'.)
+          </AppText>
+        }
+      />,
+
+      <DocItem
+        label="web"
+        name="accessibilityRole"
+        typeInfo="?enum(roles)"
+        description={
+          <AppText>
+            Allows assistive technologies to present and support interaction with the view in a
+            manner that is consistent with user expectations for similar views of that type. For
+            example, marking a touchable view with an <Code>accessibilityRole</Code> of{' '}
+            <Code>button</Code>. For compatibility with React Native{' '}
+            <Code>accessibilityTraits</Code> and <Code>accessibilityComponentType</Code> are mapped
+            to <Code>accessibilityRole</Code>. (This is implemented using ARIA roles.)
+          </AppText>
+        }
+      />,
+
+      <DocItem
+        name="accessible"
+        typeInfo="?boolean"
+        description={
+          <AppText>
+            When <Code>true</Code>, indicates that the view is an accessibility element (i.e.,
+            focusable) and groups its child content. By default, all the touchable elements and
+            elements with <Code>accessibilityRole</Code> of <Code>button</Code> and{' '}
+            <Code>link</Code> are accessible. (This is implemented using 'tabindex'.)
+          </AppText>
+        }
+      />,
+
+      <DocItem
+        name="children"
+        typeInfo="?any"
+        description={`Child content. Nested text components will inherit the styles of their parents
+(only backgroundColor is inherited from non-Text parents). <Text>
+only supports other <Text> and raw text (strings) as children.`}
+        example={{
+          code: '',
+          render: () => <PropChildren />
+        }}
+      />,
+
+      <DocItem
+        name="importantForAccessibility"
+        typeInfo="?enum('auto', 'no', 'no-hide-descendants', 'yes')"
+        description={
+          'A value of `no` will remove the element from the tab flow.\n\nA value of `no-hide-descendants` will hide the element and its children from assistive technologies. (This is implemented using `aria-hidden`.)'
+        }
+      />,
+
+      <DocItem
+        name="numberOfLines"
+        typeInfo="?number"
+        description="Truncates the text with an ellipsis after this many lines. Currently only supports `1`."
+        example={{
+          code: '',
+          render: () => <PropNumberOfLines />
+        }}
+      />,
+
+      <DocItem
+        name="onLayout"
+        typeInfo="?function"
+        description="Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width, height } } }`, where `x` and `y` are the offsets from the parent node."
+      />,
+
+      <DocItem
+        name="onPress"
+        typeInfo="?function"
+        description="Called when the Text is pressed"
+        example={{
+          code: '',
+          render: () => <PropOnPress />
+        }}
+      />,
+
+      <DocItem
+        name="selectable"
+        typeInfo="?boolean"
+        description="When `false`, the text is not selectable."
+      />,
+
+      <DocItem
+        name="style"
+        typeInfo="?style"
+        description={<StyleList stylePropTypes={stylePropTypes} />}
+      />,
+
+      <DocItem
+        name="testID"
+        typeInfo="?string"
+        description="Used to locate this view in end-to-end tests. The test ID is rendered to a `data-testid` DOM attribute"
+      />
+    ]
+  }
+];
+
+storiesOf('Components', module).add('Text', () =>
+  <UIExplorer
+    description={[
+      <AppText>
+        Text is component for displaying text. It supports style, basic touch handling, and inherits
+        typographic styles from ancestor elements.
+      </AppText>,
+      <AppText>
+        Text is unique relative to layout: child elements use text layout ("inline") rather than
+        flexbox layout. This means that elements inside of a Text are not rectangles, as they wrap
+        when reaching the edge of their container.
+      </AppText>,
+      <AppText>NOTE: Text will transfer all other props to the rendered HTML element.</AppText>
+    ]}
+    sections={sections}
+    title="Text"
+    url="components/Text"
+  />
+);

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

@@ -0,0 +1,56 @@
+/* eslint-disable react/prop-types */
+
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { Image, Text, View } from 'react-native';
+
+const Entity = ({ children }) =>
+  <Text style={{ fontWeight: '500', color: '#527fe4' }}>
+    {children}
+  </Text>;
+
+const TextChildrenExample = () =>
+  <View>
+    <Text>
+      This text contains an inline blue view{' '}
+      <View style={{ width: 25, height: 25, backgroundColor: 'steelblue' }} /> and an inline image{' '}
+      <Image
+        source={{ uri: 'http://lorempixel.com/30/11' }}
+        style={{ width: 30, height: 11, resizeMode: 'cover' }}
+      />
+      . Neat, huh?
+    </Text>
+
+    <View>
+      <Text>
+        (Normal text,
+        <Text style={{ fontWeight: 'bold' }}>
+          (and bold
+          <Text style={{ fontSize: 11, color: '#527fe4' }}>(and tiny inherited bold blue)</Text>
+          )
+        </Text>
+        )
+      </Text>
+      <Text style={{ opacity: 0.7 }}>
+        (opacity
+        <Text>
+          (is inherited
+          <Text style={{ opacity: 0.7 }}>
+            (and accumulated
+            <Text style={{ backgroundColor: '#ffaaaa' }}>(and also applies to the background)</Text>
+            )
+          </Text>
+          )
+        </Text>
+        )
+      </Text>
+      <Text style={{ fontSize: 12 }}>
+        <Entity>Entity Name</Entity>
+      </Text>
+    </View>
+  </View>;
+
+export default TextChildrenExample;

docs/storybook/1-components/Text/examples/PropNumberOfLines.js

@@ -0,0 +1,27 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { Text, View } from 'react-native';
+
+const TextNumberOfLinesExample = () =>
+  <View style={{ maxWidth: 320 }}>
+    <Text numberOfLines={1}>
+      Maximum of one line, no matter how much I write here. If I keep writing, it
+      {"'"}
+      ll just truncate after one line.
+    </Text>
+    <Text numberOfLines={2} style={{ marginTop: 20 }}>
+      Maximum of two lines, no matter how much I write here. If I keep writing, it
+      {"'"}
+      ll just truncate after two lines.
+    </Text>
+    <Text style={{ marginTop: 20 }}>
+      No maximum lines specified, no matter how much I write here. If I keep writing, it
+      {"'"}
+      ll just keep going and going.
+    </Text>
+  </View>;
+
+export default TextNumberOfLinesExample;

docs/storybook/1-components/Text/examples/PropOnLayout.js

@@ -0,0 +1,10 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { Text } from 'react-native';
+
+const TextOnLayoutExample = () => <Text />;
+
+export default TextOnLayoutExample;

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

@@ -0,0 +1,54 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+class TextOnPressExample extends React.Component {
+  state = { timesPressed: 0 };
+
+  render() {
+    let textLog = '';
+    if (this.state.timesPressed > 1) {
+      textLog = this.state.timesPressed + 'x text onPress';
+    } else if (this.state.timesPressed > 0) {
+      textLog = 'text onPress';
+    }
+
+    return (
+      <View>
+        <Text onPress={this._handlePress} style={styles.textBlock}>
+          Text has built-in onPress handling
+        </Text>
+        <View style={styles.logBox}>
+          <Text>
+            {textLog}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  _handlePress = () => {
+    this.setState({
+      timesPressed: this.state.timesPressed + 1
+    });
+  };
+}
+
+const styles = StyleSheet.create({
+  logBox: {
+    padding: 20,
+    marginTop: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9'
+  },
+  textBlock: {
+    fontWeight: '500',
+    color: 'blue'
+  }
+});
+
+export default TextOnPressExample;

docs/storybook/1-components/Text/examples/PropSelectable.js

@@ -0,0 +1,12 @@
+/**
+ * @flow
+ */
+
+/*
+import React from 'react';
+import { View } from 'react-native';
+
+const ViewStyleExample = () => null;
+
+export default ViewStyleExample;
+*/