0.0.58

2026-03-30 23:23:35 +08:00 · 2016-12-14 17:39:39 +00:00
479 changed files with 15679 additions and 31808 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "react-native"
+  ],
+  "plugins": [
+    [ "transform-react-remove-prop-types", { "mode": "wrap" } ]
+  ]
+}
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+# EditorConfig: http://editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
--- a/.eslintrc
+++ b/.eslintrc
@@ -9,11 +9,8 @@
    },
    "sourceType": "module"
  },
-  "extends": [
-    "prettier",
-    "prettier/react"
-  ],
  "plugins": [
+    "jsx-a11y",
    "promise",
    "react"
  ],
@@ -24,24 +21,34 @@
  "globals": {
    "document": false,
    "navigator": false,
-    "window": false,
-    // Flow global types
-    "HTMLInputElement": false,
-    "ReactClass": false,
-    "ReactComponent": false,
-    "ReactElement": false,
-    "ReactPropsChainableTypeChecker": false,
-    "ReactPropsCheckType": false,
-    "ReactPropTypes": false,
-    "SyntheticEvent": false
+    "window": false
  },
  "rules": {
+    "accessor-pairs": 2,
+    "array-bracket-spacing": ["error", "always"],
+    "arrow-parens": [2, "always"],
+    "arrow-spacing": [2, { "before": true, "after": true }],
+    "block-spacing": [2, "always"],
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
    "camelcase": 0,
+    "comma-dangle": [2, "never"],
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "comma-style": [2, "last"],
+    "computed-property-spacing": ["error", "never"],
    "constructor-super": 2,
+    "curly": [2, "all"],
    "default-case": [2, { commentPattern: '^no default$' }],
+    "dot-location": [2, "property"],
+    "eol-last": 2,
    "eqeqeq": [2, "allow-null"],
+    "generator-star-spacing": [2, { "before": true, "after": true }],
    "handle-callback-err": [2, "^(err|error)$" ],
+    "indent": [2, 2, { "SwitchCase": 1 }],
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "keyword-spacing": [2, { "before": true, "after": true }],
+    "max-len": [2, 120, 4],
    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+    "new-parens": 2,
    "no-alert": 1,
    "no-array-constructor": 2,
    "no-caller": 2,
@@ -56,6 +63,7 @@
    "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,
@@ -63,6 +71,8 @@
    "no-extend-native": 2,
    "no-extra-bind": 2,
    "no-extra-boolean-cast": 2,
+    "no-extra-parens": [2, "functions"],
+    "no-extra-semi": 2,
    "no-fallthrough": 2,
    "no-floating-decimal": 2,
    "no-func-assign": 2,
@@ -75,7 +85,10 @@
    "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
    "no-lone-blocks": 2,
    "no-loop-func": 2,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 2,
    "no-multi-str": 2,
+    "no-multiple-empty-lines": [2, { "max": 1 }],
    "no-native-reassign": 2,
    "no-negated-in-lhs": 2,
    "no-new": 2,
@@ -97,9 +110,11 @@
    "no-self-compare": 2,
    "no-sequences": 2,
    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 2,
    "no-sparse-arrays": 2,
    "no-this-before-super": 2,
    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
    "no-undef": 2,
    "no-undef-init": 2,
    "no-unexpected-multiline": 2,
@@ -114,20 +129,66 @@
    "no-useless-constructor": 2,
    "no-useless-escape": 2,
    "no-var": 2,
+    "no-whitespace-before-property": 2,
    "no-with": 2,
+    "object-curly-spacing": ["error", "always"],
+    "operator-linebreak": [2, "after"],
+    "padded-blocks": [2, "never"],
    "prefer-const": 2,
    "prefer-rest-params": 2,
+    "prefer-template": 2,
    "quotes": [2, "single", "avoid-escape"],
    "radix": 2,
+    "rest-spread-spacing": ["error"],
+    "semi": [2, "always"],
+    "semi-spacing": [2, { "before": false, "after": true }],
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": [2, { "anonymous": "always", "named": "never" }],
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] }],
+    "template-curly-spacing": [2, "never"],
    "use-isnan": 2,
    "valid-typeof": 2,
+    "wrap-iife": [2, "outside"],
+    "yield-star-spacing": [2, "both"],
    "yoda": [2, "never"],

    // promise
    "promise/param-names": 2,

+    // jsx accessibility
+    "jsx-a11y/aria-props": 2,
+    "jsx-a11y/aria-proptypes": 2,
+    "jsx-a11y/aria-role": 2,
+    "jsx-a11y/aria-unsupported-elements": 2,
+    "jsx-a11y/heading-has-content": 2,
+    "jsx-a11y/href-no-hash": 2,
+    "jsx-a11y/html-has-lang": 2,
+    "jsx-a11y/img-has-alt": 2,
+    "jsx-a11y/img-redundant-alt": 2,
+    "jsx-a11y/label-has-for": 2,
+    "jsx-a11y/mouse-events-have-key-events": 2,
+    "jsx-a11y/no-access-key": 2,
+    "jsx-a11y/no-marquee": 2,
+    "jsx-a11y/no-onchange": 0,
+    "jsx-a11y/onclick-has-focus": 2,
+    "jsx-a11y/onclick-has-role": 2,
+    "jsx-a11y/role-has-required-aria-props": 2,
+    "jsx-a11y/role-supports-aria-props": 2,
+    "jsx-a11y/scope": 2,
+    "jsx-a11y/tabindex-no-positive": 2,
+
    // react
+    "jsx-quotes": [2, "prefer-single"],
    "react/display-name": 0,
+    "react/jsx-boolean-value": 2,
+    "react/jsx-handler-names": [2, {
+      "eventHandlerPrefix": "_handle"
+    }],
+    "react/jsx-indent": [2, 2],
+    "react/jsx-indent-props": [2, 2],
    "react/jsx-no-bind": 2,
    "react/jsx-no-duplicate-props": 2,
    "react/jsx-no-undef": 2,
--- a/.flowconfig
+++ b/.flowconfig
@@ -1,14 +0,0 @@
-[ignore]
-.*/__tests__/.*
-.*/benchmarks/.*
-.*/docs/.*
-.*/node_modules/animated/*
-.*/node_modules/babel-plugin-transform-react-remove-prop-types/*
-
-[include]
-
-[libs]
-types
-
-[options]
-unsafe.enable_getters_and_setters=true
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -1,125 +0,0 @@
-# Contributing
-
-## Reporting Issues and Asking Questions
-
-Before opening an issue, please search the [issue
-tracker](https://github.com/necolas/react-native-web/issues) to make sure your
-issue hasn't already been reported.
-
-## Getting started
-
-Visit the [Issue tracker](https://github.com/necolas/react-native-web/issues)
-to find a list of open issues that need attention.
-
-Fork, then clone the repo:
-
-```
-git clone https://github.com/your-username/react-native-web.git
-```
-
-Install dependencies (requires [yarn](https://yarnpkg.com/en/docs/install):
-
-```
-yarn
-```
-
-## Automated tests
-
-To run flow:
-
-```
-yarn flow
-```
-
-To run the unit tests:
-
-```
-yarn jest
-```
-
-…in watch mode:
-
-```
-yarn jest:watch
-```
-
-To run all automated tests:
-
-```
-yarn test
-```
-
-## Visual tests
-
-To run the interactive storybook:
-
-```
-yarn docs:start
-```
-
-To generate a static build of the storybook:
-
-```
-yarn docs:build
-```
-
-To run the performance benchmarks in a browser (opening `./benchmarks/index.html`):
-
-```
-yarn benchmark
-```
-
-## Compile and build
-
-To compile the source code to `dist`:
-
-```
-yarn compile
-```
-
-To create a UMD bundle of the library:
-
-```
-yarn build
-```
-
-### Pre-commit
-
-To format and lint code before commit:
-
-```
-yarn precommit
-```
-
-To format and lint the entire project:
-
-```
-yarn fmt
-yarn lint
-```
-
-### New Features
-
-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.
-
-## Pull requests
-
-**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.
-
-After you have submitted your pull request, we'll try to get back to you as
-soon as possible. We may suggest some changes or improvements.
-
-Thank you for contributing!
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,20 +1,30 @@
-**Do you want to request a *feature* or report a *bug*?**
+<!--
+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.
+-->

 **What is the current behavior?**

-**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).**
+Link to minimal test case: (template: [codepen](https://codepen.io/necolas/pen/PZzwBR?editors=0010))
+
+**What is the expected behaviour?**
+
+**Steps to reproduce**

 1.
 2.

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

-**Environment (include versions). Did this work in previous versions?**
-
-* OS:
-* Device:
-* Browser:
-* React Native for Web (version):
-* React (version):
+OS:
+Device:
+Browser:
+React Native for Web (version):
+React (version):
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1 +1,17 @@
-**Before submitting a pull request,** please make sure you have followed the steps the CONTRIBUTING guide.
+<!--
+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 an interactive example
+- [ ] includes screenshots/videos
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
-node_modules
-dist
+/dist
+/dist-examples
+/node_modules
--- a/.travis.yml
+++ b/.travis.yml
@@ -5,4 +5,4 @@ before_script:
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
 script:
-  - yarn lint
+  - npm test
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -0,0 +1,84 @@
+# Contributing
+
+We are open to, and grateful for, any contributions made by the community.
+
+## Reporting Issues and Asking Questions
+
+Before opening an issue, please search the [issue
+tracker](https://github.com/necolas/react-native-web/issues) to make sure your
+issue hasn't already been reported.
+
+## Development
+
+Visit the [Issue tracker](https://github.com/necolas/react-native-web/issues)
+to find a list of open issues that need attention.
+
+Fork, then clone the repo:
+
+```
+git clone https://github.com/your-username/react-native-web.git
+```
+
+Install dependencies (requires [yarn](https://yarnpkg.com/en/docs/install):
+
+```
+yarn
+```
+
+Run the examples:
+
+```
+npm run examples
+```
+
+### Building
+
+```
+npm run build
+```
+
+To create a UMD build:
+
+```
+npm run build:umd
+```
+
+### Testing and Linting
+
+To run the tests:
+
+```
+npm run test
+```
+
+To continuously watch and run tests, run the following:
+
+```
+npm run test:watch
+```
+
+To perform only linting, run the following:
+
+```
+npm run lint
+```
+
+### New Features
+
+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
+
+* 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.
+
+Please try to keep your pull request focused in scope and avoid including unrelated commits.
+
+After you have submitted your pull request, we'll try to get back to you as soon as possible. We may suggest some changes or improvements.
+
+Thank you for contributing!
--- a/README.md
+++ b/README.md
@@ -3,66 +3,100 @@
 [![Build Status][travis-image]][travis-url]
 [![npm version][npm-image]][npm-url]

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

-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.
+Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.

-## Features
+[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

-* 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.
+## Overview
+
+"React Native for Web" is a project to bring React Native's building blocks and
+touch handling to the Web. [Read more](#why).
+
+Browse the UI Explorer to see React Native [examples running on
+Web](https://necolas.github.io/react-native-web/storybook/). Or try it out
+online with [React Native for Web: Playground](http://codepen.io/necolas/pen/PZzwBR).

 ## Quick start

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

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

-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.
+Read the [Client and Server rendering](docs/guides/rendering.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.
+Alternatively, you can quickly setup a local project
+using [create-react-app](https://github.com/facebookincubator/create-react-app)
+(which supports `react-native-web` out-of-the-box once installed) and
+[react-native-web-starter](https://github.com/grabcode/react-native-web-starter).

 ## Documentation

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

-* [Getting started](docs/guides/getting-started.md)
-* [Style](docs/guides/style.md)
 * [Accessibility](docs/guides/accessibility.md)
+* [Client and server rendering](docs/guides/rendering.md)
 * [Direct manipulation](docs/guides/direct-manipulation.md)
 * [Internationalization](docs/guides/internationalization.md)
-* [Advanced use](docs/guides/advanced.md)
 * [Known issues](docs/guides/known-issues.md)
+* [React Native](docs/guides/react-native.md)
+* [Style](docs/guides/style.md)
+
+Exported modules:
+
+* Components
+  * [`ActivityIndicator`](docs/components/ActivityIndicator.md)
+  * [`Button`](docs/components/Button.md)
+  * [`Image`](docs/components/Image.md)
+  * [`ListView`](docs/components/ListView.md)
+  * [`ProgressBar`](docs/components/ProgressBar.md)
+  * [`ScrollView`](docs/components/ScrollView.md)
+  * [`Switch`](docs/components/Switch.md)
+  * [`Text`](docs/components/Text.md)
+  * [`TextInput`](docs/components/TextInput.md)
+  * [`TouchableHighlight`](http://facebook.github.io/react-native/releases/0.22/docs/touchablehighlight.html) (mirrors React Native)
+  * [`TouchableOpacity`](http://facebook.github.io/react-native/releases/0.22/docs/touchableopacity.html) (mirrors React Native)
+  * [`TouchableWithoutFeedback`](docs/components/TouchableWithoutFeedback.md)
+  * [`View`](docs/components/View.md)
+* APIs
+  * [`Animated`](http://facebook.github.io/react-native/releases/0.20/docs/animated.html) (mirrors React Native)
+  * [`AppRegistry`](docs/apis/AppRegistry.md)
+  * [`AppState`](docs/apis/AppState.md)
+  * [`AsyncStorage`](docs/apis/AsyncStorage.md)
+  * [`Dimensions`](docs/apis/Dimensions.md)
+  * [`I18nManager`](docs/apis/I18nManager.md)
+  * [`NativeMethods`](docs/apis/NativeMethods.md)
+  * [`NetInfo`](docs/apis/NetInfo.md)
+  * [`PanResponder`](http://facebook.github.io/react-native/releases/0.20/docs/panresponder.html#content) (mirrors React Native)
+  * [`PixelRatio`](docs/apis/PixelRatio.md)
+  * [`Platform`](docs/apis/Platform.md)
+  * [`StyleSheet`](docs/apis/StyleSheet.md)
+  * [`Vibration`](docs/apis/Vibration.md)
+
+<span id="#why"></span>
+## Why?
+
+There are many different teams at Twitter building web applications with React.
+We want to share React components, libraries, and APIs between teams…much like
+the OSS community tries to do. At our scale, this involves dealing with
+multiple, inter-related problems including: a common way to handle style,
+animation, touch, viewport adaptation, accessibility, themes, RTL layout, and
+server-rendering.
+
+This is hard to do with React DOM, as the components are essentially the same
+low-level building blocks that the browser provides. However, React Native
+avoids, solves, or can solve almost all these problems facing Web teams.
+Central to this is React Native's JavaScript style API (not strictly
+"CSS-in-JS") which avoids the key [problems with
+CSS](https://speakerdeck.com/vjeux/react-css-in-js) by giving up some of the
+complexity of CSS.

 ## Example code

@@ -103,25 +137,14 @@ 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)
-* [re-start](https://github.com/react-everywhere/re-start)
-
 ## Related projects

-* [react-primitives](https://github.com/lelandrichardson/react-primitives/)
-* [react-sketchapp](https://github.com/airbnb/react-sketchapp)
-* [reactxp](https://github.com/microsoft/reactxp)
+* [react-native-web-starter](https://github.com/grabcode/react-native-web-starter)
 * [react-native-web-player](https://github.com/dabbott/react-native-web-player)
+* [react-web](https://github.com/taobaofed/react-web)
+* [react-native-for-web](https://github.com/KodersLab/react-native-for-web)
+* [rhinos-app](https://github.com/rhinos-app/rhinos-app-dev)

 ## License

 React Native for Web is [BSD licensed](LICENSE).
-
-[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
--- a/babel/tests/snapshots/index-test.js.snap
+++ b/babel/tests/snapshots/index-test.js.snap
@@ -1,161 +0,0 @@
-// 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
@@ -1,46 +0,0 @@
-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
@@ -1,181 +0,0 @@
-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 '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,52 +0,0 @@
-# Performance
-
-To run these benchmarks from the root of the project:
-
-```
-yarn benchmark
-open ./benchmarks/index.html
-```
-
-Append `?fastest` to the URL to include the fastest "other libraries", and
-`?all` to include all the "other libraries".
-
-## Notes
-
-The components used in the render benchmarks are simple enough to be
-implemented by multiple UI or style libraries. The implementations are not
-equivalent in functionality. For example, React Native for Web's stylesheet is
-unique in that it also converts React Native styles to DOM styles, has
-deterministic resolution, and supports RTL layout.
-
-`react-native-web/stylesheet` is a comparative baseline that implements a
-simple `View` without much of React Native's functionality.
-
-## Benchmark results
-
-Typical render timings*: mean ± two standard deviations.
-
-| Implementation                        | Deep tree (ms)    | Wide tree (ms)    | Tweets (ms)       |
-| :--- | ---: | ---: | ---: |
-| `css-modules`                         |  `88.83` `±18.63` | `198.79` `±22.98` | |
-| `react-native-web/stylesheet@0.0.121` |  `91.17` `±19.29` | `209.67` `±32.38` | |
-| `react-native-web@0.0.121`            | `124.21` `±16.84` | `264.55` `±38.75` | `16.90` `±7.30ms` |
-
-Other libraries
-
-| Implementation                       | Deep tree (ms)    | Wide tree (ms)    |
-| :--- | ---: | ---: |
-| `aphrodite@1.2.3`                    |  `91.73` `±41.63` | `197.72` `±44.90` |
-| `styletron@2.5.1`                    |  `94.73` `±37.58` | `201.81` `±57.93` |
-| `glamor@2.20.40`                     | `146.60` `±26.73` | `277.46` `±29.17` |
-| `emotion@7.2.2`                      | `150.79` `±38.29` | `282.18` `±41.79` |
-| `react-jss@7.1.0`                    | `201.83` `±34.65` | `428.61` `±47.8` |
-| `reactxp@0.42.1`                     | `262.69` `±24.14` | `595.20` `±66.17` |
-| `styled-components@2.1.2`            | `280.59` `±31.77` | `599.00` `±62.99` |
-| `styled-components/primitives@2.1.2` | `291.74` `±48.96` | `606.57` `±78.18` |
-| `radium@0.19.4`                      | `563.94` `±69.91` | `1139.18` `±152.59` |
-
-These results indicate that style render performance is not a significant
-differentiating factor between `aphrodite`, `css-modules`, `react-native-web`,
-and `styletron`.
-
-*MacBook Pro (13-inch, Early 2015); 3.1 GHz Intel Core i7; 16 GB 1867 MHz DDR3. Google Chrome 58 (2x CPU slowdown).
--- a/benchmarks/benchmark.js
+++ b/benchmarks/benchmark.js
@@ -1,97 +0,0 @@
-import * as marky from 'marky';
-
-const fmt = time => `${Math.round(time * 100) / 100}ms`;
-
-const measure = (name, fn) => {
-  marky.mark(name);
-  fn();
-  const performanceMeasure = marky.stop(name);
-  return performanceMeasure.duration;
-};
-
-const mean = values => {
-  const sum = values.reduce((sum, value) => sum + value, 0);
-  return sum / values.length;
-};
-
-const median = values => {
-  if (!Array.isArray(values)) {
-    return 0;
-  }
-  if (values.length === 1) {
-    return values[0];
-  }
-
-  const numbers = [...values].sort((a, b) => a - b);
-  return (numbers[(numbers.length - 1) >> 1] + numbers[numbers.length >> 1]) / 2;
-};
-
-const standardDeviation = values => {
-  const avg = mean(values);
-
-  const squareDiffs = values.map(value => {
-    const diff = value - avg;
-    return diff * diff;
-  });
-
-  const meanSquareDiff = mean(squareDiffs);
-  return Math.sqrt(meanSquareDiff);
-};
-
-const benchmark = ({ name, description, setup, teardown, task, runs }) => {
-  return new Promise(resolve => {
-    const durations = [];
-    let i = 0;
-
-    setup();
-    const first = measure('first', task);
-    teardown();
-
-    const done = () => {
-      const stdDev = standardDeviation(durations);
-      const formattedFirst = fmt(first);
-      const formattedMean = fmt(mean(durations));
-      const formattedMedian = fmt(median(durations));
-      const formattedStdDev = fmt(stdDev);
-
-      console.groupCollapsed(`${name}\n${formattedMean} ±${fmt(2 * stdDev)}`);
-      description && console.log(description);
-      console.log(`First: ${formattedFirst}`);
-      console.log(`Median: ${formattedMedian}`);
-      console.log(`Mean: ${formattedMean}`);
-      console.log(`Standard deviation: ${formattedStdDev}`);
-      console.log(durations);
-      console.groupEnd();
-      resolve();
-    };
-
-    const a = () => {
-      setup();
-      window.requestAnimationFrame(b);
-    };
-
-    const b = () => {
-      const duration = measure('mean', task);
-      durations.push(duration);
-      window.requestAnimationFrame(c);
-    };
-
-    const c = () => {
-      teardown();
-      window.requestAnimationFrame(d);
-    };
-
-    const d = () => {
-      i += 1;
-      if (i < runs) {
-        window.requestAnimationFrame(a);
-      } else {
-        window.requestAnimationFrame(done);
-      }
-    };
-
-    window.requestAnimationFrame(a);
-  });
-};
-
-export default benchmark;
--- a/benchmarks/createRenderBenchmark.js
+++ b/benchmarks/createRenderBenchmark.js
@@ -1,24 +0,0 @@
-import benchmark from './benchmark';
-import ReactDOM from 'react-dom';
-
-const node = document.querySelector('.root');
-
-const createRenderBenchmark = ({ description, getElement, name, runs }) => () => {
-  const setup = () => {};
-  const teardown = () => {
-    ReactDOM.unmountComponentAtNode(node);
-  };
-
-  return benchmark({
-    name,
-    description,
-    runs,
-    setup,
-    teardown,
-    task: () => {
-      ReactDOM.render(getElement(), node);
-    }
-  });
-};
-
-export default createRenderBenchmark;
--- a/benchmarks/index.html
+++ b/benchmarks/index.html
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Performance tests</title>
-</head>
-<body>
-  <div class="root"></div>
-  <script src="dist/performance.bundle.js"></script>
-</body>
-</html>
--- a/benchmarks/index.js
+++ b/benchmarks/index.js
@@ -1,66 +0,0 @@
-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 styletron from './src/styletron';
-import xp from './src/reactxp';
-
-import renderDeepTree from './tests/renderDeepTree';
-import renderTweet from './tests/renderTweet';
-import renderWideTree from './tests/renderWideTree';
-
-const testAll = window.location.search === '?all';
-const testFastest = window.location.search === '?fastest';
-
-const coreTests = [
-  () => renderTweet('react-native-web', reactNative),
-
-  () => renderDeepTree('css-modules', cssModules),
-  () => renderWideTree('css-modules', cssModules),
-  () => renderDeepTree('react-native-web/stylesheet', reactNativeStyleSheet),
-  () => renderWideTree('react-native-web/stylesheet', reactNativeStyleSheet),
-  () => renderDeepTree('react-native-web', reactNative),
-  () => renderWideTree('react-native-web', reactNative)
-];
-
-const fastestTests = [
-  () => renderDeepTree('aphrodite', aphrodite),
-  () => renderWideTree('aphrodite', aphrodite),
-  () => renderDeepTree('styletron', styletron),
-  () => renderWideTree('styletron', styletron)
-];
-
-/**
- * Optionally run tests using other libraries
- */
-const restTests = [
-  () => renderDeepTree('emotion', emotion),
-  () => renderWideTree('emotion', emotion),
-  () => renderDeepTree('glamor', glamor),
-  () => renderWideTree('glamor', glamor),
-  () => renderDeepTree('radium', radium),
-  () => renderWideTree('radium', radium),
-  () => renderDeepTree('reactxp', xp),
-  () => renderWideTree('reactxp', xp),
-  () => renderDeepTree('react-jss', jss),
-  () => renderWideTree('react-jss', jss),
-  () => renderDeepTree('styled-components', styledComponents),
-  () => renderWideTree('styled-components', styledComponents)
-];
-
-const tests = [...coreTests];
-if (testFastest) {
-  tests.push(...fastestTests);
-}
-if (testAll) {
-  tests.push(...fastestTests);
-  tests.push(...restTests);
-}
-
-// run benchmarks
-tests.reduce((promise, test) => promise.then(test()), Promise.resolve());
--- a/benchmarks/package.json
+++ b/benchmarks/package.json
@@ -1,22 +0,0 @@
-{
-  "name": "benchmarks",
-  "private": true,
-  "dependencies": {
-    "aphrodite": "^1.2.5",
-    "classnames": "^2.2.5",
-    "emotion": "^8.0.9",
-    "glamor": "^2.20.40",
-    "marky": "^1.2.0",
-    "radium": "^0.19.6",
-    "react-jss": "^7.2.0",
-    "react-primitives": "^0.4.3",
-    "reactxp": "^0.42.11",
-    "styled-components": "^2.2.3",
-    "styletron-client": "^2.5.7",
-    "styletron-utils": "^2.5.4"
-  },
-  "devDependencies": {
-    "css-loader": "^0.28.7",
-    "style-loader": "^0.19.0"
-  }
-}
--- a/benchmarks/src/aphrodite.js
+++ b/benchmarks/src/aphrodite.js
@@ -1,7 +0,0 @@
-import Box from './components/Box/aphrodite';
-import View from './components/View/aphrodite';
-
-export default {
-  Box,
-  View
-};
--- a/benchmarks/src/components/AppText/index.js
+++ b/benchmarks/src/components/AppText/index.js
@@ -1,108 +0,0 @@
-import PropTypes from 'prop-types';
-import theme from '../theme';
-import React, { PureComponent } from 'react';
-import { StyleSheet, Text } from 'react-native';
-
-class AppText extends PureComponent {
-  static displayName = 'AppText';
-
-  static propTypes = {
-    align: PropTypes.oneOf(['center', 'left', 'right']),
-    color: PropTypes.oneOf(['blue', 'deepGray', 'normal', 'red', 'white']),
-    fontStyle: PropTypes.oneOf(['normal', 'italic']),
-    size: PropTypes.oneOf(['small', 'normal', 'large']),
-    uppercase: PropTypes.bool,
-    weight: PropTypes.oneOf(['normal', 'bold'])
-  };
-
-  render() {
-    const { align, color, fontStyle, size, uppercase, weight, ...other } = this.props;
-
-    const style = [
-      styles.root,
-      align && alignStyles[align],
-      color && colorStyles[color],
-      fontStyle && fontStyles[fontStyle],
-      size && sizeStyles[size],
-      weight && weightStyles[weight],
-      uppercase === true && styles.uppercase
-    ];
-
-    return <Text {...other} style={style} />;
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    fontFamily: theme.fontFamily,
-    fontSize: theme.fontSize.normal,
-    fontWeight: 'normal',
-    lineHeight: theme.createLength(theme.lineHeight),
-    wordWrap: 'break-word'
-  },
-  uppercase: {
-    textTransform: 'uppercase'
-  }
-});
-
-const alignStyles = StyleSheet.create({
-  center: {
-    textAlign: 'center'
-  },
-  left: {
-    textAlign: 'left'
-  },
-  right: {
-    textAlign: 'right'
-  }
-});
-
-const colorStyles = StyleSheet.create({
-  blue: {
-    color: theme.colors.blue
-  },
-  deepGray: {
-    color: theme.colors.deepGray
-  },
-  normal: {
-    color: theme.colors.textBlack
-  },
-  red: {
-    color: theme.colors.red
-  },
-  white: {
-    color: theme.colors.white
-  }
-});
-
-const fontStyles = StyleSheet.create({
-  normal: {
-    fontStyle: 'normal'
-  },
-  italic: {
-    fontStyle: 'italic'
-  }
-});
-
-const sizeStyles = StyleSheet.create({
-  small: {
-    fontSize: theme.fontSize.small
-  },
-  normal: {
-    fontSize: theme.fontSize.normal
-  },
-  large: {
-    fontSize: theme.fontSize.large
-  }
-});
-
-const weightStyles = StyleSheet.create({
-  normal: {
-    fontWeight: '400'
-  },
-  bold: {
-    fontWeight: 'bold'
-  }
-});
-
-export default AppText;
--- a/benchmarks/src/components/AspectRatio/index.js
+++ b/benchmarks/src/components/AspectRatio/index.js
@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
-
-class AspectRatio extends PureComponent {
-  static displayName = 'AspectRatio';
-
-  static propTypes = {
-    children: PropTypes.any,
-    ratio: PropTypes.number,
-    style: PropTypes.object
-  };
-
-  static defaultProps = {
-    ratio: 1
-  };
-
-  render() {
-    const { children, ratio, style } = this.props;
-    const percentage = 100 / ratio;
-
-    return (
-      <View style={[styles.root, style]}>
-        <View style={[styles.shim, { paddingBottom: `${percentage}%` }]} />
-        <View style={StyleSheet.absoluteFill}>{children}</View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    overflow: 'hidden'
-  },
-  shim: {
-    display: 'block',
-    width: '100%'
-  }
-});
-
-export default AspectRatio;
--- a/benchmarks/src/components/Box/aphrodite.js
+++ b/benchmarks/src/components/Box/aphrodite.js
@@ -1,49 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import View from '../View/aphrodite';
-import { StyleSheet } from 'aphrodite';
-
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    style={[
-      styles[`color${color}`],
-      fixed && styles.fixed,
-      layout === 'row' && styles.row,
-      outer && styles.outer
-    ]}
-  />
-);
-
-const styles = StyleSheet.create({
-  outer: {
-    padding: 4
-  },
-  row: {
-    flexDirection: 'row'
-  },
-  color0: {
-    backgroundColor: '#222'
-  },
-  color1: {
-    backgroundColor: '#666'
-  },
-  color2: {
-    backgroundColor: '#999'
-  },
-  color3: {
-    backgroundColor: 'blue'
-  },
-  color4: {
-    backgroundColor: 'orange'
-  },
-  color5: {
-    backgroundColor: 'red'
-  },
-  fixed: {
-    width: 20,
-    height: 20
-  }
-});
-
-export default Box;
--- a/benchmarks/src/components/Box/css-modules.js
+++ b/benchmarks/src/components/Box/css-modules.js
@@ -1,18 +0,0 @@
-/* eslint-disable react/prop-types */
-import classnames from 'classnames';
-import React from 'react';
-import View from '../View/css-modules';
-import styles from './styles.css';
-
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    className={classnames(styles[`color${color}`], {
-      [styles.fixed]: fixed,
-      [styles.outer]: outer,
-      [styles.row]: layout === 'row'
-    })}
-  />
-);
-
-export default Box;
--- a/benchmarks/src/components/Box/emotion.js
+++ b/benchmarks/src/components/Box/emotion.js
@@ -1,48 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import View from '../View/emotion';
-
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    style={[
-      styles[`color${color}`],
-      fixed && styles.fixed,
-      layout === 'row' && styles.row,
-      outer && styles.outer
-    ]}
-  />
-);
-
-const styles = {
-  outer: {
-    padding: 4
-  },
-  row: {
-    flexDirection: 'row'
-  },
-  color0: {
-    backgroundColor: '#222'
-  },
-  color1: {
-    backgroundColor: '#666'
-  },
-  color2: {
-    backgroundColor: '#999'
-  },
-  color3: {
-    backgroundColor: 'blue'
-  },
-  color4: {
-    backgroundColor: 'orange'
-  },
-  color5: {
-    backgroundColor: 'red'
-  },
-  fixed: {
-    width: 20,
-    height: 20
-  }
-};
-
-export default Box;
--- a/benchmarks/src/components/Box/glamor.js
+++ b/benchmarks/src/components/Box/glamor.js
@@ -1,48 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import View from '../View/glamor';
-
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    style={[
-      styles[`color${color}`],
-      fixed && styles.fixed,
-      layout === 'row' && styles.row,
-      outer && styles.outer
-    ]}
-  />
-);
-
-const styles = {
-  outer: {
-    padding: 4
-  },
-  row: {
-    flexDirection: 'row'
-  },
-  color0: {
-    backgroundColor: '#222'
-  },
-  color1: {
-    backgroundColor: '#666'
-  },
-  color2: {
-    backgroundColor: '#999'
-  },
-  color3: {
-    backgroundColor: 'blue'
-  },
-  color4: {
-    backgroundColor: 'orange'
-  },
-  color5: {
-    backgroundColor: 'red'
-  },
-  fixed: {
-    width: 20,
-    height: 20
-  }
-};
-
-export default Box;
--- a/benchmarks/src/components/Box/jss.js
+++ b/benchmarks/src/components/Box/jss.js
@@ -1,50 +0,0 @@
-/* eslint-disable react/prop-types */
-import classnames from 'classnames';
-import injectSheet from 'react-jss';
-import React from 'react';
-import View from '../View/jss';
-
-const Box = ({ classes, color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    className={classnames({
-      [classes[`color${color}`]]: true,
-      [classes.fixed]: fixed,
-      [classes.row]: layout === 'row',
-      [classes.outer]: outer
-    })}
-  />
-);
-
-const styles = {
-  outer: {
-    padding: 4
-  },
-  row: {
-    flexDirection: 'row'
-  },
-  color0: {
-    backgroundColor: '#222'
-  },
-  color1: {
-    backgroundColor: '#666'
-  },
-  color2: {
-    backgroundColor: '#999'
-  },
-  color3: {
-    backgroundColor: 'blue'
-  },
-  color4: {
-    backgroundColor: 'orange'
-  },
-  color5: {
-    backgroundColor: 'red'
-  },
-  fixed: {
-    width: 20,
-    height: 20
-  }
-};
-
-export default injectSheet(styles)(Box);
--- a/benchmarks/src/components/Box/radium.js
+++ b/benchmarks/src/components/Box/radium.js
@@ -1,49 +0,0 @@
-/* eslint-disable react/prop-types */
-import Radium from 'radium';
-import React from 'react';
-import View from '../View/radium';
-
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    style={[
-      styles[`color${color}`],
-      fixed && styles.fixed,
-      layout === 'row' && styles.row,
-      outer && styles.outer
-    ]}
-  />
-);
-
-const styles = {
-  outer: {
-    padding: 4
-  },
-  row: {
-    flexDirection: 'row'
-  },
-  color0: {
-    backgroundColor: '#222'
-  },
-  color1: {
-    backgroundColor: '#666'
-  },
-  color2: {
-    backgroundColor: '#999'
-  },
-  color3: {
-    backgroundColor: 'blue'
-  },
-  color4: {
-    backgroundColor: 'orange'
-  },
-  color5: {
-    backgroundColor: 'red'
-  },
-  fixed: {
-    width: 20,
-    height: 20
-  }
-};
-
-export default Radium(Box);
--- a/benchmarks/src/components/Box/react-native-stylesheet.js
+++ b/benchmarks/src/components/Box/react-native-stylesheet.js
@@ -1,49 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import StyleSheet from 'react-native/apis/StyleSheet';
-import View from '../View/react-native-stylesheet';
-
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    style={[
-      styles[`color${color}`],
-      fixed && styles.fixed,
-      layout === 'row' && styles.row,
-      outer && styles.outer
-    ]}
-  />
-);
-
-const styles = StyleSheet.create({
-  outer: {
-    padding: 4
-  },
-  row: {
-    flexDirection: 'row'
-  },
-  color0: {
-    backgroundColor: '#222'
-  },
-  color1: {
-    backgroundColor: '#666'
-  },
-  color2: {
-    backgroundColor: '#999'
-  },
-  color3: {
-    backgroundColor: 'blue'
-  },
-  color4: {
-    backgroundColor: 'orange'
-  },
-  color5: {
-    backgroundColor: 'red'
-  },
-  fixed: {
-    width: 20,
-    height: 20
-  }
-});
-
-export default Box;
--- a/benchmarks/src/components/Box/react-native.js
+++ b/benchmarks/src/components/Box/react-native.js
@@ -1,48 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    style={[
-      styles[`color${color}`],
-      fixed && styles.fixed,
-      layout === 'row' && styles.row,
-      outer && styles.outer
-    ]}
-  />
-);
-
-const styles = StyleSheet.create({
-  outer: {
-    padding: 4
-  },
-  row: {
-    flexDirection: 'row'
-  },
-  color0: {
-    backgroundColor: '#222'
-  },
-  color1: {
-    backgroundColor: '#666'
-  },
-  color2: {
-    backgroundColor: '#999'
-  },
-  color3: {
-    backgroundColor: 'blue'
-  },
-  color4: {
-    backgroundColor: 'orange'
-  },
-  color5: {
-    backgroundColor: 'red'
-  },
-  fixed: {
-    width: 20,
-    height: 20
-  }
-});
-
-export default Box;
--- a/benchmarks/src/components/Box/reactxp.js
+++ b/benchmarks/src/components/Box/reactxp.js
@@ -1,48 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import { Styles, View } from 'reactxp';
-
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    style={[
-      styles[`color${color}`],
-      fixed && styles.fixed,
-      layout === 'row' && styles.row,
-      outer && styles.outer
-    ]}
-  />
-);
-
-const styles = {
-  outer: Styles.createViewStyle({
-    padding: 4
-  }),
-  row: Styles.createViewStyle({
-    flexDirection: 'row'
-  }),
-  color0: Styles.createViewStyle({
-    backgroundColor: '#222'
-  }),
-  color1: Styles.createViewStyle({
-    backgroundColor: '#666'
-  }),
-  color2: Styles.createViewStyle({
-    backgroundColor: '#999'
-  }),
-  color3: Styles.createViewStyle({
-    backgroundColor: 'blue'
-  }),
-  color4: Styles.createViewStyle({
-    backgroundColor: 'orange'
-  }),
-  color5: Styles.createViewStyle({
-    backgroundColor: 'red'
-  }),
-  fixed: Styles.createViewStyle({
-    width: 20,
-    height: 20
-  })
-};
-
-export default Box;
--- 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/styled-components.js
+++ b/benchmarks/src/components/Box/styled-components.js
@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-import View from '../View/styled-components';
-
-const getColor = color => {
-  switch (color) {
-    case 0:
-      return '#222';
-    case 1:
-      return '#666';
-    case 2:
-      return '#999';
-    case 3:
-      return 'blue';
-    case 4:
-      return 'orange';
-    case 5:
-      return 'red';
-    default:
-      return 'transparent';
-  }
-};
-
-const Box = styled(View)`
-  flex-direction: ${props => (props.layout === 'column' ? 'column' : 'row')};
-  padding: ${props => (props.outer ? '4px' : '0')};
-  height: ${props => (props.fixed ? '20px' : 'auto')};
-  width: ${props => (props.fixed ? '20px' : 'auto')};
-  background-color: ${props => getColor(props.color)};
-`;
-
-export default Box;
--- a/benchmarks/src/components/Box/styles.css
+++ b/benchmarks/src/components/Box/styles.css
@@ -1,36 +0,0 @@
-.outer {
-  padding: 4px;
-}
-
-.row {
-  flex-direction: row;
-}
-
-.color0 {
-  background-color: #222;
-}
-
-.color1 {
-  background-color: #666;
-}
-
-.color2 {
-  background-color: #999;
-}
-
-.color3 {
-  background-color: blue;
-}
-
-.color4 {
-  background-color: orange;
-}
-
-.color5 {
-  background-color: red;
-}
-
-.fixed {
-  width: 20px;
-  height: 20px;
-}
--- a/benchmarks/src/components/Box/styletron.js
+++ b/benchmarks/src/components/Box/styletron.js
@@ -1,49 +0,0 @@
-/* eslint-disable react/prop-types */
-import { injectStylePrefixed } from 'styletron-utils';
-import React from 'react';
-import View, { styletron } from '../View/styletron';
-
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    style={[
-      styles[`color${color}`],
-      fixed && styles.fixed,
-      layout === 'row' && styles.row,
-      outer && styles.outer
-    ]}
-  />
-);
-
-const styles = {
-  outer: injectStylePrefixed(styletron, {
-    padding: '4px'
-  }),
-  row: injectStylePrefixed(styletron, {
-    flexDirection: 'row'
-  }),
-  color0: injectStylePrefixed(styletron, {
-    backgroundColor: '#222'
-  }),
-  color1: injectStylePrefixed(styletron, {
-    backgroundColor: '#666'
-  }),
-  color2: injectStylePrefixed(styletron, {
-    backgroundColor: '#999'
-  }),
-  color3: injectStylePrefixed(styletron, {
-    backgroundColor: 'blue'
-  }),
-  color4: injectStylePrefixed(styletron, {
-    backgroundColor: 'orange'
-  }),
-  color5: injectStylePrefixed(styletron, {
-    backgroundColor: 'red'
-  }),
-  fixed: injectStylePrefixed(styletron, {
-    width: '20px',
-    height: '20px'
-  })
-};
-
-export default Box;
--- a/benchmarks/src/components/GridView/index.js
+++ b/benchmarks/src/components/GridView/index.js
@@ -1,53 +0,0 @@
-import PropTypes from 'prop-types';
-import { StyleSheet, View } from 'react-native';
-import React, { Component } from 'react';
-import theme from '../theme';
-
-class GridView extends Component {
-  static displayName = 'GridView';
-
-  static propTypes = {
-    children: PropTypes.node,
-    hasGap: PropTypes.bool,
-    style: PropTypes.object
-  };
-
-  render() {
-    const { children, hasGap, style, ...other } = this.props;
-
-    return (
-      <View {...other} style={[style, styles.root, hasGap && styles.hasGap]}>
-        {React.Children.map(children, child => {
-          return (
-            child &&
-            React.cloneElement(child, {
-              style: [child.props.style, styles.column, hasGap && styles.hasGapColumn]
-            })
-          );
-        })}
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    flexDirection: 'row'
-  },
-  /**
-   * 1. Distribute all space (rather than extra space)
-   * 2. Prevent wide content from forcing wider flex columns
-   */
-  column: {
-    flexBasis: 0, // 1
-    minWidth: 0 // 2
-  },
-  hasGap: {
-    marginHorizontal: theme.createLength(theme.spaceX * -0.5, 'rem')
-  },
-  hasGapColumn: {
-    marginHorizontal: theme.createLength(theme.spaceX * 0.5, 'rem')
-  }
-});
-
-export default GridView;
--- a/benchmarks/src/components/Icons/DirectMessage.js
+++ b/benchmarks/src/components/Icons/DirectMessage.js
@@ -1,20 +0,0 @@
-/* eslint-disable react/prop-types */
-import { createElement } from 'react-native';
-import React from 'react';
-import styles from './styles';
-
-const IconDirectMessage = props =>
-  createElement('svg', {
-    children: (
-      <g>
-        <path d="M43.34 14H12.66L28 27.946z" />
-        <path d="M51.392 14.789L30.018 34.22c-.009.008-.028.006-.039.012-.563.5-1.266.768-1.98.768-.72 0-1.442-.258-2.017-.78L4.609 14.79A3.957 3.957 0 0 0 3 18v37a1.998 1.998 0 0 0 2 2c.464 0 .924-.162 1.292-.473L19 46h30c2.243 0 4-1.757 4-4V18a3.96 3.96 0 0 0-1.608-3.211z" />
-      </g>
-    ),
-    style: [styles.icon, props.style],
-    viewBox: '0 0 56 72'
-  });
-
-IconDirectMessage.metadata = { height: 72, width: 56 };
-
-export default IconDirectMessage;
--- a/benchmarks/src/components/Icons/Heart.js
+++ b/benchmarks/src/components/Icons/Heart.js
@@ -1,19 +0,0 @@
-/* eslint-disable react/prop-types */
-import { createElement } from 'react-native';
-import React from 'react';
-import styles from './styles';
-
-const IconHeart = props =>
-  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" />
-      </g>
-    ),
-    style: [styles.icon, props.style],
-    viewBox: '0 0 54 72'
-  });
-
-IconHeart.metadata = { height: 72, width: 54 };
-
-export default IconHeart;
--- a/benchmarks/src/components/Icons/Reply.js
+++ b/benchmarks/src/components/Icons/Reply.js
@@ -1,19 +0,0 @@
-/* eslint-disable react/prop-types */
-import { createElement } from 'react-native';
-import React from 'react';
-import styles from './styles';
-
-const IconReply = props =>
-  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" />
-      </g>
-    ),
-    style: [styles.icon, props.style],
-    viewBox: '0 0 62 72'
-  });
-
-IconReply.metadata = { height: 72, width: 62 };
-
-export default IconReply;
--- a/benchmarks/src/components/Icons/Retweet.js
+++ b/benchmarks/src/components/Icons/Retweet.js
@@ -1,19 +0,0 @@
-/* eslint-disable react/prop-types */
-import { createElement } from 'react-native';
-import React from 'react';
-import styles from './styles';
-
-const IconRetweet = props =>
-  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" />
-      </g>
-    ),
-    style: [styles.icon, props.style],
-    viewBox: '0 0 74 72'
-  });
-
-IconRetweet.metadata = { height: 72, width: 74 };
-
-export default IconRetweet;
--- a/benchmarks/src/components/Icons/styles.js
+++ b/benchmarks/src/components/Icons/styles.js
@@ -1,15 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  icon: {
-    display: 'inline-block',
-    fill: 'currentcolor',
-    height: '1.25em',
-    maxWidth: '100%',
-    position: 'relative',
-    userSelect: 'none',
-    verticalAlign: 'text-bottom'
-  }
-});
-
-export default styles;
--- a/benchmarks/src/components/NestedTree/index.js
+++ b/benchmarks/src/components/NestedTree/index.js
@@ -1,58 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-
-class DeepTree extends Component {
-  static propTypes = {
-    breadth: PropTypes.number.isRequired,
-    components: PropTypes.object,
-    depth: PropTypes.number.isRequired,
-    id: PropTypes.number.isRequired,
-    wrap: PropTypes.number.isRequired
-  };
-
-  /* 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;
-
-    let result = (
-      <Box color={id % 3} components={components} layout={depth % 2 === 0 ? 'column' : 'row'} outer>
-        {depth === 0 && <Box color={id % 3 + 3} components={components} fixed />}
-        {depth !== 0 &&
-          Array.from({ length: breadth }).map((el, i) => (
-            <DeepTree
-              breadth={breadth}
-              components={components}
-              depth={depth - 1}
-              id={i}
-              key={i}
-              wrap={wrap}
-            />
-          ))}
-      </Box>
-    );
-    for (let i = 0; i < wrap; i++) {
-      result = <Box components={components}>{result}</Box>;
-    }
-    return result;
-  }
-}
-
-export default DeepTree;
--- a/benchmarks/src/components/Tweet/index.js
+++ b/benchmarks/src/components/Tweet/index.js
@@ -1,144 +0,0 @@
-import AspectRatio from '../AspectRatio';
-import GridView from '../GridView';
-import PropTypes from 'prop-types';
-import TweetActionsBar from '../TweetActionsBar';
-import TweetText from '../TweetText';
-import UserAvatar from '../UserAvatar';
-import UserNames from '../UserNames';
-import { Image, StyleSheet, Text, View } from 'react-native';
-import React, { Component } from 'react';
-import theme from '../theme';
-
-export class Tweet extends Component {
-  static displayName = 'Tweet';
-
-  static propTypes = {
-    tweet: PropTypes.object.isRequired
-  };
-
-  render() {
-    const { tweet } = this.props;
-    const { id, lang, media, textParts, timestamp, user } = tweet;
-    const { fullName, profileImageUrl, screenName } = user;
-
-    return (
-      <View accessibilityRole="article" accessible style={styles.root}>
-        <GridView hasGap>
-          <View style={styles.avatarColumn}>
-            <View
-              accessibilityRole="link"
-              accessible
-              href={`/${screenName}`}
-              style={styles.avatarLink}
-            >
-              <UserAvatar style={styles.avatar} uri={profileImageUrl} />
-            </View>
-          </View>
-
-          <View style={styles.bodyColumn}>
-            <View style={styles.body}>
-              <View style={styles.row}>
-                <Text
-                  accessibilityRole="link"
-                  children={timestamp}
-                  href={`/${screenName}/status/${id}`}
-                  style={styles.timestamp}
-                />
-                <UserNames fullName={fullName} screenName={screenName} />
-              </View>
-
-              <View accessibilityRole="heading" aria-level="4">
-                <TweetText displayMode={'links'} lang={lang} textParts={textParts} />
-              </View>
-
-              {media ? (
-                <View style={styles.richContent}>
-                  <AspectRatio ratio={16 / 9}>
-                    <Image
-                      resizeMode={Image.resizeMode.cover}
-                      source={media.source}
-                      style={styles.media}
-                    />
-                  </AspectRatio>
-                </View>
-              ) : null}
-            </View>
-
-            <TweetActionsBar
-              actions={[
-                { name: 'reply', label: 'Reply' },
-                {
-                  name: 'retweet',
-                  label: 'Retweet',
-                  count: tweet.retweet_count,
-                  highlighted: tweet.retweeted
-                },
-                {
-                  name: 'like',
-                  label: 'Like',
-                  count: tweet.favorite_count,
-                  highlighted: tweet.favorited
-                },
-                { name: 'directMessage', label: 'Direct Message' }
-              ]}
-              style={styles.actionBar}
-            />
-          </View>
-        </GridView>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    paddingVertical: theme.createLength(theme.spaceY * 0.75, 'rem'),
-    paddingHorizontal: theme.createLength(theme.spaceX, 'rem')
-  },
-  avatarColumn: {
-    flexGrow: 1,
-    minWidth: 32
-  },
-  bodyColumn: {
-    flexGrow: 7
-  },
-  row: {
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
-  avatarLink: {
-    display: 'block',
-    flexShrink: 1,
-    flexGrow: 0,
-    width: '100%'
-  },
-  avatar: {
-    width: '100%'
-  },
-  body: {
-    marginTop: '-0.15rem'
-  },
-  timestamp: {
-    color: theme.colors.deepGray,
-    marginLeft: theme.createLength(theme.spaceX, 'rem'),
-    order: 1,
-    textDecorationLine: 'none',
-    whiteSpace: 'nowrap'
-  },
-  actionBar: {
-    marginTop: theme.createLength(theme.spaceY * 0.5, 'rem')
-  },
-  richContent: {
-    borderRadius: '0.35rem',
-    marginTop: theme.createLength(theme.spaceY * 0.5, 'rem'),
-    overflow: 'hidden'
-  },
-  media: {
-    ...StyleSheet.absoluteFillObject,
-    margin: 'auto',
-    width: 'auto',
-    height: 'auto'
-  }
-});
-
-export default Tweet;
--- a/benchmarks/src/components/TweetAction/index.js
+++ b/benchmarks/src/components/TweetAction/index.js
@@ -1,78 +0,0 @@
-import IconReply from '../Icons/Reply';
-import IconHeart from '../Icons/Heart';
-import IconRetweet from '../Icons/Retweet';
-import IconDirectMessage from '../Icons/DirectMessage';
-import PropTypes from 'prop-types';
-import React from 'react';
-import theme from '../theme';
-import { Text, View, StyleSheet } from 'react-native';
-
-const getIcon = (icon, highlighted) => {
-  switch (icon) {
-    case 'like':
-      return <IconHeart />;
-    case 'reply':
-      return <IconReply />;
-    case 'retweet':
-      return <IconRetweet />;
-    case 'directMessage':
-      return <IconDirectMessage />;
-    default:
-      return null;
-  }
-};
-
-export default class TweetAction extends React.Component {
-  static displayName = 'TweetAction';
-
-  static propTypes = {
-    count: PropTypes.number,
-    displayMode: PropTypes.oneOf(['like', 'reply', 'retweet', 'directMessage']),
-    highlighted: PropTypes.bool,
-    onPress: PropTypes.func,
-    style: PropTypes.object
-  };
-
-  render() {
-    const { count, displayMode, highlighted, onPress, style } = this.props;
-
-    return (
-      <View accessibilityRole="button" onPress={onPress} style={[styles.root, style]}>
-        <Text
-          style={[
-            styles.inner,
-            displayMode === 'like' && highlighted && styles.likedColor,
-            displayMode === 'retweet' && highlighted && styles.retweetedColor
-          ]}
-        >
-          {getIcon(displayMode, highlighted)}
-          {count > 0 ? <Text style={styles.count}>{count}</Text> : null}
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    minHeight: theme.createLength(theme.lineHeight, 'rem'),
-    overflow: 'visible',
-    userSelect: 'none',
-    whiteSpace: 'nowrap'
-  },
-  inner: {
-    alignItems: 'center',
-    color: theme.colors.deepGray,
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  count: {
-    marginLeft: '0.25em'
-  },
-  retweetedColor: {
-    color: theme.colors.green
-  },
-  likedColor: {
-    color: theme.colors.red
-  }
-});
--- a/benchmarks/src/components/TweetActionsBar/index.js
+++ b/benchmarks/src/components/TweetActionsBar/index.js
@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import TweetAction from '../TweetAction';
-import { View, StyleSheet } from 'react-native';
-import React, { PureComponent } from 'react';
-
-const actionNames = ['reply', 'retweet', 'like', 'directMessage'];
-
-export default class TweetActionsBar extends PureComponent {
-  static propTypes = {
-    actions: PropTypes.arrayOf(
-      PropTypes.shape({
-        count: PropTypes.number,
-        label: PropTypes.string,
-        highlighted: PropTypes.bool,
-        name: PropTypes.oneOf(actionNames).isRequired,
-        onPress: PropTypes.func
-      })
-    ),
-    style: PropTypes.object
-  };
-
-  render() {
-    const { actions, style } = this.props;
-
-    /* eslint-disable react/jsx-handler-names */
-    return (
-      <View style={[styles.root, style]}>
-        {actions.map((action, i) => (
-          <TweetAction
-            accessibilityLabel={actions.label}
-            count={action.count}
-            displayMode={action.name}
-            highlighted={action.highlighted}
-            key={i}
-            onPress={action.onPress}
-            style={styles.action}
-          />
-        ))}
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    flexDirection: 'row'
-  },
-  action: {
-    display: 'block',
-    marginRight: '10%'
-  }
-});
--- a/benchmarks/src/components/TweetText/index.js
+++ b/benchmarks/src/components/TweetText/index.js
@@ -1,29 +0,0 @@
-import AppText from '../AppText';
-import React from 'react';
-import TweetTextPart from '../TweetTextPart';
-import { array, number, string } from 'prop-types';
-
-class TweetText extends React.Component {
-  static displayName = 'TweetText';
-
-  static propTypes = {
-    displayMode: TweetTextPart.propTypes.displayMode,
-    lang: string,
-    numberOfLines: number,
-    textParts: array.isRequired
-  };
-
-  render() {
-    const { displayMode, lang, numberOfLines, textParts, ...other } = this.props;
-
-    return (
-      <AppText {...other} lang={lang} numberOfLines={numberOfLines}>
-        {textParts.map((part, i) => (
-          <TweetTextPart displayMode={displayMode} key={i} part={part} />
-        ))}
-      </AppText>
-    );
-  }
-}
-
-export default TweetText;
--- a/benchmarks/src/components/TweetTextPart/index.js
+++ b/benchmarks/src/components/TweetTextPart/index.js
@@ -1,113 +0,0 @@
-/* eslint-disable react/prop-types */
-import { Image, StyleSheet, Text } from 'react-native';
-import PropTypes from 'prop-types';
-import React from 'react';
-import theme from '../theme';
-
-const createTextEntity = ({ part }) => <Text>{`${part.prefix}${part.text}`}</Text>;
-
-const createTwemojiEntity = ({ part }) => (
-  <Image
-    accessibilityLabel={part.text}
-    draggable={false}
-    source={{ uri: part.emoji }}
-    style={styles.twemoji}
-  />
-);
-
-// @mention, #hashtag, $cashtag
-const createSymbolEntity = ({ displayMode, part }) => {
-  const links = displayMode === 'links';
-  return (
-    <Text accessibilityRole={links ? 'link' : null} href={part.url} style={[links && styles.link]}>
-      {`${part.prefix}${part.text}`}
-    </Text>
-  );
-};
-
-// internal links
-const createLinkEntity = ({ displayMode, part }) => {
-  const { displayUrl, linkRelation, url } = part;
-  const links = displayMode === 'links';
-
-  return (
-    <Text
-      accessibilityRole={links ? 'link' : null}
-      href={url}
-      rel={links ? linkRelation : null}
-      style={[links && styles.link]}
-    >
-      {displayUrl}
-    </Text>
-  );
-};
-
-// external links
-const createExternalLinkEntity = ({ displayMode, part }) => {
-  const { displayUrl, linkRelation, url } = part;
-  const links = displayMode === 'links';
-
-  return (
-    <Text
-      accessibilityRole={links ? 'link' : null}
-      href={url}
-      rel={links ? linkRelation : null}
-      style={[links && styles.link]}
-      target="_blank"
-    >
-      {displayUrl}
-    </Text>
-  );
-};
-
-class TweetTextPart extends React.Component {
-  static displayName = 'TweetTextPart';
-
-  static propTypes = {
-    displayMode: PropTypes.oneOf(['links', 'no-links']),
-    part: PropTypes.object
-  };
-
-  static defaultProps = {
-    displayMode: 'links'
-  };
-
-  render() {
-    let renderer;
-    const { isEmoji, isEntity, isHashtag, isMention, isMedia, isUrl } = this.props.part;
-
-    if (isEmoji || isEntity || isUrl || isMedia) {
-      if (isUrl) {
-        renderer = createExternalLinkEntity;
-      } else if (isHashtag || isMention) {
-        renderer = createSymbolEntity;
-      } else if (isEmoji) {
-        renderer = createTwemojiEntity;
-      } else {
-        renderer = createLinkEntity;
-      }
-    } else {
-      renderer = createTextEntity;
-    }
-
-    return renderer(this.props);
-  }
-}
-
-const styles = StyleSheet.create({
-  link: {
-    color: theme.colors.blue,
-    textDecorationLine: 'none',
-    unicodeBidi: 'embed'
-  },
-  twemoji: {
-    display: 'inline-block',
-    height: '1.25em',
-    width: '1.25em',
-    paddingRight: '0.05em',
-    paddingLeft: '0.1em',
-    verticalAlign: '-0.2em'
-  }
-});
-
-export default TweetTextPart;
--- a/benchmarks/src/components/UserAvatar/index.js
+++ b/benchmarks/src/components/UserAvatar/index.js
@@ -1,65 +0,0 @@
-import AspectRatio from '../AspectRatio';
-import PropTypes from 'prop-types';
-import { Image, StyleSheet } from 'react-native';
-import React, { PureComponent } from 'react';
-import theme from '../theme';
-
-class UserAvatar extends PureComponent {
-  static displayName = 'UserAvatar';
-
-  static propTypes = {
-    accessibilityLabel: PropTypes.string,
-    circle: PropTypes.bool,
-    style: PropTypes.object,
-    uri: PropTypes.string
-  };
-
-  static defaultProps = {
-    circle: false
-  };
-
-  render() {
-    const { accessibilityLabel, circle, style, uri } = this.props;
-
-    return (
-      <AspectRatio ratio={1} style={[styles.root, style]}>
-        {uri ? (
-          <Image
-            accessibilityLabel={accessibilityLabel}
-            onLoad={this._handleLoad}
-            ref={this._setImageRef}
-            source={{ uri }}
-            style={[styles.image, circle && styles.circle]}
-          />
-        ) : null}
-      </AspectRatio>
-    );
-  }
-
-  _handleLoad = () => {
-    this._imageRef && this._imageRef.setNativeProps(nativeProps);
-  };
-
-  _setImageRef = component => {
-    this._imageRef = component;
-  };
-}
-
-const nativeProps = { style: { backgroundColor: '#fff' } };
-
-const styles = StyleSheet.create({
-  root: {
-    borderRadius: '0.35rem'
-  },
-  circle: {
-    borderRadius: '9999px'
-  },
-  image: {
-    backgroundColor: theme.colors.fadedGray,
-    display: 'block',
-    height: '100%',
-    width: '100%'
-  }
-});
-
-export default UserAvatar;
--- a/benchmarks/src/components/UserNames/index.js
+++ b/benchmarks/src/components/UserNames/index.js
@@ -1,52 +0,0 @@
-import AppText from '../AppText';
-import PropTypes from 'prop-types';
-import { StyleSheet } from 'react-native';
-import React, { PureComponent } from 'react';
-
-class UserNames extends PureComponent {
-  static displayName = 'UserNames';
-
-  static propTypes = {
-    fullName: PropTypes.string,
-    layout: PropTypes.oneOf(['nowrap', 'stack']),
-    onPress: PropTypes.func,
-    screenName: PropTypes.string,
-    style: PropTypes.object
-  };
-
-  static defaultProps = {
-    layout: 'nowrap'
-  };
-
-  render() {
-    const { fullName, layout, onPress, screenName, style, ...other } = this.props;
-
-    return (
-      <AppText
-        {...other}
-        color="deepGray"
-        numberOfLines={layout === 'nowrap' ? 1 : null}
-        onPress={onPress}
-        style={[styles.root, style]}
-      >
-        <AppText color="normal" weight="bold">
-          {fullName}
-        </AppText>
-        {layout === 'stack' ? ' \u000A' : ' '}
-        <AppText color="deepGray" style={styles.screenName}>{`@${screenName}`}</AppText>
-      </AppText>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    display: 'inline-block'
-  },
-  screenName: {
-    unicodeBidi: 'embed',
-    writingDirection: 'ltr'
-  }
-});
-
-export default UserNames;
--- a/benchmarks/src/components/View/aphrodite.js
+++ b/benchmarks/src/components/View/aphrodite.js
@@ -1,31 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import { css, StyleSheet } from 'aphrodite';
-
-class View extends React.Component {
-  render() {
-    const { style, ...other } = this.props;
-    return <div {...other} className={css(styles.root, style)} />;
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    alignItems: 'stretch',
-    borderWidth: 0,
-    borderStyle: 'solid',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexBasis: 'auto',
-    flexDirection: 'column',
-    flexShrink: 0,
-    margin: 0,
-    padding: 0,
-    position: 'relative',
-    // fix flexbox bugs
-    minHeight: 0,
-    minWidth: 0
-  }
-});
-
-export default View;
--- a/benchmarks/src/components/View/css-modules.js
+++ b/benchmarks/src/components/View/css-modules.js
@@ -1,13 +0,0 @@
-/* eslint-disable react/prop-types */
-import classnames from 'classnames';
-import React from 'react';
-import styles from './styles.css';
-
-class View extends React.Component {
-  render() {
-    const props = this.props;
-    return <div {...props} className={classnames(styles.initial, props.className)} />;
-  }
-}
-
-export default View;
--- a/benchmarks/src/components/View/emotion.js
+++ b/benchmarks/src/components/View/emotion.js
@@ -1,29 +0,0 @@
-/* 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/glamor.js
+++ b/benchmarks/src/components/View/glamor.js
@@ -1,29 +0,0 @@
-/* eslint-disable react/prop-types */
-import { css } from 'glamor';
-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/jss.js
+++ b/benchmarks/src/components/View/jss.js
@@ -1,32 +0,0 @@
-/* eslint-disable react/prop-types */
-import classnames from 'classnames';
-import injectSheet from 'react-jss';
-import React from 'react';
-
-class View extends React.Component {
-  render() {
-    const { classes, className, ...other } = this.props;
-    return <div {...other} className={classnames(classes.root, className)} />;
-  }
-}
-
-const styles = {
-  root: {
-    alignItems: 'stretch',
-    borderWidth: 0,
-    borderStyle: 'solid',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexBasis: 'auto',
-    flexDirection: 'column',
-    flexShrink: 0,
-    margin: 0,
-    padding: 0,
-    position: 'relative',
-    // fix flexbox bugs
-    minHeight: 0,
-    minWidth: 0
-  }
-};
-
-export default injectSheet(styles)(View);
--- a/benchmarks/src/components/View/radium.js
+++ b/benchmarks/src/components/View/radium.js
@@ -1,31 +0,0 @@
-/* eslint-disable react/prop-types */
-import Radium from 'radium';
-import React from 'react';
-
-class View extends React.Component {
-  render() {
-    const { style, ...other } = this.props;
-    return <div {...other} style={[styles.root, style]} />;
-  }
-}
-
-const styles = {
-  root: {
-    alignItems: 'stretch',
-    borderWidth: 0,
-    borderStyle: 'solid',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexBasis: 'auto',
-    flexDirection: 'column',
-    flexShrink: 0,
-    margin: 0,
-    padding: 0,
-    position: 'relative',
-    // fix flexbox bugs
-    minHeight: 0,
-    minWidth: 0
-  }
-};
-
-export default Radium(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/components/View/styled-components.js
+++ b/benchmarks/src/components/View/styled-components.js
@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-const View = styled.div`
-  align-items: stretch;
-  border-width: 0;
-  border-style: solid;
-  box-sizing: border-box;
-  display: flex;
-  flex-basis: auto;
-  flex-direction: column;
-  flex-shrink: 0;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  min-height: 0;
-  min-width: 0;
-`;
-
-export default View;
--- a/benchmarks/src/components/View/styles.css
+++ b/benchmarks/src/components/View/styles.css
@@ -1,15 +0,0 @@
-.initial {
-  align-items: stretch;
-  border-width: 0;
-  border-style: solid;
-  box-sizing: border-box;
-  display: flex;
-  flex-basis: auto;
-  flex-direction: column;
-  flex-shrink: 0;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  min-height: 0;
-  min-width: 0;
-}
--- a/benchmarks/src/components/View/styletron.js
+++ b/benchmarks/src/components/View/styletron.js
@@ -1,33 +0,0 @@
-/* eslint-disable react/prop-types */
-import classnames from 'classnames';
-import Styletron from 'styletron-client';
-import { injectStylePrefixed } from 'styletron-utils';
-import React from 'react';
-
-export const styletron = new Styletron();
-
-class View extends React.Component {
-  render() {
-    const { style, ...other } = this.props;
-    return <div {...other} className={classnames(viewStyle, ...style)} />;
-  }
-}
-
-const viewStyle = injectStylePrefixed(styletron, {
-  alignItems: 'stretch',
-  borderWidth: '0px',
-  borderStyle: 'solid',
-  boxSizing: 'border-box',
-  display: 'flex',
-  flexBasis: 'auto',
-  flexDirection: 'column',
-  flexShrink: '0',
-  margin: '0px',
-  padding: '0px',
-  position: 'relative',
-  // fix flexbox bugs
-  minHeight: '0px',
-  minWidth: '0px'
-});
-
-export default View;
--- a/benchmarks/src/components/theme.js
+++ b/benchmarks/src/components/theme.js
@@ -1,40 +0,0 @@
-const colors = {
-  blue: '#1B95E0',
-  lightBlue: '#71C9F8',
-  green: '#17BF63',
-  orange: '#F45D22',
-  purple: '#794BC4',
-  red: '#E0245E',
-  white: '#FFFFFF',
-  yellow: '#FFAD1F',
-  deepGray: '#657786',
-  fadedGray: '#E6ECF0',
-  faintGray: '#F5F8FA',
-  gray: '#AAB8C2',
-  lightGray: '#CCD6DD',
-  textBlack: '#14171A'
-};
-
-const fontSize = {
-  root: '14px',
-  // font scale
-  small: '0.85rem',
-  normal: '1rem',
-  large: '1.25rem'
-};
-
-const theme = {
-  colors,
-  fontFamily:
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif, ' +
-    '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', // emoji fonts
-  fontSize,
-  lineHeight: 1.3125,
-  spaceX: 0.6,
-  spaceY: 1.3125,
-  createLength(num, unit) {
-    return `${num}${unit}`;
-  }
-};
-
-export default theme;
--- a/benchmarks/src/css-modules.js
+++ b/benchmarks/src/css-modules.js
@@ -1,9 +0,0 @@
-import Box from './components/Box/css-modules';
-import View from './components/View/css-modules';
-
-const api = {
-  Box,
-  View
-};
-
-export default api;
--- a/benchmarks/src/emotion.js
+++ b/benchmarks/src/emotion.js
@@ -1,7 +0,0 @@
-import Box from './components/Box/emotion';
-import View from './components/View/emotion';
-
-export default {
-  Box,
-  View
-};
--- a/benchmarks/src/glamor.js
+++ b/benchmarks/src/glamor.js
@@ -1,7 +0,0 @@
-import Box from './components/Box/glamor';
-import View from './components/View/glamor';
-
-export default {
-  Box,
-  View
-};
--- a/benchmarks/src/jss.js
+++ b/benchmarks/src/jss.js
@@ -1,9 +0,0 @@
-import Box from './components/Box/jss';
-import View from './components/View/jss';
-
-const api = {
-  Box,
-  View
-};
-
-export default api;
--- a/benchmarks/src/radium.js
+++ b/benchmarks/src/radium.js
@@ -1,9 +0,0 @@
-import Box from './components/Box/radium';
-import View from './components/View/radium';
-
-const api = {
-  Box,
-  View
-};
-
-export default api;
--- 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/react-native.js
+++ b/benchmarks/src/react-native.js
@@ -1,9 +0,0 @@
-import Box from './components/Box/react-native';
-import Tweet from './components/Tweet';
-import { View } from 'react-native';
-
-export default {
-  Box,
-  Tweet,
-  View
-};
--- a/benchmarks/src/reactxp.js
+++ b/benchmarks/src/reactxp.js
@@ -1,7 +0,0 @@
-import Box from './components/Box/reactxp';
-import { View } from 'reactxp';
-
-export default {
-  Box,
-  View
-};
--- 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/src/styled-components.js
+++ b/benchmarks/src/styled-components.js
@@ -1,7 +0,0 @@
-import Box from './components/Box/styled-components';
-import View from './components/View/styled-components';
-
-export default {
-  Box,
-  View
-};
--- a/benchmarks/src/styletron.js
+++ b/benchmarks/src/styletron.js
@@ -1,7 +0,0 @@
-import Box from './components/Box/styletron';
-import View from './components/View/styletron';
-
-export default {
-  Box,
-  View
-};
--- a/benchmarks/tests/renderDeepTree.js
+++ b/benchmarks/tests/renderDeepTree.js
@@ -1,14 +0,0 @@
-import createRenderBenchmark from '../createRenderBenchmark';
-import NestedTree from '../src/components/NestedTree';
-import React from 'react';
-
-const renderDeepTree = (label, components) =>
-  createRenderBenchmark({
-    name: `Deep tree [${label}]`,
-    runs: 20,
-    getElement() {
-      return <NestedTree breadth={3} components={components} depth={6} id={0} wrap={1} />;
-    }
-  });
-
-export default renderDeepTree;
--- a/benchmarks/tests/renderTweet.js
+++ b/benchmarks/tests/renderTweet.js
@@ -1,113 +0,0 @@
-import createRenderBenchmark from '../createRenderBenchmark';
-import Tweet from '../src/components/Tweet';
-import React from 'react';
-
-const tweet1 = {
-  favorite_count: 30,
-  favorited: true,
-  id: '834889712556875776',
-  lang: 'en',
-  retweet_count: 6,
-  retweeted: false,
-  textParts: [
-    {
-      prefix: '',
-      text: 'Living burrito to burrito '
-    },
-    {
-      emoji: 'https://abs-0.twimg.com/emoji/v2/svg/1f32f.svg',
-      isEmoji: true,
-      prefix: '',
-      text: '🌯'
-    },
-    {
-      emoji: 'https://abs-0.twimg.com/emoji/v2/svg/1f32f.svg',
-      isEmoji: true,
-      prefix: '',
-      text: '🌯'
-    },
-    {
-      emoji: 'https://abs-0.twimg.com/emoji/v2/svg/1f32f.svg',
-      isEmoji: true,
-      prefix: '',
-      text: '🌯'
-    }
-  ],
-  timestamp: 'Feb 23',
-  user: {
-    fullName: 'Nicolas',
-    screenName: 'necolas',
-    profileImageUrl: 'https://pbs.twimg.com/profile_images/804365942360719360/dQnPejph_normal.jpg'
-  }
-};
-
-const tweet2 = {
-  favorite_count: 84,
-  favorited: false,
-  id: '730896800060579840',
-  lang: 'en',
-  media: {
-    source: {
-      uri: 'https://pbs.twimg.com/media/CiSqvsJVEAAtLZ1.jpg',
-      width: 600,
-      height: 338
-    }
-  },
-  retweet_count: 4,
-  retweeted: true,
-  textParts: [
-    {
-      prefix: '',
-      text: 'Presenting '
-    },
-    {
-      displayUrl: 'mobile.twitter.com',
-      expandedUrl: 'https://mobile.twitter.com',
-      isEntity: true,
-      isUrl: true,
-      linkRelation: 'nofollow',
-      prefix: '',
-      text: '',
-      textDirection: 'ltr',
-      url: 'https://t.co/4hRCAxiUUG'
-    },
-    {
-      prefix: '',
-      text: ' with '
-    },
-    {
-      isEntity: true,
-      isMention: true,
-      prefix: '@',
-      text: 'davidbellona',
-      textDirection: 'ltr',
-      url: '/davidbellona'
-    },
-    {
-      prefix: '',
-      text: " at Twitter's all hands meeting "
-    }
-  ],
-  timestamp: 'May 12',
-  user: {
-    fullName: 'Nicolas',
-    screenName: 'necolas',
-    profileImageUrl: 'https://pbs.twimg.com/profile_images/804365942360719360/dQnPejph_normal.jpg'
-  }
-};
-
-const renderTweet = label =>
-  createRenderBenchmark({
-    name: `Tweet [${label}]`,
-    runs: 10,
-    getElement() {
-      return (
-        <div style={{ width: 500 }}>
-          <Tweet tweet={tweet1} />
-          <Tweet tweet={tweet2} />
-        </div>
-      );
-    }
-  });
-
-export default renderTweet;
--- a/benchmarks/tests/renderWideTree.js
+++ b/benchmarks/tests/renderWideTree.js
@@ -1,14 +0,0 @@
-import createRenderBenchmark from '../createRenderBenchmark';
-import NestedTree from '../src/components/NestedTree';
-import React from 'react';
-
-const renderWideTree = (label, components) =>
-  createRenderBenchmark({
-    name: `Wide tree [${label}]`,
-    runs: 20,
-    getElement() {
-      return <NestedTree breadth={10} components={components} depth={3} id={0} wrap={4} />;
-    }
-  });
-
-export default renderWideTree;
--- a/benchmarks/webpack.config.js
+++ b/benchmarks/webpack.config.js
@@ -1,57 +0,0 @@
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const path = require('path');
-const webpack = require('webpack');
-
-module.exports = {
-  context: __dirname,
-  entry: './index',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'performance.bundle.js'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: { module: true, localIdentName: '[hash:base64:8]' }
-          }
-        ]
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true
-          }
-        }
-      }
-    ]
-  },
-  plugins: [
-    new BundleAnalyzerPlugin({
-      analyzerMode: 'static',
-      openAnalyzer: false
-    }),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        dead_code: true,
-        screw_ie8: true,
-        warnings: false
-      }
-    })
-  ],
-  resolve: {
-    alias: {
-      'react-native': path.join(__dirname, '../src')
-    }
-  }
-};
--- a/benchmarks/yarn.lock
+++ b/benchmarks/yarn.lock
--- a/core.js
+++ b/core.js
@@ -0,0 +1 @@
+module.exports = require('./dist/core')
--- a/docs/apis/AppRegistry.md
+++ b/docs/apis/AppRegistry.md
@@ -0,0 +1,59 @@
+# 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 [client and server rendering
+guide](../guides/rendering.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; stylesheet: ReactElement }`.
+It's recommended that you use `sheetsheet` to render the style sheet in an app
+
+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`.
+
+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
@@ -0,0 +1,60 @@
+## 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
@@ -0,0 +1,71 @@
+# 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/Dimensions.md
+++ b/docs/apis/Dimensions.md
@@ -0,0 +1,13 @@
+# 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
@@ -0,0 +1,25 @@
+# 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/NativeMethods.md
+++ b/docs/apis/NativeMethods.md
@@ -0,0 +1,42 @@
+# NativeMethods
+
+React Native for Web provides several methods to directly access the underlying
+DOM node. This can be useful in cases when you want to focus a view or measure
+its on-screen dimensions, for example.
+
+The methods described are available on most of the default components provided
+by React Native for Web. Note, however, that they are *not* available on the
+composite components that you define in your own app. For more information, see
+[Direct Manipulation](../guides/direct-manipulation.md).
+
+## Methods
+
+**blur**()
+
+Removes focus from an input or view. This is the opposite of `focus()`.
+
+**focus**()
+
+Requests focus for the given input or view. The exact behavior triggered will
+depend the type of view.
+
+**measure**(callback: (x, y, width, height, pageX, pageY) => void)
+
+For a given view, `measure` determines the offset relative to the parent view,
+width, height, and the offset relative to the viewport. Returns the values via
+an async callback.
+
+Note that these measurements are not available until after the rendering has
+been completed.
+
+**measureLayout**(relativeToNativeNode: DOMNode, onSuccess: (x, y, width, height) => void)
+
+Like `measure`, but measures the view relative to another view, specified as
+`relativeToNativeNode`. This means that the returned `x`, `y` are relative to
+the origin `x`, `y` of the ancestor view.
+
+**setNativeProps**(nativeProps: Object)
+
+This function sends props straight to the underlying DOM node. See the [direct
+manipulation](../guides/direct-manipulation.md) guide for cases where
+`setNativeProps` should be used.
--- a/docs/apis/NetInfo.md
+++ b/docs/apis/NetInfo.md
@@ -0,0 +1,77 @@
+# 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.
+
+**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
@@ -0,0 +1,51 @@
+# 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
@@ -0,0 +1,45 @@
+# 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
@@ -0,0 +1,78 @@
+# StyleSheet
+
+The `StyleSheet` abstraction converts predefined styles to (vendor-prefixed)
+CSS without requiring a compile-time step. Some styles cannot be resolved
+outside of the render loop and are applied as inline styles. Read more about
+[how to style your application](../guides/style.md).
+
+## 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.
+
+**render**: function
+
+Returns a React `<style>` element for use in 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
@@ -0,0 +1,35 @@
+# 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
@@ -0,0 +1,70 @@
+# ActivityIndicator
+
+## Props
+
+[...View props](./View.md)
+
+**animating**: bool = true
+
+Whether to show the indicator or hide it.
+
+**color**: string = '#1976D2'
+
+The foreground color of the spinner.
+
+**hidesWhenStopped**: bool = true
+
+Whether the indicator should hide when not animating.
+
+**size**: oneOf('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
@@ -0,0 +1,39 @@
+# 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
+
+Defines the text available to assistive technologies upon interaction with the
+element. (This is implemented using `aria-label`.)
+
+**color**: string
+
+Background color of the button.
+
+**disabled**: bool = false
+
+If true, disable all interactions for this component
+
+**onPress**: function
+
+This function is called on press.
+
+**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
@@ -0,0 +1,149 @@
+# 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**: bool
+
+When `false`, the view is hidden from screenreaders. Default: `true`.
+
+**children**: any
+
+Content to display over the image.
+
+**defaultSource**: { uri: string }
+
+An image to display as a placeholder while downloading the final image off the network.
+
+**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**: oneOf('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'cover'
+
+Determines how to resize the image when the frame doesn't match the raw image
+dimensions.
+
+**source**: { uri: string }
+
+`uri` is a string representing the resource identifier for the image, which
+could be an http address or a base64 encoded image.
+
+**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} />
+```
+
+## 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/ListView.md
+++ b/docs/components/ListView.md
@@ -0,0 +1,34 @@
+# ListView
+
+TODO
+
+## Props
+
+[...ScrollView props](./ScrollView.md)
+
+**children**: any
+
+Content to display over the image.
+
+**style**: style
+
+ ...[View#style](View.md)
+
+## Examples
+
+```js
+import React, { Component, PropTypes } from 'react'
+import { ListView } from 'react-native'
+
+export default class ListViewExample extends Component {
+  static propTypes = {}
+
+  static defaultProps = {}
+
+  render() {
+    return (
+      <ListView />
+    )
+  }
+}
+```
--- a/docs/components/ProgressBar.md
+++ b/docs/components/ProgressBar.md
@@ -0,0 +1,23 @@
+# ProgressBar
+
+Display an activity progress bar.
+
+## Props
+
+[...View props](./View.md)
+
+**color**: string = '#1976D2'
+
+Color of the progress bar.
+
+**indeterminate**: bool = true
+
+Whether the progress bar will show indeterminate progress.
+
+**progress**: number
+
+The progress value (between 0 and 1).
+
+(web) **trackColor**: string = 'transparent'
+
+Color of the track bar.
--- a/docs/components/ScrollView.md
+++ b/docs/components/ScrollView.md
@@ -0,0 +1,134 @@
+# 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**: bool = false
+
+When true, the scroll view's children are arranged horizontally in a row
+instead of vertically in a column.
+
+**keyboardDismissMode**: oneOf('none', 'on-drag') = 'none'
+
+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**: bool = 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
@@ -0,0 +1,76 @@
+# 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**: bool = false
+
+If `true` the user won't be able to interact with the switch.
+
+**onValueChange**: func
+
+Invoked with the new value when the value changes.
+
+**value**: bool = 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
@@ -0,0 +1,147 @@
+# 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
+
+Defines the text available to assistive technologies upon interaction with the
+element. (This is implemented using `aria-label`.)
+
+(web) **accessibilityRole**: oneOf(roles)
+
+Allows assistive technologies to present and support interaction with the view
+in a manner that is consistent with user expectations for similar views of that
+type. For example, marking a touchable view with an `accessibilityRole` of
+`button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
+
+Note: Avoid changing `accessibilityRole` values over time or after user
+actions. Generally, accessibility APIs do not provide a means of notifying
+assistive technologies of a `role` value change.
+
+**accessible**: bool = true
+
+When `false`, the text is hidden from assistive technologies. (This is
+implemented using `aria-hidden`.)
+
+**children**: any
+
+Child content.
+
+**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**: bool = true
+
+Lets the user select the text.
+
+**style**: style
+
+ ...[View#style](View.md)
+ `color`
+ `fontFamily`
+ `fontSize`
+ `fontStyle`
+ `fontWeight`
+ `letterSpacing`
+ `lineHeight`
+ `textAlign`‡
+ `textAlignVertical`
+ `textDecorationLine`
+ `textOverflow`
+ `textRendering`
+ `textShadowColor`
+ `textShadowOffset`‡
+ `textShadowRadius`
+ `textTransform`
+ `unicodeBidi`
+ `whiteSpace`
+ `wordWrap`
+ `writingDirection`‡
+
+‡ This property can be suffixed with `$noI18n` to prevent automatic
+bidi-flipping in RTL mode. This is only supported if `Platform.OS === 'web'`.
+
+**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
@@ -0,0 +1,227 @@
+# 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**: oneOf('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**: bool = true
+
+Automatically correct spelling mistakes  (only available in iOS Safari).
+
+**autoFocus**: bool = false
+
+If `true`, focuses the input on `componentDidMount`. Only the first form element
+in a document with `autofocus` is focused.
+
+**blurOnSubmit**: bool
+
+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**: bool = 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**: bool = true
+
+If `false`, text is not editable (i.e., read-only).
+
+**keyboardType**: oneOf('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.
+
+(web) **maxNumberOfLines**: number = numberOfLines
+
+Limits the maximum number of lines for a multiline `TextInput`.
+
+(Requires `multiline` to be `true`.)
+
+**multiline**: bool = false
+
+If true, the text input can be multiple lines.
+
+**numberOfLines**: number = 2
+
+Sets the initial 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. Pressed key value is passed as
+an argument to the callback handler. 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**: bool = 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**: bool = false
+
+If `true`, all text will automatically be selected on focus.
+
+**style**: style
+
+ ...[Text#style](./Text.md)
+ `outline`
+
+**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
@@ -0,0 +1,73 @@
+# 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)
+
+**accessibilityLabel**: string
+
+Overrides the text that's read by the screen reader when the user interacts
+with the element.
+
+(web) **accessibilityRole**: oneOf(roles) = 'button'
+
+Allows assistive technologies to present and support interaction with the view
+
+**accessible**: bool = true
+
+When `false`, the view is hidden from screenreaders.
+
+**children**: View
+
+**delayLongPress**: number
+
+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**: bool
+
+If true, disable all interactions for this component.
+
+**hitSlop**: `{top: number, left: number, bottom: number, right: number}`
+
+This defines how far your touch can start away from the button. This is added
+to `pressRetentionOffset` when moving off of the button. **NOTE**: The touch
+area never extends past the parent view bounds and the z-index of sibling views
+always takes precedence if a touch hits two overlapping views.
+
+**onLayout**: function
+
+Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
+height } } }`, where `x` and `y` are the offsets from the parent node.
+
+**onLongPress**: function
+
+**onPress**: function
+
+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
@@ -0,0 +1,231 @@
+# 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:
+`onAccessibilityTap`,
+`hitSlop`,
+`onMagicTap`
+
+## Props
+
+NOTE: `View` will transfer all other props to the rendered HTML element.
+
+**accessibilityLabel**: string
+
+Defines the text available to assistive technologies upon interaction with the
+element. (This is implemented using `aria-label`.)
+
+**accessibilityLiveRegion**: oneOf('assertive', 'off', 'polite') = 'off'
+
+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).)
+
+(web) **accessibilityRole**: oneOf(roles)
+
+Allows assistive technologies to present and support interaction with the view
+in a manner that is consistent with user expectations for similar views of that
+type. For example, marking a touchable view with an `accessibilityRole` of
+`button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
+
+Note: Avoid changing `accessibilityRole` values over time or after user
+actions. Generally, accessibility APIs do not provide a means of notifying
+assistive technologies of a `role` value change.
+
+**accessible**: bool = true
+
+When `false`, the view is hidden from assistive technologies. (This is
+implemented using `aria-hidden`.)
+
+**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
+
+**onMoveShouldSetResponderCapture**: function
+
+**onResponderGrant**: function
+
+For most touch interactions, you'll simply want to wrap your component in
+`TouchableHighlight` or `TouchableOpacity`.
+
+**onResponderMove**: function
+
+**onResponderReject**: function
+
+**onResponderRelease**: function
+
+**onResponderTerminate**: function
+
+**onResponderTerminationRequest**: function
+
+**onStartShouldSetResponder**: function
+
+**onStartShouldSetResponderCapture**: function
+
+**pointerEvents**: oneOf('auto', 'box-only', 'box-none', 'none') = 'auto'
+
+Configure the `pointerEvents` of the view. 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 }
+.box-none * { pointer-events: auto }
+```
+
+`box-only` is the equivalent of:
+
+```css
+.box-only { pointer-events: auto }
+.box-only * { pointer-events: none }
+```
+
+**style**: style
+
+ `alignContent`
+ `alignItems`
+ `alignSelf`
+ `backfaceVisibility`
+ `backgroundAttachment`
+ `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`
+ `cursor`
+ `flex` (number)
+ `flexBasis`
+ `flexDirection`
+ `flexGrow`
+ `flexShrink`
+ `flexWrap`
+ `height`
+ `justifyContent`
+ `left`‡
+ `margin` (single value)
+ `marginBottom`
+ `marginHorizontal`
+ `marginLeft`‡
+ `marginRight`‡
+ `marginTop`
+ `marginVertical`
+ `maxHeight`
+ `maxWidth`
+ `minHeight`
+ `minWidth`
+ `opacity`
+ `order`
+ `overflow`
+ `overflowX`
+ `overflowY`
+ `padding` (single value)
+ `paddingBottom`
+ `paddingHorizontal`
+ `paddingLeft`‡
+ `paddingRight`‡
+ `paddingTop`
+ `paddingVertical`
+ `position`
+ `right`‡
+ `top`
+ `transform`
+ `userSelect`
+ `visibility`
+ `width`
+ `zIndex`
+
+‡ This property can be suffixed with `$noI18n` to prevent automatic
+bidi-flipping in RTL mode. This is only supported if `Platform.OS === 'web'`.
+
+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/css-layout](https://github.com/facebook/css-layout)).
+
+**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/Show More
+++ b/Show More