0.2.1

[fix] corrupt hydrate import
Update version in benchmark results table
2026-03-30 23:23:35 +08:00 · 2017-12-20 17:31:25 +00:00 · 2017-12-20 17:45:45 +01:00 · 2017-12-20 15:05:58 +00:00 · 2017-12-20 15:01:12 +00:00 · 2017-12-20 14:51:44 +00:00
330 changed files with 13770 additions and 6174 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -56,7 +56,6 @@
    "no-dupe-class-members": 2,
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
-    "no-duplicate-imports": 2,
    "no-empty-character-class": 2,
    "no-empty-pattern": 2,
    "no-eval": 2,
--- a/.flowconfig
+++ b/.flowconfig
@@ -2,7 +2,6 @@
 .*/__tests__/.*
 .*/benchmarks/.*
 .*/docs/.*
-.*/node_modules/animated/*
 .*/node_modules/babel-plugin-transform-react-remove-prop-types/*

 [include]
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -104,13 +104,17 @@ Please open an issue with a proposal for a new feature or refactoring before
 starting on the work. We don't want you to waste your efforts on a pull request
 that we won't want to accept.

-## Submitting Changes
+## Pull requests

-* Open a new issue in the [Issue tracker](https://github.com/necolas/react-native-web/issues).
-* Fork the repo.
-* Create a new feature branch based off the `master` branch.
-* Make sure all tests pass and there are no linting errors.
-* Submit a pull request, referencing any issues it addresses.
+**Before submitting a pull request,** please make sure the following is done:
+
+1. Fork the repository and create your branch from `master`.
+2. If you've added code that should be tested, add tests!
+3. If you've changed APIs, update the documentation.
+4. Ensure the tests pass (`yarn test`).
+5. Lint and format your code (`yarn fmt && yarn lint`).
+
+You can now submit a pull request, referencing any issues it addresses.

 Please try to keep your pull request focused in scope and avoid including
 unrelated commits.
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,30 +1,20 @@
-<!--
-React Native for Web is an implementation of React Native. If you have feature
-requests, you should post them to https://productpains.com/product/react-native/.
-
-GitHub issues should only be used for bugs or Web-specific features you believe
-React Native requires.
-
-Make sure to add ALL the information needed to understand the bug so that
-someone can help. If the info is missing we'll add the 'needs more information'
-label and close the issue until there is enough information.
-->
+**Do you want to request a *feature* or report a *bug*?**

 **What is the current behavior?**

-Link to minimal test case: (template: [codepen](https://codepen.io/necolas/pen/PZzwBR?editors=0010))
-
-**What is the expected behaviour?**
-
-**Steps to reproduce**
+**If the current behavior is a bug, please provide the steps to reproduce and
+if a minimal demo of the problem via Glitch or similar (template:
+https://glitch.com/edit/#!/react-native-web-playground).**

 1.
 2.

-**Environment (include versions)**
+**What is the expected behavior?**

-OS:
-Device:
-Browser:
-React Native for Web (version):
-React (version):
+**Environment (include versions). Did this work in previous versions?**
+
+* OS:
+* Device:
+* Browser:
+* React Native for Web (version):
+* React (version):
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,18 +1 @@
-<!--
-Thanks for submitting a pull request! Make sure the PR does only one thing.
-Please provide enough information so that others can review your pull
-request. Make sure you have read the Contributing Guidelines -
-https://github.com/necolas/react-native-web/CONTRIBUTING.md
-->
-
-**This patch solves the following problem**
-
-**Test plan**
-
-**This pull request**
-
- [ ] includes documentation
- [ ] includes tests
- [ ] includes benchmark reports
- [ ] includes an interactive example
- [ ] includes screenshots/videos
+**Before submitting a pull request,** please make sure you have followed the steps the CONTRIBUTING guide.
--- a/.travis.yml
+++ b/.travis.yml
@@ -5,5 +5,4 @@ before_script:
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
 script:
-  - npm run lint
-  - npm test
+  - yarn lint
--- a/README.md
+++ b/README.md
@@ -3,42 +3,56 @@
 [![Build Status][travis-image]][travis-url]
 [![npm version][npm-image]][npm-url]

-[React Native][react-native-url] components and APIs for the Web.
+"React Native for Web" brings the platform-agnostic Components and APIs of
+[React Native][react-native-url] to the Web.

-Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
+Browse the [interactive
+documentation](https://necolas.github.io/react-native-web/storybook/) or [try
+it out](https://glitch.com/edit/#!/react-native-web-playground) on Glitch.

-[npm-image]: https://badge.fury.io/js/react-native-web.svg
-[npm-url]: https://npmjs.org/package/react-native-web
-[react-native-url]: https://facebook.github.io/react-native/
-[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
-[travis-url]: https://travis-ci.org/necolas/react-native-web
+## Features

-## Overview
-
-"React Native for Web" is a project to bring React Native's building blocks and
-touch handling to the Web.
-
-Browse the [UI Explorer](https://necolas.github.io/react-native-web/storybook/)
-to see React Native examples running on Web. Or remix the [React Native for
-Web: Playground](https://glitch.com/edit/#!/react-native-web-playground) on
-Glitch.
+* Interoperability with ReactDOM components.
+* Native-like touch handling.
+* Built-in integration with web accessibility APIs.
+* Built-in support for LTR and RTL layouts.
+* Built-in expressive and reliable subset of CSS.
+* Optimized, vendor-prefixed CSS with [good runtime performance](benchmarks/README.md).
+* Server-side rendering of HTML and critical CSS.
+* Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.

 ## Quick start

-To install in your app:
+Install in your existing app using `yarn` or `npm`:

 ```
-npm install --save react@15.6 react-dom@15.6 react-native-web
+yarn add react react-dom react-native-web
 ```

-NOTE: React Native for Web supports React/ReactDOM 15.4, 15.5, or 15.6.
+Add the `react-native-web/babel` plugin to your Babel configuration. This will
+alias `react-native` to `react-native-web` and exclude any modules not required
+by the app.

-Then read the [Getting Started](docs/guides/getting-started.md) guide.
+```json
+{
+  "plugins": [
+    "react-native-web/babel"
+  ],
+  "presets": [
+    "react-native"
+  ]
+}
+```
+
+(For React/ReactDOM 15.4 – 15.6 support, install `react-native-web@<0.1.0`)
+
+See the [Getting Started](docs/guides/getting-started.md) guide for more details.

 ## Documentation

-The [UI Explorer](https://necolas.github.io/react-native-web/storybook/)
-interactively documents all the APIs and Components.
+The [interactive
+documentation](https://necolas.github.io/react-native-web/storybook/) shows all
+the supported APIs and Components.

 Guides:

@@ -89,6 +103,11 @@ AppRegistry.registerComponent('MyApp', () => App)
 AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })
 ```

+## Starter kits
+
+* [Glitch](https://glitch.com/edit/#!/react-native-web-playground)
+* [create-react-app](https://github.com/facebookincubator/create-react-app)
+
 ## Related projects

 * [react-primitives](https://github.com/lelandrichardson/react-primitives/)
@@ -96,12 +115,12 @@ AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-ro
 * [reactxp](https://github.com/microsoft/reactxp)
 * [react-native-web-player](https://github.com/dabbott/react-native-web-player)

-## Start kits
-
-* [create-react-app](https://github.com/facebookincubator/create-react-app) ([on Glitch](https://glitch.com/edit/#!/react-native-web-playground))
-* [react-native-web-starter](https://github.com/grabcode/react-native-web-starter)
-* [react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack)
-
 ## License

 React Native for Web is [BSD licensed](LICENSE).
+
+[npm-image]: https://badge.fury.io/js/react-native-web.svg
+[npm-url]: https://yarnpkg.com/en/package/react-native-web
+[react-native-url]: https://facebook.github.io/react-native/
+[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
+[travis-url]: https://travis-ci.org/necolas/react-native-web
--- a/babel/tests/snapshots/index-test.js.snap
+++ b/babel/tests/snapshots/index-test.js.snap
@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`1. Rewrite react-native paths for react-native-web 1`] = `
+"
+import { View } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import View from 'react-native-web/dist/components/View';
+"
+`;
+
+exports[`2. Rewrite react-native paths for react-native-web 1`] = `
+"
+import { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import Switch from 'react-native-web/dist/components/Switch';
+import Text from 'react-native-web/dist/components/Text';
+import MyView from 'react-native-web/dist/components/View';
+import ViewPropTypes from 'react-native-web/dist/components/View/ViewPropTypes';
+"
+`;
+
+exports[`3. Rewrite react-native paths for react-native-web 1`] = `
+"
+import { createElement, Switch, StyleSheet } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import createElement from 'react-native-web/dist/modules/createElement';
+import Switch from 'react-native-web/dist/components/Switch';
+import StyleSheet from 'react-native-web/dist/apis/StyleSheet';
+"
+`;
+
+exports[`4. Rewrite react-native paths for react-native-web 1`] = `
+"
+import { InvalidThing, TouchableOpacity } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { InvalidThing } from 'react-native-web';
+import TouchableOpacity from 'react-native-web/dist/components/Touchable/TouchableOpacity';
+"
+`;
+
+exports[`5. Rewrite react-native paths for react-native-web 1`] = `
+"
+import * as RNW from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import * as RNW from 'react-native-web';
+"
+`;
+
+exports[`6. Rewrite react-native paths for react-native-web 1`] = `
+"
+const { View } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const View = require('react-native-web/dist/components/View');
+"
+`;
+
+exports[`7. Rewrite react-native paths for react-native-web 1`] = `
+"
+let { Switch, Text, View: MyView } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+let Switch = require('react-native-web/dist/components/Switch');
+
+let Text = require('react-native-web/dist/components/Text');
+
+let MyView = require('react-native-web/dist/components/View');
+"
+`;
+
+exports[`8. Rewrite react-native paths for react-native-web 1`] = `
+"
+var { createElement, Switch, StyleSheet } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+var createElement = require('react-native-web/dist/modules/createElement');
+
+var Switch = require('react-native-web/dist/components/Switch');
+
+var StyleSheet = require('react-native-web/dist/apis/StyleSheet');
+"
+`;
+
+exports[`9. Rewrite react-native paths for react-native-web 1`] = `
+"
+const { InvalidThing, TouchableOpacity } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const TouchableOpacity = require('react-native-web/dist/components/Touchable/TouchableOpacity');
+"
+`;
+
+exports[`10. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { View } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as View } from 'react-native-web/dist/components/View';
+"
+`;
+
+exports[`11. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as Switch } from 'react-native-web/dist/components/Switch';
+export { default as Text } from 'react-native-web/dist/components/Text';
+export { default as MyView } from 'react-native-web/dist/components/View';
+export { default as ViewPropTypes } from 'react-native-web/dist/components/View/ViewPropTypes';
+"
+`;
+
+exports[`12. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { createElement, Switch, StyleSheet } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as createElement } from 'react-native-web/dist/modules/createElement';
+export { default as Switch } from 'react-native-web/dist/components/Switch';
+export { default as StyleSheet } from 'react-native-web/dist/apis/StyleSheet';
+"
+`;
+
+exports[`13. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { InvalidThing, TouchableOpacity } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { InvalidThing } from 'react-native-web';
+export { default as TouchableOpacity } from 'react-native-web/dist/components/Touchable/TouchableOpacity';
+"
+`;
+
+exports[`14. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { default as RNW } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as RNW } from 'react-native-web';
+"
+`;
--- a/babel/tests/index-test.js
+++ b/babel/tests/index-test.js
@@ -0,0 +1,46 @@
+const plugin = require('..');
+const pluginTester = require('babel-plugin-tester');
+
+pluginTester({
+  plugin,
+  snapshot: true,
+  tests: [
+    // import react-native
+    "import { View } from 'react-native';",
+    "import { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';",
+    "import { createElement, Switch, StyleSheet } from 'react-native';",
+    "import { InvalidThing, TouchableOpacity } from 'react-native';",
+    "import * as RNW from 'react-native';",
+
+    // import react-native-web
+    // "import { View } from 'react-native-web';",
+    // "import { Switch, Text, View as MyView } from 'react-native-web';",
+    // "import { createElement, Switch, StyleSheet } from 'react-native-web';",
+    // "import { InvalidThing, TouchableOpacity } from 'react-native-web';",
+    // "import * as RNW from 'react-native-web';",
+
+    // require react-native
+    "const { View } = require('react-native');",
+    "let { Switch, Text, View: MyView } = require('react-native');",
+    "var { createElement, Switch, StyleSheet } = require('react-native');",
+    "const { InvalidThing, TouchableOpacity } = require('react-native');",
+
+    // require react-native-web
+    // "const { View } = require('react-native-web');",
+    // "let { Switch, Text, View: MyView } = require('react-native-web');",
+    // "var { createElement, Switch, StyleSheet } = require('react-native-web');",
+    // "const { InvalidThing, TouchableOpacity } = require('react-native-web');",
+
+    // export react-native
+    "export { View } from 'react-native';",
+    "export { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';",
+    "export { createElement, Switch, StyleSheet } from 'react-native';",
+    "export { InvalidThing, TouchableOpacity } from 'react-native';",
+    "export { default as RNW } from 'react-native';",
+    {
+      code: "const RNW = require('react-native');",
+      output: "const RNW = require('react-native');",
+      snapshot: false
+    }
+  ]
+});
--- a/babel/index.js
+++ b/babel/index.js
@@ -0,0 +1,182 @@
+const getDistLocation = importName => {
+  const root = 'react-native-web/dist';
+
+  switch (importName) {
+    // apis
+    case 'Animated':
+    case 'AppRegistry':
+    case 'AppState':
+    case 'AsyncStorage':
+    case 'BackHandler':
+    case 'Clipboard':
+    case 'Dimensions':
+    case 'Easing':
+    case 'I18nManager':
+    case 'InteractionManager':
+    case 'Keyboard':
+    case 'Linking':
+    case 'NetInfo':
+    case 'PanResponder':
+    case 'PixelRatio':
+    case 'Platform':
+    case 'StyleSheet':
+    case 'UIManager':
+    case 'Vibration': {
+      return `${root}/apis/${importName}`;
+    }
+
+    // components
+    case 'ActivityIndicator':
+    case 'ART':
+    case 'Button':
+    case 'FlatList':
+    case 'Image':
+    case 'KeyboardAvoidingView':
+    case 'ListView':
+    case 'Modal':
+    case 'Picker':
+    case 'ProgressBar':
+    case 'RefreshControl':
+    case 'ScrollView':
+    case 'SectionList':
+    case 'Slider':
+    case 'StatusBar':
+    case 'Switch':
+    case 'Text':
+    case 'TextInput':
+    case 'View':
+    case 'VirtualizedList': {
+      return `${root}/components/${importName}`;
+    }
+
+    case 'Touchable':
+    case 'TouchableHighlight':
+    case 'TouchableNativeFeedback':
+    case 'TouchableOpacity':
+    case 'TouchableWithoutFeedback': {
+      return `${root}/components/Touchable/${importName}`;
+    }
+
+    // modules
+    case 'createElement':
+    case 'findNodeHandle':
+    case 'NativeModules':
+    case 'processColor':
+    case 'render':
+    case 'unmountComponentAtNode': {
+      return `${root}/modules/${importName}`;
+    }
+
+    // propTypes
+    case 'ColorPropType':
+    case 'EdgeInsetsPropType':
+    case 'PointPropType': {
+      return `${root}/propTypes/${importName}`;
+    }
+    case 'TextPropTypes': {
+      return `${root}/components/Text/${importName}`;
+    }
+    case 'ViewPropTypes': {
+      return `${root}/components/View/${importName}`;
+    }
+
+    default:
+      return;
+  }
+};
+
+const isReactNativeRequire = (t, node) => {
+  const { declarations } = node;
+  if (declarations.length > 1) {
+    return false;
+  }
+  const { id, init } = declarations[0];
+  return (
+    t.isObjectPattern(id) &&
+    t.isCallExpression(init) &&
+    t.isIdentifier(init.callee) &&
+    init.callee.name === 'require' &&
+    init.arguments.length === 1 &&
+    init.arguments[0].value === 'react-native'
+  );
+};
+
+module.exports = function({ types: t }) {
+  return {
+    name: 'Rewrite react-native paths for react-native-web',
+    visitor: {
+      ImportDeclaration(path) {
+        const { source, specifiers } = path.node;
+        if (source && source.value === 'react-native' && specifiers.length) {
+          const imports = specifiers
+            .map(specifier => {
+              if (t.isImportSpecifier(specifier)) {
+                const importName = specifier.imported.name;
+                const distLocation = getDistLocation(importName);
+
+                if (distLocation) {
+                  return t.importDeclaration(
+                    [t.importDefaultSpecifier(t.identifier(specifier.local.name))],
+                    t.stringLiteral(distLocation)
+                  );
+                }
+              }
+              return t.importDeclaration([specifier], t.stringLiteral('react-native-web'));
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(imports);
+        }
+      },
+      ExportNamedDeclaration(path) {
+        const { source, specifiers } = path.node;
+        if (source && source.value === 'react-native' && specifiers.length) {
+          const exports = specifiers
+            .map(specifier => {
+              if (t.isExportSpecifier(specifier)) {
+                const exportName = specifier.exported.name;
+                const localName = specifier.local.name;
+                const distLocation = getDistLocation(localName);
+
+                if (distLocation) {
+                  return t.exportNamedDeclaration(
+                    null,
+                    [t.exportSpecifier(t.identifier('default'), t.identifier(exportName))],
+                    t.stringLiteral(distLocation)
+                  );
+                }
+                return t.exportNamedDeclaration(
+                  null,
+                  [specifier],
+                  t.stringLiteral('react-native-web')
+                );
+              }
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(exports);
+        }
+      },
+      VariableDeclaration(path) {
+        if (isReactNativeRequire(t, path.node)) {
+          const { id } = path.node.declarations[0];
+          const imports = id.properties
+            .map(identifier => {
+              const distLocation = getDistLocation(identifier.key.name);
+              if (distLocation) {
+                return t.variableDeclaration(path.node.kind, [
+                  t.variableDeclarator(
+                    t.identifier(identifier.value.name),
+                    t.callExpression(t.identifier('require'), [t.stringLiteral(distLocation)])
+                  )
+                ]);
+              }
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(imports);
+        }
+      }
+    }
+  };
+};
--- a/benchmarks/README.md
+++ b/benchmarks/README.md
@@ -1,10 +1,10 @@
 # Performance

-To run these benchmarks:
+To run these benchmarks from the root of the project:

 ```
-npm run build:performance
-open ./performance/index.html
+yarn benchmark
+open ./benchmarks/index.html
 ```

 Append `?fastest` to the URL to include the fastest "other libraries", and
@@ -14,12 +14,9 @@ Append `?fastest` to the URL to include the fastest "other libraries", and

 The components used in the render benchmarks are simple enough to be
 implemented by multiple UI or style libraries. The implementations are not
-equivalent in functionality. For example, React Native for Web's stylesheet is
-unique in that it also converts React Native styles to DOM styles, has
-deterministic resolution, and supports RTL layout.
-
-`react-native-web/stylesheet` is a comparative baseline that implements a
-simple `View` without much of React Native's functionality.
+equivalent in functionality. For example, the "React Native for Web" benchmark includes a
+complete `View` implementation and the `StyleSheet` also converts React Native
+styles to DOM styles, has deterministic resolution, and supports RTL layout.

 ## Benchmark results

@@ -27,25 +24,24 @@ Typical render timings*: mean ± two standard deviations.

 | Implementation                        | Deep tree (ms)    | Wide tree (ms)    | Tweets (ms)       |
 | :--- | ---: | ---: | ---: |
-| `css-modules`                         |  `84.19` `±14.69` | `183.37` `±22.98` | |
-| `react-native-web/stylesheet@0.0.113` |  `88.83` `±14.31` | `185.54` `±24.62` | |
-| `react-native-web@0.0.113`            | `110.45` `±19.63` | `251.53` `±32.52` | `15.52` `±7.93ms` |
+| `css-modules`                         |  `80.47` `±25.13` | `144.87` `±32.70` | |
+| `react-native-web@0.2.1`             |  `88.68` `±28.78` | `178.17` `±39.90` | `13.78` `±2.90ms` |

 Other libraries

-| Implementation                       | Deep tree (ms)    | Wide tree (ms)    |
+| Implementation                        | Deep tree (ms)    | Wide tree (ms)    |
 | :--- | ---: | ---: |
-| `aphrodite@1.2.3`                    |  `84.68` `±18.80` | `180.62` `±41.98` |
-| `styletron@2.5.1`                    |  `83.93` `±13.10` | `185.96` `±45.65` |
-| `react-jss@7.0.1`                    | `174.75` `±30.87` | `411.77` `±83.83` |
-| `glamor@3.0.0-3`                     | `255.21` `±45.68` | `545.74` `±107.79` |
-| `reactxp@0.34.3`                     | `237.46` `±36.72` | `514.48` `±84.87` |
-| `styled-components@2.1.1`            | `266.91` `±50.04` | `598.29` `±95.13` |
-| `styled-components/primitives@2.1.1` | `266.62` `±50.39` | `567.13` `±68.12` |
-| `radium@0.19.1`                      | `518.48` `±69.74` | `1058.85` `±120.85` |
+| `styletron@3.0.0-rc.5`                |  `79.41` `±27.49` | `152.95` `±29.46` |
+| `aphrodite@1.2.5`                     |  `85.13` `±25.39` | `162.87` `±25.91` |
+| `glamor@2.20.40`                      | `109.92` `±29.88` | `193.01` `±32.03` |
+| `react-jss@8.2.0`                     | `134.28` `±49.00` | `278.78` `±50.39` |
+| `emotion@8.0.12`                      | `139.08` `±46.18` | `253.45` `±52.69` |
+| `styled-components@2.3.2`             | `194.43` `416.28` | `404.86` `±56.59` |
+| `reactxp@0.46.6`                      | `219.46` `±57.24` | `424.18` `±76.10` |
+| `radium@0.19.6`                       | `359.32` `±90.27` | `795.91` `±88.93` |

-These results indicate that styled render performance is not a significant
-differentiating factor between `aphrodite`, `css-modules`, `react-native-web`,
-and `styletron`.
+These results indicate that render times when using `react-native-web`,
+`css-modules`, `aphrodite`, and `styletron` are roughly equivalent and
+significantly faster than alternatives.

-*MacBook Pro (13-inch, Early 2015); 3.1 GHz Intel Core i7; 16 GB 1867 MHz DDR3. Google Chrome 58 (2x CPU slowdown).
+*MacBook Pro (13-inch, Early 2011); 2.3 GHz Intel Core i5; 8 GB 1333 MHz DDR3. Google Chrome 62.
--- a/benchmarks/index.js
+++ b/benchmarks/index.js
@@ -1,12 +1,11 @@
 import aphrodite from './src/aphrodite';
 import cssModules from './src/css-modules';
+import emotion from './src/emotion';
 import glamor from './src/glamor';
 import jss from './src/jss';
 import radium from './src/radium';
 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';

@@ -22,8 +21,6 @@ const coreTests = [

  () => renderDeepTree('css-modules', cssModules),
  () => renderWideTree('css-modules', cssModules),
-  () => renderDeepTree('react-native-web/stylesheet', reactNativeStyleSheet),
-  () => renderWideTree('react-native-web/stylesheet', reactNativeStyleSheet),
  () => renderDeepTree('react-native-web', reactNative),
  () => renderWideTree('react-native-web', reactNative)
 ];
@@ -43,14 +40,14 @@ const restTests = [
  () => renderWideTree('glamor', glamor),
  () => renderDeepTree('react-jss', jss),
  () => renderWideTree('react-jss', jss),
-  () => renderDeepTree('radium', radium),
-  () => renderWideTree('radium', radium),
-  () => renderDeepTree('reactxp', xp),
-  () => renderWideTree('reactxp', xp),
+  () => renderDeepTree('emotion', emotion),
+  () => renderWideTree('emotion', emotion),
  () => renderDeepTree('styled-components', styledComponents),
  () => renderWideTree('styled-components', styledComponents),
-  () => renderDeepTree('styled-components/primitives', styledComponentsPrimitives),
-  () => renderWideTree('styled-components/primitives', styledComponentsPrimitives)
+  () => renderDeepTree('reactxp', xp),
+  () => renderWideTree('reactxp', xp),
+  () => renderDeepTree('radium', radium),
+  () => renderWideTree('radium', radium)
 ];

 const tests = [...coreTests];
--- a/benchmarks/package.json
+++ b/benchmarks/package.json
@@ -2,21 +2,20 @@
  "name": "benchmarks",
  "private": true,
  "dependencies": {
-    "aphrodite": "^1.2.3",
+    "aphrodite": "^1.2.5",
    "classnames": "^2.2.5",
-    "glamor": "^3.0.0-3",
+    "emotion": "^8.0.12",
+    "glamor": "^2.20.40",
    "marky": "^1.2.0",
-    "radium": "^0.19.1",
-    "react-jss": "^7.0.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"
+    "radium": "^0.19.6",
+    "react-jss": "^8.2.0",
+    "reactxp": "^0.46.6",
+    "styled-components": "^2.3.2",
+    "styletron-client": "^3.0.0-rc.5",
+    "styletron-utils": "^3.0.0-rc.3"
  },
  "devDependencies": {
-    "css-loader": "^0.28.4",
-    "react-addons-perf": "^15.4.2",
-    "style-loader": "^0.18.2"
+    "css-loader": "^0.28.7",
+    "style-loader": "^0.19.1"
  }
 }
--- a/benchmarks/src/components/AspectRatio/index.js
+++ b/benchmarks/src/components/AspectRatio/index.js
@@ -22,9 +22,7 @@ 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>
    );
  }
--- a/benchmarks/src/components/Box/aphrodite.js
+++ b/benchmarks/src/components/Box/aphrodite.js
@@ -3,7 +3,7 @@ import React from 'react';
 import View from '../View/aphrodite';
 import { StyleSheet } from 'aphrodite';

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

 const styles = StyleSheet.create({
  outer: {
--- a/benchmarks/src/components/Box/css-modules.js
+++ b/benchmarks/src/components/Box/css-modules.js
@@ -4,7 +4,7 @@ import React from 'react';
 import View from '../View/css-modules';
 import styles from './styles.css';

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

 export default Box;
--- a/benchmarks/src/components/Box/react-native-stylesheet.js
+++ b/benchmarks/src/components/Box/react-native-stylesheet.js
@@ -1,9 +1,8 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import StyleSheet from 'react-native/apis/StyleSheet';
-import View from '../View/react-native-stylesheet';
+import View from '../View/emotion';

-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
  <View
    {...other}
    style={[
@@ -12,9 +11,10 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
      layout === 'row' && styles.row,
      outer && styles.outer
    ]}
-  />;
+  />
+);

-const styles = StyleSheet.create({
+const styles = {
  outer: {
    padding: 4
  },
@@ -43,6 +43,6 @@ const styles = StyleSheet.create({
    width: 20,
    height: 20
  }
-});
+};

 export default Box;
--- a/benchmarks/src/components/Box/glamor.js
+++ b/benchmarks/src/components/Box/glamor.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import View from '../View/glamor';

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

 const styles = {
  outer: {
--- a/benchmarks/src/components/Box/jss.js
+++ b/benchmarks/src/components/Box/jss.js
@@ -4,7 +4,7 @@ import injectSheet from 'react-jss';
 import React from 'react';
 import View from '../View/jss';

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

 const styles = {
  outer: {
--- a/benchmarks/src/components/Box/radium.js
+++ b/benchmarks/src/components/Box/radium.js
@@ -3,7 +3,7 @@ import Radium from 'radium';
 import React from 'react';
 import View from '../View/radium';

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

 const styles = {
  outer: {
--- a/benchmarks/src/components/Box/react-native.js
+++ b/benchmarks/src/components/Box/react-native.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';

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

 const styles = StyleSheet.create({
  outer: {
--- a/benchmarks/src/components/Box/reactxp.js
+++ b/benchmarks/src/components/Box/reactxp.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import { Styles, View } from 'reactxp';

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

 const styles = {
  outer: Styles.createViewStyle({
--- a/benchmarks/src/components/Box/styled-components-primitives.js
+++ b/benchmarks/src/components/Box/styled-components-primitives.js
@@ -1,30 +0,0 @@
-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;
--- a/benchmarks/src/components/Box/styletron.js
+++ b/benchmarks/src/components/Box/styletron.js
@@ -3,7 +3,7 @@ import { injectStylePrefixed } from 'styletron-utils';
 import React from 'react';
 import View, { styletron } from '../View/styletron';

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

 const styles = {
  outer: injectStylePrefixed(styletron, {
--- a/benchmarks/src/components/Icons/DirectMessage.js
+++ b/benchmarks/src/components/Icons/DirectMessage.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';

 const IconDirectMessage = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
    children: (
      <g>
        <path d="M43.34 14H12.66L28 27.946z" />
--- a/benchmarks/src/components/Icons/Heart.js
+++ b/benchmarks/src/components/Icons/Heart.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';

 const IconHeart = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
    children: (
      <g>
        <path d="M38.723 12c-7.187 0-11.16 7.306-11.723 8.131C26.437 19.306 22.504 12 15.277 12 8.791 12 3.533 18.163 3.533 24.647 3.533 39.964 21.891 55.907 27 56c5.109-.093 23.467-16.036 23.467-31.353C50.467 18.163 45.209 12 38.723 12z" />
--- a/benchmarks/src/components/Icons/Reply.js
+++ b/benchmarks/src/components/Icons/Reply.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';

 const IconReply = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
    children: (
      <g>
        <path d="M41 31h-9V19a2.999 2.999 0 0 0-4.817-2.386l-21 16a3 3 0 0 0-.001 4.773l21 16a3.006 3.006 0 0 0 3.15.301A2.997 2.997 0 0 0 32 51V39h9c5.514 0 10 4.486 10 10a4 4 0 0 0 8 0c0-9.925-8.075-18-18-18z" />
--- a/benchmarks/src/components/Icons/Retweet.js
+++ b/benchmarks/src/components/Icons/Retweet.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';

 const IconRetweet = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
    children: (
      <g>
        <path d="M70.676 36.644A3 3 0 0 0 68 35h-7V19a4 4 0 0 0-4-4H34a4 4 0 0 0 0 8h18a1 1 0 0 1 1 .998V35h-7a3.001 3.001 0 0 0-2.419 4.775l11 15a3.003 3.003 0 0 0 4.839-.001l11-15a3.001 3.001 0 0 0 .256-3.13zM40.001 48H22a.995.995 0 0 1-.992-.96L21.001 36h7a3.001 3.001 0 0 0 2.419-4.775l-11-15a3.003 3.003 0 0 0-4.839.001l-11 15A3 3 0 0 0 6.001 36h7l.011 16.003a4 4 0 0 0 4 3.997h22.989a4 4 0 0 0 0-8z" />
--- a/benchmarks/src/components/NestedTree/index.js
+++ b/benchmarks/src/components/NestedTree/index.js
@@ -10,6 +10,24 @@ class DeepTree extends Component {
    wrap: PropTypes.number.isRequired
  };

+  /* necessary for reactxp to work without errors */
+  static childContextTypes = {
+    focusManager: PropTypes.object
+  };
+
+  getChildContext() {
+    return {
+      focusManager: {
+        addFocusableComponent() {},
+        removeFocusableComponent() {},
+        restrictFocusWithin() {},
+        removeFocusRestriction() {},
+        limitFocusWithin() {},
+        removeFocusLimitation() {}
+      }
+    };
+  }
+
  render() {
    const { breadth, components, depth, id, wrap } = this.props;
    const { Box } = components;
@@ -18,7 +36,7 @@ class DeepTree extends Component {
      <Box color={id % 3} components={components} layout={depth % 2 === 0 ? 'column' : 'row'} outer>
        {depth === 0 && <Box color={id % 3 + 3} components={components} fixed />}
        {depth !== 0 &&
-          Array.from({ length: breadth }).map((el, i) =>
+          Array.from({ length: breadth }).map((el, i) => (
            <DeepTree
              breadth={breadth}
              components={components}
@@ -27,15 +45,11 @@ class DeepTree extends Component {
              key={i}
              wrap={wrap}
            />
-          )}
+          ))}
      </Box>
    );
    for (let i = 0; i < wrap; i++) {
-      result = (
-        <Box components={components}>
-          {result}
-        </Box>
-      );
+      result = <Box components={components}>{result}</Box>;
    }
    return result;
  }
--- a/benchmarks/src/components/Tweet/index.js
+++ b/benchmarks/src/components/Tweet/index.js
@@ -51,17 +51,17 @@ export class Tweet extends Component {
                <TweetText displayMode={'links'} lang={lang} textParts={textParts} />
              </View>

-              {media
-                ? <View style={styles.richContent}>
-                    <AspectRatio ratio={16 / 9}>
-                      <Image
-                        resizeMode={Image.resizeMode.cover}
-                        source={media.source}
-                        style={styles.media}
-                      />
-                    </AspectRatio>
-                  </View>
-                : null}
+              {media ? (
+                <View style={styles.richContent}>
+                  <AspectRatio ratio={16 / 9}>
+                    <Image
+                      resizeMode={Image.resizeMode.cover}
+                      source={media.source}
+                      style={styles.media}
+                    />
+                  </AspectRatio>
+                </View>
+              ) : null}
            </View>

            <TweetActionsBar
--- a/benchmarks/src/components/TweetAction/index.js
+++ b/benchmarks/src/components/TweetAction/index.js
@@ -46,11 +46,7 @@ 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>
    );
--- a/benchmarks/src/components/TweetActionsBar/index.js
+++ b/benchmarks/src/components/TweetActionsBar/index.js
@@ -25,7 +25,7 @@ export default class TweetActionsBar extends PureComponent {
    /* eslint-disable react/jsx-handler-names */
    return (
      <View style={[styles.root, style]}>
-        {actions.map((action, i) =>
+        {actions.map((action, i) => (
          <TweetAction
            accessibilityLabel={actions.label}
            count={action.count}
@@ -35,7 +35,7 @@ export default class TweetActionsBar extends PureComponent {
            onPress={action.onPress}
            style={styles.action}
          />
-        )}
+        ))}
      </View>
    );
  }
--- a/benchmarks/src/components/TweetText/index.js
+++ b/benchmarks/src/components/TweetText/index.js
@@ -18,9 +18,9 @@ class TweetText extends React.Component {

    return (
      <AppText {...other} lang={lang} numberOfLines={numberOfLines}>
-        {textParts.map((part, i) =>
+        {textParts.map((part, i) => (
          <TweetTextPart displayMode={displayMode} key={i} part={part} />
-        )}
+        ))}
      </AppText>
    );
  }
--- a/benchmarks/src/components/TweetTextPart/index.js
+++ b/benchmarks/src/components/TweetTextPart/index.js
@@ -6,13 +6,14 @@ import theme from '../theme';

 const createTextEntity = ({ part }) => <Text>{`${part.prefix}${part.text}`}</Text>;

-const createTwemojiEntity = ({ part }) =>
+const createTwemojiEntity = ({ part }) => (
  <Image
    accessibilityLabel={part.text}
    draggable={false}
    source={{ uri: part.emoji }}
    style={styles.twemoji}
-  />;
+  />
+);

 // @mention, #hashtag, $cashtag
 const createSymbolEntity = ({ displayMode, part }) => {
--- a/benchmarks/src/components/UserAvatar/index.js
+++ b/benchmarks/src/components/UserAvatar/index.js
@@ -23,15 +23,15 @@ class UserAvatar extends PureComponent {

    return (
      <AspectRatio ratio={1} style={[styles.root, style]}>
-        {uri
-          ? <Image
-              accessibilityLabel={accessibilityLabel}
-              onLoad={this._handleLoad}
-              ref={this._setImageRef}
-              source={{ uri }}
-              style={[styles.image, circle && styles.circle]}
-            />
-          : null}
+        {uri ? (
+          <Image
+            accessibilityLabel={accessibilityLabel}
+            onLoad={this._handleLoad}
+            ref={this._setImageRef}
+            source={{ uri }}
+            style={[styles.image, circle && styles.circle]}
+          />
+        ) : null}
      </AspectRatio>
    );
  }
--- a/benchmarks/src/components/View/emotion.js
+++ b/benchmarks/src/components/View/emotion.js
@@ -0,0 +1,29 @@
+/* eslint-disable react/prop-types */
+import { css } from 'emotion';
+import React from 'react';
+
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    return <div {...other} className={css([viewStyle, ...style])} />;
+  }
+}
+
+const viewStyle = {
+  alignItems: 'stretch',
+  borderWidth: 0,
+  borderStyle: 'solid',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexBasis: 'auto',
+  flexDirection: 'column',
+  flexShrink: 0,
+  margin: 0,
+  padding: 0,
+  position: 'relative',
+  // fix flexbox bugs
+  minHeight: 0,
+  minWidth: 0
+};
+
+export default View;
--- a/benchmarks/src/components/View/react-native-stylesheet.js
+++ b/benchmarks/src/components/View/react-native-stylesheet.js
@@ -1,35 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import StyleSheet from 'react-native/apis/StyleSheet';
-import registry from 'react-native/apis/StyleSheet/registry';
-
-const emptyObject = {};
-
-class View extends React.Component {
-  render() {
-    const { style, ...other } = this.props;
-    const styleProps = registry.resolve([styles.root, style]) || emptyObject;
-    return <div {...other} {...styleProps} />;
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    alignItems: 'stretch',
-    borderWidth: 0,
-    borderStyle: 'solid',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexBasis: 'auto',
-    flexDirection: 'column',
-    flexShrink: 0,
-    margin: 0,
-    padding: 0,
-    position: 'relative',
-    // fix flexbox bugs
-    minHeight: 0,
-    minWidth: 0
-  }
-});
-
-export default View;
--- a/benchmarks/src/emotion.js
+++ b/benchmarks/src/emotion.js
@@ -0,0 +1,7 @@
+import Box from './components/Box/emotion';
+import View from './components/View/emotion';
+
+export default {
+  Box,
+  View
+};
--- a/benchmarks/src/react-native-stylesheet.js
+++ b/benchmarks/src/react-native-stylesheet.js
@@ -1,9 +0,0 @@
-import Box from './components/Box/react-native-stylesheet';
-import View from './components/View/react-native-stylesheet';
-
-const api = {
-  Box,
-  View
-};
-
-export default api;
--- a/benchmarks/src/styled-components-primitives.js
+++ b/benchmarks/src/styled-components-primitives.js
@@ -1,7 +0,0 @@
-import Box from './components/Box/styled-components';
-import styled from 'styled-components/primitives';
-
-export default {
-  Box,
-  View: styled.View
-};
--- a/benchmarks/webpack.config.js
+++ b/benchmarks/webpack.config.js
@@ -26,7 +26,9 @@ module.exports = {
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
-          options: { cacheDirectory: true }
+          options: {
+            cacheDirectory: true
+          }
        }
      }
    ]
--- a/benchmarks/yarn.lock
+++ b/benchmarks/yarn.lock
@@ -2,6 +2,48 @@
 # yarn lockfile v1


+"@babel/helper-module-imports@7.0.0-beta.32":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.32.tgz#8126fc024107c226879841b973677a4f4e510a03"
+  dependencies:
+    "@babel/types" "7.0.0-beta.32"
+    lodash "^4.2.0"
+
+"@babel/types@7.0.0-beta.32":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.32.tgz#c317d0ecc89297b80bbcb2f50608e31f6452a5ff"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
+"@types/lodash@^4.14.64":
+  version "4.14.74"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.74.tgz#ac3bd8db988e7f7038e5d22bd76a7ba13f876168"
+
+"@types/lodash@^4.14.78":
+  version "4.14.91"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.91.tgz#794611b28056d16b5436059c6d800b39d573cd3a"
+
+"@types/node@*":
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.5.1.tgz#4ec3020bcdfe2abffeef9ba3fbf26fca097514b5"
+
+"@types/react-dom@^16.0.0":
+  version "16.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.3.tgz#8accad7eabdab4cca3e1a56f5ccb57de2da0ff64"
+  dependencies:
+    "@types/node" "*"
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16.0.0":
+  version "16.0.31"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.31.tgz#5285da62f3ac62b797f6d0729a1d6181f3180c3e"
+
+abbrev@1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
+
 ajv@^5.0.0:
  version "5.2.0"
  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.0.tgz#c1735024c5da2ef75cc190713073d44f098bf486"
@@ -15,20 +57,6 @@ 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"
@@ -37,9 +65,9 @@ ansi-styles@^2.2.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"

-aphrodite@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-1.2.3.tgz#4b161e9eef319b1f90a889501f985d7b5e70b285"
+aphrodite@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-1.2.5.tgz#8358c36c80bb03aee9b97165aaa70186225b4983"
  dependencies:
    asap "^2.0.3"
    inline-style-prefixer "^3.0.1"
@@ -51,15 +79,15 @@ argparse@^1.0.7:
  dependencies:
    sprintf-js "~1.0.2"

-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"
-
 array-find@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/array-find/-/array-find-1.0.0.tgz#6c8e286d11ed768327f8e62ecee87353ca3e78b8"

-asap@^2.0.3, asap@^2.0.5, asap@~2.0.3:
+asap@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
+asap@~2.0.3:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"

@@ -88,21 +116,33 @@ babel-code-frame@^6.11.0:
    esutils "^2.0.2"
    js-tokens "^3.0.0"

-babel-runtime@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
+babel-macros@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/babel-macros/-/babel-macros-1.2.0.tgz#39e47ed6d286d4a98f1948d8bab45dac17e4e2d4"
  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.10.0"
+    cosmiconfig "3.1.0"
+
+babel-plugin-emotion@^8.0.12:
+  version "8.0.12"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-8.0.12.tgz#2ed844001416b0ae2ff787a06b1804ec5f531c89"
+  dependencies:
+    "@babel/helper-module-imports" "7.0.0-beta.32"
+    babel-macros "^1.2.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    emotion-utils "^8.0.12"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    touch "^1.0.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"

 balanced-match@^0.4.2:
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"

-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-
 base64-js@^1.0.2:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
@@ -111,20 +151,21 @@ big.js@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"

-bowser@^1.0.0, bowser@^1.6.0:
+bowser@^1.0.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.6.0.tgz#37fc387b616cb6aef370dab4d6bd402b74c5c54d"

-brace-expansion@^1.1.7:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
+bowser@^1.6.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.7.1.tgz#a4de8f18a1a0dc9531eb2a92a1521fb6a9ba96a5"

-brcast@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/brcast/-/brcast-2.0.1.tgz#4311508f0634a6f5a2465b6cf2db27f06902aaca"
+bowser@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.8.1.tgz#49785777e7302febadb1a5b71d9a646520ed310d"
+
+brcast@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/brcast/-/brcast-3.0.1.tgz#6256a8349b20de9eed44257a9b24d71493cd48dd"

 browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.5:
  version "1.7.5"
@@ -223,25 +264,22 @@ colors@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"

-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+convert-source-map@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"

 core-js@^1.0.0:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"

-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"
+cosmiconfig@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-3.1.0.tgz#640a94bf9847f321800403cd273af60665c73397"
  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
+    is-directory "^0.3.1"
+    js-yaml "^3.9.0"
+    parse-json "^3.0.0"
+    require-from-string "^2.0.1"

 css-color-keywords@^1.0.0:
  version "1.0.0"
@@ -253,13 +291,19 @@ css-color-names@0.0.4:

 css-in-js-utils@^1.0.3:
  version "1.0.3"
-  resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215"
  dependencies:
    hyphenate-style-name "^1.0.2"

-css-loader@^0.28.4:
-  version "0.28.4"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
+css-in-js-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz#5af1dd70f4b06b331f48d22a3d86e0786c0b9435"
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+
+css-loader@^0.28.7:
+  version "0.28.7"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
  dependencies:
    babel-code-frame "^6.11.0"
    css-selector-tokenizer "^0.7.0"
@@ -274,7 +318,7 @@ css-loader@^0.28.4:
    postcss-modules-scope "^1.0.0"
    postcss-modules-values "^1.1.0"
    postcss-value-parser "^3.3.0"
-    source-list-map "^0.1.7"
+    source-list-map "^2.0.0"

 css-selector-tokenizer@^0.6.0:
  version "0.6.0"
@@ -354,28 +398,14 @@ 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"
@@ -384,12 +414,31 @@ emojis-list@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"

+emotion-utils@^8.0.12:
+  version "8.0.12"
+  resolved "https://registry.yarnpkg.com/emotion-utils/-/emotion-utils-8.0.12.tgz#5e0fd72db3008f26ce4f80b1972df08841df2168"
+
+emotion@^8.0.12:
+  version "8.0.12"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-8.0.12.tgz#03de11ce26b1b2401c334b94d438652124c514c6"
+  dependencies:
+    babel-plugin-emotion "^8.0.12"
+    emotion-utils "^8.0.12"
+    stylis "^3.3.2"
+    stylis-rule-sheet "^0.0.5"
+
 encoding@^0.1.11:
  version "0.1.12"
  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
  dependencies:
    iconv-lite "~0.4.13"

+error-ex@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  dependencies:
+    is-arrayish "^0.2.1"
+
 escape-string-regexp@^1.0.2:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -398,6 +447,10 @@ esprima@^2.6.0:
  version "2.7.3"
  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"

+esprima@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+
 esutils@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -414,7 +467,31 @@ fastparse@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"

-fbjs@^0.8.12, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
+fbjs@^0.8.12:
+  version "0.8.14"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
+fbjs@^0.8.16:
+  version "0.8.16"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
+fbjs@^0.8.5, fbjs@^0.8.9:
  version "0.8.12"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
  dependencies:
@@ -426,40 +503,27 @@ fbjs@^0.8.12, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
    setimmediate "^1.0.5"
    ua-parser-js "^0.7.9"

+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+
 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"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-
 function-bind@^1.0.2:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"

-glamor@^3.0.0-3:
-  version "3.0.0-3"
-  resolved "https://registry.yarnpkg.com/glamor/-/glamor-3.0.0-3.tgz#62e1cf2ce70a4db0b247a5f95d4b7d6a89ac83c9"
+glamor@^2.20.40:
+  version "2.20.40"
+  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.40.tgz#f606660357b7cf18dface731ad1a2cfa93817f05"
  dependencies:
    fbjs "^0.8.12"
-    inline-style-prefixer "^3.0.3"
-    react-css-property-operations "^15.4.1"
-
-glob@^7.0.5:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
+    inline-style-prefixer "^3.0.6"
+    object-assign "^4.1.1"
+    prop-types "^15.5.10"
+    through "^2.3.8"

 has-ansi@^2.0.0:
  version "2.0.0"
@@ -485,6 +549,10 @@ hoist-non-react-statics@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"

+hoist-non-react-statics@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0"
+
 html-comment-regex@^1.1.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
@@ -519,41 +587,43 @@ indexes-of@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"

-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@2.0.1:
+inherits@2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"

-inline-style-prefixer@^2.0.1, inline-style-prefixer@^2.0.5:
+inline-style-prefixer@^2.0.5:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7"
  dependencies:
    bowser "^1.0.0"
    hyphenate-style-name "^1.0.1"

-inline-style-prefixer@^3.0.1, inline-style-prefixer@^3.0.3, inline-style-prefixer@^3.0.6:
+inline-style-prefixer@^3.0.1, 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"
+inline-style-prefixer@^3.0.3:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
  dependencies:
-    loose-envify "^1.0.0"
+    bowser "^1.7.3"
+    css-in-js-utils "^2.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"

+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+
 is-function@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
@@ -562,9 +632,9 @@ 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-in-browser@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"

 is-plain-obj@^1.0.0:
  version "1.1.0"
@@ -605,6 +675,13 @@ js-tokens@^3.0.0:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"

+js-yaml@^3.9.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@~3.7.0:
  version "3.7.0"
  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
@@ -634,69 +711,77 @@ jsonify@~0.0.0:
  version "0.0.0"
  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"

-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@^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@^4.0.0:
-  version "4.0.0"
-  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@^2.0.0:
-  version "2.0.0"
-  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:
-    warning "^3.0.0"
-
-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-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:
+jss-camel-case@^6.0.0:
  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-6.0.0.tgz#be58124f0cbed76e98cc8eb5219dbb260f057d0b"
+  resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.0.0.tgz#7cf8453e395c31fed931d11efbc885edcd61132e"
+
+jss-compose@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-5.0.0.tgz#ce01b2e4521d65c37ea42cf49116e5f7ab596484"
+  dependencies:
+    warning "^3.0.0"
+
+jss-default-unit@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6"
+
+jss-expand@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.1.0.tgz#b1ad74ec18631f34f65a2124fcfceb6400610e3d"
+
+jss-extend@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.1.0.tgz#85f3d39944018e8f44b322c14fa316068aa7bb0b"
+  dependencies:
+    warning "^3.0.0"
+
+jss-global@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2"
+
+jss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-6.0.1.tgz#ef992b79d6e8f63d939c4397b9d99b5cbbe824ca"
+  dependencies:
+    warning "^3.0.0"
+
+jss-preset-default@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.0.1.tgz#822cecb87c27ff91633774422f4c221d61486b65"
+  dependencies:
+    jss-camel-case "^6.0.0"
+    jss-compose "^5.0.0"
+    jss-default-unit "^8.0.0"
+    jss-expand "^5.0.0"
+    jss-extend "^6.0.1"
+    jss-global "^3.0.0"
+    jss-nested "^6.0.1"
+    jss-props-sort "^6.0.0"
+    jss-template "^1.0.0"
+    jss-vendor-prefixer "^7.0.0"
+
+jss-props-sort@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323"
+
+jss-template@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.0.tgz#4b874608706ddceecacdb5567e254aecb6ea69b3"
+  dependencies:
+    warning "^3.0.0"
+
+jss-vendor-prefixer@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz#0166729650015ef19d9f02437c73667231605c71"
  dependencies:
    css-vendor "^0.3.8"

-jss@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-8.1.0.tgz#b32f15efcce22446dfda4c2be09a04f38431da0a"
+jss@^9.3.2:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-9.4.0.tgz#fbfd1a63556c5afd5bfcffd98df3c50eb2614ed3"
  dependencies:
-    is-in-browser "^1.0.2"
+    is-in-browser "^1.1.3"
+    symbol-observable "^1.1.0"
    warning "^3.0.0"

 loader-utils@^1.0.2:
@@ -719,11 +804,11 @@ lodash.uniq@^4.3.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"

-lodash@^4.17.1:
+lodash@^4.17.1, lodash@^4.17.4, lodash@^4.2.0:
  version "4.17.4"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"

-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.3.1:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
  dependencies:
@@ -741,12 +826,6 @@ math-expression-evaluator@^1.2.14:
  version "1.2.16"
  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"

-minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  dependencies:
-    brace-expansion "^1.1.7"
-
 minimist@0.0.8:
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
@@ -764,9 +843,11 @@ 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"
+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  dependencies:
+    abbrev "1"

 normalize-range@^0.1.2:
  version "0.1.2"
@@ -789,15 +870,11 @@ 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"

-once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+parse-json@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-3.0.0.tgz#fa6f47b18e23826ead32f263e744d0e1e847fb13"
  dependencies:
-    wrappy "1"
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+    error-ex "^1.3.1"

 postcss-calc@^5.2.0:
  version "5.3.1"
@@ -1055,13 +1132,21 @@ promise@^7.1.1:
  dependencies:
    asap "~2.0.3"

-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.5.9:
  version "15.5.10"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
  dependencies:
    fbjs "^0.8.9"
    loose-envify "^1.3.1"

+prop-types@^15.6.0:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 q@^1.1.2:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
@@ -1073,93 +1158,39 @@ query-string@^4.1.0:
    object-assign "^4.1.0"
    strict-uri-encode "^1.0.0"

-radium@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/radium/-/radium-0.19.1.tgz#0fbcc6d0ea5526bdb1e5e5371cad386775a3eec8"
+radium@^0.19.6:
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/radium/-/radium-0.19.6.tgz#b86721d08dbd303b061a4ae2ebb06cc6e335ae72"
  dependencies:
    array-find "^1.0.0"
    exenv "^1.2.1"
    inline-style-prefixer "^2.0.5"
    prop-types "^15.5.8"
-    rimraf "^2.6.1"

-react-addons-perf@^15.4.2:
-  version "15.4.2"
-  resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b"
+react-jss@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-8.2.0.tgz#8440f08aef27d408ba31f63df09167ed22a5b99b"
  dependencies:
-    fbjs "^0.8.4"
-    object-assign "^4.1.0"
+    hoist-non-react-statics "^2.3.1"
+    jss "^9.3.2"
+    jss-preset-default "^4.0.1"
+    prop-types "^15.6.0"
+    theming "^1.3.0"

-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"
-
-react-jss@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-7.0.1.tgz#36c505c3798993edd46ea01734f171f895348e25"
-  dependencies:
-    hoist-non-react-statics "^1.2.0"
-    jss "^8.1.0"
-    jss-preset-default "^3.0.0"
-    prop-types "^15.5.8"
-    theming "^1.1.0"
-
-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"
+reactxp@^0.46.6:
+  version "0.46.6"
+  resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.46.6.tgz#166a503a7147f3a1e29efc4469bda32603471a5f"
  dependencies:
+    "@types/lodash" "^4.14.78"
+    "@types/react" "^16.0.0"
+    "@types/react-dom" "^16.0.0"
    assert "^1.3.0"
    ifvisible.js "^1.0.6"
    lodash "^4.17.1"
+    prop-types "^15.5.9"
    rebound "^0.0.13"
-    synctasks "^0.2.9"
+    subscribableevent "^1.0.0"
+    synctasks "^0.3.0"

 rebound@^0.0.13:
  version "0.0.13"
@@ -1183,10 +1214,6 @@ regenerate@^1.2.1:
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"

-regenerator-runtime@^0.10.0:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
-
 regexpu-core@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
@@ -1205,11 +1232,9 @@ regjsparser@^0.1.4:
  dependencies:
    jsesc "~0.5.0"

-rimraf@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
-  dependencies:
-    glob "^7.0.5"
+require-from-string@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.1.tgz#c545233e9d7da6616e9d59adfb39fc9f588676ff"

 sax@~1.2.1:
  version "1.2.2"
@@ -1231,14 +1256,18 @@ sort-keys@^1.0.0:
  dependencies:
    is-plain-obj "^1.0.0"

-source-list-map@^0.1.7:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+source-list-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"

 source-map@^0.5.3, source-map@^0.5.6:
  version "0.5.6"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"

+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
 sprintf-js@~1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -1249,7 +1278,7 @@ strict-uri-encode@^1.0.0:

 string-hash@^1.1.3:
  version "1.1.3"
-  resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
+  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"

 strip-ansi@^3.0.0:
  version "3.0.1"
@@ -1257,46 +1286,60 @@ strip-ansi@^3.0.0:
  dependencies:
    ansi-regex "^2.0.0"

-style-loader@^0.18.2:
-  version "0.18.2"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
+style-loader@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.1.tgz#591ffc80bcefe268b77c5d9ebc0505d772619f85"
  dependencies:
    loader-utils "^1.0.2"
    schema-utils "^0.3.0"

-styled-components@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.1.1.tgz#7e9b5bc319ee3963b47aebb74f4658119ea9d484"
+styled-components@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.3.2.tgz#323d86cc9ac89f3fd233a2dfa0849da236f143e3"
  dependencies:
    buffer "^5.0.3"
    css-to-react-native "^2.0.3"
    fbjs "^0.8.9"
    hoist-non-react-statics "^1.2.0"
-    is-function "^1.0.1"
    is-plain-object "^2.0.1"
    prop-types "^15.5.4"
-    stylis "^3.2.1"
+    stylis "^3.4.0"
    supports-color "^3.2.3"

-styletron-client@^2.5.7:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/styletron-client/-/styletron-client-2.5.7.tgz#104fa4dc564cd3fe78eb92488e5ef9039c9e242f"
+styletron-client@^3.0.0-rc.5:
+  version "3.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/styletron-client/-/styletron-client-3.0.0-rc.5.tgz#275ca0b5f971d244f0e42079ad570be9c31a2a70"
  dependencies:
-    styletron-core "^2.5.7"
+    styletron-core "^3.0.0-rc.3"

-styletron-core@^2.5.7:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/styletron-core/-/styletron-core-2.5.7.tgz#2c4a1fae537b42235462e438c24ab619bbf8993e"
+styletron-core@^3.0.0-rc.3:
+  version "3.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/styletron-core/-/styletron-core-3.0.0-rc.3.tgz#9468e275d9085d2e5d6d6468cc6d8733dbfa3cba"

-styletron-utils@^2.5.4:
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/styletron-utils/-/styletron-utils-2.5.4.tgz#f08cca7d58ee0338ce85e408cb32900e65620240"
+styletron-utils@^3.0.0-rc.3:
+  version "3.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/styletron-utils/-/styletron-utils-3.0.0-rc.3.tgz#21fef2099f1c368e6ff2b8f76bf7a64bb547b760"
  dependencies:
-    inline-style-prefixer "^2.0.1"
+    inline-style-prefixer "^3.0.3"

-stylis@^3.2.1:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.3.tgz#fed751d792af3f48a247769f55aca05c1a100a09"
+stylis-rule-sheet@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz#ebae935cc1f6fb31b9b62dba47f2ea8b833dad9f"
+
+stylis@^3.3.2:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.0.tgz#55c6530ebceeca5976d54fb4adc67578afee828d"
+
+stylis@^3.4.0:
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"
+
+subscribableevent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/subscribableevent/-/subscribableevent-1.0.0.tgz#bde9500fa9009c7740c924109bac6119cd9898e6"
+  dependencies:
+    "@types/lodash" "^4.14.64"
+    lodash "^4.17.4"

 supports-color@^2.0.0:
  version "2.0.0"
@@ -1326,19 +1369,36 @@ svgo@^0.7.0:
    sax "~1.2.1"
    whet.extend "~0.9.9"

-synctasks@^0.2.9:
-  version "0.2.17"
-  resolved "https://registry.yarnpkg.com/synctasks/-/synctasks-0.2.17.tgz#38852f008878de2e941b6e458ddf552245268da1"
-
-theming@^1.1.0:
+symbol-observable@^1.1.0:
  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/theming/-/theming-1.1.0.tgz#0562760b55a1b919c2d5eeb94130351f8958e13a"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.1.0.tgz#5c68fd8d54115d9dfb72a84720549222e8db9b32"
+
+synctasks@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/synctasks/-/synctasks-0.3.1.tgz#1f9012b23792ad775ba2693e0cafcfcd65b80d97"
+
+theming@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/theming/-/theming-1.3.0.tgz#286d5bae80be890d0adc645e5ca0498723725bdc"
  dependencies:
-    brcast "^2.0.0"
+    brcast "^3.0.1"
    is-function "^1.0.1"
    is-plain-object "^2.0.1"
    prop-types "^15.5.8"
-    react "^15.5.4"
+
+through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+
+touch@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de"
+  dependencies:
+    nopt "~1.0.10"

 ua-parser-js@^0.7.9:
  version "0.7.12"
@@ -1381,7 +1441,3 @@ whatwg-fetch@>=0.10.0:
 whet.extend@~0.9.9:
  version "0.9.9"
  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
--- a/core.js
+++ b/core.js
@@ -1 +0,0 @@
-module.exports = require('./dist/core');
--- a/docs/apis/AppRegistry.md
+++ b/docs/apis/AppRegistry.md
@@ -1,60 +0,0 @@
-# AppRegistry
-
-`AppRegistry` is the control point for registering, running, prerendering, and
-unmounting all apps. App root components should register themselves with
-`AppRegistry.registerComponent`. Apps can be run by invoking
-`AppRegistry.runApplication` (see the [getting started guide](../guides/getting-started.md) for more details).
-
-To "stop" an application when a view should be destroyed, call
-`AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was passed
-into `runApplication`. These should always be used as a pair.
-
-## Methods
-
-(web) static **getApplication**(appKey:string, appParameters: object)
-
-Returns the given application element. Use this for server-side rendering.
-Return object is of type `{ element: ReactElement; stylesheets: [ ReactElement ] }`.
-
-static **registerConfig**(config: Array<AppConfig>)
-
-Registry multiple applications. `AppConfig` is of type `{ appKey: string;
-component: ComponentProvider; run?: Function }`.
-
-static **registerComponent**(appKey: string, getComponentFunc: ComponentProvider)
-
-Register a component provider under the given `appKey`.
-
-static **registerRunnable**(appKey: string, run: Function)
-
-Register a custom render function for an application. The function will receive
-the `appParameters` passed to `runApplication`.
-
-static **getAppKeys**()
-
-Returns all registered app keys.
-
-static **runApplication**(appKey: string, appParameters?: object)
-
-Runs the application that was registered under `appKey`. The `appParameters`
-must include the `rootTag` into which the application is rendered, and
-optionally any `initialProps`.
-
-On web, if the `rootTag` is a sub-section of your application it should be
-styled as `position:relative` and given an explicit height.
-
-static **unmountApplicationComponentAtRootTag**(rootTag: HTMLElement)
-
-To "stop" an application when a view should be destroyed, call
-`AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was passed
-into `runApplication`
-
-## Example
-
-```js
-AppRegistry.registerComponent('MyApp', () => AppComponent)
-AppRegistry.runApplication('MyApp', {
-  initialProps: {},
-  rootTag: document.getElementById('react-root')
-})
-```
--- a/docs/apis/AppState.md
+++ b/docs/apis/AppState.md
@@ -1,60 +0,0 @@
-## AppState
-
-`AppState` can tell you if the app is in the foreground or background, and
-notify you when the state changes.
-
-States
-
-* `active` - The app is running in the foreground
-* `background` - The app is running in the background (i.e., the user has not focused the app's tab).
-
-## Properties
-
-static **currentState**
-
-Returns the current state of the app: `active` or `background`.
-
-## Methods
-
-static **addEventListener**(type: string, handler: Function)
-
-Add a handler to `AppState` changes by listening to the `change` event type and
-providing the `handler`. The handler is called with the app state value.
-
-static **removeEventListener**(type: string, handler: Function)
-
-Remove a handler by passing the change event `type` and the `handler`.
-
-## Examples
-
-To see the current state, you can check `AppState.currentState`, which will be
-kept up-to-date. This example will only ever appear to say "Current state is:
-active" because the app is only visible to the user when in the `active` state,
-and the null state will happen only momentarily.
-
-```js
-class Example extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = { currentAppState: AppState.currentState }
-  }
-
-  componentDidMount() {
-    AppState.addEventListener('change', this._handleAppStateChange);
-  }
-
-  componentWillUnmount() {
-    AppState.removeEventListener('change', this._handleAppStateChange);
-  }
-
-  _handleAppStateChange = (currentAppState) => {
-    this.setState({ currentAppState });
-  }
-
-  render() {
-    return (
-      <Text>Current state is: {this.state.currentAppState}</Text>
-    )
-  }
-}
-```
--- a/docs/apis/AsyncStorage.md
+++ b/docs/apis/AsyncStorage.md
@@ -1,71 +0,0 @@
-# AsyncStorage
-
-`AsyncStorage` is a simple, asynchronous, persistent, key-value storage system
-that is global to the domain. It's a facade over, and should be used instead of
-`window.localStorage` to provide an asynchronous API and multi functions. Each
-method returns a `Promise` object.
-
-It is recommended that you use an abstraction on top of `AsyncStorage` instead
-of `AsyncStorage` directly for anything more than light usage since it operates
-globally.
-
-The batched functions are useful for executing a lot of operations at once,
-allowing for optimizations to provide the convenience of a single promise after
-all operations are complete.
-
-## Methods
-
-static **clear**()
-
-Erases all AsyncStorage. You probably don't want to call this - use
-`removeItem` or `multiRemove` to clear only your own keys instead. Returns a
-Promise object.
-
-static **getAllKeys**()
-
-Gets all known keys. Returns a Promise object.
-
-static **getItem**(key: string)
-
-Fetches the value of the given key. Returns a Promise object.
-
-static **mergeItem**(key: string, value: string)
-
-Merges existing value with input value, assuming they are stringified JSON.
-Returns a Promise object.
-
-static **multiGet**(keys: Array<string>)
-
-`multiGet` results in an array of key-value pair arrays that matches the input
-format of `multiSet`. Returns a Promise object.
-
-```js
-multiGet(['k1', 'k2']) -> [['k1', 'val1'], ['k2', 'val2']]
-```
-
-static **multiMerge**(keyValuePairs: Array<Array<string>>)
-
-multiMerge takes an array of key-value array pairs that match the output of
-`multiGet`. It merges existing values with input values, assuming they are
-stringified JSON. Returns a Promise object.
-
-static **multiRemove**(keys: Array<string>)
-
-Delete all the keys in the keys array. Returns a Promise object.
-
-static **multiSet**(keyValuePairs: Array<Array<string>>)
-
-`multiSet` takes an array of key-value array pairs that match the output of
-`multiGet`. Returns a Promise object.
-
-```js
-multiSet([['k1', 'val1'], ['k2', 'val2']]);
-```
-
-static **removeItem**(key: string)
-
-Removes the value of the given key. Returns a Promise object.
-
-static **setItem**(key: string, value: string)
-
-Sets the value of the given key. Returns a Promise object.
--- a/docs/apis/Clipboard.md
+++ b/docs/apis/Clipboard.md
@@ -1,16 +0,0 @@
-# Clipboard
-
-Clipboard gives you an interface for setting to the clipboard. (Getting
-clipboard content is not supported on web.)
-
-## Methods
-
-static **getString**()
-
-Returns a `Promise` of an empty string.
-
-static **setString**(content: string): boolean
-
-Copies a string to the clipboard. On web, some browsers may not support copying
-to the clipboard, therefore, this function returns a boolean to indicate if the
-copy was successful.
--- a/docs/apis/Dimensions.md
+++ b/docs/apis/Dimensions.md
@@ -1,13 +0,0 @@
-# Dimensions
-
-Note: dimensions may change (e.g due to device rotation) so any rendering logic
-or styles that depend on these constants should try to call this function on
-every render, rather than caching the value.
-
-## Methods
-
-static **get**(dimension: string)
-
-Get a dimension (e.g., `"window"` or `"screen"`).
-
-Example: `const { height, width } = Dimensions.get('window')`
--- a/docs/apis/I18nManager.md
+++ b/docs/apis/I18nManager.md
@@ -1,25 +0,0 @@
-# I18nManager
-
-Control and set the layout and writing direction of the application.
-
-## Properties
-
-**isRTL**: bool = false
-
-Whether the application is currently in RTL mode.
-
-## Methods
-
-static **allowRTL**(allowRTL: bool)
-
-Allow the application to display in RTL mode.
-
-static **forceRTL**(forceRTL: bool)
-
-Force the application to display in RTL mode.
-
-static **setPreferredLanguageRTL**(isRTL: bool)
-
-Set the application's preferred writing direction to RTL. You will need to
-determine the user's preferred locale server-side (from HTTP headers) and
-decide whether it's an RTL language.
--- a/docs/apis/NetInfo.md
+++ b/docs/apis/NetInfo.md
@@ -1,77 +0,0 @@
-# NetInfo
-
-`NetInfo` asynchronously determines the online/offline status of the
-application.
-
-Connection types:
-
-* `bluetooth` - The user agent is using a Bluetooth connection.
-* `cellular` - The user agent is using a cellular connection (e.g., EDGE, HSPA, LTE, etc.).
-* `ethernet` - The user agent is using an Ethernet connection.
-* `mixed` -  The user agent is using multiple connection types.
-* `none` - The user agent will not contact the network (offline).
-* `other` - The user agent is using a connection type that is not one of enumerated connection types.
-* `unknown` -  The user agent has established a network connection, but is unable to determine what is the underlying connection technology.
-* `wifi` - The user agent is using a Wi-Fi connection.
-* `wimax` -  The user agent is using a WiMAX connection.
-
-## Methods
-
-Note that support for retrieving the connection type depends upon browswer
-support (and is limited to mobile browsers). It will default to `unknown` when
-support is missing.
-
-static **addEventListener**(eventName: ChangeEventName, handler: Function)
-
-static **fetch**(): Promise
-
-static **removeEventListener**(eventName: ChangeEventName, handler: Function)
-
-## Properties
-
-**isConnected**: bool = true
-
-Available on all user agents. Asynchronously fetch a boolean to determine
-internet connectivity. Use this if you are only interested with whether the device has internet connectivity.
-
-**isConnected.addEventListener**(eventName: ChangeEventName, handler: Function)
-
-**isConnected.fetch**(): Promise
-
-**isConnected.removeEventListener**(eventName: ChangeEventName, handler: Function)
-
-## Examples
-
-Fetching the connection type:
-
-```js
-NetInfo.fetch().then((connectionType) => {
-  console.log('Connection type:', connectionType);
-});
-```
-
-Subscribing to changes in the connection type:
-
-```js
-const handleConnectivityTypeChange = (connectionType) => {
-  console.log('Current connection type:', connectionType);
-}
-NetInfo.addEventListener('change', handleConnectivityTypeChange);
-```
-
-Fetching the connection status:
-
-```js
-NetInfo.isConnected.fetch().then((isConnected) => {
-  console.log('Connection status:', (isConnected ? 'online' : 'offline'));
-});
-```
-
-Subscribing to changes in the connection status:
-
-```js
-const handleConnectivityStatusChange = (isConnected) => {
-  console.log('Current connection status:', (isConnected ? 'online' : 'offline'));
-}
-NetInfo.isConnected.addEventListener('change', handleConnectivityStatusChange);
-```
--- a/docs/apis/PixelRatio.md
+++ b/docs/apis/PixelRatio.md
@@ -1,51 +0,0 @@
-# PixelRatio
-
-`PixelRatio` gives access to the device pixel density.
-
-## Methods
-
-static **get**()
-
-Returns the device pixel density. Some examples:
-
-* PixelRatio.get() === 1
-  * mdpi Android devices (160 dpi)
-* PixelRatio.get() === 1.5
-  * hdpi Android devices (240 dpi)
-* PixelRatio.get() === 2
-  * iPhone 4, 4S
-  * iPhone 5, 5c, 5s
-  * iPhone 6
-  * xhdpi Android devices (320 dpi)
-* PixelRatio.get() === 3
-  * iPhone 6 plus
-  * xxhdpi Android devices (480 dpi)
-* PixelRatio.get() === 3.5
-  * Nexus 6
-
-static **getPixelSizeForLayoutSize**(layoutSize: number)
-
-Converts a layout size (dp) to pixel size (px). Guaranteed to return an integer
-number.
-
-static **roundToNearestPixel**(layoutSize: number)
-
-Rounds a layout size (dp) to the nearest layout size that corresponds to an
-integer number of pixels. For example, on a device with a PixelRatio of 3,
-`PixelRatio.roundToNearestPixel(8.4)` = `8.33`, which corresponds to exactly
-`(8.33 * 3)` = `25` pixels.
-
-## Examples
-
-Fetching a correctly sized image. You should get a higher resolution image if
-you are on a high pixel density device. A good rule of thumb is to multiply the
-size of the image you display by the pixel ratio.
-
-```js
-const image = getImage({
-  width: PixelRatio.getPixelSizeForLayoutSize(200),
-  height: PixelRatio.getPixelSizeForLayoutSize(100),
-});
-
-<Image source={image} style={{ width: 200, height: 100 }} />
-```
--- a/docs/apis/Platform.md
+++ b/docs/apis/Platform.md
@@ -1,45 +0,0 @@
-# Platform
-
-Detect what is the platform in which the app is running. This piece of
-functionality can be useful when only small parts of a component are platform
-specific.
-
-## Properties
-
-**OS**: string
-
-`Platform.OS` will be `web` when running in a Web browser.
-
-```js
-import { Platform } from 'react-native';
-
-const styles = StyleSheet.create({
-  height: (Platform.OS === 'web') ? 200 : 100,
-});
-```
-
-## Methods
-
-**select**(object): any
-
-`Platform.select` takes an object containing `Platform.OS` as keys and returns
-the value for the platform you are currently running on.
-
-```js
-import { Platform } from 'react-native';
-
-const containerStyles = {
-  flex: 1,
-  ...Platform.select({
-    android: {
-      backgroundColor: 'blue'
-    },
-    ios: {
-      backgroundColor: 'red'
-    },
-    web: {
-      backgroundColor: 'green'
-    }
-  })
-});
-```
--- a/docs/apis/StyleSheet.md
+++ b/docs/apis/StyleSheet.md
@@ -1,80 +0,0 @@
-# StyleSheet
-
-The `StyleSheet` abstraction converts predefined styles to (vendor-prefixed)
-CSS without requiring a compile-time step. Styles that cannot be resolved
-outside of the render loop (e.g., dynamic positioning) are usually applied as
-inline styles. Read more about [how to style your
-application](../guides/style.md).
-
-## Methods
-
-**create**(obj: {[key: string]: any})
-
-Each key of the object passed to `create` must define a style object.
-
-**flatten**: function
-
-Flattens an array of styles into a single style object.
-
-(web) **getStyleSheets**: function
-
-Returns an array of stylesheets (`{ id, textContent }`). Useful for
-compile-time or server-side rendering.
-
-## Properties
-
-**absoluteFill**: number
-
-A very common pattern is to create overlays with position absolute and zero positioning,
-so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
-styles.
-
-```js
-<View style={StyleSheet.absoluteFill} />
-```
-
-**absoluteFillObject**: object
-
-Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be
-used to create a customized entry in a `StyleSheet`, e.g.:
-
-```js
-const styles = StyleSheet.create({
-  wrapper: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'transparent',
-    top: 10
-  }
-})
-```
-
-**hairlineWidth**: number
-
-## Example
-
-```js
-<View style={styles.container}>
-  <Text
-    children={'Title text'}
-    style={[
-      styles.title,
-      this.props.isActive && styles.activeTitle
-    ]}
-  />
-</View>
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 4,
-    borderWidth: 0.5,
-    borderColor: '#d6d7da',
-  },
-  title: {
-    fontSize: 19,
-    fontWeight: 'bold',
-  },
-  activeTitle: {
-    color: 'red',
-  }
-})
-```
--- a/docs/apis/Vibration.md
+++ b/docs/apis/Vibration.md
@@ -1,35 +0,0 @@
-# Vibration
-
-Vibration is described as a pattern of on-off pulses, which may be of varying
-lengths. The pattern may consist of either a single integer, describing the
-number of milliseconds to vibrate, or an array of integers describing a pattern
-of vibrations and pauses. Vibration is controlled with a single method:
-`Vibration.vibrate()`.
-
-The vibration is asynchronous so this method will return immediately. There
-will be no effect on devices that do not support vibration.
-
-## Methods
-
-static **cancel**()
-
-Stop the vibration.
-
-static **vibrate**(pattern)
-
-Start the vibration pattern.
-
-## Examples
-
-Vibrate once for 200ms:
-
-```js
-Vibration.vibrate(200);
-Vibration.vibrate([200]);
-```
-
-Vibrate for 200ms, pause for 100ms, vibrate for 200ms:
-
-```js
-Vibration.vibrate([200, 100, 200]);
-```
--- a/docs/components/ActivityIndicator.md
+++ b/docs/components/ActivityIndicator.md
@@ -1,70 +0,0 @@
-# ActivityIndicator
-
-## Props
-
-[...View props](./View.md)
-
-**animating**: boolean = true
-
-Whether to show the indicator or hide it.
-
-**color**: ?color = '#1976D2'
-
-The foreground color of the spinner.
-
-**hidesWhenStopped**: ?boolean = true
-
-Whether the indicator should hide when not animating.
-
-**size**: ?enum('small, 'large') | number = 'small'
-
-Size of the indicator. Small has a height of `20`, large has a height of `36`.
-
-## Examples
-
-```js
-import React, { Component } from 'react'
-import { ActivityIndicator, StyleSheet, View } from 'react-native'
-
-class ToggleAnimatingActivityIndicator extends Component {
-  constructor(props) {
-    super(props)
-    this.state = { animating: true }
-  }
-
-  componentDidMount: function() {
-    this.setToggleTimeout();
-  }
-
-  render() {
-    return (
-      <ActivityIndicator
-        animating={this.state.animating}
-        size="large"
-        style={[styles.centering, { height: 80 }]}
-      />
-    );
-  }
-
-  _setToggleTimeout() {
-    setTimeout(() => {
-      this.setState({ animating: !this.state.animating })
-      this._setToggleTimeout()
-    }, 1200)
-  }
-})
-
-const styles = StyleSheet.create({
-  centering: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  gray: {
-    backgroundColor: '#cccccc'
-  },
-  horizontal: {
-    flexDirection: 'row',
-    justifyContent: 'space-around'
-  }
-})
-```
--- a/docs/components/Button.md
+++ b/docs/components/Button.md
@@ -1,43 +0,0 @@
-# Button
-
-A basic button component. Supports a minimal level of customization. You can
-build your own custom button using `TouchableOpacity` or
-`TouchableNativeFeedback`.
-
-## Props
-
-**accessibilityLabel**: ?string
-
-Overrides the text that's read by a screen reader when the user interacts
-with the element.
-
-**color**: ?string
-
-Background color of the button.
-
-**disabled**: ?boolean
-
-If `true`, disable all interactions for this element.
-
-**onPress**: function
-
-This function is called on press.
-
-**testID**: ?string
-
-Used to locate this view in end-to-end tests.
-
-**title**: string
-
-Text to display inside the button.
-
-## Examples
-
-```js
-<Button
-  accessibilityLabel="Learn more about this purple button"
-  color="#841584"
-  onPress={onPressLearnMore}
-  title="Learn More"
-/>
-```
--- a/docs/components/Image.md
+++ b/docs/components/Image.md
@@ -1,167 +0,0 @@
-# Image
-
-An accessibile image component with support for image resizing, default image,
-and child content.
-
-Unsupported React Native props:
-`capInsets` (ios),
-`onProgress` (ios)
-
-## Props
-
-**accessibilityLabel**: ?string
-
-The text that's read by a screenreader when someone interacts with the image.
-
-**accessible**: ?boolean
-
-When `true`, indicates the image is an accessibility element.
-
-**children**: ?any
-
-Content to display over the image.
-
-**defaultSource**: ?object
-
-An image to display as a placeholder while downloading the final image off the
-network. `{ uri: string, width, height }`
-
-**onError**: ?function
-
-Invoked on load error with `{nativeEvent: {error}}`.
-
-**onLayout**: ?function
-
-Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
-height } } }`, where `x` and `y` are the offsets from the parent node.
-
-**onLoad**: ?function
-
-Invoked when load completes successfully.
-
-**onLoadEnd**: ?function
-
-Invoked when load either succeeds or fails,
-
-**onLoadStart**: ?function
-
-Invoked on load start.
-
-**resizeMode**: ?enum('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'cover'
-
-Determines how to resize the image when the frame doesn't match the raw image
-dimensions.
-
-**source**: ?object
-
-`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 }`
-
-**style**: ?style
-
-+ ...[View#style](./View.md)
-+ `resizeMode`
-
-**testID**: ?string
-
-Used to locate a view in end-to-end tests.
-
-## Properties
-
-static **resizeMode**: object
-
-Example usage:
-
-```
-<Image resizeMode={Image.resizeMode.contain} />
-```
-
-## Methods
-
-static **getSize**(uri: string, success: (width, height) => {}, failure: function)
-
-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.
-
-(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.)
-
-static **prefetch**(url: string): Promise
-
-Prefetches a remote image for later use by downloading it.
-
-## Examples
-
-```js
-import placeholderAvatar from './placeholderAvatar.png'
-import React, { Component } from 'react'
-import { Image, PropTypes, StyleSheet } from 'react-native'
-
-export default class ImageExample extends Component {
-  constructor(props, context) {
-    super(props, context)
-    this.state = { loading: true }
-  }
-
-  static propTypes = {
-    size: PropTypes.oneOf(['small', 'normal', 'large']),
-    testID: Image.propTypes.testID,
-    user: PropTypes.object
-  }
-
-  static defaultProps = {
-    size: 'normal'
-  }
-
-  _onLoad(e) {
-    console.log('Avatar.onLoad', e)
-    this.setState({ loading: false })
-  }
-
-  render() {
-    const { size, testID, user } = this.props
-    const loadingStyle = this.state.loading ? { styles.loading } : { }
-
-    return (
-      <Image
-        accessibilityLabel={`${user.name}'s profile picture`}
-        defaultSource={{ uri: placeholderAvatar }}
-        onLoad={this._onLoad.bind(this)}
-        resizeMode='cover'
-        source={{ uri: user.avatarUrl }}
-        style={[
-          styles.base,
-          styles[size],
-          loadingStyle
-        ]}
-      />
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  base: {
-    borderColor: 'white',
-    borderRadius: 5,
-    borderWidth: 5
-  },
-  loading: {
-    opacity: 0.5
-  },
-  small: {
-    height: 32,
-    width: 32
-  },
-  normal: {
-    height: 48,
-    width: 48
-  },
-  large: {
-    height: 64,
-    width: 64
-  }
-})
-```
--- a/docs/components/ProgressBar.md
+++ b/docs/components/ProgressBar.md
@@ -1,27 +0,0 @@
-# ProgressBar
-
-Display an activity progress bar.
-
-## Props
-
-[...View props](./View.md)
-
-**color**: ?string = '#1976D2'
-
-Color of the progress bar.
-
-**indeterminate**: ?boolean = true
-
-Whether the progress bar will show indeterminate progress.
-
-**progress**: ?number
-
-The progress value (between 0 and 1).
-
-**testID**: ?string
-
-Used to locate this view in end-to-end tests.
-
-(web) **trackColor**: ?string = 'transparent'
-
-Color of the track bar.
--- a/docs/components/ScrollView.md
+++ b/docs/components/ScrollView.md
@@ -1,134 +0,0 @@
-# ScrollView
-
-A scrollable `View` that provides itegration with the touch-locking "responder"
-system. `ScrollView`'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 `{ flex: 1}` down the view stack).
-
-## Props
-
-[...View props](./View.md)
-
-**contentContainerStyle**: ?style
-
-These styles will be applied to the scroll view content container which wraps
-all of the child views.
-
-**horizontal**: ?boolean = false
-
-When `true`, the scroll view's children are arranged horizontally in a row
-instead of vertically in a column.
-
-**keyboardDismissMode**: ?enum('none', 'on-drag') = 'none'
-
-Determines whether the keyboard gets dismissed in response to a scroll drag.
-
-* `none` (the default), drags do not dismiss the keyboard.
-* `on-drag`, the keyboard is dismissed when a drag begins.
-* `interactive` (not supported on web; same as `none`)
-
-**onContentSizeChange**: ?function
-
-Called when scrollable content view of the `ScrollView` changes. It's
-implemented using the `onLayout` handler attached to the content container
-which this `ScrollView` renders.
-
-**onScroll**: ?function
-
-Fires at most once per frame during scrolling. The frequency of the events can
-be contolled using the `scrollEventThrottle` prop.
-
-Invoked on scroll with the following event:
-
-```js
-{
-  nativeEvent: {
-    contentOffset: { x, y },
-    contentSize: { height, width },
-    layoutMeasurement: { height, width }
-  }
-}
-```
-
-**refreshControl**: ?element
-
-TODO
-
-A [RefreshControl](../RefreshControl) component, used to provide
-pull-to-refresh functionality for the `ScrollView`.
-
-**scrollEnabled**: ?boolean = true
-
-When false, the content does not scroll.
-
-**scrollEventThrottle**: ?number = 0
-
-This controls how often the scroll event will be fired while scrolling (as a
-time interval in ms). A lower number yields better accuracy for code that is
-tracking the scroll position, but can lead to scroll performance problems. The
-default value is `0`, which means the scroll event will be sent only once each
-time the view is scrolled.
-
-## Instance methods
-
-**getInnerViewNode()**: any
-
-Returns a reference to the underlying content container DOM node within the `ScrollView`.
-
-**getScrollableNode()**: any
-
-Returns a reference to the underlying scrollable DOM node.
-
-**getScrollResponder()**: Component
-
-Returns a reference to the underlying scroll responder, which supports
-operations like `scrollTo`. All `ScrollView`-like components should implement
-this method so that they can be composed while providing access to the
-underlying scroll responder's methods.
-
-**scrollTo(options: { x: number = 0; y: number = 0; animated: boolean = true })**
-
-Scrolls to a given `x`, `y` offset (animation is not currently supported).
-
-## Examples
-
-```js
-import React, { Component } from 'react'
-import { ScrollView, StyleSheet } from 'react-native'
-import Item from './Item'
-
-export default class ScrollViewExample extends Component {
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      items: Array.from(new Array(20)).map((_, i) => ({ id: i }))
-    }
-  }
-
-  onScroll(e) {
-    console.log(e)
-  }
-
-  render() {
-    return (
-      <ScrollView
-        children={this.state.items.map((item) => <Item {...item} />)}
-        contentContainerStyle={styles.container}
-        horizontal
-        onScroll={(e) => this.onScroll(e)}
-        scrollEventThrottle={100}
-        style={styles.root}
-      />
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    borderWidth: 1
-  },
-  container: {
-    padding: 10
-  }
-})
-```
--- a/docs/components/Switch.md
+++ b/docs/components/Switch.md
@@ -1,76 +0,0 @@
-# Switch
-
-This is a controlled component that requires an `onValueChange` callback that
-updates the value prop in order for the component to reflect user actions. If
-the `value` prop is not updated, the component will continue to render the
-supplied `value` prop instead of the expected result of any user actions.
-
-## Props
-
-[...View props](./View.md)
-
-**disabled**: ?boolean = false
-
-If `true` the user won't be able to interact with the switch.
-
-**onValueChange**: ?function
-
-Invoked with the new value when the value changes.
-
-**value**: ?boolean = false
-
-The value of the switch. If `true` the switch will be turned on.
-
-(web) **activeThumbColor**: ?color = #009688
-
-The color of the thumb grip when the switch is turned on.
-
-(web) **activeTrackColor**: ?color = #A3D3CF
-
-The color of the track when the switch is turned on.
-
-(web) **thumbColor**: ?color = #FAFAFA
-
-The color of the thumb grip when the switch is turned off.
-
-(web) **trackColor**: ?color = #939393
-
-The color of the track when the switch is turned off.
-
-## Examples
-
-```js
-import React, { Component } from 'react'
-import { Switch, View } from 'react-native'
-
-class ColorSwitchExample extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      colorTrueSwitchIsOn: true,
-      colorFalseSwitchIsOn: false
-    }
-  }
-
-  render() {
-    return (
-      <View>
-        <Switch
-          activeThumbColor='#428BCA'
-          activeTrackColor='#A0C4E3'
-          onValueChange={(value) => this.setState({ colorFalseSwitchIsOn: value })}
-          value={this.state.colorFalseSwitchIsOn}
-        />
-        <Switch
-          activeThumbColor='#5CB85C'
-          activeTrackColor='#ADDAAD'
-          onValueChange={(value) => this.setState({ colorTrueSwitchIsOn: value })}
-          thumbColor='#EBA9A7'
-          trackColor='#D9534F'
-          value={this.state.colorTrueSwitchIsOn}
-        />
-      </View>
-    )
-  }
-}
-```
--- a/docs/components/Text.md
+++ b/docs/components/Text.md
@@ -1,161 +0,0 @@
-# Text
-
-`Text` is component for displaying text. It supports style, basic touch
-handling, and inherits typographic styles from ancestor elements.
-
-The `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.
-
-Unsupported React Native props:
-`allowFontScaling` (ios),
-`suppressHighlighting` (ios)
-
-## Props
-
-NOTE: `Text` will transfer all other props to the rendered HTML element.
-
-(web) **accessibilityLabel**: ?string
-
-Overrides the text that's read by a screen reader when the user interacts
-with the element. (This is implemented using `aria-label`.)
-
-See the [Accessibility guide](../guides/accessibility) for more information.
-
-(web) **accessibilityRole**: ?oneOf(roles)
-
-Allows assistive technologies to present and support interaction with the view
-in a manner that is consistent with user expectations for similar views of that
-type. For example, marking a touchable view with an `accessibilityRole` of
-`button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
-
-See the [Accessibility guide](../guides/accessibility) for more information.
-
-**accessible**: ?boolean
-
-When `true`, indicates that the view is an accessibility element (i.e.,
-focusable) and groups its child content. By default, all the touchable elements
-and elements with `accessibilityRole` of `button` and `link` are accessible.
-(This is implemented using `tabindex`.)
-
-See the [Accessibility guide](../guides/accessibility) for more information.
-
-**children**: ?any
-
-Child content.
-
-**importantForAccessibility**: ?enum('auto', 'no-hide-descendants', 'yes')
-
-A value of `no` will remove the element from the tab flow.
-
-A value of `no-hide-descendants` will hide the element and its children from
-assistive technologies. (This is implemented using `aria-hidden`.)
-
-See the [Accessibility guide](../guides/accessibility) for more information.
-
-**numberOfLines**: ?number
-
-Truncates the text with an ellipsis after this many lines. Currently only supports `1`.
-
-**onLayout**: ?function
-
-Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
-height } } }`, where `x` and `y` are the offsets from the parent node.
-
-**onPress**: ?function
-
-This function is called on press.
-
-**selectable**: ?boolean
-
-When `false`, the text is not selectable.
-
-**style**: ?style
-
-+ ...[View#style](View.md)
-+ `color`
-+ `fontFamily`
-+ `fontFeatureSettings` ‡
-+ `fontSize`
-+ `fontStyle`
-+ `fontWeight`
-+ `letterSpacing`
-+ `lineHeight`
-+ `textAlign`
-+ `textAlignVertical`
-+ `textDecorationLine`
-+ `textIndent` ‡
-+ `textOverflow` ‡
-+ `textRendering` ‡
-+ `textShadowColor`
-+ `textShadowOffset`
-+ `textShadowRadius`
-+ `textTransform` ‡
-+ `unicodeBidi` ‡
-+ `whiteSpace`
-+ `wordWrap` ‡
-+ `writingDirection`
-
-‡ web only.
-
-**testID**: ?string
-
-Used to locate this view in end-to-end tests.
-
-## Examples
-
-```js
-import React, { Component, PropTypes } from 'react'
-import { StyleSheet, Text } from 'react-native'
-
-export default class PrettyText extends Component {
-  static propTypes = {
-    ...Text.propTypes,
-    color: PropTypes.oneOf(['white', 'gray', 'red']),
-    size: PropTypes.oneOf(['small', 'normal', 'large']),
-    weight: PropTypes.oneOf(['light', 'normal', 'bold'])
-  };
-
-  static defaultProps = {
-    ...Text.defaultProps,
-    color: 'gray',
-    size: 'normal',
-    weight: 'normal'
-  };
-
-  render() {
-    const { color, size, style, weight, ...other } = this.props;
-
-    return (
-      <Text
-        ...other
-        style={[
-          style,
-          colorStyles[color],
-          sizeStyles[size],
-          weightStyles[weight]
-        ]}
-      />
-    );
-  }
-}
-
-const colorStyles = StyleSheet.create({
-  white: { color: 'white' },
-  gray: { color: 'gray' },
-  red: { color: 'red' }
-})
-
-const sizeStyles = StyleSheet.create({
-  small: { fontSize: '0.85rem', padding: '0.5rem' },
-  normal: { fontSize: '1rem', padding: '0.75rem' },
-  large: { fontSize: '1.5rem', padding: '1rem' }
-})
-
-const weightStyles = StyleSheet.create({
-  light: { fontWeight: '300' },
-  normal: { fontWeight: '400' },
-  bold: { fontWeight: '700' }
-})
-```
--- a/docs/components/TextInput.md
+++ b/docs/components/TextInput.md
@@ -1,226 +0,0 @@
-# TextInput
-
-Accessible single- and multi-line text input via a keyboard. Supports features
-such as auto-complete, auto-focus, placeholder text, and event callbacks.
-
-Note: some props are exclusive to or excluded from `multiline`.
-
-Unsupported React Native props:
-`onEndEditing`,
-`clearButtonMode` (ios),
-`enablesReturnKeyAutomatically` (ios),
-`placeholderTextColor`,
-`returnKeyType` (ios),
-`selectionState` (ios),
-`underlineColorAndroid` (android)
-
-## Props
-
-[...View props](./View.md)
-
-**autoCapitalize**: ?enum('characters', 'none', 'sentences', 'words') = 'sentences'
-
-Automatically capitalize certain characters (only available in Chrome and iOS Safari).
-
-* `characters`: Automatically capitalize all characters.
-* `none`: Completely disables automatic capitalization
-* `sentences`: Automatically capitalize the first letter of sentences.
-* `words`: Automatically capitalize the first letter of words.
-
-(web) **autoComplete**: ?string
-
-Indicates whether the value of the control can be automatically completed by
-the browser. [Accepted values](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
-
-**autoCorrect**: ?boolean = true
-
-Automatically correct spelling mistakes  (only available in iOS Safari).
-
-**autoFocus**: ?boolean = false
-
-If `true`, focuses the input on `componentDidMount`. Only the first form element
-in a document with `autofocus` is focused.
-
-**blurOnSubmit**: ?boolean
-
-If `true`, the text field will blur when submitted. The default value is `true`
-for single-line fields and `false` for multiline fields. Note, for multiline
-fields setting `blurOnSubmit` to `true` means that pressing return will blur
-the field and trigger the `onSubmitEditing` event instead of inserting a
-newline into the field.
-
-**clearTextOnFocus**: ?boolean = false
-
-If `true`, clears the text field automatically when focused.
-
-**defaultValue**: ?string
-
-Provides an initial value that will change when the user starts typing. Useful
-for simple use-cases where you don't want to deal with listening to events and
-updating the `value` prop to keep the controlled state in sync.
-
-**editable**: ?boolean = true
-
-If `false`, text is not editable (i.e., read-only).
-
-**keyboardType**: enum('default', 'email-address', 'numeric', 'phone-pad', 'search', 'url', 'web-search') = 'default'
-
-Determines which keyboard to open. (NOTE: Safari iOS requires an ancestral
-`<form action>` element to display the `search` keyboard).
-
-(Not available when `multiline` is `true`.)
-
-**maxLength**: ?number
-
-Limits the maximum number of characters that can be entered.
-
-**multiline**: ?boolean = false
-
-If true, the text input can be multiple lines.
-
-**numberOfLines**: ?number = 2
-
-Sets the number of lines for a multiline `TextInput`.
-
-(Requires `multiline` to be `true`.)
-
-**onBlur**: ?function
-
-Callback that is called when the text input is blurred.
-
-**onChange**: ?function
-
-Callback that is called when the text input's text changes.
-
-**onChangeText**: ?function
-
-Callback that is called when the text input's text changes. The text is passed
-as an argument to the callback handler.
-
-**onFocus**: ?function
-
-Callback that is called when the text input is focused.
-
-**onKeyPress**: ?function
-
-Callback that is called when a key is pressed. This will be called with `{
-nativeEvent: { key: keyValue } }` where keyValue is 'Enter` or 'Backspace' for
-respective keys and the typed-in character otherwise including ' ' for space.
-Modifier keys are also included in the nativeEvent. Fires before onChange
-callbacks.
-
-**onSelectionChange**: ?function
-
-Callback that is called when the text input's selection changes. This will be called with
-`{ nativeEvent: { selection: { start, end } } }`.
-
-**onSubmitEditing**: ?function
-
-Callback that is called when the keyboard's submit button is pressed.
-
-**placeholder**: ?string
-
-The string that will be rendered in an empty `TextInput` before text has been
-entered.
-
-**secureTextEntry**: ?boolean = false
-
-If true, the text input obscures the text entered so that sensitive text like
-passwords stay secure.
-
-(Not available when `multiline` is `true`.)
-
-**selection**: ?{ start: number, end: ?number }
-
-The start and end of the text input's selection. Set start and end to the same value to position the cursor.
-
-**selectTextOnFocus**: ?boolean = false
-
-If `true`, all text will automatically be selected on focus.
-
-**style**: ?style
-
-+ ...[Text#style](./Text.md)
-+ `resize` ‡
-
-‡ web only.
-
-**testID**: ?string
-
-Used to locate this view in end-to-end tests.
-
-**value**: ?string
-
-The value to show for the text input. `TextInput` is a controlled component,
-which means the native `value` will be forced to match this prop if provided.
-Read about how [React form
-components](https://facebook.github.io/react/docs/forms.html) work. To prevent
-user edits to the value set `editable={false}`.
-
-## Instance methods
-
-**blur()**
-
-Blur the underlying DOM input.
-
-**clear()**
-
-Clear the text from the underlying DOM input.
-
-**focus()**
-
-Focus the underlying DOM input.
-
-**isFocused()**
-
-Returns `true` if the input is currently focused; `false` otherwise.
-
-## Examples
-
-```js
-import React, { Component } from 'react'
-import { StyleSheet, TextInput } from 'react-native'
-
-export default class TextInputExample extends Component {
-  constructor(props, context) {
-    super(props, context)
-    this.state = { isFocused: false }
-  }
-
-  _onBlur(e) {
-    this.setState({ isFocused: false })
-  }
-
-  _onFocus(e) {
-    this.setState({ isFocused: true })
-  }
-
-  render() {
-    return (
-      <TextInput
-        accessibilityLabel='Write a status update'
-        maxNumberOfLines={5}
-        multiline
-        numberOfLines={2}
-        onBlur={this._onBlur.bind(this)}
-        onFocus={this._onFocus.bind(this)}
-        placeholder={`What's happening?`}
-        style={[
-          styles.default
-          this.state.isFocused && styles.focused
-        ]}
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  default: {
-    borderColor: 'gray',
-    borderBottomWidth: 2
-  },
-  focused: {
-    borderColor: 'blue'
-  }
-})
-```
--- a/docs/components/TouchableWithoutFeedback.md
+++ b/docs/components/TouchableWithoutFeedback.md
@@ -1,46 +0,0 @@
-# TouchableWithoutFeedback
-
-Do not use unless you have a very good reason. All the elements that respond to
-press should have a visual feedback when touched. This is one of the primary
-reason a "web" app doesn't feel "native".
-
-**NOTE: `TouchableWithoutFeedback` supports only one child**. If you wish to have
-several child components, wrap them in a View.
-
-## Props
-
-[...View props](./View.md)
-
-**delayLongPress**: ?number
-
-Delay in ms, from `onPressIn`, before `onLongPress` is called.
-
-**delayPressIn**: ?number
-
-Delay in ms, from the start of the touch, before `onPressIn` is called.
-
-**delayPressOut**: ?number
-
-Delay in ms, from the release of the touch, before `onPressOut` is called.
-
-**disabled**: ?boolean
-
-If `true`, disable all interactions for this component.
-
-**onLongPress**: ?function
-
-**onPress**: ?function
-
-Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).
-
-**onPressIn**: ?function
-
-**onPressOut**: ?function
-
-**pressRetentionOffset**: ?`{top: number, left: number, bottom: number, right: number}`
-
-When the scroll view is disabled, this defines how far your touch may move off
-of the button, before deactivating the button. Once deactivated, try moving it
-back and you'll see that the button is once again reactivated! Move it back and
-forth several times while the scroll view is disabled. Ensure you pass in a
-constant to reduce memory allocations.
--- a/docs/components/View.md
+++ b/docs/components/View.md
@@ -1,317 +0,0 @@
-# View
-
-`View` is the fundamental UI building block. It is a component that supports
-style, layout with flexbox, and accessibility controls. It can be nested
-inside another `View` and has 0-to-many children of any type.
-
-Also, refer to React Native's documentation about the [Gesture Responder
-System](http://facebook.github.io/react-native/releases/0.22/docs/gesture-responder-system.html).
-
-Unsupported React Native props: `collapsable`, `onAccessibilityTap`, `onMagicTap`.
-
-## Props
-
-NOTE: `View` will transfer all other props to the rendered HTML element.
-
-**accessibilityLabel**: ?string
-
-Overrides the text that's read by a screen reader when the user interacts
-with the element. (This is implemented using `aria-label`.)
-
-See the [Accessibility guide](../guides/accessibility.md) for more information.
-
-**accessibilityLiveRegion**: ?enum('assertive', 'none', 'polite')
-
-Indicates to assistive technologies whether to notify the user when the view
-changes. The values of this attribute are expressed in degrees of importance.
-When regions are specified as `polite` (recommended), updates take low
-priority. When regions are specified as `assertive`, assistive technologies
-will interrupt and immediately notify the user. (This is implemented using
-[`aria-live`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-live).)
-
-See the [Accessibility guide](../guides/accessibility.md) for more information.
-
-(web) **accessibilityRole**: ?enum(roles)
-
-Allows assistive technologies to present and support interaction with the view
-in a manner that is consistent with user expectations for similar views of that
-type. For example, marking a touchable view with an `accessibilityRole` of
-`button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
-
-See the [Accessibility guide](../guides/accessibility.md) for more information.
-
-**accessible**: ?boolean
-
-When `true`, indicates that the view is an accessibility element (i.e.,
-focusable) and groups its child content. By default, all the touchable elements
-and elements with `accessibilityRole` of `button` and `link` are accessible.
-(This is implemented using `tabindex`.)
-
-See the [Accessibility guide](../guides/accessibility.md) for more information.
-
-**children**: ?element
-
-Child content.
-
-**hitSlop**: ?object
-
-This defines how far a touch event can start away from the view (in pixels).
-Typical interface guidelines recommend touch targets that are at least 30 - 40
-points/density-independent pixels.
-
-For example, if a touchable view has a height of `20` the touchable height can
-be extended to `40` with `hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}`.
-
-**importantForAccessibility**: ?enum('auto', 'no', 'no-hide-descendants', 'yes')
-
-A value of `no` will remove the element from the tab flow.
-
-A value of `no-hide-descendants` will hide the element and its children from
-assistive technologies. (This is implemented using `aria-hidden`.)
-
-See the [Accessibility guide](../guides/accessibility.md) for more information.
-
-**onLayout**: ?function
-
-Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
-height } } }`, where `x` and `y` are the offsets from the parent node.
-
-**onMoveShouldSetResponder**: ?function => boolean
-
-Does this view want to "claim" touch responsiveness? This is called for every
-touch move on the `View` when it is not the responder.
-
-**onMoveShouldSetResponderCapture**: ?function => boolean
-
-If a parent `View` wants to prevent a child `View` from becoming responder on a
-move, it should have this handler return `true`.
-
-**onResponderGrant**: ?function
-
-The `View` is now responding to touch events. This is the time to highlight and
-show the user what is happening.  For most touch interactions, you'll simply
-want to wrap your component in `TouchableHighlight` or `TouchableOpacity`.
-
-**onResponderMove**: ?function
-
-The user is moving their finger.
-
-**onResponderReject**: ?function
-
-Another responder is already active and will not release it to the `View`
-asking to be the responder.
-
-**onResponderRelease**: ?function
-
-Fired at the end of the touch.
-
-**onResponderTerminate**: ?function
-
-The responder has been taken from the `View`.
-
-**onResponderTerminationRequest**: ?function
-
-Some other `View` wants to become responder and is asking this `View` to
-release its responder. Returning `true` allows its release.
-
-**onStartShouldSetResponder**: ?function => boolean
-
-Does this view want to become responder on the start of a touch?
-
-**onStartShouldSetResponderCapture**: ?function => boolean
-
-If a parent `View` wants to prevent a child `View` from becoming the responder
-on a touch start, it should have this handler return `true`.
-
-**pointerEvents**: ?enum('auto', 'box-only', 'box-none', 'none') = 'auto'
-
-Controls whether the View can be the target of touch events. The enhanced
-`pointerEvents` modes provided are not part of the CSS spec, therefore,
-`pointerEvents` is excluded from `style`.
-
-`box-none` is the equivalent of:
-
-```css
-.box-none { pointer-events: none !important; }
-.box-none > * { pointer-events: auto; }
-```
-
-`box-only` is the equivalent of:
-
-```css
-.box-only { pointer-events: auto !important; }
-.box-only > * { pointer-events: none; }
-```
-
-**style**: ?style
-
-+ `alignContent`
-+ `alignItems`
-+ `alignSelf`
-+ `animationDelay` ‡
-+ `animationDirection` ‡
-+ `animationDuration` ‡
-+ `animationFillMode` ‡
-+ `animationIterationCount` ‡
-+ `animationName` ‡
-+ `animationPlayState` ‡
-+ `animationTimingFunction` ‡
-+ `backfaceVisibility`
-+ `backgroundAttachment` ‡
-+ `backgroundBlendMode` ‡
-+ `backgroundClip` ‡
-+ `backgroundColor`
-+ `backgroundImage` ‡
-+ `backgroundOrigin` ‡
-+ `backgroundPosition` ‡
-+ `backgroundRepeat` ‡
-+ `backgroundSize` ‡
-+ `borderColor` (single value)
-+ `borderTopColor`
-+ `borderBottomColor`
-+ `borderRightColor`
-+ `borderLeftColor`
-+ `borderRadius` (single value)
-+ `borderTopLeftRadius`
-+ `borderTopRightRadius`
-+ `borderBottomLeftRadius`
-+ `borderBottomRightRadius`
-+ `borderStyle` (single value)
-+ `borderTopStyle`
-+ `borderRightStyle`
-+ `borderBottomStyle`
-+ `borderLeftStyle`
-+ `borderWidth` (single value)
-+ `borderBottomWidth`
-+ `borderLeftWidth`
-+ `borderRightWidth`
-+ `borderTopWidth`
-+ `bottom`
-+ `boxShadow` ‡
-+ `boxSizing`
-+ `clip` ‡
-+ `cursor` ‡
-+ `display`
-+ `filter` ‡
-+ `flex` (number)
-+ `flexBasis`
-+ `flexDirection`
-+ `flexGrow`
-+ `flexShrink`
-+ `flexWrap`
-+ `gridAutoColumns` ‡
-+ `gridAutoFlow` ‡
-+ `gridAutoRows` ‡
-+ `gridColumnEnd` ‡
-+ `gridColumnGap` ‡
-+ `gridColumnStart` ‡
-+ `gridRowEnd` ‡
-+ `gridRowGap` ‡
-+ `gridRowStart` ‡
-+ `gridTemplateColumns` ‡
-+ `gridTemplateRows` ‡
-+ `gridTemplateAreas` ‡
-+ `height`
-+ `justifyContent`
-+ `left`
-+ `margin` (single value)
-+ `marginBottom`
-+ `marginHorizontal`
-+ `marginLeft`
-+ `marginRight`
-+ `marginTop`
-+ `marginVertical`
-+ `maxHeight`
-+ `maxWidth`
-+ `minHeight`
-+ `minWidth`
-+ `opacity`
-+ `order`
-+ `outline` ‡
-+ `outlineColor` ‡
-+ `overflow`
-+ `overflowX` ‡
-+ `overflowY` ‡
-+ `padding` (single value)
-+ `paddingBottom`
-+ `paddingHorizontal`
-+ `paddingLeft`
-+ `paddingRight`
-+ `paddingTop`
-+ `paddingVertical`
-+ `perspective` ‡
-+ `perspectiveOrigin` ‡
-+ `position`
-+ `right`
-+ `shadowColor`
-+ `shadowOffset`
-+ `shadowOpacity`
-+ `shadowRadius`
-+ `top`
-+ `transform`
-+ `transformOrigin` ‡
-+ `transitionDelay` ‡
-+ `transitionDuration` ‡
-+ `transitionProperty` ‡
-+ `transitionTimingFunction` ‡
-+ `userSelect` ‡
-+ `visibility` ‡
-+ `width`
-+ `willChange` ‡
-+ `zIndex`
-
-‡ web only.
-
-Default:
-
-```js
-{
-  alignItems: 'stretch',
-  borderWidth: 0,
-  borderStyle: 'solid',
-  boxSizing: 'border-box',
-  display: 'flex',
-  flexBasis: 'auto',
-  flexDirection: 'column',
-  flexShrink: 0,
-  margin: 0,
-  padding: 0,
-  position: 'relative'
-};
-```
-
-(See [facebook/yoga](https://github.com/facebook/yoga)).
-
-**testID**: ?string
-
-Used to locate this view in end-to-end tests.
-
-## Examples
-
-```js
-import React, { Component, PropTypes } from 'react'
-import { StyleSheet, View } from 'react-native'
-
-export default class ViewExample extends Component {
-  render() {
-    return (
-      <View style={styles.row}>
-        {
-          ['1', '2', '3', '4', '5'].map((value, i) => {
-            return <View children={value} key={i} style={styles.cell} />
-          })
-        }
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row'
-  },
-  cell: {
-    flexGrow: 1
-  }
-})
-```
--- a/docs/guides/advanced.md
+++ b/docs/guides/advanced.md
@@ -2,7 +2,7 @@

 ## Use with existing React DOM components

-React Native for Web exports a web-specific module called `createDOMElement`,
+React Native for Web exports a web-specific module called `createElement`,
 which can be used to wrap React DOM components. This allows you to use React
 Native's accessibility and style optimizations.

@@ -11,9 +11,8 @@ In the example below, `Video` will now accept common React Native props such as
 props.

 ```js
-import { createDOMElement } from 'react-native';
-
-const Video = (props) => createDOMElement('video', props);
+import { createElement } from 'react-native-web';
+const Video = (props) => createElement('video', props);
 ```

 This also works with composite components defined in your existing component
@@ -21,9 +20,10 @@ gallery or dependencies ([live example](https://www.webpackbin.com/bins/-KiTSGFw

 ```js
 import RaisedButton from 'material-ui/RaisedButton';
-import { createDOMElement, StyleSheet } from 'react-native';
+import { createElement } from 'react-native-web';
+import { StyleSheet } from 'react-native';

-const CustomButton = (props) => createDOMElement(RaisedButton, {
+const CustomButton = (props) => createElement(RaisedButton, {
  ...props,
  style: [ styles.button, props.style ]
 });
@@ -35,6 +35,14 @@ const styles = StyleSheet.create({
 });
 ```

+And `createElement` can be used as drop-in replacement for `React.createElement`:
+
+```js
+/* @jsx createElement */
+import { createElement } from 'react-native-web';
+const Video = (props) => <video {...props} style={[ { marginVertical: 10 }, props.style ]} />
+```
+
 Remember that React Native styles are not the same as React DOM styles, and
 care needs to be taken not to pass React DOM styles into your React Native
 wrapped components.
@@ -47,7 +55,8 @@ an API inspired by styled-components ([live
 example](https://www.webpackbin.com/bins/-KjT9ziwv4O7FDZdvsnX)).

 ```js
-const { createDOMElement, StyleSheet } = ReactNative;
+import { createElement } from 'react-native-web';
+import { StyleSheet } from 'react-native';

 /**
 * styled API
@@ -69,7 +78,7 @@ const styled = (Component, styler) => {

      return (
        isDOMComponent
-          ? createDOMElement(Component, nextProps)
+          ? createElement(Component, nextProps)
          : <Component {...nextProps} />
      );
    }
--- a/docs/guides/direct-manipulation.md
+++ b/docs/guides/direct-manipulation.md
@@ -1,13 +1,13 @@
 # Direct manipulation

-React Native for Web provides several methods to directly access the underlying
-DOM node. This can be useful when you need to make changes directly to a
-component without using state/props to trigger a re-render of the entire
-subtree, or when you want to focus a view or measure its on-screen dimensions.
+React Native provides several methods to directly access the underlying host
+node. This can be useful when you need to make changes directly to a component
+without using state/props to trigger a re-render of the entire subtree, or when
+you want to focus a view or measure its on-screen dimensions.

 The methods described are available on most of the default components provided
-by React Native for Web. Note, however, that they are *not* available on the
-composite components that you define in your own app.
+by React Native for Web. Note, however, that they are *not* available on the composite
+components that you define in your own app.

 ## Instance methods

@@ -35,11 +35,17 @@ Like `measure`, but measures the view relative to another view, specified as
 `relativeToNativeNode`. This means that the returned `x`, `y` are relative to
 the origin `x`, `y` of the ancestor view.

+As always, to obtain a native node handle for a component, you can use
+`findNodeHandle(component)`.
+
+**measureInWindow**(callback: (x, y, width, height) => void)
+
+Determines the location of the given view in the window and returns the values
+via an async callback.
+
 **setNativeProps**(nativeProps: Object)

-This function sends props straight to the underlying DOM node. See the [direct
-manipulation](../guides/direct-manipulation.md) guide for cases where
-`setNativeProps` should be used.
+This function sends props straight to the underlying DOM node.

 ## About `setNativeProps`

--- a/docs/guides/getting-started.md
+++ b/docs/guides/getting-started.md
@@ -1,25 +1,34 @@
 # Getting started

 This guide will help you to correctly configure build and test tools to work
-with React Native for Web.
-
-Alternatively, you can quickly setup a local project using
-[create-react-app](https://github.com/facebookincubator/create-react-app)
-(which supports `react-native-web` out-of-the-box once installed),
-[react-native-web-starter](https://github.com/grabcode/react-native-web-starter),
-or [react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack).
+with React Native for Web. (Alternatively, you can quickly setup a local
+project using the starter kits listed in the README.)

 It is recommended that your application provide a `Promise` and `Array.from`
 polyfill.

-## Webpack and Babel
+## Web packager

 [Webpack](https://webpack.js.org) is a popular build tool for web apps. Below is an
-example of how to configure a build that uses [Babel](https://babeljs.io/) to
-compile your JavaScript for the web.
+_example_ of how to configure a build that uses [Babel](https://babeljs.io/) to
+compile your JavaScript for the web. Please refer to the webpack documentation
+when setting up your project.
+
+Install webpack-related dependencies, for example:
+
+```
+yarn add --dev babel-loader url-loader webpack webpack-dev-server
+```
+
+Create a `web/webpack.config.js` file:

 ```js
-// webpack.config.js
+// web/webpack.config.js
+
+const path = require('path');
+const webpack = require('webpack');
+
+const appDirectory = path.resolve(__dirname, '../');

 // This is needed for webpack to compile JavaScript.
 // Many OSS React Native packages are not compiled to ES5 before being
@@ -28,22 +37,26 @@ compile your JavaScript for the web.
 // `node_module`.
 const babelLoaderConfiguration = {
  test: /\.js$/,
-  // Add every directory that needs to be compiled by Babel during the build
+  // Add every directory that needs to be compiled by Babel during the build.
  include: [
-    path.resolve(__dirname, 'src'),
-    path.resolve(__dirname, 'node_modules/react-native-uncompiled')
+    path.resolve(appDirectory, 'index.web.js'),
+    path.resolve(appDirectory, 'src'),
+    path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
-      // The 'react-native' preset is recommended
+      // This aliases 'react-native' to 'react-native-web' and includes only
+      // the modules needed by the app.
+      plugins: ['react-native-web/babel', 'transform-runtime'],
+      // The 'react-native' preset is recommended (or use your own .babelrc).
      presets: ['react-native']
    }
  }
 };

-// This is needed for webpack to import static images in JavaScript files
+// This is needed for webpack to import static images in JavaScript files.
 const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
@@ -55,6 +68,15 @@ const imageLoaderConfiguration = {
 };

 module.exports = {
+  // your web-specific entry file
+  entry: path.resolve(appDirectory, 'index.web.js'),
+
+  // configures where the build ends up
+  output: {
+    filename: 'bundle.web.js',
+    path: path.resolve(appDirectory, 'dist')
+  },
+
  // ...the rest of your config

  module: {
@@ -66,17 +88,15 @@ module.exports = {

  plugins: [
    // `process.env.NODE_ENV === 'production'` must be `true` for production
-    // builds to eliminate development checks and reduce build size.
+    // builds to eliminate development checks and reduce build size. You may
+    // wish to include additional optimizations.
    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+      __DEV__: process.env.NODE_ENV === 'production' || true
    })
  ],

  resolve: {
-    // Maps the 'react-native' import to 'react-native-web'.
-    alias: {
-      'react-native': 'react-native-web'
-    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
@@ -85,36 +105,94 @@ module.exports = {
 }
 ```

-Please refer to the Webpack documentation for more information.
-
-## Jest
-
-[Jest](https://facebook.github.io/jest/) also needs to map `react-native` to `react-native-web`.
+To run in development from the root of your application:

 ```
-"jest": {
-  "moduleNameMapper": {
-    "react-native": "<rootDir>/node_modules/react-native-web"
-  }
-}
+./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors
 ```

-Please refer to the Jest documentation for more information.
+To build for production:
+
+```
+./node_modules/.bin/webpack -p --config ./web/webpack.config.js
+```
+
+Please refer to the Webpack documentation for more information on configuration.
+
+### Client-side rendering
+
+Rendering using `AppRegistry`:
+
+```js
+// index.web.js
+
+import App from './src/App';
+import React from 'react';
+import ReactNative, { AppRegistry } from 'react-native';
+
+// register the app
+AppRegistry.registerComponent('App', () => App);
+
+AppRegistry.runApplication('App', {
+  initialProps: {},
+  rootTag: document.getElementById('react-app')
+});
+```
+
+Rendering within existing web apps is also possible using `ReactNative`:
+
+```js
+import AppHeader from './src/AppHeader';
+import React from 'react';
+import ReactNative from 'react-native';
+
+// use .hydrate if hydrating a SSR app
+ReactNative.render(<AppHeader />, document.getElementById('react-app-header'))
+```
+
+And finally, `react-native-web` components will also be rendering within a tree
+produced by calling `ReactDOM.render` (i.e., an existing web app), but
+otherwise it is not recommended.
+
+### Server-side rendering
+
+Server-side rendering is supported using the `AppRegistry`:
+
+```js
+import App from './src/App';
+import ReactDOMServer from 'react-dom/server'
+import ReactNative, { AppRegistry } from 'react-native'
+
+// register the app
+AppRegistry.registerComponent('App', () => App)
+
+// prerender the app
+const { element, stylesheets } = AppRegistry.getApplication('App', { initialProps });
+const initialHTML = ReactDOMServer.renderToString(element);
+const initialStyles = stylesheets.map((sheet) => ReactDOMServer.renderToStaticMarkup(sheet)).join('\n');
+
+// construct HTML document
+const document = `
+<!DOCTYPE html>
+<html>
+<head>
+${initialStyles}
+</head>
+<body>
+${initialHTML}
+`
+```

 ## Web-specific code

 Minor platform differences can use the `Platform` module.

 ```js
-import { AppRegistry, Platform } from 'react-native'
+import { Platform } from 'react-native';

-AppRegistry.registerComponent('MyApp', () => MyApp)
-
-if (Platform.OS === 'web') {
-  AppRegistry.runApplication('MyApp', {
-    rootTag: document.getElementById('react-root')
-  });
-}
+const styles = StyleSheet.create({
+  height: (Platform.OS === 'web') ? 200 : 100,
+});
 ```

 More significant platform differences should use platform-specific files (see
@@ -137,68 +215,26 @@ import MyComponent from './MyComponent';
 React Native will automatically import the correct variant for each specific
 target platform.

-## Client-side rendering
+## Testing with Jest

-Rendering using `ReactNative`:
+[Jest](https://facebook.github.io/jest/) can be configured to improve snapshots
+of `react-native-web` components.

-```js
-import React from 'react'
-import ReactNative from 'react-native'
-
-// component that renders the app
-const AppHeaderContainer = (props) => { /* ... */ }
-
-ReactNative.render(<AppHeaderContainer />, document.getElementById('react-app-header'))
+```
+{
+  "snapshotSerializers": [ "enzyme-to-json/serializer", "react-native-web/jest/serializer" ]
+}
 ```

-Rendering using `AppRegistry`:
+Jest also needs to map `react-native` to `react-native-web` (unless you are
+using Babel with the `react-native-web/babel` plugin).

-```js
-import React from 'react'
-import ReactNative, { AppRegistry } from 'react-native'
-
-// component that renders the app
-const AppContainer = (props) => { /* ... */ }
-
-// register the app
-AppRegistry.registerComponent('App', () => AppContainer)
-
-AppRegistry.runApplication('App', {
-  initialProps: {},
-  rootTag: document.getElementById('react-app')
-})
+```
+{
+  "moduleNameMapper": {
+    "react-native": "<rootDir>/node_modules/react-native-web"
+  }
+}
 ```

-Rendering within `ReactDOM.render` also works when introducing
-`react-native-web` to an existing web app, but otherwise it is not recommended.
-
-## Server-side rendering
-
-Rendering using the `AppRegistry`:
-
-```js
-import ReactDOMServer from 'react-dom/server'
-import ReactNative, { AppRegistry } from 'react-native'
-
-// component that renders the app
-const AppContainer = (props) => { /* ... */ }
-
-// register the app
-AppRegistry.registerComponent('App', () => AppContainer)
-
-// prerender the app
-const { element, stylesheets } = AppRegistry.getApplication('App', { initialProps });
-const initialHTML = ReactDOMServer.renderToString(element);
-const initialStyles = stylesheets.map((sheet) => ReactDOMServer.renderToStaticMarkup(sheet)).join('\n');
-
-// construct HTML document
-const document = `
-<!DOCTYPE html>
-<html>
-<head>
-${initialStyles}
-</head>
-<body>
-${initialHTML}
-`
-```
+Please refer to the Jest documentation for more information.
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,13 +1,11 @@
 {
-  "name": "docs",
-  "private": true,
  "scripts": {
    "build": "yarn && build-storybook -o ./dist -c ./storybook/.storybook",
-    "start": "start-storybook -p 9001 -c ./storybook/.storybook --dont-track",
-    "publish": "yarn build && git checkout gh-pages && rm -rf ./storybook && mv docs/dist storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -"
+    "start": "start-storybook -p 9001 -c ./storybook/.storybook",
+    "release": "yarn build && git checkout gh-pages && rm -rf ../storybook && mv dist ../storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -"
  },
  "dependencies": {
-    "@kadira/storybook": "^2.35.3",
-    "@kadira/storybook-addon-options": "^1.0.2"
+    "@storybook/addon-options": "^3.1.6",
+    "@storybook/react": "^3.1.9"
  }
 }
--- a/docs/storybook/.storybook/addons.js
+++ b/docs/storybook/.storybook/addons.js
@@ -1 +1 @@
-import '@kadira/storybook-addon-options/register';
+import '@storybook/addon-options/register';
--- a/docs/storybook/.storybook/config.js
+++ b/docs/storybook/.storybook/config.js
@@ -1,6 +1,6 @@
-import { setOptions } from '@kadira/storybook-addon-options';
+import { setOptions } from '@storybook/addon-options';
 import centered from './decorator-centered';
-import { configure, addDecorator } from '@kadira/storybook';
+import { configure, addDecorator } from '@storybook/react';

 const context = require.context('../', true, /Screen\.js$/);

--- a/docs/storybook/.storybook/decorator-centered.js
+++ b/docs/storybook/.storybook/decorator-centered.js
@@ -10,9 +10,5 @@ const styles = StyleSheet.create({
 });

 export default function(renderStory) {
-  return (
-    <View style={styles.root}>
-      {renderStory()}
-    </View>
-  );
+  return <View style={styles.root}>{renderStory()}</View>;
 }
--- a/docs/storybook/.storybook/webpack.config.js
+++ b/docs/storybook/.storybook/webpack.config.js
@@ -1,33 +1,36 @@
 const path = require('path');
 const webpack = require('webpack');

-const DEV = process.env.NODE_ENV !== 'production';
+module.exports = (storybookBaseConfig, configType) => {
+  const DEV = configType === 'DEVELOPMENT';

-module.exports = {
-  module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: { cacheDirectory: true }
-      },
-      {
-        test: /\.(gif|jpe?g|png|svg)$/,
-        loader: 'url-loader',
-        query: { name: '[name].[ext]' }
-      }
-    ]
-  },
-  plugins: [
+  storybookBaseConfig.module.rules.push({
+    test: /\.js$/,
+    exclude: /node_modules/,
+    use: {
+      loader: 'babel-loader',
+      options: { cacheDirectory: true }
+    }
+  });
+
+  storybookBaseConfig.module.rules.push({
+    test: /\.(gif|jpe?g|png|svg)$/,
+    use: {
+      loader: 'url-loader',
+      options: { name: '[name].[ext]' }
+    }
+  });
+
+  storybookBaseConfig.plugins.push(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.__REACT_NATIVE_DEBUG_ENABLED__': DEV
    })
-  ],
-  resolve: {
-    alias: {
-      'react-native': path.join(__dirname, '../../../src/module')
-    }
-  }
+  );
+
+  storybookBaseConfig.resolve.alias = {
+    'react-native': path.join(__dirname, '../../../src/module')
+  };
+
+  return storybookBaseConfig;
 };
--- a/docs/storybook/1-components/ActivityIndicator/ActivityIndicatorScreen.js
+++ b/docs/storybook/1-components/ActivityIndicator/ActivityIndicatorScreen.js
@@ -9,11 +9,10 @@ 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, { Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';

-const ActivityIndicatorScreen = () =>
-  <UIExplorer title="ActivityIndicator" url="components/ActivityIndicator">
+const ActivityIndicatorScreen = () => (
+  <UIExplorer title="ActivityIndicator" url="1-components/ActivityIndicator">
    <Description>Displays a customizable activity indicator</Description>
    <Section title="Props">
      <DocItem name="...View props" />
@@ -54,6 +53,7 @@ const ActivityIndicatorScreen = () =>
        }}
      />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('ActivityIndicator', ActivityIndicatorScreen);
--- a/docs/storybook/1-components/ActivityIndicator/examples/PropAnimating.js
+++ b/docs/storybook/1-components/ActivityIndicator/examples/PropAnimating.js
@@ -5,11 +5,12 @@
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import React from 'react';

-const ActivityIndicatorAnimatingExample = () =>
+const ActivityIndicatorAnimatingExample = () => (
  <View style={styles.horizontal}>
    <ActivityIndicator />
    <ActivityIndicator animating={false} />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
--- a/docs/storybook/1-components/ActivityIndicator/examples/PropColor.js
+++ b/docs/storybook/1-components/ActivityIndicator/examples/PropColor.js
@@ -5,7 +5,7 @@
 import React from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';

-const ActivityIndicatorColorExample = () =>
+const ActivityIndicatorColorExample = () => (
  <View style={styles.horizontal}>
    <ActivityIndicator color="#1DA1F2" style={styles.rightPadding} />
    <ActivityIndicator color="#17BF63" style={styles.rightPadding} />
@@ -13,7 +13,8 @@ const ActivityIndicatorColorExample = () =>
    <ActivityIndicator color="#794BC4" style={styles.rightPadding} />
    <ActivityIndicator color="#E0245E" style={styles.rightPadding} />
    <ActivityIndicator color="#FFAD1F" style={styles.rightPadding} />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
--- a/docs/storybook/1-components/ActivityIndicator/examples/PropHidesWhenStopped.js
+++ b/docs/storybook/1-components/ActivityIndicator/examples/PropHidesWhenStopped.js
@@ -43,11 +43,12 @@ class ToggleAnimatingActivityIndicator extends PureComponent {
  }
 }

-const ActivityIndicatorHidesWhenStoppedExample = () =>
+const ActivityIndicatorHidesWhenStoppedExample = () => (
  <View style={[styles.horizontal]}>
    <ToggleAnimatingActivityIndicator hidesWhenStopped={false} style={styles.rightPadding} />
    <ToggleAnimatingActivityIndicator />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
--- a/docs/storybook/1-components/ActivityIndicator/examples/PropSize.js
+++ b/docs/storybook/1-components/ActivityIndicator/examples/PropSize.js
@@ -7,11 +7,12 @@ import { ActivityIndicator, StyleSheet, View } from 'react-native';

 const sizes = [20, 'small', 36, 'large', 60];

-const ActivityIndicatorSizeExample = () =>
+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>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
--- a/docs/storybook/1-components/Button/ButtonScreen.js
+++ b/docs/storybook/1-components/Button/ButtonScreen.js
@@ -8,11 +8,17 @@ import React from 'react';
 import PropColor from './examples/PropColor';
 import PropDisabled from './examples/PropDisabled';
 import PropOnPress from './examples/PropOnPress';
-import UIExplorer, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
-import { storiesOf } from '@kadira/storybook';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';

-const ButtonScreen = () =>
-  <UIExplorer title="Button" url="components/Button">
+const ButtonScreen = () => (
+  <UIExplorer title="Button" url="1-components/Button">
    <Description>
      <AppText>
        A basic button component. Supports a minimal level of customization. You can build your own
@@ -62,6 +68,7 @@ const ButtonScreen = () =>

      <DocItem name="title" typeInfo="string" description="Text to display inside the button." />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('Button', ButtonScreen);
--- a/docs/storybook/1-components/Button/examples/PropColor.js
+++ b/docs/storybook/1-components/Button/examples/PropColor.js
@@ -8,7 +8,7 @@ import { Button, View } from 'react-native';

 const emptyFunction = () => {};

-const ButtonColorExample = () =>
+const ButtonColorExample = () => (
  <View>
    <Button color="#17BF63" onPress={emptyFunction} title="Press me" />
    <DividerVertical />
@@ -17,6 +17,7 @@ const ButtonColorExample = () =>
    <Button color="#794BC4" onPress={emptyFunction} title="Press me" />
    <DividerVertical />
    <Button color="#E0245E" onPress={emptyFunction} title="Press me" />
-  </View>;
+  </View>
+);

 export default ButtonColorExample;
--- a/docs/storybook/1-components/Button/examples/PropOnPress.js
+++ b/docs/storybook/1-components/Button/examples/PropOnPress.js
@@ -8,7 +8,7 @@ import { Button, StyleSheet, View } from 'react-native';

 const emptyFunction = () => {};

-const ButtonOnPressExample = () =>
+const ButtonOnPressExample = () => (
  <View style={styles.horizontal}>
    <Button
      accessibilityLabel="This sounds great!"
@@ -17,7 +17,8 @@ const ButtonOnPressExample = () =>
    />
    <DividerHorizontal />
    <Button color="#841584" onPress={emptyFunction} title="Ok!" />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
--- a/docs/storybook/1-components/CheckBox/CheckBoxScreen.js
+++ b/docs/storybook/1-components/CheckBox/CheckBoxScreen.js
@@ -0,0 +1,93 @@
+/* eslint-disable react/jsx-sort-props */
+
+/**
+ * @flow
+ */
+
+import CustomSize from './examples/CustomSize';
+import PropColor from './examples/PropColor';
+import PropDisabled from './examples/PropDisabled';
+import PropOnValueChange from './examples/PropOnValueChange';
+import PropValue from './examples/PropValue';
+import React from 'react';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';
+
+const CheckBoxScreen = () => (
+  <UIExplorer title="CheckBox" url="components/CheckBox">
+    <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>
+    </Description>
+
+    <Section title="Props">
+      <DocItem name="...View props" />
+
+      <DocItem
+        description="Customize the color of the checkbox."
+        example={{
+          render: () => <PropColor />
+        }}
+        label="web"
+        name="color"
+        typeInfo="?color"
+      />
+
+      <DocItem
+        description="If true, the user won't be able to interact with the checkbox."
+        example={{
+          render: () => <PropDisabled />
+        }}
+        name="disabled"
+        typeInfo="?boolean = false"
+      />
+
+      <DocItem
+        description="Invoked with the event when the value changes."
+        name="onChange"
+        typeInfo="?function"
+      />
+
+      <DocItem
+        description="Invoked with the new value when the value changes."
+        example={{
+          render: () => <PropOnValueChange />
+        }}
+        name="onValueChange"
+        typeInfo="?function"
+      />
+
+      <DocItem
+        description="The value of the checkbox. If `true` the checkbox will be checked."
+        example={{
+          render: () => <PropValue />
+        }}
+        name="value"
+        typeInfo="?boolean = false"
+      />
+    </Section>
+
+    <Section title="More examples">
+      <DocItem
+        description="The checkbox size can be controlled by the 'height' and 'width' style properties"
+        example={{
+          code: '<CheckBox style={{ height: 32, width: 32 }} />',
+          render: () => <CustomSize />
+        }}
+        name="Custom size"
+      />
+    </Section>
+  </UIExplorer>
+);
+
+storiesOf('Components', module).add('CheckBox', CheckBoxScreen);
--- a/docs/storybook/1-components/CheckBox/examples/CustomSize.js
+++ b/docs/storybook/1-components/CheckBox/examples/CustomSize.js
@@ -0,0 +1,20 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import styles from './styles';
+import { CheckBox, View } from 'react-native';
+
+const CustomSizeExample = () => (
+  <View style={styles.row}>
+    <View style={styles.marginRight}>
+      <CheckBox style={{ height: 20, width: 20 }} value />
+    </View>
+    <View style={styles.marginRight}>
+      <CheckBox style={{ height: 32, width: 32 }} value />
+    </View>
+  </View>
+);
+
+export default CustomSizeExample;
--- a/docs/storybook/1-components/CheckBox/examples/PropColor.js
+++ b/docs/storybook/1-components/CheckBox/examples/PropColor.js
@@ -0,0 +1,20 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import styles from './styles';
+import { CheckBox, View } from 'react-native';
+
+const CheckBoxColorExample = () => (
+  <View style={styles.row}>
+    <View style={styles.marginRight}>
+      <CheckBox color="#1DA1F2" value />
+    </View>
+    <View style={styles.marginRight}>
+      <CheckBox color="#F45D22" value />
+    </View>
+  </View>
+);
+
+export default CheckBoxColorExample;
--- a/docs/storybook/1-components/CheckBox/examples/PropDisabled.js
+++ b/docs/storybook/1-components/CheckBox/examples/PropDisabled.js
@@ -0,0 +1,20 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import styles from './styles';
+import { CheckBox, View } from 'react-native';
+
+const CheckBoxDisabledExample = () => (
+  <View style={styles.row}>
+    <View style={styles.marginRight}>
+      <CheckBox disabled value={false} />
+    </View>
+    <View style={styles.marginRight}>
+      <CheckBox disabled value />
+    </View>
+  </View>
+);
+
+export default CheckBoxDisabledExample;
--- a/docs/storybook/1-components/CheckBox/examples/PropOnValueChange.js
+++ b/docs/storybook/1-components/CheckBox/examples/PropOnValueChange.js
@@ -0,0 +1,59 @@
+/**
+ * @flow
+ */
+
+import styles from './styles';
+import React, { PureComponent } from 'react';
+import { CheckBox, Text, View } from 'react-native';
+
+class CheckBoxOnValueChangeExample extends PureComponent {
+  state = {
+    eventSwitchIsOn: false,
+    eventSwitchRegressionIsOn: true
+  };
+
+  render() {
+    const { eventSwitchIsOn, eventSwitchRegressionIsOn } = this.state;
+
+    return (
+      <View style={styles.row}>
+        <View style={[styles.alignCenter, styles.marginRight]}>
+          <CheckBox
+            onValueChange={this._handleEventSwitch}
+            style={styles.marginBottom}
+            value={eventSwitchIsOn}
+          />
+          <CheckBox
+            onValueChange={this._handleEventSwitch}
+            style={styles.marginBottom}
+            value={eventSwitchIsOn}
+          />
+          <Text>{eventSwitchIsOn ? 'On' : 'Off'}</Text>
+        </View>
+        <View style={styles.alignCenter}>
+          <CheckBox
+            onValueChange={this._handleEventSwitchRegression}
+            style={styles.marginBottom}
+            value={eventSwitchRegressionIsOn}
+          />
+          <CheckBox
+            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 CheckBoxOnValueChangeExample;
--- a/docs/storybook/1-components/CheckBox/examples/PropValue.js
+++ b/docs/storybook/1-components/CheckBox/examples/PropValue.js
@@ -0,0 +1,20 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import styles from './styles';
+import { CheckBox, View } from 'react-native';
+
+const CheckBoxValueExample = () => (
+  <View style={styles.row}>
+    <View style={styles.marginRight}>
+      <CheckBox value={false} />
+    </View>
+    <View style={styles.marginRight}>
+      <CheckBox value />
+    </View>
+  </View>
+);
+
+export default CheckBoxValueExample;
--- a/docs/storybook/1-components/CheckBox/examples/styles.js
+++ b/docs/storybook/1-components/CheckBox/examples/styles.js
@@ -0,0 +1,23 @@
+/**
+ * @flow
+ */
+
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  marginRight: {
+    marginRight: 10
+  },
+  marginBottom: {
+    marginBottom: 10
+  },
+  alignCenter: {
+    alignItems: 'center'
+  }
+});
+
+export default styles;
--- a/docs/storybook/1-components/CheckBox/helpers.js
+++ b/docs/storybook/1-components/CheckBox/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 };
--- a/docs/storybook/1-components/Image/ImageBackgroundScreen.js
+++ b/docs/storybook/1-components/Image/ImageBackgroundScreen.js
@@ -0,0 +1,32 @@
+/* eslint-disable react/jsx-sort-props */
+
+/**
+ * @flow
+ */
+
+import React from 'react';
+import PropChildren from './examples/PropChildren';
+import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';
+
+const ImageBackgroundScreen = () => (
+  <UIExplorer title="ImageBackground" url="1-components/ImageBackground">
+    <Description>A image component with support for child content.</Description>
+
+    <Section title="Props">
+      <DocItem name="...Image props" />
+
+      <DocItem
+        name="children"
+        typeInfo="?any"
+        description="Content to display over the image."
+        example={{
+          render: () => <PropChildren />
+        }}
+      />
+
+      <DocItem name="imageStyle" typeInfo="?style" description="Styles for the inner image." />
+    </Section>
+  </UIExplorer>
+);
+
+storiesOf('Components', module).add('ImageBackground', ImageBackgroundScreen);
--- a/docs/storybook/1-components/Image/ImageScreen.js
+++ b/docs/storybook/1-components/Image/ImageScreen.js
@@ -5,7 +5,6 @@
 */

 import React from 'react';
-import PropChildren from './examples/PropChildren';
 import PropDefaultSource from './examples/PropDefaultSource';
 import PropDraggable from './examples/PropDraggable';
 import PropOnError from './examples/PropOnError';
@@ -16,11 +15,17 @@ 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, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';

-const ImageScreen = () =>
-  <UIExplorer title="Image" url="components/Image">
+const ImageScreen = () => (
+  <UIExplorer title="Image" url="1-components/Image">
    <Description>
      An accessibile image component with support for image resizing, default image, and child
      content.
@@ -29,15 +34,6 @@ const ImageScreen = () =>
    <Section title="Props">
      <DocItem name="...View props" />

-      <DocItem
-        name="children"
-        typeInfo="?any"
-        description="Content to display over the image."
-        example={{
-          render: () => <PropChildren />
-        }}
-      />
-
      <DocItem
        name="defaultSource"
        typeInfo="?object"
@@ -169,6 +165,7 @@ const ImageScreen = () =>
        }}
      />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('Image', ImageScreen);
--- a/docs/storybook/1-components/Image/examples/NetworkImage.js
+++ b/docs/storybook/1-components/Image/examples/NetworkImage.js
@@ -24,14 +24,15 @@ class NetworkImageExample extends PureComponent {
  };

  render() {
-    const loader = this.state.loading
-      ? <View>
-          <ActivityIndicator />
-        </View>
-      : null;
+    const loader = this.state.loading ? (
+      <View>
+        <ActivityIndicator />
+      </View>
+    ) : null;

    return (
-      <View style={[helpers.styles.row, helpers.styles.centerRow]}>
+      <View>
+        {loader}
        <Image
          defaultSource={sources.placeholder}
          onError={this._handleError}
@@ -40,13 +41,8 @@ class NetworkImageExample extends PureComponent {
          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>}
+        />
+        {this.state.message && <Text style={helpers.styles.marginTop}>{this.state.message}</Text>}
      </View>
    );
  }
--- a/docs/storybook/1-components/Image/examples/PropChildren.js
+++ b/docs/storybook/1-components/Image/examples/PropChildren.js
@@ -4,24 +4,29 @@

 import sources from '../sources';
 import React from 'react';
-import { Image, StyleSheet, Text } from 'react-native';
+import { ImageBackground, StyleSheet, Text } from 'react-native';

-const ImageChildrenExample = () =>
-  <Image source={sources.large} style={styles.image}>
-    <Text style={styles.text}>React</Text>
-  </Image>;
+const ImageChildrenExample = () => (
+  <ImageBackground source={sources.large} style={styles.image}>
+    <Text style={styles.text}>Child content</Text>
+  </ImageBackground>
+);

 const styles = StyleSheet.create({
  image: {
-    width: 60,
-    height: 60,
+    width: 300,
+    height: 200,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    backgroundColor: 'transparent',
-    color: 'white'
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 18,
+    position: 'relative',
+    top: 50
  }
 });

--- a/docs/storybook/1-components/Image/examples/PropDefaultSource.js
+++ b/docs/storybook/1-components/Image/examples/PropDefaultSource.js
@@ -7,11 +7,8 @@ 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}
-  />;
+const ImageDefaultSourceExample = () => (
+  <Image defaultSource={sources.placeholder} style={helpers.styles.base} />
+);

 export default ImageDefaultSourceExample;
--- a/docs/storybook/1-components/Image/examples/PropDraggable.js
+++ b/docs/storybook/1-components/Image/examples/PropDraggable.js
@@ -6,18 +6,19 @@ import sources from '../sources';
 import React from 'react';
 import { Image, StyleSheet, View } from 'react-native';

-const ImageDraggableExample = () =>
+const ImageDraggableExample = () => (
  <View style={styles.container}>
    <Image draggable={false} source={sources.large} style={styles.image} />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  container: {
    flexDirection: 'row'
  },
  image: {
-    width: 60,
-    height: 60,
+    width: 300,
+    height: 200,
    backgroundColor: 'transparent',
    marginRight: 10
  }
--- a/docs/storybook/1-components/Image/examples/PropOnLoad.js
+++ b/docs/storybook/1-components/Image/examples/PropOnLoad.js
@@ -7,7 +7,8 @@ import NetworkImage from './NetworkImage';
 import React from 'react';
 import sources from '../sources';

-const ImageOnLoadExample = () =>
-  <NetworkImage logMethod="onLoad" source={createUncachedURI(sources.small)} />;
+const ImageOnLoadExample = () => (
+  <NetworkImage logMethod="onLoad" source={createUncachedURI(sources.largeAlt)} />
+);

 export default ImageOnLoadExample;
--- a/docs/storybook/1-components/Image/examples/PropOnLoadEnd.js
+++ b/docs/storybook/1-components/Image/examples/PropOnLoadEnd.js
@@ -7,7 +7,8 @@ import NetworkImage from './NetworkImage';
 import React from 'react';
 import sources from '../sources';

-const ImageOnLoadEndExample = () =>
-  <NetworkImage logMethod="onLoadEnd" source={createUncachedURI(sources.small)} />;
+const ImageOnLoadEndExample = () => (
+  <NetworkImage logMethod="onLoadEnd" source={createUncachedURI(sources.largeAlt)} />
+);

 export default ImageOnLoadEndExample;
--- a/docs/storybook/1-components/Image/examples/PropOnLoadStart.js
+++ b/docs/storybook/1-components/Image/examples/PropOnLoadStart.js
@@ -7,7 +7,8 @@ import NetworkImage from './NetworkImage';
 import React from 'react';
 import sources from '../sources';

-const ImageOnLoadStartExample = () =>
-  <NetworkImage logMethod="onLoadStart" source={createUncachedURI(sources.small)} />;
+const ImageOnLoadStartExample = () => (
+  <NetworkImage logMethod="onLoadStart" source={createUncachedURI(sources.largeAlt)} />
+);

 export default ImageOnLoadStartExample;
--- a/docs/storybook/1-components/Image/examples/PropResizeMode.js
+++ b/docs/storybook/1-components/Image/examples/PropResizeMode.js
@@ -6,9 +6,9 @@ import React from 'react';
 import sources from '../sources';
 import { Image, StyleSheet, Text, View } from 'react-native';

-const ImageResizeModeExample = () =>
+const ImageResizeModeExample = () => (
  <View>
-    {[sources.small, sources.large].map((source, i) => {
+    {[sources.small].map((source, i) => {
      return (
        <View key={i}>
          <View style={styles.horizontal}>
@@ -48,7 +48,8 @@ const ImageResizeModeExample = () =>
        </View>
      );
    })}
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
@@ -59,12 +60,11 @@ const styles = StyleSheet.create({
  resizeMode: {
    borderColor: 'black',
    borderWidth: 0.5,
-    height: 60,
-    width: 90
+    height: 120,
+    width: 120
  },
  resizeModeText: {
-    fontSize: 11,
-    marginBottom: 3
+    marginBottom: '0.5rem'
  },
  leftMargin: {
    marginLeft: 10
--- a/docs/storybook/1-components/Image/examples/PropSource.js
+++ b/docs/storybook/1-components/Image/examples/PropSource.js
@@ -6,7 +6,7 @@ import sources from '../sources';
 import React from 'react';
 import { Image, StyleSheet, Text, View } from 'react-native';

-const ImageSourceExample = () =>
+const ImageSourceExample = () => (
  <View style={styles.row}>
    <View style={styles.column}>
      <Text style={styles.text}>Static image</Text>
@@ -24,23 +24,28 @@ const ImageSourceExample = () =>
      <Text style={styles.text}>Data SVG</Text>
      <Image source={sources.dataSvg} style={styles.image} />
    </View>
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'space-between'
  },
  column: {
-    marginRight: '1rem'
+    alignItems: 'flex-start',
+    marginBottom: '1rem'
  },
  text: {
    marginBottom: '0.5rem'
  },
  image: {
-    flex: 1,
-    height: 50,
-    resizeMode: 'contain'
+    borderColor: 'black',
+    borderWidth: 0.5,
+    height: 120,
+    width: 120,
+    resizeMode: 'cover'
  }
 });

--- a/docs/storybook/1-components/Image/examples/StaticGetSize.js
+++ b/docs/storybook/1-components/Image/examples/StaticGetSize.js
@@ -24,20 +24,20 @@ class ImageGetSizeExample extends PureComponent {

    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}
+        {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>
    );
  }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Nicolas Gallagher	3e12ddfb2b	0.2.1	2017-12-20 17:31:25 +00:00
Johannes	3ecf5d2ed2	[fix] corrupt hydrate import	2017-12-20 17:45:45 +01:00
Nicolas Gallagher	0a5acdb996	Update version in benchmark results table	2017-12-20 15:05:58 +00:00
Nicolas Gallagher	a712a58eba	0.2.0	2017-12-20 15:01:12 +00:00
Nicolas Gallagher	6de892c92b	[add] CheckBox component Implements the CheckBox component and adds a web-only 'color' prop to allow the color of the checkbox to be customized.	2017-12-20 14:51:44 +00:00
Nicolas Gallagher	495defd69b	[fix] StyleSheet.hairlineWidth on retina screens	2017-12-20 11:54:13 +00:00
Nicolas Gallagher	1a20fcfce6	[add] StyleSheet.compose As per the recent addition to React Native.	2017-12-20 11:27:57 +00:00
Nicolas Gallagher	ed1e45a43d	Link to yarnpkg website instead of npmjs	2017-12-20 11:13:17 +00:00
Nicolas Gallagher	556dc8926e	[fix] ScrollView animated scrollTo Rely on web's native smooth scrolling mechanism when implemented in the browser: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior Fix #593	2017-12-19 15:52:30 +00:00
Nicolas Gallagher	66cf45b90b	Update benchmark libraries and results * Update all packages. * Remove 'react-native-stylesheet'; since React 16 it is equivalent in performance to using the full 'react-native-web' View implementation. * Remove 'styled-components/primitives'; it's as slow as 'styled-components'. * Record latest benchmark results and hardware.	2017-12-19 15:27:05 +00:00
Nicolas Gallagher	d1e49e06e6	Remove unmaintained starter kit	2017-12-18 17:49:51 +00:00
Nicolas Gallagher	8bf28dbe43	Document more instance methods in Direct Manipulation guide Fix #704	2017-12-18 17:45:23 +00:00
Nicolas Gallagher	9ae95d0797	Add further details to Getting Started guide Close #728	2017-12-18 17:33:44 +00:00
Nicolas Gallagher	321051b723	[add] ART export Improve API compatibility with React Native by exporting 'react-art' as 'ART'. Fix #602	2017-12-18 17:16:09 +00:00
Nicolas Gallagher	5f68542529	[fix] Touchable use with react-test-renderer The object returned by 'ReactDOM.findDOMNode' when rendered by 'react-test-renderer' doesn't match the DOM API for an element. Only attempt to bind the listener if 'addEventListener' is present on the object. Fix #720	2017-12-18 16:35:45 +00:00
Nicolas Gallagher	82c044ee33	[fix] use ReactDOM.hydrate in AppRegistry.runApplication Allows AppRegistry to hydrate server-side rendered apps. Fix #733	2017-12-18 16:15:47 +00:00
Nicolas Gallagher	9bcc67e73a	[fix] top-level API exports Also fixes importing these APIs from 'react-native' when used with the Babel plugin.	2017-12-18 16:15:03 +00:00
Nicolas Gallagher	f1ce6c2acb	[fix] AppRegistry.getApplication style element keys Fix #734	2017-12-18 15:26:18 +00:00
Nicolas Gallagher	034108a2a0	[add] SafeAreaView component	2017-12-06 14:34:22 -08:00
Nicolas Gallagher	f96d7b868f	[change] update PanResponder implementation Fix #171	2017-12-06 14:23:35 -08:00
Nicolas Gallagher	0dfe319d41	[change] update the Animated implementation Replaces the 'animated' package with the latest implementation from React Native. Requires a few imports to be replaced. Close #716 Fix #714 Fix #688	2017-12-06 14:01:36 -08:00
Kenneth Kufluk	b7e970f4e6	[add] Picker and Picker.Item components Close #705	2017-12-04 16:15:23 -08:00
Nicolas Gallagher	02e62ad5d6	Lint fixes	2017-12-02 16:08:56 -08:00
Nicolas Gallagher	541d2458fb	[change] Image no longer accepts children Align with recent changes to the React Native API.	2017-12-02 16:04:27 -08:00
Nicolas Gallagher	b1e860ab40	Add ImageBackground docs	2017-12-02 16:04:27 -08:00
Louis Lagrange	e8eab9b3ec	[add] ImageBackground component Close #696	2017-12-02 16:04:19 -08:00
Nicolas Gallagher	6bc76c3c92	Update yarn script syntax	2017-12-02 15:58:47 -08:00
Nicolas Gallagher	2acd8e477c	Update raf and debounce modules	2017-12-02 15:58:47 -08:00
Nicolas Gallagher	ff2b0c9bdc	Update to React@16.2 dev dependencies	2017-12-02 15:58:47 -08:00
Nicolas Gallagher	79208720d1	Update webpack tools	2017-12-02 15:58:47 -08:00
Nicolas Gallagher	fca04c4125	Update enzyme	2017-12-02 15:58:47 -08:00
Nicolas Gallagher	5b5b72cc19	Update eslint and prettier	2017-12-02 15:58:47 -08:00
Nicolas Gallagher	217ad97bfd	[change] Update Flow and types	2017-12-02 15:58:47 -08:00
Nicolas Gallagher	3e3cfc5325	0.1.16	2017-12-02 14:48:35 -08:00
Nicolas Gallagher	da86ea98fc	[fix] NetInfo event listeners and types * Fix 'addEventListener' handler registration. * Fix event object provided to handlers. * Fix event object type - always include 'type' and 'effectiveType'. * Fix unit test semantics. * Fix documented NetInfo types. Close #724	2017-12-02 12:47:12 -08:00
Nicolas Gallagher	5f3e422b5c	0.1.15	2017-12-01 17:55:17 -08:00
Nicolas Gallagher	1f1f89b062	[fix] Image 'onLoad' callback on update 'onLoad' should not be called when a component updates, if the 'uri' is unchanged. Fixes a regression introduced by `92952ee746`	2017-12-01 17:52:47 -08:00
Nicolas Gallagher	0f79960b85	0.1.14	2017-11-15 15:21:45 -08:00
Nicolas Gallagher	117ce59f27	[fix] TextInput focus/blur management 1. Focusing/blurring a TextInput should update TextInputState. 2. Using the focus/blur instance methods should trigger related events. Close #715	2017-11-15 15:20:21 -08:00
Louis Lagrange	214121480e	[fix] stub for Picker.Item Add stub function for API compatibility. Close #690	2017-11-15 14:45:33 -08:00
Li Jie	6261536f57	Fix benchmarks documentation Close #706	2017-11-15 14:43:13 -08:00
Nicolas Gallagher	a748b7e606	[fix] ScrollView 'setNativeProps' Fix #709 Close #710	2017-11-15 14:39:58 -08:00
Zero Cho	92952ee746	[fix] call Image 'onLoad' when image is loaded from cache Fix #452 Close #712	2017-11-15 13:33:13 -08:00
Nicolas Gallagher	c22a9aff7d	0.1.13	2017-10-31 10:56:36 -07:00
Nicolas Gallagher	dd8a3c8d59	[fix] StyleSheet handling of default 'borderWidth' Problem: The default border width should be '0px', but setting a border width value to 'null' would override the default and result in no border width being applied to the element. This could cause unwanted user agent styles to be applied. Solution: createReactDOMStyle now replaces border width values of 'null' with '0px'. Fix #697	2017-10-30 22:42:52 -07:00
Nicolas Gallagher	4a1abee1df	Update benchmarks packages	2017-10-30 14:45:13 -07:00
Nicolas Gallagher	92ef3ffbb8	0.1.12	2017-10-20 11:29:45 -07:00
Nicolas Gallagher	899763bc34	[fix] zIndex stacking React Native simplifies zIndex stacking by making every 'View' a new stacking context. Fix #689	2017-10-19 13:16:36 -07:00
Nicolas Gallagher	c69ad3c2d6	Update presentation of Image docs	2017-10-19 12:42:45 -07:00
Nicolas Gallagher	9a5b932139	Flatten styles in test snapshots	2017-10-19 12:42:05 -07:00
Nicolas Gallagher	ba96e457b4	0.1.11	2017-10-18 11:10:59 -07:00
Nicolas Gallagher	bdfe943bd5	0.1.10	2017-10-18 11:08:15 -07:00
Nicolas Gallagher	3870445b7e	[add] jest snapshot serializer Flatten style objects in snapshots	2017-10-17 17:36:34 -07:00
Nicolas Gallagher	5395a3e8bc	0.1.9	2017-10-13 13:25:52 -07:00
Nicolas Gallagher	45b3d8b0df	[fix] style warnings for text and SVG Allow 'fill' as a valid style property. Allow 'textAlignVertical' to be any string.	2017-10-13 13:17:27 -07:00
Jaco Bovenschen	f1ee3c003a	Fix typo in Dimensions doc Close #682	2017-10-13 10:53:35 -07:00
Nicolas Gallagher	606181406c	0.1.8	2017-10-11 15:14:43 -07:00
Nicolas Gallagher	b537400f38	[fix] remove 'module' from package.json This is properly supported and there are no ES6 modules in the package at the moment.	2017-10-11 15:02:58 -07:00
Nicolas Gallagher	0a4fdc155e	[fix] babel plugin 'source' check	2017-10-11 15:02:12 -07:00
Nicolas Gallagher	0b8e59974b	0.1.7	2017-10-09 13:14:01 -07:00
Jirat Kijlerdpornpailoj	22eebea633	[fix] babel plugin support for "export" statements Close #677	2017-10-06 14:22:00 -07:00
Nicolas Gallagher	5dd414f9aa	0.1.6	2017-10-05 19:05:13 -07:00
Louis Lagrange	72c72f6530	[fix] AsyncStorage.flushGetRequests Add stub function for API compatibility. Close #676	2017-10-05 19:03:43 -07:00
Nicolas Gallagher	de970f9dbb	Add more tests for Switch	2017-10-05 13:59:59 -07:00
Nicolas Gallagher	e8d6c5b4dd	Helper function for ActivityIndicator SVGs	2017-10-05 13:59:42 -07:00
Tiaan	e91a5ae13e	Add missing comma to example webpack config Close #671	2017-10-04 11:54:22 -07:00
Nicolas Gallagher	b08bfb9ad5	0.1.5	2017-10-04 11:49:22 -07:00
Nicolas Gallagher	5353011ee4	[fix] BackHandler export; remove BackAndroid Fix #673	2017-10-04 11:45:28 -07:00
Nicolas Gallagher	5faa3af19a	0.1.4	2017-10-03 10:58:32 -07:00
Jhen	c8461c9c11	[fix] Babel plugin import paths for ViewPropTypes and TextPropTypes Close #668	2017-10-03 10:53:55 -07:00
Nicolas Gallagher	3112e2ba56	0.1.3	2017-10-02 10:14:18 -07:00
Nicolas Gallagher	fee03e101c	[fix] exports from module.js Fix #666	2017-10-02 10:13:45 -07:00
Nicolas Gallagher	c730a20a26	Update formatter	2017-10-01 17:01:27 -07:00
Nicolas Gallagher	f7ed60ac67	Update test tools	2017-10-01 17:00:04 -07:00
Nicolas Gallagher	417716391a	Update build tools	2017-10-01 16:59:00 -07:00
Nicolas Gallagher	ee5e3cb3ca	Update eslint packages	2017-10-01 16:54:29 -07:00
Nicolas Gallagher	2298c5d6e3	0.1.2	2017-10-01 16:40:41 -07:00
Jirat Kijlerdpornpailoj	ca9f870ff6	[fix] Image.getSize failure callback Fix #561 Close #665	2017-10-01 16:33:47 -07:00
Nicolas Gallagher	e9b2fd8bc4	0.1.1	2017-09-29 16:45:48 -07:00
Nicolas Gallagher	09a4985fd2	Remove markdown component and api docs	2017-09-28 14:49:51 -07:00
Nicolas Gallagher	a9e61b4cd5	Docs: allow AppText to inherit font-size	2017-09-28 14:49:51 -07:00
Charlie Croom	6ef19c3ccd	[fix] latest NetInfo API Update the NetInfo API to conform to the latest React Native implementation. Web-only properties are also included now. Fix #662 Close #663	2017-09-28 14:49:50 -07:00
Nicolas Gallagher	0d29458874	Remove links to unmaintained starter kits	2017-09-28 13:04:21 -07:00
Amogh Banta	1795bae8b5	Add re-start to starter kits	2017-09-27 09:06:45 -07:00
Nicolas Gallagher	c1152ee09a	Update README install instructions	2017-09-26 10:30:48 -07:00
Nicolas Gallagher	182149aac7	0.1.0	2017-09-26 10:21:04 -07:00
Nicolas Gallagher	d6df440987	[change] React 16 support Fix #364	2017-09-26 10:14:34 -07:00
Nicolas Gallagher	df16c24d68	0.0.130	2017-09-25 14:47:38 -07:00
Nicolas Gallagher	8a2c259235	Update inline-style-prefixer	2017-09-21 14:55:52 -07:00
Nicolas Gallagher	a7f265de11	Update test tools	2017-09-21 14:52:07 -07:00
Nicolas Gallagher	581529540a	Update build tools	2017-09-21 14:50:42 -07:00
Nicolas Gallagher	8ad61d9061	Update formatter	2017-09-21 14:49:31 -07:00
Nicolas Gallagher	3d79861970	0.0.129	2017-09-21 14:20:37 -07:00
Nicolas Gallagher	0a84ccb299	[fix] IE10 flexbox support Add prefixes for flexbox (and other) support in IE10. Ref #650	2017-09-21 14:18:11 -07:00
Nicolas Gallagher	3aa37450a0	Improve error message for text nodes in View	2017-09-21 14:04:41 -07:00
Nicolas Gallagher	450722153d	0.0.128	2017-09-20 09:45:25 -07:00
Nicolas Gallagher	fbba32defb	[fix] cross-browser flex styles Fix #616 Close #648	2017-09-19 15:44:10 -07:00
Nicolas Gallagher	d762d64b49	Revert SSR Image change Reverts `3c660e2ad7` See #543	2017-09-19 15:23:09 -07:00
Nicolas Gallagher	a5b1dda62d	0.0.127	2017-09-19 15:12:13 -07:00
Nicolas Gallagher	aad904b550	[fix] remove 'use strict' from warnValidStyle	2017-09-19 15:07:54 -07:00
Unknown	a01e895e30	[change] RefreshControl placeholder Fix #638 Close #644	2017-09-19 13:44:31 -07:00
Nicolas Gallagher	52e5d41518	[fix] keyboard interaction with Touchable as link Fix #643 Close #645	2017-09-19 13:40:57 -07:00
Nicolas Gallagher	77a40b6237	[fix] Easing import when using babel plugin Fix #649	2017-09-19 13:37:12 -07:00
Nicolas Gallagher	4bbe1a40aa	0.0.126	2017-09-18 21:08:39 -07:00
Nicolas Gallagher	6942e4e417	Shallow render ActivityIndicator tests These snapshots should be improved by flattening the React Native style object.	2017-09-18 19:47:03 -07:00
Nicolas Gallagher	63daff7f80	Simplify Switch tests	2017-09-18 19:32:02 -07:00
Nicolas Gallagher	662b7c3d6e	Simplify Image snapshot testing	2017-09-18 19:26:48 -07:00
Nicolas Gallagher	12fb588596	Simplify View snapshot testing	2017-09-18 19:26:11 -07:00
Nicolas Gallagher	5cb09b1a9e	[fix] disallow text node children of View Catch text nodes that are not the only child of View. Fixes a case missing from `0ad6ab948b`.	2017-09-18 13:28:51 -07:00
Nicolas Gallagher	c03cfdf8bd	Add compile task to build task	2017-09-17 11:25:50 -07:00
Nicolas Gallagher	997b598de8	[fix] event normalization Work better with simulated events, and avoid crashing if 'nativeEvent.target' isn't an element node. Close #597	2017-09-15 15:16:40 -07:00
Nicolas Gallagher	6fe796f9da	[add] accessibilityRole 'label' to Text	2017-09-15 11:29:44 -07:00
Nicolas Gallagher	0ad6ab948b	[fix] disallow text node children of View Fix #627	2017-09-15 11:29:41 -07:00
Nicolas Gallagher	32a23136af	0.0.125	2017-09-14 15:16:52 -07:00
Nicolas Gallagher	96f48226cb	[fix] ColorPropType validation Check color is of type string before using `indexOf`. Fix #630	2017-09-14 13:19:13 -07:00
Peter Schussheim	f1ef0f21af	Fix typo in NetInfo docs	2017-09-14 11:31:18 -07:00
Unknown	d42e8907ca	[fix] return value of Keyboard.addListener Close #631 Fix #632	2017-09-14 11:26:46 -07:00
Nicolas Gallagher	90724b2cef	[fix] filter unsupported ScrollView props Fix #633	2017-09-14 11:20:18 -07:00
Nicolas Gallagher	dd0f1de3d1	[fix] avoid prop types check on UnimplementedView Fix #635	2017-09-14 11:08:36 -07:00
Nicolas Gallagher	fc751ed715	[fix] remove TouchalbeWithoutFeedback children prop type Fix #634	2017-09-14 10:49:49 -07:00
Nicolas Gallagher	917b06a690	Update README	2017-09-13 11:27:36 -07:00
Nicolas Gallagher	80cb7baf82	0.0.124	2017-09-12 15:58:28 -07:00
Nicolas Gallagher	f08515b1f1	Avoid compiling tests	2017-09-12 15:58:14 -07:00
Nicolas Gallagher	8591bf7ce5	[fix] add AppState to Babel plugin list	2017-09-12 15:46:27 -07:00
Nicolas Gallagher	b7c8f00fcc	0.0.123	2017-09-12 11:31:49 -07:00
Nicolas Gallagher	ed81b985a9	Include the babel dir in published package	2017-09-12 11:31:38 -07:00
Nicolas Gallagher	441dc8efff	0.0.122	2017-09-12 10:54:01 -07:00
Paul Armstrong	7e8ef5b72c	Add babel plugin to rewrite import paths Replace 'react-native' imports with direct imports to the relevant module within 'react-native-web'. Follow up task is to also rewrite 'react-native-web' imports from the entry file to become direct imports (reduces bundle size). Close #608	2017-09-12 10:45:42 -07:00
Nicolas Gallagher	641c8c47e0	[change] Button text style to match Android	2017-09-11 15:52:44 -07:00
Nicolas Gallagher	87ead7f64e	Fix doc styles	2017-09-11 15:52:41 -07:00
Nicolas Gallagher	5ed2127175	[fix] default Text styles Match React Native's default font-size for Text, and use the system font stack by default. Nested Text elements will inherit font styles from their parent Text.	2017-09-11 15:47:49 -07:00
Nicolas Gallagher	e802026298	Benchmarks: add emotion and latest results	2017-09-10 12:52:07 -07:00
Nicolas Gallagher	5d24f4c8fa	Update jest	2017-09-10 10:36:39 -07:00
Nicolas Gallagher	a9f1afc07c	Update formatter and linter tools	2017-09-10 10:35:07 -07:00
Nicolas Gallagher	d185d81560	Update build tools	2017-09-10 10:32:11 -07:00
Nicolas Gallagher	66fa09da8e	Move modality initialization to StyleSheet	2017-09-10 10:28:22 -07:00
Nicolas Gallagher	bae4dd806a	[change] rename createDOMElement to createElement Allow 'createElement' to be used as a drop-in replacement for 'ReactDOM.createElement'.	2017-09-10 10:28:21 -07:00
Unknown	4a680fd9b6	[add] basic support for KeyboardAvoidingView Close #624	2017-09-08 10:57:44 -07:00
Nicolas Gallagher	e34e4e38d3	0.0.121	2017-09-07 13:31:47 -07:00
Unknown	b23a4f55dc	[add] support for Keyboard API Close #625	2017-09-07 13:07:33 -07:00
Nicolas Gallagher	26bdf44a4c	[fix] TextInput keyPress events when child of Touchable Fix #612	2017-09-07 11:40:00 -07:00
Nicolas Gallagher	5e98107617	[fix] support "System" as a font-family on web Fix #622	2017-09-02 12:26:36 -07:00
Nicolas Gallagher	86ea0e5eff	Fix source code URLs in docs	2017-08-31 17:42:03 -07:00
Nicolas Gallagher	6e02c5690c	[add] support for AssetRegistry Applies changes from @fmoo to help with Metro packager support. Also fixed a Flow exposed by this change.	2017-08-31 12:32:24 -07:00
Nicolas Gallagher	c50d808a2b	[change] remove 'core' module export	2017-08-31 12:06:48 -07:00
Nicolas Gallagher	130b10c3f7	0.0.120	2017-08-16 16:02:33 -07:00
Nicolas Gallagher	03ddf074ea	Update fbjs and inline-style-prefixer	2017-08-16 14:09:31 -07:00
Nicolas Gallagher	f201a0347d	Update prettier	2017-08-16 14:07:25 -07:00
Nicolas Gallagher	fffbdff6ca	Update eslint packages	2017-08-16 14:04:32 -07:00
Nicolas Gallagher	23e5c8479c	Update webpack packages	2017-08-16 14:03:38 -07:00
Nicolas Gallagher	17e5e374ee	Update babel packages	2017-08-16 14:01:58 -07:00
Nicolas Gallagher	ef907dce22	[add] StyleSheet validation allows table styles Fix #605	2017-08-16 11:27:47 -07:00
Nicolas Gallagher	586f134f76	[fix] Text's CSS box-sizing default Fix #606	2017-08-16 11:01:26 -07:00
Nicolas Gallagher	70e2a75b43	[add] don't warn about use of position:sticky	2017-08-10 17:00:21 -07:00
Nicolas Gallagher	8756c20ade	Minor changes and fixes to docs	2017-08-09 09:44:36 -07:00
Nicolas Gallagher	4081d17f25	0.0.119	2017-08-01 12:08:44 -07:00
Sam	4fa6f77d25	[fix] TouchableMixin async race condition When a Touchable component returns 0 for `touchableGetHighlightDelayMS()` the mixin may occasionally try to detect if the press event occurred on the hit area before the hit area has been determined. Clearing out this value ensures that `positionOnActivate` is recalculated before that takes place. Close #586	2017-08-01 11:58:46 -07:00
Andrew Kennedy	17d723559d	Add tests for 'Button' component Close #583	2017-08-01 11:55:37 -07:00
Nicolas Gallagher	8d80885f5d	[fix] Dimensions.get when called on the server	2017-08-01 11:55:23 -07:00
Nicolas Gallagher	3ca4becc41	0.0.118	2017-07-31 16:32:28 -07:00
Nicolas Gallagher	cc077e9019	[fix] allow Dimensions.set to be called on the server Fix #566	2017-07-31 16:31:42 -07:00
Nicolas Gallagher	1225b00cdb	Fix publishing of documentation	2017-07-30 20:25:26 -07:00
Nicolas Gallagher	ed70617e91	0.0.117	2017-07-30 20:13:29 -07:00
Nicolas Gallagher	134114de83	[fix] TextInput: call on onKeyPress for Tab and Cmd+Enter Add support for more key combinations that only fire 'keydown' React DOM events. And allow users to call 'preventDefault', etc., on the event. Fix #567 Close #582	2017-07-30 20:11:19 -07:00
Nicolas Gallagher	08ee7c83bb	Minor starting documentation improvement	2017-07-30 18:45:08 -07:00
Nicolas Gallagher	5fad78dcad	[fix] remove unsupported TextInput props For compatibility with React Native, do not pass on unsupported TextInput props to avoid ReactDOM warnings. Close #571	2017-07-29 17:30:31 -07:00
Nicolas Gallagher	e04343e48e	Benchmarks: use glamor@2 and fix yarn.lock paths	2017-07-28 19:08:49 -07:00
Nicolas Gallagher	5e3a946f8b	Upgrade docs to use @storybook/react	2017-07-28 15:29:39 -07:00
Nicolas Gallagher	4e3d8dbb02	[change] support CSS custom properties Update 'setValueForStyles' and style validation to support defining and using custom properties. Fix #516	2017-07-28 15:29:07 -07:00
Nicolas Gallagher	fee909d26a	[fix] AppState on the server Fix #578	2017-07-27 16:30:28 -07:00
Nicolas Gallagher	9e58a7b5f1	Update GitHub files	2017-07-27 11:38:50 -07:00