0.1.3

Fix #666

.babelrc

@@ -1,7 +0,0 @@
-{
-  "presets": [
-    "es2015",
-    "stage-1",
-    "react"
-  ]
-}

.eslintrc

@@ -1,14 +1,152 @@
 {
-  // babel parser to support ES features
+  // babel parser to support ES6/7 features
   "parser": "babel-eslint",
-  // based on https://github.com/feross/standard
-  "extends": [ "standard", "standard-react" ],
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "extends": [
+    "prettier",
+    "prettier/react"
+  ],
+  "plugins": [
+    "promise",
+    "react"
+  ],
+  "env": {
+    "es6": true,
+    "node": true
+  },
+  "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
+  },
   "rules": {
-    // overrides of the standard style
-    "space-before-function-paren": [ 2, { "anonymous": "always", "named": "never" } ],
-    "wrap-iife": [ 2, "outside" ],
-    // overrides of the standard-react style
+    "camelcase": 0,
+    "constructor-super": 2,
+    "default-case": [2, { commentPattern: '^no default$' }],
+    "eqeqeq": [2, "allow-null"],
+    "handle-callback-err": [2, "^(err|error)$" ],
+    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+    "no-alert": 1,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-case-declarations": 2,
+    "no-class-assign": 2,
+    "no-cond-assign": 2,
+    "no-const-assign": 2,
+    "no-control-regex": 2,
+    "no-debugger": 2,
+    "no-delete-var": 2,
+    "no-dupe-args": 2,
+    "no-dupe-class-members": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-empty-character-class": 2,
+    "no-empty-pattern": 2,
+    "no-eval": 2,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-boolean-cast": 2,
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
+    "no-lone-blocks": 2,
+    "no-loop-func": 2,
+    "no-multi-str": 2,
+    "no-native-reassign": 2,
+    "no-negated-in-lhs": 2,
+    "no-new": 2,
+    "no-new-func": 2,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-symbol": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-path-concat": 2,
+    "no-proto": 2,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-return-assign": [2, "except-parens"],
+    "no-script-url": 2,
+    "no-self-assign": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow-restricted-names": 2,
+    "no-sparse-arrays": 2,
+    "no-this-before-super": 2,
+    "no-throw-literal": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-unexpected-multiline": 2,
+    "no-unmodified-loop-condition": 2,
+    "no-unneeded-ternary": [2, { "defaultAssignment": false }],
+    "no-unreachable": 2,
+    "no-unsafe-finally": 2,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "no-useless-call": 2,
+    "no-useless-computed-key": 2,
+    "no-useless-concat": 2,
+    "no-useless-constructor": 2,
+    "no-useless-escape": 2,
+    "no-var": 2,
+    "no-with": 2,
+    "prefer-const": 2,
+    "prefer-rest-params": 2,
+    "quotes": [2, "single", "avoid-escape"],
+    "radix": 2,
+    "use-isnan": 2,
+    "valid-typeof": 2,
+    "yoda": [2, "never"],
+
+    // promise
+    "promise/param-names": 2,
+
+    // react
+    "react/display-name": 0,
+    "react/jsx-no-bind": 2,
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-undef": 2,
+    "react/jsx-pascal-case": 2,
     "react/jsx-sort-props": 2,
-    "react/jsx-sort-prop-types": 2
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/no-did-mount-set-state": 0,
+    "react/no-did-update-set-state": 2,
+    "react/no-direct-mutation-state": 2,
+    "react/no-multi-comp": 0,
+    "react/no-string-refs": 2,
+    "react/no-unknown-property": 2,
+    "react/prefer-es6-class": 2,
+    "react/prop-types": 2,
+    "react/react-in-jsx-scope": 0,
+    "react/self-closing-comp": 2,
+    "react/sort-comp": 0,
+    "react/sort-prop-types": 2,
+    "react/wrap-multilines": 0
   }
 }

.flowconfig

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

.github/CONTRIBUTING.md

@@ -0,0 +1,125 @@
+# 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!

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,20 @@
+**Do you want to request a *feature* or report a *bug*?**
+
+**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).**
+
+1.
+2.
+
+**What is the expected behavior?**
+
+**Environment (include versions). Did this work in previous versions?**
+
+* OS:
+* Device:
+* Browser:
+* React Native for Web (version):
+* React (version):

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1 @@
+**Before submitting a pull request,** please make sure you have followed the steps the CONTRIBUTING guide.

.gitignore

@@ -1,2 +1,2 @@
-/dist
-/node_modules
+node_modules
+dist

.travis.yml

@@ -1,6 +1,9 @@
 language: node_js
 node_js:
-   - "4.1"
+  - "6"
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
+script:
+  - npm run lint
+  - npm test

CONTRIBUTING.md

@@ -1,125 +0,0 @@
-# Contributing to this project
-
-The issue tracker is the preferred channel for [bug reports](#bugs),
-[features requests](#features) and [submitting pull
-requests](#pull-requests).
-
-<a name="bugs"></a>
-## Bug reports
-
-A bug is a _demonstrable problem_ that is caused by the code in the repository.
-Good bug reports are extremely helpful - thank you!
-
-Guidelines for bug reports:
-
-1. **Use the GitHub issue search** &mdash; check if the issue has already been
-   reported.
-
-2. **Check if the issue has been fixed** &mdash; try to reproduce it using the
-   latest `master` or development branch in the repository.
-
-3. **Isolate the problem** &mdash; create a [reduced test
-   case](http://css-tricks.com/reduced-test-cases/) and a live example.
-
-A good bug report contains as much detail as possible. What is your
-environment? What steps will reproduce the issue? What browser(s) and OS
-experience the problem? What would you expect to be the outcome? All these
-details really help!
-
-Example:
-
-> Short and descriptive example bug report title
->
-> A summary of the issue and the browser/OS environment in which it occurs. If
-> suitable, include the steps required to reproduce the bug.
->
-> 1. This is the first step
-> 2. This is the second step
-> 3. Further steps, etc.
->
-> `<url>` - a link to the reduced test case
->
-> Any other information you want to share that is relevant to the issue being
-> reported. This might include the lines of code that you have identified as
-> causing the bug, and potential solutions (and your opinions on their
-> merits).
-
-
-<a name="features"></a>
-## Feature requests
-
-Feature requests are welcome. But take a moment to find out whether your idea
-fits with the scope and aims of the project. It's up to *you* to make a strong
-case to convince the project's developers of the merits of this feature. Please
-provide as much detail and context as possible.
-
-
-<a name="pull-requests"></a>
-## Pull requests
-
-Good pull requests - patches, improvements, new features - are a fantastic
-help. Please keep them focused in scope and avoid containing unrelated commits.
-
-**Please ask first** before embarking on any significant pull request (e.g.
-implementing new features or components, refactoring code), otherwise you risk
-spending a lot of time working on something that the project's developers might
-not want to merge into the project.
-
-Development commands:
-
-* `npm run build` – build the library
-* `npm run examples` – start the dev server and develop against live examples
-* `npm run lint` – run the linter
-* `npm run test` – run the linter and unit tests
-
-Please follow this process for submitting a patch:
-
-1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
-   and configure the remotes:
-
-   ```bash
-   # Clone your fork of the repo into the current directory
-   git clone https://github.com/<your-username>/react-native-web
-   # Navigate to the newly cloned directory
-   cd react-native-web
-   # Assign the original repo to a remote called "upstream"
-   git remote add upstream https://github.com/necolas/react-native-web
-   ```
-
-2. If you cloned a while ago, get the latest changes from upstream:
-
-   ```bash
-   git checkout master
-   git pull upstream master
-   ```
-
-3. Create a new topic branch (off the main project development branch) to
-   contain your feature, change, or fix:
-
-   ```bash
-   git checkout -b <topic-branch-name>
-   ```
-
-4. Commit your changes in logical chunks. Please adhere to these [git commit
-   message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
-   or your code is unlikely be merged into the main project. Use Git's
-   [interactive rebase](https://help.github.com/articles/interactive-rebase)
-   feature to tidy up your commits before making them public.
-
-5. Locally merge (or rebase) the upstream development branch into your topic branch:
-
-   ```bash
-   git pull [--rebase] upstream master
-   ```
-
-6. Push your topic branch up to your fork:
-
-   ```bash
-   git push origin <topic-branch-name>
-   ```
-
-7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
-    with a clear title and description.
-
-**IMPORTANT**: By submitting a patch, you agree to allow the project owner to
-license your work under the same license as that used by the project.

LICENSE

@@ -1,21 +1,31 @@
-The MIT License (MIT)
+BSD License
 
-Copyright (c) 2015 Nicolas Gallagher
+For React Native software
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Copyright (c) 2015-present, Nicolas Gallagher. All rights reserved.
+Copyright (c) 2015-present, Facebook, Inc. All rights reserved.
 
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+ * Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+ * Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+ * Neither the name Facebook nor the names of its contributors may be used to
+   endorse or promote products derived from this software without specific
+   prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -2,244 +2,124 @@
 
 [![Build Status][travis-image]][travis-url]
 [![npm version][npm-image]][npm-url]
-![gzipped size](https://img.shields.io/badge/gzipped-~18.6k-blue.svg)
 
-[React Native][react-native-url] components and APIs for the Web.
+"React Native for Web" brings the platform-agnostic Components and APIs of
+[React Native][react-native-url] to the Web.
 
-* [Discord: #react-native-web on reactiflux][discord-url]
-* [Gitter: react-native-web][gitter-url]
+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.
 
-## Table of contents
+## Features
 
-* [Install](#install)
-* [Example](#example)
-* [APIs](#apis)
-* [Components](#components)
-* [Styling](#styling)
-* [Accessibility](#accessibility)
-* [Contributing](#contributing)
-* [Thanks](#thanks)
-* [License](#license)
+* 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.
 
-## Install
+## Quick start
+
+Install in your existing app using `yarn` or `npm`:
 
 ```
-npm install --save react react-dom react-native-web
+yarn add react react-dom react-native-web
 ```
 
-## Example
+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.
 
-React Native for Web exports its components and a reference to the `React`
-installation. Styles are defined with, and used as JavaScript objects.
+```json
+{
+  "plugins": [
+    "react-native-web/babel"
+  ],
+  "presets": [
+    "react-native"
+  ]
+}
+```
 
-Component:
+(For React/ReactDOM 15.4 – 15.6 support, install `react-native-web@<0.1.0`)
+
+See the [Getting Started](docs/guides/getting-started.md) guide for more details.
+
+## Documentation
+
+The [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)
+* [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)
+
+## Example code
 
 ```js
-import React, { Image, StyleSheet, Text, View } from 'react-native-web'
+import React from 'react'
+import { AppRegistry, Image, StyleSheet, Text, View } from 'react-native'
 
+// Components
+const Card = ({ children }) => <View style={styles.card}>{children}</View>
 const Title = ({ children }) => <Text style={styles.title}>{children}</Text>
-
-const Summary = ({ children }) => (
-  <View style={styles.text}>
-    <Text style={styles.subtitle}>{children}</Text>
-  </View>
+const Photo = ({ uri }) => <Image source={{ uri }} style={styles.image} />
+const App = () => (
+  <Card>
+    <Title>App Card</Title>
+    <Photo uri="/some-photo.jpg" />
+  </Card>
 )
 
-class App extends React.Component {
-  render() {
-    return (
-      <View style={styles.row}>
-        <Image
-          source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
-          style={styles.image}
-        />
-        <Title>React Native Web</Title>
-        <Summary>Build high quality web apps using React</Summary>
-      </View>
-    )
-  },
-})
-
+// Styles
 const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    margin: 40
-  },
-  image: {
-    height: 40,
-    marginRight: 10,
-    width: 40,
-  },
-  text: {
-    flex: 1,
+  card: {
+    flexGrow: 1,
     justifyContent: 'center'
   },
   title: {
     fontSize: '1.25rem',
     fontWeight: 'bold'
   },
-  subtitle: {
-    fontSize: '1rem'
+  image: {
+    height: 40,
+    marginVertical: 10,
+    width: 40
   }
 })
+
+// App registration and rendering
+AppRegistry.registerComponent('MyApp', () => App)
+AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })
 ```
 
-Pre-render styles on the server:
+## Starter kits
 
-```js
-// server.js
-import App from './components/App'
-import React, { StyleSheet } from 'react-native-web'
+* [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)
 
-const html = React.renderToString(<App />);
-const css = StyleSheet.renderToString();
+## Related projects
 
-const Html = () => (
-  <html>
-    <head>
-      <meta charSet="utf-8" />
-      <meta content="initial-scale=1,width=device-width" name="viewport" />
-      <style id="react-stylesheet" dangerouslySetInnerHTML={{ __html: css } />
-    </head>
-    <body>
-      <div id="react-root" dangerouslySetInnerHTML={{ __html: html }} />
-    </body>
-  </html>
-)
-```
-
-Render styles on the client:
-
-```js
-// client.js
-import App from './components/App'
-import React, { StyleSheet } from 'react-native-web'
-import ReactDOM from 'react-dom'
-
-const reactRoot = document.getElementById('react-root')
-const reactStyleSheet = document.getElementById('react-stylesheet')
-
-ReactDOM.render(<App />, reactRoot)
-reactStyleSheet.textContent = StyleSheet.renderToString()
-```
-
-## APIs
-
-### [`StyleSheet`](docs/apis/StyleSheet.md)
-
-StyleSheet is a style abstraction that transforms inline styles to CSS on the
-client or the server. It provides a minimal CSS reset targeting elements and
-pseudo-elements beyond the reach of React inline styles.
-
-## Components
-
-### [`Image`](docs/components/Image.md)
-
-An accessibile image component with support for image resizing, default image,
-and child content.
-
-### [`ListView`](docs/components/ListView.md)
-
-(TODO)
-
-### [`ScrollView`](docs/components/ScrollView.md)
-
-A scrollable view with event throttling.
-
-### [`Text`](docs/components/Text.md)
-
-Displays text inline and supports basic press handling.
-
-### [`TextInput`](docs/components/TextInput.md)
-
-Accessible single- and multi-line text input via a keyboard.
-
-### [`Touchable`](docs/components/Touchable.md)
-
-Touch bindings for press and long press.
-
-### [`View`](docs/components/View.md)
-
-The fundamental UI building block using flexbox for layout.
-
-## Styling
-
-React Native for Web relies on styles being defined in JavaScript. Styling
-components can be achieved with inline styles or the use of
-[StyleSheet](docs/apis/StyleSheet.md).
-
-The `View` component makes it easy to build common layouts with flexbox, such
-as stacked and nested boxes with margin and padding. See this [guide to
-flexbox][flexbox-guide-url].
-
-### Media Queries, pseudo-classes, and pseudo-elements
-
-
-Changing styles and/or the render tree in response to device adaptation can be
-controlled in JavaScript, e.g.,
-[react-media-queries](https://github.com/bloodyowl/react-media-queries),
-[media-query-fascade](https://github.com/tanem/media-query-facade), or
-[react-responsive](https://github.com/contra/react-responsive). This has the
-benefit of co-locating breakpoint-specific DOM and style changes.
-
-Pseudo-classes like `:hover` and `:focus` can be implemented with the `onHover`
-and `onFocus` events.
-
-Pseudo-elements are not supported.
-
-## Accessibility
-
-On the Web, assistive technologies derive useful information about the
-structure, purpose, and interactivity of apps from their [HTML
-elements][html-accessibility-url], attributes, and [ARIA in
-HTML][aria-in-html-url].
-
-The most common and best supported accessibility features of the Web are
-exposed as the props: `accessible`, `accessibilityLabel`,
-`accessibilityLiveRegion`, and `accessibilityRole`.
-
-React Native for Web does not provide a way to directly control the rendered
-HTML element. The `accessibilityRole` prop is used to infer an [analogous HTML
-element][html-aria-url] to use in addition, where possible. While this may
-contradict some ARIA recommendations, it also helps avoid certain HTML5
-conformance errors and accessibility anti-patterns (e.g., giving a `heading`
-role to a `button` element).
-
-For example:
-
-* `<View accessibilityRole='article' />` => `<article role='article' />`.
-* `<View accessibilityRole='banner' />` => `<header role='banner' />`.
-* `<View accessibilityRole='button' />` => `<button type='button' role='button' />`.
-* `<Text accessibilityRole='link' href='/' />` => `<a role='link' href='/' />`.
-* `<View accessibilityRole='main' />` => `<main role='main' />`.
-
-See the component documentation for more details.
-
-## Contributing
-
-Please read the [contribution guidelines][contributing-url]. Contributions are
-welcome!
-
-## Thanks
-
-Thanks to current and past members of the React and React Native teams (in
-particular Vjeux and Pete Hunt).
-
-Thanks to [react-tappable](https://github.com/JedWatson/react-tappable) for
-backing the current implementation of `Touchable`.
+* [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-player](https://github.com/dabbott/react-native-web-player)
 
 ## License
 
-Copyright (c) 2015 Nicolas Gallagher. Released under the [MIT
-license](http://www.opensource.org/licenses/mit-license.php).
+React Native for Web is [BSD licensed](LICENSE).
 
-[aria-in-html-url]: https://w3c.github.io/aria-in-html/
-[contributing-url]: https://github.com/necolas/react-native-web/blob/master/CONTRIBUTING.md
-[discord-url]: http://join.reactiflux.com
-[flexbox-guide-url]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-[gitter-url]: https://gitter.im/necolas/react-native-web
-[html-accessibility-url]: http://www.html5accessibility.com/
-[html-aria-url]: http://www.w3.org/TR/html-aria/
 [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/

babel/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,104 @@
+// 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 } 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';
+"
+`;
+
+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');
+"
+`;

babel/__tests__/index-test.js

@@ -0,0 +1,39 @@
+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 } 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');",
+    {
+      code: "const RNW = require('react-native');",
+      output: "const RNW = require('react-native');",
+      snapshot: false
+    }
+  ]
+});

babel/index.js

@@ -0,0 +1,148 @@
+const getDistLocation = importName => {
+  const root = 'react-native-web/dist';
+
+  switch (importName) {
+    // apis
+    case 'Animated':
+    case 'AppRegistry':
+    case 'AppState':
+    case 'AsyncStorage':
+    case 'BackAndroid':
+    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':
+    case 'TextPropTypes':
+    case 'ViewPropTypes': {
+      return `${root}/propTypes/${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.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);
+        }
+      },
+      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);
+        }
+      }
+    }
+  };
+};

benchmarks/README.md

@@ -0,0 +1,52 @@
+# Performance
+
+To run these benchmarks:
+
+```
+npm run build:performance
+open ./performance/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).

benchmarks/benchmark.js

@@ -0,0 +1,97 @@
+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;

benchmarks/createRenderBenchmark.js

@@ -0,0 +1,24 @@
+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;

benchmarks/index.html

@@ -0,0 +1,11 @@
+<!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>

benchmarks/index.js

@@ -0,0 +1,69 @@
+import aphrodite from './src/aphrodite';
+import cssModules from './src/css-modules';
+import emotion from './src/emotion';
+import glamor from './src/glamor';
+import jss from './src/jss';
+import radium from './src/radium';
+import reactNative from './src/react-native';
+import reactNativeStyleSheet from './src/react-native-stylesheet';
+import styledComponents from './src/styled-components';
+import styledComponentsPrimitives from './src/styled-components-primitives';
+import styletron from './src/styletron';
+import xp from './src/reactxp';
+
+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),
+  () => renderDeepTree('styled-components/primitives', styledComponentsPrimitives),
+  () => renderWideTree('styled-components/primitives', styledComponentsPrimitives)
+];
+
+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());

benchmarks/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "benchmarks",
+  "private": true,
+  "dependencies": {
+    "aphrodite": "^1.2.3",
+    "classnames": "^2.2.5",
+    "emotion": "^7.2.2",
+    "glamor": "^2.20.40",
+    "marky": "^1.2.0",
+    "radium": "^0.19.4",
+    "react-jss": "^7.1.0",
+    "react-primitives": "^0.4.3",
+    "reactxp": "^0.42.1",
+    "styled-components": "^2.1.2",
+    "styletron-client": "^2.5.7",
+    "styletron-utils": "^2.5.4"
+  },
+  "devDependencies": {
+    "css-loader": "^0.28.7",
+    "style-loader": "^0.18.2"
+  }
+}

benchmarks/src/aphrodite.js

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

benchmarks/src/components/AppText/index.js

@@ -0,0 +1,108 @@
+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;

benchmarks/src/components/AspectRatio/index.js

@@ -0,0 +1,41 @@
+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;

benchmarks/src/components/Box/aphrodite.js

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

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

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

benchmarks/src/components/Box/emotion.js

@@ -0,0 +1,48 @@
+/* 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;

benchmarks/src/components/Box/glamor.js

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

benchmarks/src/components/Box/jss.js

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

benchmarks/src/components/Box/radium.js

@@ -0,0 +1,49 @@
+/* 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);

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

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

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

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

benchmarks/src/components/Box/reactxp.js

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

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

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

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

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

benchmarks/src/components/Box/styles.css

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

benchmarks/src/components/Box/styletron.js

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

benchmarks/src/components/GridView/index.js

@@ -0,0 +1,53 @@
+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;

benchmarks/src/components/Icons/DirectMessage.js

@@ -0,0 +1,20 @@
+/* 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;

benchmarks/src/components/Icons/Heart.js

@@ -0,0 +1,19 @@
+/* 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;

benchmarks/src/components/Icons/Reply.js

@@ -0,0 +1,19 @@
+/* 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;

benchmarks/src/components/Icons/Retweet.js

@@ -0,0 +1,19 @@
+/* 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;

benchmarks/src/components/Icons/styles.js

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

benchmarks/src/components/NestedTree/index.js

@@ -0,0 +1,58 @@
+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;

benchmarks/src/components/Tweet/index.js

@@ -0,0 +1,144 @@
+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;

benchmarks/src/components/TweetAction/index.js

@@ -0,0 +1,78 @@
+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
+  }
+});

benchmarks/src/components/TweetActionsBar/index.js

@@ -0,0 +1,52 @@
+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%'
+  }
+});

benchmarks/src/components/TweetText/index.js

@@ -0,0 +1,29 @@
+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;

benchmarks/src/components/TweetTextPart/index.js

@@ -0,0 +1,113 @@
+/* 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;

benchmarks/src/components/UserAvatar/index.js

@@ -0,0 +1,65 @@
+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;

benchmarks/src/components/UserNames/index.js

@@ -0,0 +1,52 @@
+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;

benchmarks/src/components/View/aphrodite.js

@@ -0,0 +1,31 @@
+/* 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;

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

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

benchmarks/src/components/View/emotion.js

@@ -0,0 +1,29 @@
+/* eslint-disable react/prop-types */
+import { css } from 'emotion';
+import React from 'react';
+
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    return <div {...other} className={css([viewStyle, ...style])} />;
+  }
+}
+
+const viewStyle = {
+  alignItems: 'stretch',
+  borderWidth: 0,
+  borderStyle: 'solid',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexBasis: 'auto',
+  flexDirection: 'column',
+  flexShrink: 0,
+  margin: 0,
+  padding: 0,
+  position: 'relative',
+  // fix flexbox bugs
+  minHeight: 0,
+  minWidth: 0
+};
+
+export default View;

benchmarks/src/components/View/glamor.js

@@ -0,0 +1,29 @@
+/* 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;

benchmarks/src/components/View/jss.js

@@ -0,0 +1,32 @@
+/* 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);

benchmarks/src/components/View/radium.js

@@ -0,0 +1,31 @@
+/* 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);

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

@@ -0,0 +1,35 @@
+/* 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;

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

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

benchmarks/src/components/View/styles.css

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

benchmarks/src/components/View/styletron.js

@@ -0,0 +1,33 @@
+/* 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;

benchmarks/src/components/theme.js

@@ -0,0 +1,40 @@
+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;

benchmarks/src/css-modules.js

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

benchmarks/src/emotion.js

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

benchmarks/src/glamor.js

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

benchmarks/src/jss.js

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

benchmarks/src/radium.js

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

benchmarks/src/react-native-stylesheet.js

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

benchmarks/src/react-native.js

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

benchmarks/src/reactxp.js

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

benchmarks/src/styled-components-primitives.js

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

benchmarks/src/styled-components.js

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

benchmarks/src/styletron.js

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

benchmarks/tests/renderDeepTree.js

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

benchmarks/tests/renderTweet.js

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

benchmarks/tests/renderWideTree.js

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

benchmarks/webpack.config.js

@@ -0,0 +1,57 @@
+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')
+    }
+  }
+};

config/constants.js

@@ -1,11 +0,0 @@
-var path = require('path')
-
-var ROOT = path.join(__dirname, '..')
-
-module.exports = {
-  DIST_DIRECTORY: path.join(ROOT, 'dist'),
-  EXAMPLES_DIRECTORY: path.join(ROOT, 'examples'),
-  SRC_DIRECTORY: path.join(ROOT, 'src'),
-  ROOT_DIRECTORY: ROOT,
-  TEST_ENTRY: path.join(ROOT, 'tests.webpack.js')
-}

config/karma.config.js

@@ -1,55 +0,0 @@
-var constants = require('./constants')
-var webpack = require('webpack')
-
-module.exports = function (config) {
-  config.set({
-    basePath: constants.ROOT_DIRECTORY,
-    browsers: process.env.TRAVIS ? [ 'Firefox' ] : [ 'Chrome' ],
-    browserNoActivityTimeout: 60000,
-    client: {
-      captureConsole: true,
-      mocha: { ui: 'tdd' },
-      useIframe: true
-    },
-    files: [
-      constants.TEST_ENTRY
-    ],
-    frameworks: [ 'mocha' ],
-    plugins: [
-      'karma-chrome-launcher',
-      'karma-firefox-launcher',
-      'karma-mocha',
-      'karma-sourcemap-loader',
-      'karma-spec-reporter',
-      'karma-webpack'
-    ],
-    preprocessors: {
-      [constants.TEST_ENTRY]: [ 'webpack', 'sourcemap' ]
-    },
-    reporters: process.env.TRAVIS ? [ 'dots' ] : [ 'spec' ],
-    singleRun: true,
-    webpack: {
-      devtool: 'inline-source-map',
-      module: {
-        loaders: [
-          {
-            test: /\.js$/,
-            exclude: /node_modules/,
-            loader: 'babel',
-            query: { cacheDirectory: true }
-          }
-        ]
-      },
-      plugins: [
-        new webpack.DefinePlugin({
-          'process.env': {
-            NODE_ENV: JSON.stringify('test')
-          }
-        })
-      ]
-    },
-    webpackServer: {
-      noInfo: true
-    }
-  })
-}

config/webpack.config.base.js

@@ -1,43 +0,0 @@
-var webpack = require('webpack')
-
-var DedupePlugin = webpack.optimize.DedupePlugin
-var DefinePlugin = webpack.DefinePlugin
-var OccurenceOrderPlugin = webpack.optimize.OccurenceOrderPlugin
-var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin
-
-var plugins = [
-  new DedupePlugin(),
-  new OccurenceOrderPlugin()
-]
-
-if (process.env.NODE_ENV === 'production') {
-  plugins.push(
-    new DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    })
-  )
-  plugins.push(
-    new UglifyJsPlugin({
-      compress: {
-        dead_code: true,
-        drop_console: true,
-        screw_ie8: true,
-        warnings: true
-      }
-    })
-  )
-}
-
-module.exports = {
-  module: {
-    loaders: [
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: { cacheDirectory: true }
-      }
-    ]
-  },
-  plugins: plugins
-}

config/webpack.config.example.js

@@ -1,17 +0,0 @@
-var assign = require('object-assign')
-var base = require('./webpack.config.base')
-var constants = require('./constants')
-var path = require('path')
-
-module.exports = assign({}, base, {
-  devServer: {
-    contentBase: constants.EXAMPLES_DIRECTORY
-  },
-  entry: {
-    example: path.join(constants.EXAMPLES_DIRECTORY, 'index')
-  },
-  output: {
-    filename: 'examples.js',
-    path: constants.DIST_DIRECTORY
-  }
-})

config/webpack.config.publish.js

@@ -1,19 +0,0 @@
-var assign = require('object-assign')
-var base = require('./webpack.config.base')
-var constants = require('./constants')
-
-module.exports = assign({}, base, {
-  entry: {
-    main: constants.SRC_DIRECTORY
-  },
-  externals: [{
-    'react': true,
-    'react-dom': true
-  }],
-  output: {
-    filename: 'react-native-web.js',
-    library: 'ReactNativeWeb',
-    libraryTarget: 'commonjs2',
-    path: constants.DIST_DIRECTORY
-  }
-})

docs/apis/StyleSheet.md

@@ -1,165 +0,0 @@
-# StyleSheet
-
-React Native for Web will automatically vendor-prefix styles applied to the
-library's components. The `StyleSheet` abstraction converts predefined styles
-to CSS without a compile-time step. Some styles cannot be resolved outside of
-the render loop and are applied as inline styles.
-
-Create a new StyleSheet:
-
-```js
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 4,
-    borderWidth: 0.5,
-    borderColor: '#d6d7da',
-  },
-  title: {
-    fontSize: 19,
-    fontWeight: 'bold',
-  },
-  activeTitle: {
-    color: 'red',
-  },
-})
-```
-
-Use styles:
-
-```js
-<View style={styles.container}>
-  <Text
-    style={{
-      ...styles.title,
-      ...(this.props.isActive && styles.activeTitle)
-    }}
-  />
-</View>
-```
-
-Render styles on the server or in the browser:
-
-```js
-StyleSheet.renderToString()
-```
-
-## Methods
-
-**create**(obj: {[key: string]: any})
-
-**destroy**()
-
-Clears all style information.
-
-**renderToString**()
-
-Renders a CSS Style Sheet.
-
-## About
-
-### Strategy
-
-React Native for Web uses a `style`-to-`className` conversion strategy that is
-designed to avoid issues arising from the [7 deadly sins of
-CSS](https://speakerdeck.com/vjeux/react-css-in-js):
-
-1. Global namespace
-2. Dependency hell
-3. Dead code elimination
-4. Code minification
-5. Sharing constants
-6. Non-deterministic resolution
-7. Breaking isolation
-
-The strategy also minimizes the amount of generated CSS, making it more viable
-to inline the style sheet when pre-rendering pages on the server. There is one
-unique selector per unique style _declaration_.
-
-```js
-// definition
-{
-  heading: {
-    color: 'gray',
-    fontSize: '2rem'
-  },
-  text: {
-    color: 'gray',
-    fontSize: '1.25rem'
-  }
-}
-
-// css
-//
-// .a { color: gray; }
-// .b { font-size: 2rem; }
-// .c { font-size: 1.25rem; }
-```
-
-For example:
-
-```js
-<View style={styles.root}>...</View>
-
-const styles = StyleSheet.create({
-  root: {
-    background: 'transparent',
-    display: 'flex',
-    flexGrow: 1,
-    justifyContent: 'center'
-  }
-})
-```
-
-Yields (in development):
-
-```html
-<div className="background:transparent display:flex flexGrow:1 justifyContent:center">...</div>
-```
-
-And is backed by the following CSS:
-
-```css
-.background\:transparent {background:transparent;}
-.display\:flex {display:flex;}
-.flexGrow\:1 {flex-grow:1;}
-.justifyContext\:center {justify-content:center;}
-```
-
-In production the class names are obfuscated.
-
-(CSS libraries like [Atomic CSS](http://acss.io/),
-[Basscss](http://www.basscss.com/), [SUIT CSS](https://suitcss.github.io/), and
-[tachyons](http://tachyons.io/) are attempts to limit style scope and limit
-style sheet growth in a similar way. But they're CSS utility libraries, each with a
-particular set of classes and features to learn. All of them require developers
-to manually connect CSS classes for given styles.)
-
-### Reset
-
-React Native for Web includes a very small CSS reset taken from
-[normalize.css](https://necolas.github.io/normalize.css/). It removes unwanted
-User Agent styles from (pseudo-)elements beyond the reach of React (e.g.,
-`html`, `body`) or inline styles (e.g., `::-moz-focus-inner`).
-
-```css
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-
-body {
-  margin: 0;
-}
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-```

docs/components/Image.md

@@ -1,145 +0,0 @@
-# Image
-
-An accessibile image component with support for image resizing, default image,
-and child content.
-
-Unsupported React Native props:
-`capInsets` (ios),
-`onProgress` (ios)
-
-## Props
-
-**accessibilityLabel**: string
-
-The text that's read by a screenreader when someone interacts with the image.
-
-**accessible**: 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
-
-TODO
-
-**onLoad**: function
-
-Invoked when load completes successfully.
-
-**onLoadEnd**: function
-
-Invoked when load either succeeds or fails,
-
-**onLoadStart**: function
-
-Invoked on load start.
-
-**resizeMode**: oneOf('contain', 'cover', 'none', 'stretch') = 'stretch'
-
-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)
-
-Defaults:
-
-```js
-{
-  alignSelf: 'flex-start',
-  backgroundColor: 'transparent'
-}
-```
-
-**testID**: string
-
-Used to locate a view in end-to-end tests.
-
-## Examples
-
-```js
-import placeholderAvatar from './placeholderAvatar.png'
-import React, { Component, Image, PropTypes, StyleSheet } from 'react-native-web'
-
-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
-  }
-})
-```

docs/components/ListView.md

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

docs/components/ScrollView.md

@@ -1,83 +0,0 @@
-# ScrollView
-
-Scrollable `View` for use with bounded height, either by setting the height of
-the view directly (discouraged) or by bounding the height of ancestor views.
-
-## Props
-
-**children**: any
-
-Child content.
-
-**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.
-
-**onScroll**: function
-
-Fires at most once per frame during scrolling. The frequency of the events can
-be contolled using the `scrollEventThrottle` prop.
-
-**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 (in
-events per seconds). A higher 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.
-
-**style**: style
-
-+ ...[View#style](View.md)
-
-## Examples
-
-```js
-import React, { Component, ScrollView, StyleSheet } from 'react-native-web'
-import Item from './Item'
-
-export default class ScrollViewExample extends Component {
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      items: Array.from({ length: 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={60}
-        style={styles.root}
-      />
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    borderWidth: 1
-  },
-  container: {
-    padding: 10
-  }
-})
-```

docs/components/Text.md

@@ -1,127 +0,0 @@
-# Text
-
-`Text` is component for displaying text. It supports style, basic touch
-handling, and inherits typographic styles from ancestor elements.
-
-The `Text` is unique relative to layout: child elements use text layout
-(`inline`) rather than flexbox layout. This means that elements inside of a
-`Text` are not rectangles, as they wrap when reaching the edge of their
-container.
-
-Unsupported React Native props:
-`allowFontScaling` (ios),
-`suppressHighlighting` (ios)
-
-## Props
-
-NOTE: `Text` will transfer all other props to the rendered HTML element.
-
-(web) **accessibilityLabel**: string
-
-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.
-
-(web) **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`.
-
-**onPress**: function
-
-This function is called on press.
-
-**style**: style
-
-+ ...[View#style](View.md)
-+ `color`
-+ `fontFamily`
-+ `fontSize`
-+ `fontStyle`
-+ `fontWeight`
-+ `letterSpacing`
-+ `lineHeight`
-+ `textAlign`
-+ `textDecoration`
-+ `textTransform`
-+ `whiteSpace`
-+ `wordWrap`
-+ `writingDirection`
-
-**testID**: string
-
-Used to locate this view in end-to-end tests.
-
-## Examples
-
-```js
-import React, { Component, PropTypes, StyleSheet, Text } from 'react-native-web'
-
-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,
-          ...styles.color[color],
-          ...styles.size[size],
-          ...styles.weight[weight]
-        }}
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  color: {
-    white: { color: 'white' },
-    gray: { color: 'gray' },
-    red: { color: 'red' }
-  },
-  size: {
-    small: { fontSize: '0.85rem', padding: '0.5rem' },
-    normal: { fontSize: '1rem', padding: '0.75rem' },
-    large: { fontSize: '1.5rem', padding: '1rem' }
-  },
-  weight: {
-    light: { fontWeight: '300' },
-    normal: { fontWeight: '400' },
-    bold: { fontWeight: '700' }
-  }
-})
-```

docs/components/TextInput.md

@@ -1,197 +0,0 @@
-# TextInput
-
-Accessible single- and multi-line text input via a keyboard. Supports features
-such as auto-complete, auto-focus, placeholder text, and event callbacks.
-
-Note: some props are exclusive to or excluded from `multiline`.
-
-Unsupported React Native props:
-`autoCapitalize`,
-`autoCorrect`,
-`onEndEditing`,
-`onSubmitEditing`,
-`clearButtonMode` (ios),
-`enablesReturnKeyAutomatically` (ios),
-`returnKeyType` (ios),
-`selectionState` (ios),
-`textAlign` (android),
-`textAlignVertical` (android),
-`underlineColorAndroid` (android)
-
-## Props
-
-(web) **accessibilityLabel**: string
-
-Defines the text label available to assistive technologies upon interaction
-with the element. (This is implemented using `aria-label`.)
-
-(web) **autoComplete**: bool = false
-
-Indicates whether the value of the control can be automatically completed by the browser.
-
-**autoFocus**: bool = false
-
-If true, focuses the input on `componentDidMount`. Only the first form element
-in a document with `autofocus` is focused.
-
-**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.
-
-**onLayout**: function
-
-TODO
-
-(web) **onSelectionChange**: function
-
-Callback that is called when the text input's selection changes. The following
-object is passed as an argument to the callback handler.
-
-```js
-{
-  selectionDirection,
-  selectionEnd,
-  selectionStart,
-  nativeEvent
-}
-```
-
-**placeholder**: string
-
-The string that will be rendered in an empty `TextInput` before text has been
-entered.
-
-**placeholderTextColor**: string
-
-The text color of the placeholder string.
-
-**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`.)
-
-**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}`.
-
-## Examples
-
-```js
-import React, { Component, StyleSheet, TextInput } from 'react-native-web'
-
-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'
-  }
-})
-```

docs/components/Touchable.md

@@ -1,100 +0,0 @@
-# Touchable
-
-A wrapper for making views respond to mouse, keyboard, and touch presses. On
-press in, the touchable area can display a highlight color, and the opacity of
-the wrapped view can be decreased.
-
-This component combines the various `Touchable*` components from React Native.
-
-Unsupported React Native props:
-`accessibilityComponentType` (android) – use `accessibilityRole`,
-`accessibilityTraits` (ios) – use `accessibilityRole`,
-`onHideUnderlay` – use `onPressOut`,
-`onShowUnderlay` – use `onPressIn`,
-`underlayColor` – use `activeUnderlayColor`
-
-## Props
-
-**accessibilityLabel**: string
-
-Overrides the text that's read by the screen reader when the user interacts
-with the element.
-
-(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 screenreaders.
-
-**activeOpacity**: number = 1
-
-Sets the opacity of the child view when `onPressIn` is called. The opacity is
-reset when `onPressOut` is called.
-
-(web) **activeUnderlayColor**: string = 'transparent'
-
-Sets the color of the background highlight when `onPressIn` is called. The
-highlight is removed when `onPressOut` is called.
-
-**children**: element
-
-A single child element.
-
-**delayLongPress**: number = 1000
-
-Delay in ms, from `onPressIn`, before `onLongPress` is called.
-
-**delayPressIn**: number = 0
-
-(TODO)
-
-Delay in ms, from the start of the touch, before `onPressIn` is called.
-
-**delayPressOut**: number = 0
-
-(TODO)
-
-Delay in ms, from the release of the touch, before `onPressOut` is called.
-
-**onLayout**: function
-
-(TODO)
-
-**onLongPress**: function
-
-**onPress**: function
-
-**onPressIn**: function
-
-**onPressOut**: function
-
-**style**: style
-
-+ ...[View#style](View.md)
-
-## Examples
-
-```js
-import React, { Component, PropTypes, Touchable } from 'react-native-web'
-
-export default class Example extends Component {
-  static propTypes = {}
-
-  static defaultProps = {}
-
-  render() {
-    return (
-      <Touchable />
-    )
-  }
-}
-```

docs/components/View.md

@@ -1,194 +0,0 @@
-# View
-
-`View` is the fundamental UI building block. It is a component that supports
-style, layout with flexbox, and accessibility controls. It can be nested
-inside another `View` and has 0-to-many children of any type.
-
-Unsupported React Native props:
-`accessibilityComponentType` (android) – use `accessibilityRole`,
-`accessibilityTraits` (ios) – use `accessibilityRole`,
-`collapsable` (android),
-`importantForAccessibility` (android),
-`needsOffscreenAlphaCompositing` (android),
-`onAccessibilityTap`,
-`onMagicTap`,
-`onMoveShouldSetResponder`,
-`onResponder*`,
-`onStartShouldSetResponder`,
-`onStartShouldSetResponderCapture`
-`removeClippedSubviews` (ios),
-`renderToHardwareTextureAndroid` (android),
-`shouldRasterizeIOS` (ios)
-
-## 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
-
-(TODO)
-
-**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`
-+ `borderRadius`
-+ `borderStyle`
-+ `borderWidth`
-+ `bottom`
-+ `boxShadow`
-+ `boxSizing`
-+ `cursor`
-+ `flexBasis`
-+ `flexDirection`
-+ `flexGrow`
-+ `flexShrink`
-+ `flexWrap`
-+ `height`
-+ `justifyContent`
-+ `left`
-+ `margin`
-+ `marginBottom`
-+ `marginHorizontal`
-+ `marginLeft`
-+ `marginRight`
-+ `marginTop`
-+ `marginVertical`
-+ `maxHeight`
-+ `maxWidth`
-+ `minHeight`
-+ `minWidth`
-+ `opacity`
-+ `order`
-+ `overflow`
-+ `overflowX`
-+ `overflowY`
-+ `padding`
-+ `paddingBottom`
-+ `paddingHorizontal`
-+ `paddingLeft`
-+ `paddingRight`
-+ `paddingTop`
-+ `paddingVertical`
-+ `position`
-+ `right`
-+ `top`
-+ `transform`
-+ `userSelect`
-+ `visibility`
-+ `width`
-+ `zIndex`
-
-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, StyleSheet, View } from 'react-native-web'
-
-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
-  }
-})
-```

docs/guides/accessibility.md

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

docs/guides/advanced.md

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

docs/guides/direct-manipulation.md

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

docs/guides/getting-started.md

@@ -0,0 +1,211 @@
+# Getting started
+
+This guide will help you to correctly configure build and test tools to work
+with React Native for Web. (Alternatively, you can quickly setup a local
+project using the starter kits listed in the README.)
+
+It is recommended that your application provide a `Promise` and `Array.from`
+polyfill.
+
+## Web packager
+
+[Webpack](https://webpack.js.org) is a popular build tool for web apps. Below is an
+example of how to configure a build that uses [Babel](https://babeljs.io/) to
+compile your JavaScript for the web.
+
+Create a `web/webpack.config.js` file:
+
+```js
+// web/webpack.config.js
+
+// This is needed for webpack to compile JavaScript.
+// Many OSS React Native packages are not compiled to ES5 before being
+// published. If you depend on uncompiled packages they may cause webpack build
+// errors. To fix this webpack can be configured to compile to the necessary
+// `node_module`.
+const babelLoaderConfiguration = {
+  test: /\.js$/,
+  // Add every directory that needs to be compiled by Babel during the build
+  include: [
+    path.resolve(__dirname, 'src'),
+    path.resolve(__dirname, 'node_modules/react-native-uncompiled')
+  ],
+  use: {
+    loader: 'babel-loader',
+    options: {
+      cacheDirectory: true,
+      // This aliases 'react-native' to 'react-native-web' and includes only
+      // the modules needed by the app
+      plugins: ['react-native-web/babel']
+      // The 'react-native' preset is recommended (or use your own .babelrc)
+      presets: ['react-native']
+    }
+  }
+};
+
+// This is needed for webpack to import static images in JavaScript files
+const imageLoaderConfiguration = {
+  test: /\.(gif|jpe?g|png|svg)$/,
+  use: {
+    loader: 'url-loader',
+    options: {
+      name: '[name].[ext]'
+    }
+  }
+};
+
+module.exports = {
+  // ...the rest of your config
+
+  module: {
+    rules: [
+      babelLoaderConfiguration,
+      imageLoaderConfiguration
+    ]
+  },
+
+  plugins: [
+    // `process.env.NODE_ENV === 'production'` must be `true` for production
+    // builds to eliminate development checks and reduce build size. You may
+    // wish to include additional optimizations.
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ],
+
+  resolve: {
+    // If you're working on a multi-platform React Native app, web-specific
+    // module implementations should be written in files using the extension
+    // `.web.js`.
+    extensions: [ '.web.js', '.js' ]
+  }
+}
+```
+
+To run in development:
+
+```
+./node_modules/.bin/webpack-dev-server -d --config web/webpack.config.js --inline --hot --colors
+```
+
+To build for production:
+
+```
+./node_modules/.bin/webpack -p --config web/webpack.config.js
+```
+
+Please refer to the Webpack documentation for more information on configuration.
+
+## Web entry
+
+Create a `index.web.js` file (or simply `index.js` for web-only apps).
+
+### Client-side rendering
+
+Rendering using `AppRegistry`:
+
+```js
+// index.web.js
+
+import App from './src/App';
+import React from 'react';
+import ReactNative, { AppRegistry } from 'react-native';
+
+// register the app
+AppRegistry.registerComponent('App', () => App);
+
+AppRegistry.runApplication('App', {
+  initialProps: {},
+  rootTag: document.getElementById('react-app')
+});
+```
+
+Rendering within existing web apps is also possible using `ReactNative`:
+
+```js
+import AppHeader from './src/AppHeader';
+import React from 'react';
+import ReactNative from 'react-native';
+
+// use .hydrate if hydrating a SSR app
+ReactNative.render(<AppHeader />, document.getElementById('react-app-header'))
+```
+
+And finally, `react-native-web` components will also be rendering within a tree
+produced by calling `ReactDOM.render` (i.e., an existing web app), but
+otherwise it is not recommended.
+
+### Server-side rendering
+
+Server-side rendering is supported using the `AppRegistry`:
+
+```js
+import App from './src/App';
+import ReactDOMServer from 'react-dom/server'
+import ReactNative, { AppRegistry } from 'react-native'
+
+// register the app
+AppRegistry.registerComponent('App', () => App)
+
+// prerender the app
+const { element, stylesheets } = AppRegistry.getApplication('App', { initialProps });
+const initialHTML = ReactDOMServer.renderToString(element);
+const initialStyles = stylesheets.map((sheet) => ReactDOMServer.renderToStaticMarkup(sheet)).join('\n');
+
+// construct HTML document
+const document = `
+<!DOCTYPE html>
+<html>
+<head>
+${initialStyles}
+</head>
+<body>
+${initialHTML}
+`
+```
+
+## Web-specific code
+
+Minor platform differences can use the `Platform` module.
+
+```js
+import { Platform } from 'react-native';
+
+const styles = StyleSheet.create({
+  height: (Platform.OS === 'web') ? 200 : 100,
+});
+```
+
+More significant platform differences should use platform-specific files (see
+the webpack configuration above for resolving `*.web.js` files):
+
+For example, with the following files in your project:
+
+```
+MyComponent.android.js
+MyComponent.ios.js
+MyComponent.web.js
+```
+
+And the following import:
+
+```js
+import MyComponent from './MyComponent';
+```
+
+React Native will automatically import the correct variant for each specific
+target platform.
+
+## Testing with Jest
+
+[Jest](https://facebook.github.io/jest/) also needs to map `react-native` to `react-native-web`.
+
+```
+"jest": {
+  "moduleNameMapper": {
+    "react-native": "<rootDir>/node_modules/react-native-web"
+  }
+}
+```
+
+Please refer to the Jest documentation for more information.

docs/guides/internationalization.md

@@ -0,0 +1,29 @@
+# Internationalization
+
+To support right-to-left languages, application layout can be automatically
+flipped from LTR to RTL. The `I18nManager` API can be used to help with more
+fine-grained control and testing of RTL layouts.
+
+## Working with icons and images
+
+Icons and images that must match the LTR or RTL layout of the app need to be manually flipped.
+
+Either use a transform style:
+
+```js
+<Image
+  source={...}
+  style={{ transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }] }}
+/>
+```
+
+Or replace the source asset:
+
+```js
+import imageSourceLTR from './back.png';
+import imageSourceRTL from './forward.png';
+
+<Image
+  source={I18nManager.isRTL ? imageSourceRTL : imageSourceLTR}
+/>
+```

docs/guides/known-issues.md

@@ -0,0 +1,31 @@
+# Known issues
+
+## Safari flexbox performance
+
+Safari version prior to 10.1 can suffer from extremely [poor flexbox
+performance](https://bugs.webkit.org/show_bug.cgi?id=150445). The recommended
+way to work around this issue (as used on mobile.twitter.com) is to set
+`display:block` on Views in your element hierarchy that you know don't need
+flexbox layout.
+
+## Missing modules and components
+
+Not all of the views present on iOS/Android are currently available on Web. We
+are very much interested in the community's feedback on the next set of modules
+and views.
+
+Not all the modules or views for iOS/Android can be implemented on Web. In some
+cases it will be necessary to use a Web counterpart or to guard the use of a
+module with `Platform.OS` (e.g. `NativeModules`)
+
+## Missing component props
+
+There are properties that do not work across all platforms. All web-specific
+props are annotated with `(web)` in the documentation.
+
+## Platform parity
+
+There are some known issues in React Native where APIs could be made more
+consistent between platforms. For example, React Native for Web includes
+`ActivityIndicator` and a horizontal `ProgressBar` for Web use, in anticipation
+of the convergence between the iOS and Android components in React Native.

docs/guides/style.md

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

docs/package.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "build": "yarn && build-storybook -o ./dist -c ./storybook/.storybook",
+    "start": "start-storybook -p 9001 -c ./storybook/.storybook",
+    "release": "yarn build && git checkout gh-pages && rm -rf ../storybook && mv dist ../storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -"
+  },
+  "dependencies": {
+    "@storybook/addon-options": "^3.1.6",
+    "@storybook/react": "^3.1.9"
+  }
+}