0.9.13

Fix #1217

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "./scripts/babel/preset"
+  ]
+}

.eslintignore

@@ -0,0 +1,5 @@
+coverage
+dist
+node_modules
+packages/**/vendor/*
+packages/examples

.eslintrc

@@ -25,7 +25,8 @@
     "document": false,
     "navigator": false,
     "window": false,
-    // Flow global types
+    // Flow global types,
+    "$Enum": false,
     "HTMLInputElement": false,
     "ReactClass": false,
     "ReactComponent": false,
@@ -56,6 +57,7 @@
     "no-dupe-class-members": 2,
     "no-dupe-keys": 2,
     "no-duplicate-case": 2,
+    "no-duplicate-imports": 2,
     "no-empty-character-class": 2,
     "no-empty-pattern": 2,
     "no-eval": 2,

.flowconfig

@@ -1,14 +1,17 @@
+[version]
+^0.63.0
+
 [ignore]
-.*/__tests__/.*
-.*/benchmarks/.*
-.*/docs/.*
-.*/node_modules/animated/*
+<PROJECT_ROOT>/.*/__tests__/.*
+<PROJECT_ROOT>/packages/.*/dist/.*
+<PROJECT_ROOT>/packages/examples/.*
+<PROJECT_ROOT>/packages/website/.*
 .*/node_modules/babel-plugin-transform-react-remove-prop-types/*
 
 [include]
 
 [libs]
-types
+<PROJECT_ROOT>/types
 
 [options]
-unsafe.enable_getters_and_setters=true
+

.github/CONTRIBUTING.md

@@ -4,7 +4,8 @@
 
 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.
+issue hasn't already been reported. Please note that your issue may be closed
+if it doesn't include the information requested in the issue template.
 
 ## Getting started
 
@@ -17,7 +18,7 @@ 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):
+Install dependencies (requires [yarn](https://yarnpkg.com/en/docs/install)):
 
 ```
 yarn
@@ -25,6 +26,12 @@ yarn
 
 ## Automated tests
 
+To run the linter:
+
+```
+yarn lint
+```
+
 To run flow:
 
 ```
@@ -40,62 +47,57 @@ yarn jest
 …in watch mode:
 
 ```
-yarn jest:watch
+yarn jest --watch
 ```
 
-To run all automated tests:
+To run all these 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`:
+To compile the `react-native-web` source code:
 
 ```
 yarn compile
 ```
 
-To create a UMD bundle of the library:
+…in watch mode:
 
 ```
-yarn build
+yarn compile --watch
 ```
 
-### Pre-commit
+## Website and visual tests
 
-To format and lint code before commit:
+To run the interactive storybook:
 
 ```
-yarn precommit
+yarn website
 ```
 
-To format and lint the entire project:
+When you're also making changes to the 'react-native-web' source files, run this command in another process:
 
 ```
-yarn fmt
-yarn lint
+yarn compile --watch
+```
+
+## Benchmarks
+
+To run the benchmarks locally:
+
+```
+yarn benchmarks
+open ./packages/benchmarks/dist/index.html
+```
+
+To develop against these benchmarks:
+
+```
+yarn compile --watch
+yarn benchmarks --watch
 ```
 
 ### New Features
@@ -106,13 +108,12 @@ that we won't want to accept.
 
 ## Pull requests
 
-**Before submitting a pull request,** please make sure the following is done:
+**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.
 
@@ -123,3 +124,18 @@ 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!
+
+## Releases
+
+To commit, publish, and push a final version:
+
+```
+yarn release <version>
+```
+
+Release candidates or versions that you'd like to publish to npm, but do not
+want to produce a commit and push it to GitHub:
+
+```
+yarn release <version> --skip-git
+```

.github/ISSUE_TEMPLATE.md

@@ -1,20 +0,0 @@
-**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/ISSUE_TEMPLATE/bug.md

@@ -0,0 +1,52 @@
+---
+name: "\U0001F41B Bug report"
+about: "If something isn't working as expected \U0001F914"
+
+---
+
+<!--
+Thank you for reporting an issue. Please note that an issue must include the
+information that is marked as REQUIRED below, or it may be closed.
+-->
+
+**The problem**
+<!--
+REQUIRED: A clear and concise description of the bug or problem.
+-->
+
+**How to reproduce**
+<!--
+REQUIRED: Create a test case by forking this template https://codesandbox.io/s/6lx6ql1w5r
+
+Failing to include a reduced test case may result in the issue being closed,
+and will delay any potential fix. Your application or GitHub project is NOT
+considered a reduced test case. If the issue only affects certain browsers,
+providing screenshots is also helpful.
+-->
+Simplified test case: <!-- add link here -->
+
+Steps to reproduce:
+1.
+2.
+3.
+
+**Expected behavior**
+<!--
+REQUIRED: A clear and concise description of what you expected to happen.
+
+Please check that the behaviour is not expected React Native behaviour by
+running your test case on iOS or Android using https://snack.expo.io.
+-->
+
+**Environment (include versions). Did this work in previous versions?**
+
+* React Native for Web (version): TBC
+* React (version): TBC
+* Browser: TBC
+
+<!--
+OPTIONAL:
+
+**Additional context**
+Add any other context about the problem here.
+-->

.github/ISSUE_TEMPLATE/feature.md

@@ -0,0 +1,17 @@
+---
+name: "\U0001F680 Feature request"
+about: If you have a suggestion
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+<!-- A clear and concise description of what the problem is, e.g., I have an issue when [...] -->
+
+**Describe a solution you'd like**
+<!-- A clear and concise description of what you want to happen. Add any considered drawbacks. -->
+
+**Describe alternatives you've considered**
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+**Additional context**
+<!-- Add any other context or screenshots about the feature request here. -->

.github/PULL_REQUEST_TEMPLATE.md

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

.gitignore

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

.prettierignore

@@ -0,0 +1,5 @@
+coverage
+dist
+node_modules
+packages/**/vendor/*
+packages/examples

.travis.yml

@@ -1,9 +1,17 @@
 language: node_js
+
 node_js:
-  - "6"
-before_script:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+  - "8"
+
+before_install:
+  # Install Yarn
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH=$HOME/.yarn/bin:$PATH
+
+cache:
+  yarn: true
+  directories:
+    - node_modules
+
 script:
-  - npm run lint
-  - npm test
+  - yarn test

LICENSE

@@ -1,31 +1,22 @@
-BSD License
+MIT License
 
-For React Native software
+Copyright (c) 2015-present, Nicolas Gallagher.
+Copyright (c) 2015-present, Facebook, Inc.
 
-Copyright (c) 2015-present, Nicolas Gallagher. All rights reserved.
-Copyright (c) 2015-present, Facebook, Inc. All rights reserved.
+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:
 
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of 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.
+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.

README.md

@@ -1,128 +1,246 @@
 # React Native for Web
 
-[![Build Status][travis-image]][travis-url]
-[![npm version][npm-image]][npm-url]
+[![npm version][package-badge]][package-url] [![Build Status][ci-badge]][ci-url] [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
 
-"React Native for Web" brings the platform-agnostic Components and APIs of
-[React Native][react-native-url] to the Web.
+**Compatibility: React Native 0.55**.
 
-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.
+"React Native for Web" makes it possible to run [React
+Native][react-native-url] components and APIs on the web using React DOM. Check
+out the live demo of the [React Native examples][examples-url] running on the
+web.
 
-## Features
+* **High-quality web interfaces**: makes it easy to
+create [fast](https://github.com/necolas/react-native-web/blob/master/packages/benchmarks/README.md),
+adaptive web UIs in JavaScript. It provides native-quality interactions, support
+for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed
+styles, built-in support for RTL layout, built-in accessibility, and integrates
+with React Dev Tools.
 
-* 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.
+* **Write once, render anywhere**: interoperates with existing React DOM
+components and is compatible with the majority of the React Native API. You can
+develop new components for native and web without rewriting existing code.
+React Native for Web can also render to HTML and critical CSS on the server
+using Node.js.
+
+Who is using React Native in production web apps?
+[Twitter](https://mobile.twitter.com),
+[Major League Soccer](https://matchcenter.mlssoccer.com),
+[Flipkart](https://twitter.com/naqvitalha/status/969577892991549440),
+[Uber](https://www.youtube.com/watch?v=RV9rxrNIxnY),
+[The Times](https://github.com/newsuk/times-components), [DataCamp](https://www.datacamp.com/community/tech/porting-practice-to-web-part1).
+
+Browser support: Chrome, Firefox, Edge, Safari 7+, IE 10+.
 
 ## Quick start
 
-NOTE: React Native for Web supports React/ReactDOM 15.4, 15.5, or 15.6.
+The easiest way to get started is to edit this
+[CodeSandbox](https://codesandbox.io/s/q4qymyp2l6) template (or
+[Glitch](https://glitch.com/edit/#!/react-native)). You don’t need to install
+anything to try it out.
 
-Install in your existing app using `yarn` or `npm`:
-
-```
-yarn add react@15.6 react-dom@15.6 react-native-web
-```
-
-Add the `react-native-web/babel` plugin to your Babel configuration. This will
-alias `react-native` to `react-native-web` and exclude any modules not required
-by the app.
-
-```json
-{
-  "plugins": [
-    "react-native-web/babel"
-  ],
-  "presets": [
-    "react-native"
-  ]
-}
-```
-
-See the [Getting Started](docs/guides/getting-started.md) guide for more details.
+For installation and configuration details please read the [getting
+started](https://github.com/necolas/react-native-web/blob/master/docs/guides/getting-started.md)
+guide.
 
 ## Documentation
 
-The [interactive
-documentation](https://necolas.github.io/react-native-web/storybook/) shows all
-the supported APIs and Components.
+Please refer to the [React Native documentation][react-native-url] for the
+overall API, design details, and information about the [Gesture Responder
+system](https://facebook.github.io/react-native/docs/gesture-responder-system.html)
+and [animations](https://facebook.github.io/react-native/docs/animations.html).
 
-Guides:
+Some components and APIs are extended with additional features for the web. And
+in a few cases, features present for Android or iOS are missing on the web.
+These differences are documented [on the website][website-url].
 
-* [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)
+### Guides
 
-## Starter kits
+These guides provide a detailed look at using React Native to create accessible
+web experiences. Certain web-specific patterns are documented in the "web
+recipes" guide.
 
-* [Glitch](https://glitch.com/edit/#!/react-native-web-playground)
-* [create-react-app](https://github.com/facebookincubator/create-react-app)
-* [react-native-web-starter](https://github.com/grabcode/react-native-web-starter)
-* [react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack)
+* [Getting started](https://github.com/necolas/react-native-web/blob/master/docs/guides/getting-started.md)
+* [Client-side rendering](https://github.com/necolas/react-native-web/blob/master/docs/guides/client-side-rendering.md)
+* [Server-side rendering](https://github.com/necolas/react-native-web/blob/master/docs/guides/server-side-rendering.md)
+* [Style](https://github.com/necolas/react-native-web/blob/master/docs/guides/style.md)
+* [Accessibility](https://github.com/necolas/react-native-web/blob/master/docs/guides/accessibility.md)
+* [Internationalization](https://github.com/necolas/react-native-web/blob/master/docs/guides/internationalization.md)
+* [Direct manipulation](https://github.com/necolas/react-native-web/blob/master/docs/guides/direct-manipulation.md)
+* [Web recipes](https://github.com/necolas/react-native-web/blob/master/docs/guides/web-recipes.md)
+* [Multi-platform apps](https://github.com/necolas/react-native-web/blob/master/docs/guides/multi-platform-apps.md)
+* [Experimental / unstable use](https://github.com/necolas/react-native-web/blob/master/docs/guides/advanced.md)
 
-## Example code
+## Integrations
+
+Examples of using React Native for Web with other web tools:
+
+* [Docz](https://github.com/pedronauck/docz-plugin-react-native)
+* [Gatsby](https://github.com/slorber/gatsby-plugin-react-native-web)
+* [Next.js](https://github.com/zeit/next.js/tree/master/examples/with-react-native-web) (and [example recipes](https://gist.github.com/necolas/f9034091723f1b279be86c7429eb0c96))
+* [Phenomic](https://github.com/phenomic/phenomic/tree/master/examples/react-native-web-app)
+* [Razzle](https://github.com/jaredpalmer/razzle/tree/master/examples/with-react-native-web)
+* [Storybook](https://github.com/necolas/react-native-web/tree/master/packages/website/storybook/.storybook)
+* [Styleguidist](https://github.com/styleguidist/react-styleguidist/tree/master/examples/react-native)
+
+## Examples
+
+Check out all the [React Native examples][examples-url] ([source
+code](https://github.com/necolas/react-native-web/blob/master/packages/examples)).
+There are more examples [on the website][website-url] ([source
+code](https://github.com/necolas/react-native-web/blob/master/packages/website)).
+And here is a simple example to get you started:
 
 ```js
-import React from 'react'
-import { AppRegistry, Image, StyleSheet, Text, View } from 'react-native'
+import React from 'react';
+import { AppRegistry, 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 Photo = ({ uri }) => <Image source={{ uri }} style={styles.image} />
-const App = () => (
-  <Card>
-    <Title>App Card</Title>
-    <Photo uri="/some-photo.jpg" />
-  </Card>
-)
-
-// Styles
-const styles = StyleSheet.create({
-  card: {
-    flexGrow: 1,
-    justifyContent: 'center'
-  },
-  title: {
-    fontSize: '1.25rem',
-    fontWeight: 'bold'
-  },
-  image: {
-    height: 40,
-    marginVertical: 10,
-    width: 40
+class App extends React.Component {
+  render() {
+    return (
+      <View style={styles.box}>
+        <Text style={styles.text}>Hello, world!</Text>
+      </View>
+    );
   }
-})
+}
 
-// App registration and rendering
-AppRegistry.registerComponent('MyApp', () => App)
-AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })
+const styles = StyleSheet.create({
+  box: { padding: 10 },
+  text: { fontWeight: 'bold' }
+});
+
+AppRegistry.registerComponent('App', () => App);
+AppRegistry.runApplication('App', { rootTag: document.getElementById('react-root') });
 ```
 
-## Related projects
+This example will render the `App` into a container on the page.
 
-* [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)
+You'll notice that there is no reference to `react-dom`; the `App` component is
+defined using the platform-agnostic APIs and Components introduced by React
+Native. This allows the app to be rendered to web and native platforms.
+
+## Compatibility with React Native
+
+React Native v0.55
+
+### Components
+
+| Name                     | Status | Notes |
+| :----------------------- | :----- | :---- |
+| ActivityIndicator        | ✓      |  |
+| ART                      | ✓      |  |
+| Button                   | ✓      |  |
+| CheckBox                 | ✓      |  |
+| FlatList                 | ✓      |  |
+| Image                    | ✓      | Missing multiple sources ([#515](https://github.com/necolas/react-native-web/issues/515)) and HTTP headers ([#1019](https://github.com/necolas/react-native-web/issues/1019)). |
+| ImageBackground          | ✓      |  |
+| KeyboardAvoidingView     | (✓)    | Mock. No equivalent web APIs. |
+| ListView                 | ✓      |  |
+| Modal                    | ✘      | Not started ([#1020](https://github.com/necolas/react-native-web/issues/1020)). |
+| Picker                   | ✓      |  |
+| RefreshControl           | ✘      | Not started ([#1027](https://github.com/necolas/react-native-web/issues/1027)). |
+| SafeAreaView             | ✓      |  |
+| ScrollView               | ✓      | Missing momentum scroll events ([#1021](https://github.com/necolas/react-native-web/issues/1021)). |
+| SectionList              | ✓      |  |
+| Slider                   | ✘      | Not started ([#1022](https://github.com/necolas/react-native-web/issues/1022)). |
+| StatusBar                | (✓)    | Mock. No equivalent web APIs. |
+| SwipeableFlatList        | ✓      |  |
+| SwipeableListView        | ✓      |  |
+| Switch                   | ✓      |  |
+| Text                     | ✓      | Missing `onLongPress` ([#1011](https://github.com/necolas/react-native-web/issues/1011)) and `numberOfLines` ([#13](https://github.com/necolas/react-native-web/issues/13)) support. |
+| TextInput                | ✓      | Missing `onContentSizeChange` ([#793](https://github.com/necolas/react-native-web/issues/793)), rich text features ([#1023](https://github.com/necolas/react-native-web/issues/1023)), and auto-expanding behaviour ([#795](https://github.com/necolas/react-native-web/issues/795)). |
+| Touchable                | ✓      | Includes additional support for mouse and keyboard interactions. |
+| TouchableHighlight       | ✓      |  |
+| TouchableNativeFeedback  | ✘      | Not started ([#1024](https://github.com/necolas/react-native-web/issues/1024)). |
+| TouchableOpacity         | ✓      |  |
+| TouchableWithoutFeedback | ✓      |  |
+| View                     | ✓      |  |
+| VirtualizedList          | ✓      |  |
+| WebView                  | ✘      | Not started ([1025](https://github.com/necolas/react-native-web/issues/1025)). |
+| YellowBox                | (✓)    | Mock. No YellowBox functionality. |
+
+### Modules
+
+| Name                     | Status | Notes |
+| :----------------------- | :----- | :---- |
+| AccessibilityInfo        | (✓)    | Mock. No equivalent web APIs. |
+| Alert                    | ✘      | Not started ([#1026](https://github.com/necolas/react-native-web/issues/1026)). |
+| Animated                 | ✓      | Missing `useNativeDriver` support. |
+| AppRegistry              | ✓      | Includes additional support for server rendering with `getApplication`. |
+| AppState                 | ✓      |  |
+| AsyncStorage             | ✓      |  |
+| BackHandler              | (✓)    | Mock. No equivalent web APIs. |
+| CameraRoll               | ✘      | No equivalent web APIs. |
+| Clipboard                | ✓      |  |
+| ColorPropType            | ✓      |  |
+| DeviceInfo               | (✓)    | Limited information. |
+| Dimensions               | ✓      |  |
+| Easing                   | ✓      |  |
+| EdgeInsetsPropType       | ✓      |  |
+| Geolocation              | ✓      |  |
+| I18nManager              | ✓      | Includes additional support for runtime switch to RTL. |
+| ImageEditor              | ✘      | No equivalent web APIs. |
+| ImageStore               | ✘      | No equivalent web APIs. |
+| InteractionManager       | (✓)    |  |
+| Keyboard                 | (✓)    | Mock. |
+| LayoutAnimation          | (✓)    | Missing translation to web animations. |
+| Linking                  | ✓      |  |
+| NativeEventEmitter       | ✓      |  |
+| NativeMethodsMixin       | ✓      |  |
+| NativeModules            | (✓)    | Mocked. Missing ability to load native modules. |
+| NetInfo                  | ✓      | Missing functionality to detect expensive connections as there are no equivalent web APIs. |
+| PanResponder             | ✓      |  |
+| PixelRatio               | ✓      |  |
+| Platform                 | ✓      |  |
+| PointPropType            | ✓      |  |
+| Settings                 | ✘      | No equivalent web APIs. |
+| Share                    | ✓      | Only available over HTTPS. Read about the [Web Share API](https://wicg.github.io/web-share/). |
+| StyleSheet               | ✓      |  |
+| TextPropTypes            | ✓      |  |
+| UIManager                | ✓      |  |
+| Vibration                | ✓      |  |
+| ViewPropTypes            | ✓      |  |
+
+## Contributing
+
+The main purpose of this repository is to help evolve React web and native
+development towards the platform-agnostic design of React Native, and in the
+process make it faster and easier to build high-quality experiences for the web
+with React. Development happens in the open on GitHub, and we are grateful for
+contributing bugfixes and improvements. Read below to learn how you can take
+part in improving React Native for Web.
+
+### Code of conduct
+
+Facebook has adopted a [Code of Conduct][code-of-conduct] that this project
+expects all participants to adhere to. Please read the full text so that you
+can understand what actions will and will not be tolerated.
+
+### Contributing guide
+
+Read the [contributing guide][contributing-url] to learn about the
+development process, how to propose bugfixes and improvements, and how to build
+and test your changes to React Native for Web.
+
+### Good first issues
+
+To help you get you familiar with the contribution process, there is a list of
+[good first issues][good-first-issue-url] that contain bugs which have a
+relatively limited scope. This is a great place to get started.
 
 ## License
 
-React Native for Web is [BSD licensed](LICENSE).
+React Native for Web is [MIT licensed](./LICENSE). By contributing to React
+Native for Web, you agree that your contributions will be licensed under its
+MIT license.
 
-[npm-image]: https://badge.fury.io/js/react-native-web.svg
-[npm-url]: https://npmjs.org/package/react-native-web
+[package-badge]: https://img.shields.io/npm/v/react-native-web.svg?style=flat
+[package-url]: https://yarnpkg.com/en/package/react-native-web
+[ci-badge]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
+[ci-url]: https://travis-ci.org/necolas/react-native-web
+[examples-url]: https://necolas.github.io/react-native-web/examples/
+[website-url]: https://necolas.github.io/react-native-web/storybook/
 [react-native-url]: https://facebook.github.io/react-native/
-[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
-[travis-url]: https://travis-ci.org/necolas/react-native-web
+[contributing-url]: https://github.com/necolas/react-native-web/blob/master/.github/CONTRIBUTING.md
+[good-first-issue-url]: https://github.com/necolas/react-native-web/labels/good%20first%20issue
+[code-of-conduct]: https://code.facebook.com/codeofconduct

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

@@ -1,104 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`1. Rewrite react-native paths for react-native-web 1`] = `
-"
-import { View } from 'react-native';
-
-      ↓ ↓ ↓ ↓ ↓ ↓
-
-import View from 'react-native-web/dist/components/View';
-"
-`;
-
-exports[`2. Rewrite react-native paths for react-native-web 1`] = `
-"
-import { Switch, Text, View as MyView } 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

@@ -1,39 +0,0 @@
-const plugin = require('..');
-const pluginTester = require('babel-plugin-tester');
-
-pluginTester({
-  plugin,
-  snapshot: true,
-  tests: [
-    // import react-native
-    "import { View } from 'react-native';",
-    "import { Switch, Text, View as MyView } 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

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

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

@@ -1,97 +0,0 @@
-import * as marky from 'marky';
-
-const fmt = time => `${Math.round(time * 100) / 100}ms`;
-
-const measure = (name, fn) => {
-  marky.mark(name);
-  fn();
-  const performanceMeasure = marky.stop(name);
-  return performanceMeasure.duration;
-};
-
-const mean = values => {
-  const sum = values.reduce((sum, value) => sum + value, 0);
-  return sum / values.length;
-};
-
-const median = values => {
-  if (!Array.isArray(values)) {
-    return 0;
-  }
-  if (values.length === 1) {
-    return values[0];
-  }
-
-  const numbers = [...values].sort((a, b) => a - b);
-  return (numbers[(numbers.length - 1) >> 1] + numbers[numbers.length >> 1]) / 2;
-};
-
-const standardDeviation = values => {
-  const avg = mean(values);
-
-  const squareDiffs = values.map(value => {
-    const diff = value - avg;
-    return diff * diff;
-  });
-
-  const meanSquareDiff = mean(squareDiffs);
-  return Math.sqrt(meanSquareDiff);
-};
-
-const benchmark = ({ name, description, setup, teardown, task, runs }) => {
-  return new Promise(resolve => {
-    const durations = [];
-    let i = 0;
-
-    setup();
-    const first = measure('first', task);
-    teardown();
-
-    const done = () => {
-      const stdDev = standardDeviation(durations);
-      const formattedFirst = fmt(first);
-      const formattedMean = fmt(mean(durations));
-      const formattedMedian = fmt(median(durations));
-      const formattedStdDev = fmt(stdDev);
-
-      console.groupCollapsed(`${name}\n${formattedMean} ±${fmt(2 * stdDev)}`);
-      description && console.log(description);
-      console.log(`First: ${formattedFirst}`);
-      console.log(`Median: ${formattedMedian}`);
-      console.log(`Mean: ${formattedMean}`);
-      console.log(`Standard deviation: ${formattedStdDev}`);
-      console.log(durations);
-      console.groupEnd();
-      resolve();
-    };
-
-    const a = () => {
-      setup();
-      window.requestAnimationFrame(b);
-    };
-
-    const b = () => {
-      const duration = measure('mean', task);
-      durations.push(duration);
-      window.requestAnimationFrame(c);
-    };
-
-    const c = () => {
-      teardown();
-      window.requestAnimationFrame(d);
-    };
-
-    const d = () => {
-      i += 1;
-      if (i < runs) {
-        window.requestAnimationFrame(a);
-      } else {
-        window.requestAnimationFrame(done);
-      }
-    };
-
-    window.requestAnimationFrame(a);
-  });
-};
-
-export default benchmark;

benchmarks/createRenderBenchmark.js

@@ -1,24 +0,0 @@
-import benchmark from './benchmark';
-import ReactDOM from 'react-dom';
-
-const node = document.querySelector('.root');
-
-const createRenderBenchmark = ({ description, getElement, name, runs }) => () => {
-  const setup = () => {};
-  const teardown = () => {
-    ReactDOM.unmountComponentAtNode(node);
-  };
-
-  return benchmark({
-    name,
-    description,
-    runs,
-    setup,
-    teardown,
-    task: () => {
-      ReactDOM.render(getElement(), node);
-    }
-  });
-};
-
-export default createRenderBenchmark;

benchmarks/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Performance tests</title>
-</head>
-<body>
-  <div class="root"></div>
-  <script src="dist/performance.bundle.js"></script>
-</body>
-</html>

benchmarks/index.js

@@ -1,69 +0,0 @@
-import aphrodite from './src/aphrodite';
-import cssModules from './src/css-modules';
-import emotion from './src/emotion';
-import glamor from './src/glamor';
-import jss from './src/jss';
-import radium from './src/radium';
-import reactNative from './src/react-native';
-import reactNativeStyleSheet from './src/react-native-stylesheet';
-import styledComponents from './src/styled-components';
-import 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

@@ -1,22 +0,0 @@
-{
-  "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

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

benchmarks/src/components/Box/glamor.js

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

benchmarks/src/components/Box/radium.js

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

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

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

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

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

benchmarks/src/components/Box/styles.css

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

benchmarks/src/components/Box/styletron.js

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

benchmarks/src/components/NestedTree/index.js

@@ -1,58 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-
-class DeepTree extends Component {
-  static propTypes = {
-    breadth: PropTypes.number.isRequired,
-    components: PropTypes.object,
-    depth: PropTypes.number.isRequired,
-    id: PropTypes.number.isRequired,
-    wrap: PropTypes.number.isRequired
-  };
-
-  /* necessary for reactxp to work without errors */
-  static childContextTypes = {
-    focusManager: PropTypes.object
-  };
-
-  getChildContext() {
-    return {
-      focusManager: {
-        addFocusableComponent() {},
-        removeFocusableComponent() {},
-        restrictFocusWithin() {},
-        removeFocusRestriction() {},
-        limitFocusWithin() {},
-        removeFocusLimitation() {}
-      }
-    };
-  }
-
-  render() {
-    const { breadth, components, depth, id, wrap } = this.props;
-    const { Box } = components;
-
-    let result = (
-      <Box color={id % 3} components={components} layout={depth % 2 === 0 ? 'column' : 'row'} outer>
-        {depth === 0 && <Box color={id % 3 + 3} components={components} fixed />}
-        {depth !== 0 &&
-          Array.from({ length: breadth }).map((el, i) => (
-            <DeepTree
-              breadth={breadth}
-              components={components}
-              depth={depth - 1}
-              id={i}
-              key={i}
-              wrap={wrap}
-            />
-          ))}
-      </Box>
-    );
-    for (let i = 0; i < wrap; i++) {
-      result = <Box components={components}>{result}</Box>;
-    }
-    return result;
-  }
-}
-
-export default DeepTree;

benchmarks/src/components/View/radium.js

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

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

@@ -1,35 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import StyleSheet from 'react-native/apis/StyleSheet';
-import registry from 'react-native/apis/StyleSheet/registry';
-
-const emptyObject = {};
-
-class View extends React.Component {
-  render() {
-    const { style, ...other } = this.props;
-    const styleProps = registry.resolve([styles.root, style]) || emptyObject;
-    return <div {...other} {...styleProps} />;
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    alignItems: 'stretch',
-    borderWidth: 0,
-    borderStyle: 'solid',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexBasis: 'auto',
-    flexDirection: 'column',
-    flexShrink: 0,
-    margin: 0,
-    padding: 0,
-    position: 'relative',
-    // fix flexbox bugs
-    minHeight: 0,
-    minWidth: 0
-  }
-});
-
-export default View;

benchmarks/src/components/View/styletron.js

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

benchmarks/src/css-modules.js

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

benchmarks/src/emotion.js

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

benchmarks/src/glamor.js

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

benchmarks/src/jss.js

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

benchmarks/src/radium.js

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

benchmarks/src/react-native-stylesheet.js

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

benchmarks/src/react-native.js

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

benchmarks/src/reactxp.js

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

benchmarks/src/styled-components-primitives.js

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

benchmarks/src/styled-components.js

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

benchmarks/src/styletron.js

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

benchmarks/tests/renderDeepTree.js

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

benchmarks/tests/renderTweet.js

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

benchmarks/tests/renderWideTree.js

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

docs/apis/AppRegistry.md

@@ -1,60 +0,0 @@
-# AppRegistry
-
-`AppRegistry` is the control point for registering, running, prerendering, and
-unmounting all apps. App root components should register themselves with
-`AppRegistry.registerComponent`. Apps can be run by invoking
-`AppRegistry.runApplication` (see the [getting started guide](../guides/getting-started.md) for more details).
-
-To "stop" an application when a view should be destroyed, call
-`AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was passed
-into `runApplication`. These should always be used as a pair.
-
-## Methods
-
-(web) static **getApplication**(appKey:string, appParameters: object)
-
-Returns the given application element. Use this for server-side rendering.
-Return object is of type `{ element: ReactElement; stylesheets: [ ReactElement ] }`.
-
-static **registerConfig**(config: Array<AppConfig>)
-
-Registry multiple applications. `AppConfig` is of type `{ appKey: string;
-component: ComponentProvider; run?: Function }`.
-
-static **registerComponent**(appKey: string, getComponentFunc: ComponentProvider)
-
-Register a component provider under the given `appKey`.
-
-static **registerRunnable**(appKey: string, run: Function)
-
-Register a custom render function for an application. The function will receive
-the `appParameters` passed to `runApplication`.
-
-static **getAppKeys**()
-
-Returns all registered app keys.
-
-static **runApplication**(appKey: string, appParameters?: object)
-
-Runs the application that was registered under `appKey`. The `appParameters`
-must include the `rootTag` into which the application is rendered, and
-optionally any `initialProps`.
-
-On web, if the `rootTag` is a sub-section of your application it should be
-styled as `position:relative` and given an explicit height.
-
-static **unmountApplicationComponentAtRootTag**(rootTag: HTMLElement)
-
-To "stop" an application when a view should be destroyed, call
-`AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was passed
-into `runApplication`
-
-## Example
-
-```js
-AppRegistry.registerComponent('MyApp', () => AppComponent)
-AppRegistry.runApplication('MyApp', {
-  initialProps: {},
-  rootTag: document.getElementById('react-root')
-})
-```

docs/apis/AppState.md

@@ -1,60 +0,0 @@
-## AppState
-
-`AppState` can tell you if the app is in the foreground or background, and
-notify you when the state changes.
-
-States
-
-* `active` - The app is running in the foreground
-* `background` - The app is running in the background (i.e., the user has not focused the app's tab).
-
-## Properties
-
-static **currentState**
-
-Returns the current state of the app: `active` or `background`.
-
-## Methods
-
-static **addEventListener**(type: string, handler: Function)
-
-Add a handler to `AppState` changes by listening to the `change` event type and
-providing the `handler`. The handler is called with the app state value.
-
-static **removeEventListener**(type: string, handler: Function)
-
-Remove a handler by passing the change event `type` and the `handler`.
-
-## Examples
-
-To see the current state, you can check `AppState.currentState`, which will be
-kept up-to-date. This example will only ever appear to say "Current state is:
-active" because the app is only visible to the user when in the `active` state,
-and the null state will happen only momentarily.
-
-```js
-class Example extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = { currentAppState: AppState.currentState }
-  }
-
-  componentDidMount() {
-    AppState.addEventListener('change', this._handleAppStateChange);
-  }
-
-  componentWillUnmount() {
-    AppState.removeEventListener('change', this._handleAppStateChange);
-  }
-
-  _handleAppStateChange = (currentAppState) => {
-    this.setState({ currentAppState });
-  }
-
-  render() {
-    return (
-      <Text>Current state is: {this.state.currentAppState}</Text>
-    )
-  }
-}
-```

docs/apis/AsyncStorage.md

@@ -1,71 +0,0 @@
-# AsyncStorage
-
-`AsyncStorage` is a simple, asynchronous, persistent, key-value storage system
-that is global to the domain. It's a facade over, and should be used instead of
-`window.localStorage` to provide an asynchronous API and multi functions. Each
-method returns a `Promise` object.
-
-It is recommended that you use an abstraction on top of `AsyncStorage` instead
-of `AsyncStorage` directly for anything more than light usage since it operates
-globally.
-
-The batched functions are useful for executing a lot of operations at once,
-allowing for optimizations to provide the convenience of a single promise after
-all operations are complete.
-
-## Methods
-
-static **clear**()
-
-Erases all AsyncStorage. You probably don't want to call this - use
-`removeItem` or `multiRemove` to clear only your own keys instead. Returns a
-Promise object.
-
-static **getAllKeys**()
-
-Gets all known keys. Returns a Promise object.
-
-static **getItem**(key: string)
-
-Fetches the value of the given key. Returns a Promise object.
-
-static **mergeItem**(key: string, value: string)
-
-Merges existing value with input value, assuming they are stringified JSON.
-Returns a Promise object.
-
-static **multiGet**(keys: Array<string>)
-
-`multiGet` results in an array of key-value pair arrays that matches the input
-format of `multiSet`. Returns a Promise object.
-
-```js
-multiGet(['k1', 'k2']) -> [['k1', 'val1'], ['k2', 'val2']]
-```
-
-static **multiMerge**(keyValuePairs: Array<Array<string>>)
-
-multiMerge takes an array of key-value array pairs that match the output of
-`multiGet`. It merges existing values with input values, assuming they are
-stringified JSON. Returns a Promise object.
-
-static **multiRemove**(keys: Array<string>)
-
-Delete all the keys in the keys array. Returns a Promise object.
-
-static **multiSet**(keyValuePairs: Array<Array<string>>)
-
-`multiSet` takes an array of key-value array pairs that match the output of
-`multiGet`. Returns a Promise object.
-
-```js
-multiSet([['k1', 'val1'], ['k2', 'val2']]);
-```
-
-static **removeItem**(key: string)
-
-Removes the value of the given key. Returns a Promise object.
-
-static **setItem**(key: string, value: string)
-
-Sets the value of the given key. Returns a Promise object.

docs/apis/Clipboard.md

@@ -1,16 +0,0 @@
-# Clipboard
-
-Clipboard gives you an interface for setting to the clipboard. (Getting
-clipboard content is not supported on web.)
-
-## Methods
-
-static **getString**()
-
-Returns a `Promise` of an empty string.
-
-static **setString**(content: string): boolean
-
-Copies a string to the clipboard. On web, some browsers may not support copying
-to the clipboard, therefore, this function returns a boolean to indicate if the
-copy was successful.

docs/apis/Dimensions.md

@@ -1,13 +0,0 @@
-# Dimensions
-
-Note: dimensions may change (e.g due to device rotation) so any rendering logic
-or styles that depend on these constants should try to call this function on
-every render, rather than caching the value.
-
-## Methods
-
-static **get**(dimension: string)
-
-Get a dimension (e.g., `"window"` or `"screen"`).
-
-Example: `const { height, width } = Dimensions.get('window')`

docs/apis/I18nManager.md

@@ -1,25 +0,0 @@
-# I18nManager
-
-Control and set the layout and writing direction of the application.
-
-## Properties
-
-**isRTL**: bool = false
-
-Whether the application is currently in RTL mode.
-
-## Methods
-
-static **allowRTL**(allowRTL: bool)
-
-Allow the application to display in RTL mode.
-
-static **forceRTL**(forceRTL: bool)
-
-Force the application to display in RTL mode.
-
-static **setPreferredLanguageRTL**(isRTL: bool)
-
-Set the application's preferred writing direction to RTL. You will need to
-determine the user's preferred locale server-side (from HTTP headers) and
-decide whether it's an RTL language.

docs/apis/NetInfo.md

@@ -1,77 +0,0 @@
-# NetInfo
-
-`NetInfo` asynchronously determines the online/offline status of the
-application.
-
-Connection types:
-
-* `bluetooth` - The user agent is using a Bluetooth connection.
-* `cellular` - The user agent is using a cellular connection (e.g., EDGE, HSPA, LTE, etc.).
-* `ethernet` - The user agent is using an Ethernet connection.
-* `mixed` -  The user agent is using multiple connection types.
-* `none` - The user agent will not contact the network (offline).
-* `other` - The user agent is using a connection type that is not one of enumerated connection types.
-* `unknown` -  The user agent has established a network connection, but is unable to determine what is the underlying connection technology.
-* `wifi` - The user agent is using a Wi-Fi connection.
-* `wimax` -  The user agent is using a WiMAX connection.
-
-## Methods
-
-Note that support for retrieving the connection type depends upon browswer
-support (and is limited to mobile browsers). It will default to `unknown` when
-support is missing.
-
-static **addEventListener**(eventName: ChangeEventName, handler: Function)
-
-static **fetch**(): Promise
-
-static **removeEventListener**(eventName: ChangeEventName, handler: Function)
-
-## Properties
-
-**isConnected**: bool = true
-
-Available on all user agents. Asynchronously fetch a boolean to determine
-internet connectivity. Use this if you are only interested with whether the device has internet connectivity.
-
-**isConnected.addEventListener**(eventName: ChangeEventName, handler: Function)
-
-**isConnected.fetch**(): Promise
-
-**isConnected.removeEventListener**(eventName: ChangeEventName, handler: Function)
-
-## Examples
-
-Fetching the connection type:
-
-```js
-NetInfo.fetch().then((connectionType) => {
-  console.log('Connection type:', connectionType);
-});
-```
-
-Subscribing to changes in the connection type:
-
-```js
-const handleConnectivityTypeChange = (connectionType) => {
-  console.log('Current connection type:', connectionType);
-}
-NetInfo.addEventListener('change', handleConnectivityTypeChange);
-```
-
-Fetching the connection status:
-
-```js
-NetInfo.isConnected.fetch().then((isConnected) => {
-  console.log('Connection status:', (isConnected ? 'online' : 'offline'));
-});
-```
-
-Subscribing to changes in the connection status:
-
-```js
-const handleConnectivityStatusChange = (isConnected) => {
-  console.log('Current connection status:', (isConnected ? 'online' : 'offline'));
-}
-NetInfo.isConnected.addEventListener('change', handleConnectivityStatusChange);
-```

docs/apis/PixelRatio.md

@@ -1,51 +0,0 @@
-# PixelRatio
-
-`PixelRatio` gives access to the device pixel density.
-
-## Methods
-
-static **get**()
-
-Returns the device pixel density. Some examples:
-
-* PixelRatio.get() === 1
-  * mdpi Android devices (160 dpi)
-* PixelRatio.get() === 1.5
-  * hdpi Android devices (240 dpi)
-* PixelRatio.get() === 2
-  * iPhone 4, 4S
-  * iPhone 5, 5c, 5s
-  * iPhone 6
-  * xhdpi Android devices (320 dpi)
-* PixelRatio.get() === 3
-  * iPhone 6 plus
-  * xxhdpi Android devices (480 dpi)
-* PixelRatio.get() === 3.5
-  * Nexus 6
-
-static **getPixelSizeForLayoutSize**(layoutSize: number)
-
-Converts a layout size (dp) to pixel size (px). Guaranteed to return an integer
-number.
-
-static **roundToNearestPixel**(layoutSize: number)
-
-Rounds a layout size (dp) to the nearest layout size that corresponds to an
-integer number of pixels. For example, on a device with a PixelRatio of 3,
-`PixelRatio.roundToNearestPixel(8.4)` = `8.33`, which corresponds to exactly
-`(8.33 * 3)` = `25` pixels.
-
-## Examples
-
-Fetching a correctly sized image. You should get a higher resolution image if
-you are on a high pixel density device. A good rule of thumb is to multiply the
-size of the image you display by the pixel ratio.
-
-```js
-const image = getImage({
-  width: PixelRatio.getPixelSizeForLayoutSize(200),
-  height: PixelRatio.getPixelSizeForLayoutSize(100),
-});
-
-<Image source={image} style={{ width: 200, height: 100 }} />
-```

docs/apis/Platform.md

@@ -1,45 +0,0 @@
-# Platform
-
-Detect what is the platform in which the app is running. This piece of
-functionality can be useful when only small parts of a component are platform
-specific.
-
-## Properties
-
-**OS**: string
-
-`Platform.OS` will be `web` when running in a Web browser.
-
-```js
-import { Platform } from 'react-native';
-
-const styles = StyleSheet.create({
-  height: (Platform.OS === 'web') ? 200 : 100,
-});
-```
-
-## Methods
-
-**select**(object): any
-
-`Platform.select` takes an object containing `Platform.OS` as keys and returns
-the value for the platform you are currently running on.
-
-```js
-import { Platform } from 'react-native';
-
-const containerStyles = {
-  flex: 1,
-  ...Platform.select({
-    android: {
-      backgroundColor: 'blue'
-    },
-    ios: {
-      backgroundColor: 'red'
-    },
-    web: {
-      backgroundColor: 'green'
-    }
-  })
-});
-```

docs/apis/StyleSheet.md

@@ -1,80 +0,0 @@
-# StyleSheet
-
-The `StyleSheet` abstraction converts predefined styles to (vendor-prefixed)
-CSS without requiring a compile-time step. Styles that cannot be resolved
-outside of the render loop (e.g., dynamic positioning) are usually applied as
-inline styles. Read more about [how to style your
-application](../guides/style.md).
-
-## Methods
-
-**create**(obj: {[key: string]: any})
-
-Each key of the object passed to `create` must define a style object.
-
-**flatten**: function
-
-Flattens an array of styles into a single style object.
-
-(web) **getStyleSheets**: function
-
-Returns an array of stylesheets (`{ id, textContent }`). Useful for
-compile-time or server-side rendering.
-
-## Properties
-
-**absoluteFill**: number
-
-A very common pattern is to create overlays with position absolute and zero positioning,
-so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
-styles.
-
-```js
-<View style={StyleSheet.absoluteFill} />
-```
-
-**absoluteFillObject**: object
-
-Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be
-used to create a customized entry in a `StyleSheet`, e.g.:
-
-```js
-const styles = StyleSheet.create({
-  wrapper: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'transparent',
-    top: 10
-  }
-})
-```
-
-**hairlineWidth**: number
-
-## Example
-
-```js
-<View style={styles.container}>
-  <Text
-    children={'Title text'}
-    style={[
-      styles.title,
-      this.props.isActive && styles.activeTitle
-    ]}
-  />
-</View>
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 4,
-    borderWidth: 0.5,
-    borderColor: '#d6d7da',
-  },
-  title: {
-    fontSize: 19,
-    fontWeight: 'bold',
-  },
-  activeTitle: {
-    color: 'red',
-  }
-})
-```

docs/apis/Vibration.md

@@ -1,35 +0,0 @@
-# Vibration
-
-Vibration is described as a pattern of on-off pulses, which may be of varying
-lengths. The pattern may consist of either a single integer, describing the
-number of milliseconds to vibrate, or an array of integers describing a pattern
-of vibrations and pauses. Vibration is controlled with a single method:
-`Vibration.vibrate()`.
-
-The vibration is asynchronous so this method will return immediately. There
-will be no effect on devices that do not support vibration.
-
-## Methods
-
-static **cancel**()
-
-Stop the vibration.
-
-static **vibrate**(pattern)
-
-Start the vibration pattern.
-
-## Examples
-
-Vibrate once for 200ms:
-
-```js
-Vibration.vibrate(200);
-Vibration.vibrate([200]);
-```
-
-Vibrate for 200ms, pause for 100ms, vibrate for 200ms:
-
-```js
-Vibration.vibrate([200, 100, 200]);
-```

docs/components/ActivityIndicator.md

@@ -1,70 +0,0 @@
-# ActivityIndicator
-
-## Props
-
-[...View props](./View.md)
-
-**animating**: boolean = true
-
-Whether to show the indicator or hide it.
-
-**color**: ?color = '#1976D2'
-
-The foreground color of the spinner.
-
-**hidesWhenStopped**: ?boolean = true
-
-Whether the indicator should hide when not animating.
-
-**size**: ?enum('small, 'large') | number = 'small'
-
-Size of the indicator. Small has a height of `20`, large has a height of `36`.
-
-## Examples
-
-```js
-import React, { Component } from 'react'
-import { ActivityIndicator, StyleSheet, View } from 'react-native'
-
-class ToggleAnimatingActivityIndicator extends Component {
-  constructor(props) {
-    super(props)
-    this.state = { animating: true }
-  }
-
-  componentDidMount: function() {
-    this.setToggleTimeout();
-  }
-
-  render() {
-    return (
-      <ActivityIndicator
-        animating={this.state.animating}
-        size="large"
-        style={[styles.centering, { height: 80 }]}
-      />
-    );
-  }
-
-  _setToggleTimeout() {
-    setTimeout(() => {
-      this.setState({ animating: !this.state.animating })
-      this._setToggleTimeout()
-    }, 1200)
-  }
-})
-
-const styles = StyleSheet.create({
-  centering: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  gray: {
-    backgroundColor: '#cccccc'
-  },
-  horizontal: {
-    flexDirection: 'row',
-    justifyContent: 'space-around'
-  }
-})
-```

docs/components/Button.md

@@ -1,43 +0,0 @@
-# Button
-
-A basic button component. Supports a minimal level of customization. You can
-build your own custom button using `TouchableOpacity` or
-`TouchableNativeFeedback`.
-
-## Props
-
-**accessibilityLabel**: ?string
-
-Overrides the text that's read by a screen reader when the user interacts
-with the element.
-
-**color**: ?string
-
-Background color of the button.
-
-**disabled**: ?boolean
-
-If `true`, disable all interactions for this element.
-
-**onPress**: function
-
-This function is called on press.
-
-**testID**: ?string
-
-Used to locate this view in end-to-end tests.
-
-**title**: string
-
-Text to display inside the button.
-
-## Examples
-
-```js
-<Button
-  accessibilityLabel="Learn more about this purple button"
-  color="#841584"
-  onPress={onPressLearnMore}
-  title="Learn More"
-/>
-```

docs/components/Image.md

@@ -1,167 +0,0 @@
-# Image
-
-An accessibile image component with support for image resizing, default image,
-and child content.
-
-Unsupported React Native props:
-`capInsets` (ios),
-`onProgress` (ios)
-
-## Props
-
-**accessibilityLabel**: ?string
-
-The text that's read by a screenreader when someone interacts with the image.
-
-**accessible**: ?boolean
-
-When `true`, indicates the image is an accessibility element.
-
-**children**: ?any
-
-Content to display over the image.
-
-**defaultSource**: ?object
-
-An image to display as a placeholder while downloading the final image off the
-network. `{ uri: string, width, height }`
-
-**onError**: ?function
-
-Invoked on load error with `{nativeEvent: {error}}`.
-
-**onLayout**: ?function
-
-Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
-height } } }`, where `x` and `y` are the offsets from the parent node.
-
-**onLoad**: ?function
-
-Invoked when load completes successfully.
-
-**onLoadEnd**: ?function
-
-Invoked when load either succeeds or fails,
-
-**onLoadStart**: ?function
-
-Invoked on load start.
-
-**resizeMode**: ?enum('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'cover'
-
-Determines how to resize the image when the frame doesn't match the raw image
-dimensions.
-
-**source**: ?object
-
-`uri` is a string representing the resource identifier for the image, which
-could be an http address or a base64 encoded image. `{ uri: string, width, height }`
-
-**style**: ?style
-
-+ ...[View#style](./View.md)
-+ `resizeMode`
-
-**testID**: ?string
-
-Used to locate a view in end-to-end tests.
-
-## Properties
-
-static **resizeMode**: object
-
-Example usage:
-
-```
-<Image resizeMode={Image.resizeMode.contain} />
-```
-
-## Methods
-
-static **getSize**(uri: string, success: (width, height) => {}, failure: function)
-
-Retrieve the width and height (in pixels) of an image prior to displaying it.
-This method can fail if the image cannot be found, or fails to download.
-
-(In order to retrieve the image dimensions, the image may first need to be
-loaded or downloaded, after which it will be cached. This means that in
-principle you could use this method to preload images, however it is not
-optimized for that purpose, and may in future be implemented in a way that does
-not fully load/download the image data.)
-
-static **prefetch**(url: string): Promise
-
-Prefetches a remote image for later use by downloading it.
-
-## Examples
-
-```js
-import placeholderAvatar from './placeholderAvatar.png'
-import React, { Component } from 'react'
-import { Image, PropTypes, StyleSheet } from 'react-native'
-
-export default class ImageExample extends Component {
-  constructor(props, context) {
-    super(props, context)
-    this.state = { loading: true }
-  }
-
-  static propTypes = {
-    size: PropTypes.oneOf(['small', 'normal', 'large']),
-    testID: Image.propTypes.testID,
-    user: PropTypes.object
-  }
-
-  static defaultProps = {
-    size: 'normal'
-  }
-
-  _onLoad(e) {
-    console.log('Avatar.onLoad', e)
-    this.setState({ loading: false })
-  }
-
-  render() {
-    const { size, testID, user } = this.props
-    const loadingStyle = this.state.loading ? { styles.loading } : { }
-
-    return (
-      <Image
-        accessibilityLabel={`${user.name}'s profile picture`}
-        defaultSource={{ uri: placeholderAvatar }}
-        onLoad={this._onLoad.bind(this)}
-        resizeMode='cover'
-        source={{ uri: user.avatarUrl }}
-        style={[
-          styles.base,
-          styles[size],
-          loadingStyle
-        ]}
-      />
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  base: {
-    borderColor: 'white',
-    borderRadius: 5,
-    borderWidth: 5
-  },
-  loading: {
-    opacity: 0.5
-  },
-  small: {
-    height: 32,
-    width: 32
-  },
-  normal: {
-    height: 48,
-    width: 48
-  },
-  large: {
-    height: 64,
-    width: 64
-  }
-})
-```

docs/components/ProgressBar.md

@@ -1,27 +0,0 @@
-# ProgressBar
-
-Display an activity progress bar.
-
-## Props
-
-[...View props](./View.md)
-
-**color**: ?string = '#1976D2'
-
-Color of the progress bar.
-
-**indeterminate**: ?boolean = true
-
-Whether the progress bar will show indeterminate progress.
-
-**progress**: ?number
-
-The progress value (between 0 and 1).
-
-**testID**: ?string
-
-Used to locate this view in end-to-end tests.
-
-(web) **trackColor**: ?string = 'transparent'
-
-Color of the track bar.

docs/components/ScrollView.md

@@ -1,134 +0,0 @@
-# ScrollView
-
-A scrollable `View` that provides itegration with the touch-locking "responder"
-system. `ScrollView`'s must have a bounded height: either set the height of the
-view directly (discouraged) or make sure all parent views have bounded height
-(e.g., transfer `{ flex: 1}` down the view stack).
-
-## Props
-
-[...View props](./View.md)
-
-**contentContainerStyle**: ?style
-
-These styles will be applied to the scroll view content container which wraps
-all of the child views.
-
-**horizontal**: ?boolean = false
-
-When `true`, the scroll view's children are arranged horizontally in a row
-instead of vertically in a column.
-
-**keyboardDismissMode**: ?enum('none', 'on-drag') = 'none'
-
-Determines whether the keyboard gets dismissed in response to a scroll drag.
-
-* `none` (the default), drags do not dismiss the keyboard.
-* `on-drag`, the keyboard is dismissed when a drag begins.
-* `interactive` (not supported on web; same as `none`)
-
-**onContentSizeChange**: ?function
-
-Called when scrollable content view of the `ScrollView` changes. It's
-implemented using the `onLayout` handler attached to the content container
-which this `ScrollView` renders.
-
-**onScroll**: ?function
-
-Fires at most once per frame during scrolling. The frequency of the events can
-be contolled using the `scrollEventThrottle` prop.
-
-Invoked on scroll with the following event:
-
-```js
-{
-  nativeEvent: {
-    contentOffset: { x, y },
-    contentSize: { height, width },
-    layoutMeasurement: { height, width }
-  }
-}
-```
-
-**refreshControl**: ?element
-
-TODO
-
-A [RefreshControl](../RefreshControl) component, used to provide
-pull-to-refresh functionality for the `ScrollView`.
-
-**scrollEnabled**: ?boolean = true
-
-When false, the content does not scroll.
-
-**scrollEventThrottle**: ?number = 0
-
-This controls how often the scroll event will be fired while scrolling (as a
-time interval in ms). A lower number yields better accuracy for code that is
-tracking the scroll position, but can lead to scroll performance problems. The
-default value is `0`, which means the scroll event will be sent only once each
-time the view is scrolled.
-
-## Instance methods
-
-**getInnerViewNode()**: any
-
-Returns a reference to the underlying content container DOM node within the `ScrollView`.
-
-**getScrollableNode()**: any
-
-Returns a reference to the underlying scrollable DOM node.
-
-**getScrollResponder()**: Component
-
-Returns a reference to the underlying scroll responder, which supports
-operations like `scrollTo`. All `ScrollView`-like components should implement
-this method so that they can be composed while providing access to the
-underlying scroll responder's methods.
-
-**scrollTo(options: { x: number = 0; y: number = 0; animated: boolean = true })**
-
-Scrolls to a given `x`, `y` offset (animation is not currently supported).
-
-## Examples
-
-```js
-import React, { Component } from 'react'
-import { ScrollView, StyleSheet } from 'react-native'
-import Item from './Item'
-
-export default class ScrollViewExample extends Component {
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      items: Array.from(new Array(20)).map((_, i) => ({ id: i }))
-    }
-  }
-
-  onScroll(e) {
-    console.log(e)
-  }
-
-  render() {
-    return (
-      <ScrollView
-        children={this.state.items.map((item) => <Item {...item} />)}
-        contentContainerStyle={styles.container}
-        horizontal
-        onScroll={(e) => this.onScroll(e)}
-        scrollEventThrottle={100}
-        style={styles.root}
-      />
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    borderWidth: 1
-  },
-  container: {
-    padding: 10
-  }
-})
-```

docs/components/Switch.md

@@ -1,76 +0,0 @@
-# Switch
-
-This is a controlled component that requires an `onValueChange` callback that
-updates the value prop in order for the component to reflect user actions. If
-the `value` prop is not updated, the component will continue to render the
-supplied `value` prop instead of the expected result of any user actions.
-
-## Props
-
-[...View props](./View.md)
-
-**disabled**: ?boolean = false
-
-If `true` the user won't be able to interact with the switch.
-
-**onValueChange**: ?function
-
-Invoked with the new value when the value changes.
-
-**value**: ?boolean = false
-
-The value of the switch. If `true` the switch will be turned on.
-
-(web) **activeThumbColor**: ?color = #009688
-
-The color of the thumb grip when the switch is turned on.
-
-(web) **activeTrackColor**: ?color = #A3D3CF
-
-The color of the track when the switch is turned on.
-
-(web) **thumbColor**: ?color = #FAFAFA
-
-The color of the thumb grip when the switch is turned off.
-
-(web) **trackColor**: ?color = #939393
-
-The color of the track when the switch is turned off.
-
-## Examples
-
-```js
-import React, { Component } from 'react'
-import { Switch, View } from 'react-native'
-
-class ColorSwitchExample extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      colorTrueSwitchIsOn: true,
-      colorFalseSwitchIsOn: false
-    }
-  }
-
-  render() {
-    return (
-      <View>
-        <Switch
-          activeThumbColor='#428BCA'
-          activeTrackColor='#A0C4E3'
-          onValueChange={(value) => this.setState({ colorFalseSwitchIsOn: value })}
-          value={this.state.colorFalseSwitchIsOn}
-        />
-        <Switch
-          activeThumbColor='#5CB85C'
-          activeTrackColor='#ADDAAD'
-          onValueChange={(value) => this.setState({ colorTrueSwitchIsOn: value })}
-          thumbColor='#EBA9A7'
-          trackColor='#D9534F'
-          value={this.state.colorTrueSwitchIsOn}
-        />
-      </View>
-    )
-  }
-}
-```

docs/components/Text.md

@@ -1,161 +0,0 @@
-# Text
-
-`Text` is component for displaying text. It supports style, basic touch
-handling, and inherits typographic styles from ancestor elements.
-
-The `Text` is unique relative to layout: child elements use text layout
-(`inline`) rather than flexbox layout. This means that elements inside of a
-`Text` are not rectangles, as they wrap when reaching the edge of their
-container.
-
-Unsupported React Native props:
-`allowFontScaling` (ios),
-`suppressHighlighting` (ios)
-
-## Props
-
-NOTE: `Text` will transfer all other props to the rendered HTML element.
-
-(web) **accessibilityLabel**: ?string
-
-Overrides the text that's read by a screen reader when the user interacts
-with the element. (This is implemented using `aria-label`.)
-
-See the [Accessibility guide](../guides/accessibility) for more information.
-
-(web) **accessibilityRole**: ?oneOf(roles)
-
-Allows assistive technologies to present and support interaction with the view
-in a manner that is consistent with user expectations for similar views of that
-type. For example, marking a touchable view with an `accessibilityRole` of
-`button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
-
-See the [Accessibility guide](../guides/accessibility) for more information.
-
-**accessible**: ?boolean
-
-When `true`, indicates that the view is an accessibility element (i.e.,
-focusable) and groups its child content. By default, all the touchable elements
-and elements with `accessibilityRole` of `button` and `link` are accessible.
-(This is implemented using `tabindex`.)
-
-See the [Accessibility guide](../guides/accessibility) for more information.
-
-**children**: ?any
-
-Child content.
-
-**importantForAccessibility**: ?enum('auto', 'no-hide-descendants', 'yes')
-
-A value of `no` will remove the element from the tab flow.
-
-A value of `no-hide-descendants` will hide the element and its children from
-assistive technologies. (This is implemented using `aria-hidden`.)
-
-See the [Accessibility guide](../guides/accessibility) for more information.
-
-**numberOfLines**: ?number
-
-Truncates the text with an ellipsis after this many lines. Currently only supports `1`.
-
-**onLayout**: ?function
-
-Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
-height } } }`, where `x` and `y` are the offsets from the parent node.
-
-**onPress**: ?function
-
-This function is called on press.
-
-**selectable**: ?boolean
-
-When `false`, the text is not selectable.
-
-**style**: ?style
-
-+ ...[View#style](View.md)
-+ `color`
-+ `fontFamily`
-+ `fontFeatureSettings` ‡
-+ `fontSize`
-+ `fontStyle`
-+ `fontWeight`
-+ `letterSpacing`
-+ `lineHeight`
-+ `textAlign`
-+ `textAlignVertical`
-+ `textDecorationLine`
-+ `textIndent` ‡
-+ `textOverflow` ‡
-+ `textRendering` ‡
-+ `textShadowColor`
-+ `textShadowOffset`
-+ `textShadowRadius`
-+ `textTransform` ‡
-+ `unicodeBidi` ‡
-+ `whiteSpace`
-+ `wordWrap` ‡
-+ `writingDirection`
-
-‡ web only.
-
-**testID**: ?string
-
-Used to locate this view in end-to-end tests.
-
-## Examples
-
-```js
-import React, { Component, PropTypes } from 'react'
-import { StyleSheet, Text } from 'react-native'
-
-export default class PrettyText extends Component {
-  static propTypes = {
-    ...Text.propTypes,
-    color: PropTypes.oneOf(['white', 'gray', 'red']),
-    size: PropTypes.oneOf(['small', 'normal', 'large']),
-    weight: PropTypes.oneOf(['light', 'normal', 'bold'])
-  };
-
-  static defaultProps = {
-    ...Text.defaultProps,
-    color: 'gray',
-    size: 'normal',
-    weight: 'normal'
-  };
-
-  render() {
-    const { color, size, style, weight, ...other } = this.props;
-
-    return (
-      <Text
-        ...other
-        style={[
-          style,
-          colorStyles[color],
-          sizeStyles[size],
-          weightStyles[weight]
-        ]}
-      />
-    );
-  }
-}
-
-const colorStyles = StyleSheet.create({
-  white: { color: 'white' },
-  gray: { color: 'gray' },
-  red: { color: 'red' }
-})
-
-const sizeStyles = StyleSheet.create({
-  small: { fontSize: '0.85rem', padding: '0.5rem' },
-  normal: { fontSize: '1rem', padding: '0.75rem' },
-  large: { fontSize: '1.5rem', padding: '1rem' }
-})
-
-const weightStyles = StyleSheet.create({
-  light: { fontWeight: '300' },
-  normal: { fontWeight: '400' },
-  bold: { fontWeight: '700' }
-})
-```

docs/components/TextInput.md

@@ -1,226 +0,0 @@
-# TextInput
-
-Accessible single- and multi-line text input via a keyboard. Supports features
-such as auto-complete, auto-focus, placeholder text, and event callbacks.
-
-Note: some props are exclusive to or excluded from `multiline`.
-
-Unsupported React Native props:
-`onEndEditing`,
-`clearButtonMode` (ios),
-`enablesReturnKeyAutomatically` (ios),
-`placeholderTextColor`,
-`returnKeyType` (ios),
-`selectionState` (ios),
-`underlineColorAndroid` (android)
-
-## Props
-
-[...View props](./View.md)
-
-**autoCapitalize**: ?enum('characters', 'none', 'sentences', 'words') = 'sentences'
-
-Automatically capitalize certain characters (only available in Chrome and iOS Safari).
-
-* `characters`: Automatically capitalize all characters.
-* `none`: Completely disables automatic capitalization
-* `sentences`: Automatically capitalize the first letter of sentences.
-* `words`: Automatically capitalize the first letter of words.
-
-(web) **autoComplete**: ?string
-
-Indicates whether the value of the control can be automatically completed by
-the browser. [Accepted values](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
-
-**autoCorrect**: ?boolean = true
-
-Automatically correct spelling mistakes  (only available in iOS Safari).
-
-**autoFocus**: ?boolean = false
-
-If `true`, focuses the input on `componentDidMount`. Only the first form element
-in a document with `autofocus` is focused.
-
-**blurOnSubmit**: ?boolean
-
-If `true`, the text field will blur when submitted. The default value is `true`
-for single-line fields and `false` for multiline fields. Note, for multiline
-fields setting `blurOnSubmit` to `true` means that pressing return will blur
-the field and trigger the `onSubmitEditing` event instead of inserting a
-newline into the field.
-
-**clearTextOnFocus**: ?boolean = false
-
-If `true`, clears the text field automatically when focused.
-
-**defaultValue**: ?string
-
-Provides an initial value that will change when the user starts typing. Useful
-for simple use-cases where you don't want to deal with listening to events and
-updating the `value` prop to keep the controlled state in sync.
-
-**editable**: ?boolean = true
-
-If `false`, text is not editable (i.e., read-only).
-
-**keyboardType**: enum('default', 'email-address', 'numeric', 'phone-pad', 'search', 'url', 'web-search') = 'default'
-
-Determines which keyboard to open. (NOTE: Safari iOS requires an ancestral
-`<form action>` element to display the `search` keyboard).
-
-(Not available when `multiline` is `true`.)
-
-**maxLength**: ?number
-
-Limits the maximum number of characters that can be entered.
-
-**multiline**: ?boolean = false
-
-If true, the text input can be multiple lines.
-
-**numberOfLines**: ?number = 2
-
-Sets the number of lines for a multiline `TextInput`.
-
-(Requires `multiline` to be `true`.)
-
-**onBlur**: ?function
-
-Callback that is called when the text input is blurred.
-
-**onChange**: ?function
-
-Callback that is called when the text input's text changes.
-
-**onChangeText**: ?function
-
-Callback that is called when the text input's text changes. The text is passed
-as an argument to the callback handler.
-
-**onFocus**: ?function
-
-Callback that is called when the text input is focused.
-
-**onKeyPress**: ?function
-
-Callback that is called when a key is pressed. This will be called with `{
-nativeEvent: { key: keyValue } }` where keyValue is 'Enter` or 'Backspace' for
-respective keys and the typed-in character otherwise including ' ' for space.
-Modifier keys are also included in the nativeEvent. Fires before onChange
-callbacks.
-
-**onSelectionChange**: ?function
-
-Callback that is called when the text input's selection changes. This will be called with
-`{ nativeEvent: { selection: { start, end } } }`.
-
-**onSubmitEditing**: ?function
-
-Callback that is called when the keyboard's submit button is pressed.
-
-**placeholder**: ?string
-
-The string that will be rendered in an empty `TextInput` before text has been
-entered.
-
-**secureTextEntry**: ?boolean = false
-
-If true, the text input obscures the text entered so that sensitive text like
-passwords stay secure.
-
-(Not available when `multiline` is `true`.)
-
-**selection**: ?{ start: number, end: ?number }
-
-The start and end of the text input's selection. Set start and end to the same value to position the cursor.
-
-**selectTextOnFocus**: ?boolean = false
-
-If `true`, all text will automatically be selected on focus.
-
-**style**: ?style
-
-+ ...[Text#style](./Text.md)
-+ `resize` ‡
-
-‡ web only.
-
-**testID**: ?string
-
-Used to locate this view in end-to-end tests.
-
-**value**: ?string
-
-The value to show for the text input. `TextInput` is a controlled component,
-which means the native `value` will be forced to match this prop if provided.
-Read about how [React form
-components](https://facebook.github.io/react/docs/forms.html) work. To prevent
-user edits to the value set `editable={false}`.
-
-## Instance methods
-
-**blur()**
-
-Blur the underlying DOM input.
-
-**clear()**
-
-Clear the text from the underlying DOM input.
-
-**focus()**
-
-Focus the underlying DOM input.
-
-**isFocused()**
-
-Returns `true` if the input is currently focused; `false` otherwise.
-
-## Examples
-
-```js
-import React, { Component } from 'react'
-import { StyleSheet, TextInput } from 'react-native'
-
-export default class TextInputExample extends Component {
-  constructor(props, context) {
-    super(props, context)
-    this.state = { isFocused: false }
-  }
-
-  _onBlur(e) {
-    this.setState({ isFocused: false })
-  }
-
-  _onFocus(e) {
-    this.setState({ isFocused: true })
-  }
-
-  render() {
-    return (
-      <TextInput
-        accessibilityLabel='Write a status update'
-        maxNumberOfLines={5}
-        multiline
-        numberOfLines={2}
-        onBlur={this._onBlur.bind(this)}
-        onFocus={this._onFocus.bind(this)}
-        placeholder={`What's happening?`}
-        style={[
-          styles.default
-          this.state.isFocused && styles.focused
-        ]}
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  default: {
-    borderColor: 'gray',
-    borderBottomWidth: 2
-  },
-  focused: {
-    borderColor: 'blue'
-  }
-})
-```

docs/components/TouchableWithoutFeedback.md

@@ -1,46 +0,0 @@
-# TouchableWithoutFeedback
-
-Do not use unless you have a very good reason. All the elements that respond to
-press should have a visual feedback when touched. This is one of the primary
-reason a "web" app doesn't feel "native".
-
-**NOTE: `TouchableWithoutFeedback` supports only one child**. If you wish to have
-several child components, wrap them in a View.
-
-## Props
-
-[...View props](./View.md)
-
-**delayLongPress**: ?number
-
-Delay in ms, from `onPressIn`, before `onLongPress` is called.
-
-**delayPressIn**: ?number
-
-Delay in ms, from the start of the touch, before `onPressIn` is called.
-
-**delayPressOut**: ?number
-
-Delay in ms, from the release of the touch, before `onPressOut` is called.
-
-**disabled**: ?boolean
-
-If `true`, disable all interactions for this component.
-
-**onLongPress**: ?function
-
-**onPress**: ?function
-
-Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).
-
-**onPressIn**: ?function
-
-**onPressOut**: ?function
-
-**pressRetentionOffset**: ?`{top: number, left: number, bottom: number, right: number}`
-
-When the scroll view is disabled, this defines how far your touch may move off
-of the button, before deactivating the button. Once deactivated, try moving it
-back and you'll see that the button is once again reactivated! Move it back and
-forth several times while the scroll view is disabled. Ensure you pass in a
-constant to reduce memory allocations.

docs/components/View.md

@@ -1,317 +0,0 @@
-# View
-
-`View` is the fundamental UI building block. It is a component that supports
-style, layout with flexbox, and accessibility controls. It can be nested
-inside another `View` and has 0-to-many children of any type.
-
-Also, refer to React Native's documentation about the [Gesture Responder
-System](http://facebook.github.io/react-native/releases/0.22/docs/gesture-responder-system.html).
-
-Unsupported React Native props: `collapsable`, `onAccessibilityTap`, `onMagicTap`.
-
-## Props
-
-NOTE: `View` will transfer all other props to the rendered HTML element.
-
-**accessibilityLabel**: ?string
-
-Overrides the text that's read by a screen reader when the user interacts
-with the element. (This is implemented using `aria-label`.)
-
-See the [Accessibility guide](../guides/accessibility.md) for more information.
-
-**accessibilityLiveRegion**: ?enum('assertive', 'none', 'polite')
-
-Indicates to assistive technologies whether to notify the user when the view
-changes. The values of this attribute are expressed in degrees of importance.
-When regions are specified as `polite` (recommended), updates take low
-priority. When regions are specified as `assertive`, assistive technologies
-will interrupt and immediately notify the user. (This is implemented using
-[`aria-live`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-live).)
-
-See the [Accessibility guide](../guides/accessibility.md) for more information.
-
-(web) **accessibilityRole**: ?enum(roles)
-
-Allows assistive technologies to present and support interaction with the view
-in a manner that is consistent with user expectations for similar views of that
-type. For example, marking a touchable view with an `accessibilityRole` of
-`button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
-
-See the [Accessibility guide](../guides/accessibility.md) for more information.
-
-**accessible**: ?boolean
-
-When `true`, indicates that the view is an accessibility element (i.e.,
-focusable) and groups its child content. By default, all the touchable elements
-and elements with `accessibilityRole` of `button` and `link` are accessible.
-(This is implemented using `tabindex`.)
-
-See the [Accessibility guide](../guides/accessibility.md) for more information.
-
-**children**: ?element
-
-Child content.
-
-**hitSlop**: ?object
-
-This defines how far a touch event can start away from the view (in pixels).
-Typical interface guidelines recommend touch targets that are at least 30 - 40
-points/density-independent pixels.
-
-For example, if a touchable view has a height of `20` the touchable height can
-be extended to `40` with `hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}`.
-
-**importantForAccessibility**: ?enum('auto', 'no', 'no-hide-descendants', 'yes')
-
-A value of `no` will remove the element from the tab flow.
-
-A value of `no-hide-descendants` will hide the element and its children from
-assistive technologies. (This is implemented using `aria-hidden`.)
-
-See the [Accessibility guide](../guides/accessibility.md) for more information.
-
-**onLayout**: ?function
-
-Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
-height } } }`, where `x` and `y` are the offsets from the parent node.
-
-**onMoveShouldSetResponder**: ?function => boolean
-
-Does this view want to "claim" touch responsiveness? This is called for every
-touch move on the `View` when it is not the responder.
-
-**onMoveShouldSetResponderCapture**: ?function => boolean
-
-If a parent `View` wants to prevent a child `View` from becoming responder on a
-move, it should have this handler return `true`.
-
-**onResponderGrant**: ?function
-
-The `View` is now responding to touch events. This is the time to highlight and
-show the user what is happening.  For most touch interactions, you'll simply
-want to wrap your component in `TouchableHighlight` or `TouchableOpacity`.
-
-**onResponderMove**: ?function
-
-The user is moving their finger.
-
-**onResponderReject**: ?function
-
-Another responder is already active and will not release it to the `View`
-asking to be the responder.
-
-**onResponderRelease**: ?function
-
-Fired at the end of the touch.
-
-**onResponderTerminate**: ?function
-
-The responder has been taken from the `View`.
-
-**onResponderTerminationRequest**: ?function
-
-Some other `View` wants to become responder and is asking this `View` to
-release its responder. Returning `true` allows its release.
-
-**onStartShouldSetResponder**: ?function => boolean
-
-Does this view want to become responder on the start of a touch?
-
-**onStartShouldSetResponderCapture**: ?function => boolean
-
-If a parent `View` wants to prevent a child `View` from becoming the responder
-on a touch start, it should have this handler return `true`.
-
-**pointerEvents**: ?enum('auto', 'box-only', 'box-none', 'none') = 'auto'
-
-Controls whether the View can be the target of touch events. The enhanced
-`pointerEvents` modes provided are not part of the CSS spec, therefore,
-`pointerEvents` is excluded from `style`.
-
-`box-none` is the equivalent of:
-
-```css
-.box-none { pointer-events: none !important; }
-.box-none > * { pointer-events: auto; }
-```
-
-`box-only` is the equivalent of:
-
-```css
-.box-only { pointer-events: auto !important; }
-.box-only > * { pointer-events: none; }
-```
-
-**style**: ?style
-
-+ `alignContent`
-+ `alignItems`
-+ `alignSelf`
-+ `animationDelay` ‡
-+ `animationDirection` ‡
-+ `animationDuration` ‡
-+ `animationFillMode` ‡
-+ `animationIterationCount` ‡
-+ `animationName` ‡
-+ `animationPlayState` ‡
-+ `animationTimingFunction` ‡
-+ `backfaceVisibility`
-+ `backgroundAttachment` ‡
-+ `backgroundBlendMode` ‡
-+ `backgroundClip` ‡
-+ `backgroundColor`
-+ `backgroundImage` ‡
-+ `backgroundOrigin` ‡
-+ `backgroundPosition` ‡
-+ `backgroundRepeat` ‡
-+ `backgroundSize` ‡
-+ `borderColor` (single value)
-+ `borderTopColor`
-+ `borderBottomColor`
-+ `borderRightColor`
-+ `borderLeftColor`
-+ `borderRadius` (single value)
-+ `borderTopLeftRadius`
-+ `borderTopRightRadius`
-+ `borderBottomLeftRadius`
-+ `borderBottomRightRadius`
-+ `borderStyle` (single value)
-+ `borderTopStyle`
-+ `borderRightStyle`
-+ `borderBottomStyle`
-+ `borderLeftStyle`
-+ `borderWidth` (single value)
-+ `borderBottomWidth`
-+ `borderLeftWidth`
-+ `borderRightWidth`
-+ `borderTopWidth`
-+ `bottom`
-+ `boxShadow` ‡
-+ `boxSizing`
-+ `clip` ‡
-+ `cursor` ‡
-+ `display`
-+ `filter` ‡
-+ `flex` (number)
-+ `flexBasis`
-+ `flexDirection`
-+ `flexGrow`
-+ `flexShrink`
-+ `flexWrap`
-+ `gridAutoColumns` ‡
-+ `gridAutoFlow` ‡
-+ `gridAutoRows` ‡
-+ `gridColumnEnd` ‡
-+ `gridColumnGap` ‡
-+ `gridColumnStart` ‡
-+ `gridRowEnd` ‡
-+ `gridRowGap` ‡
-+ `gridRowStart` ‡
-+ `gridTemplateColumns` ‡
-+ `gridTemplateRows` ‡
-+ `gridTemplateAreas` ‡
-+ `height`
-+ `justifyContent`
-+ `left`
-+ `margin` (single value)
-+ `marginBottom`
-+ `marginHorizontal`
-+ `marginLeft`
-+ `marginRight`
-+ `marginTop`
-+ `marginVertical`
-+ `maxHeight`
-+ `maxWidth`
-+ `minHeight`
-+ `minWidth`
-+ `opacity`
-+ `order`
-+ `outline` ‡
-+ `outlineColor` ‡
-+ `overflow`
-+ `overflowX` ‡
-+ `overflowY` ‡
-+ `padding` (single value)
-+ `paddingBottom`
-+ `paddingHorizontal`
-+ `paddingLeft`
-+ `paddingRight`
-+ `paddingTop`
-+ `paddingVertical`
-+ `perspective` ‡
-+ `perspectiveOrigin` ‡
-+ `position`
-+ `right`
-+ `shadowColor`
-+ `shadowOffset`
-+ `shadowOpacity`
-+ `shadowRadius`
-+ `top`
-+ `transform`
-+ `transformOrigin` ‡
-+ `transitionDelay` ‡
-+ `transitionDuration` ‡
-+ `transitionProperty` ‡
-+ `transitionTimingFunction` ‡
-+ `userSelect` ‡
-+ `visibility` ‡
-+ `width`
-+ `willChange` ‡
-+ `zIndex`
-
-‡ web only.
-
-Default:
-
-```js
-{
-  alignItems: 'stretch',
-  borderWidth: 0,
-  borderStyle: 'solid',
-  boxSizing: 'border-box',
-  display: 'flex',
-  flexBasis: 'auto',
-  flexDirection: 'column',
-  flexShrink: 0,
-  margin: 0,
-  padding: 0,
-  position: 'relative'
-};
-```
-
-(See [facebook/yoga](https://github.com/facebook/yoga)).
-
-**testID**: ?string
-
-Used to locate this view in end-to-end tests.
-
-## Examples
-
-```js
-import React, { Component, PropTypes } from 'react'
-import { StyleSheet, View } from 'react-native'
-
-export default class ViewExample extends Component {
-  render() {
-    return (
-      <View style={styles.row}>
-        {
-          ['1', '2', '3', '4', '5'].map((value, i) => {
-            return <View children={value} key={i} style={styles.cell} />
-          })
-        }
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row'
-  },
-  cell: {
-    flexGrow: 1
-  }
-})
-```

docs/guides/accessibility.md

@@ -39,29 +39,39 @@ using `aria-label`.
 
 In some cases, we also want to alert the end user of the type of selected
 component (i.e., that it is a “button”). To provide more context to screen
-readers, you should specify the `accessibilityRole` property. (Note that React
-Native for Web also provides a compatibility mapping of equivalent
+readers on the web, you should use 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.
+recommendations, it also helps avoid certain browser bugs, HTML5 conformance
+errors, and accessibility anti-patterns (e.g., giving a `heading` role to a
+`button` element).
 
-For example:
+Straight-forward examples:
 
-* `<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' />`.
+* `<View accessibilityRole="article" />` => `<article role="article" />`.
+* `<View accessibilityRole="banner" />` => `<header role="banner" />`.
+* `<Text accessibilityRole="label" />` => `<label />`.
+* `<Text accessibilityRole="link" />` => `<a role="link" />`.
+* `<View accessibilityRole="main" />` => `<main role="main" />`.
 
-In the example below, the `TouchableHighlight` is announced by screen
-readers as a button.
+The `heading` role can be combined with `aria-level`:
+
+* `<Text accessibilityRole="heading" />` => `<h1 />`.
+* `<Text accessibilityRole="heading" aria-level="3" />` => `<h3 />`.
+
+The `button` role renders an accessible button but is not implemented using the
+native `button` element due to some browsers limiting the use of flexbox layout on
+its children.
+
+* `<View accessibilityRole="button" />` => `<div role="button" tabIndex="0" />`.
+
+In the example below, the `TouchableHighlight` is announced by screen readers
+as a button and it responds to touch, mouse, and keyboard interactions.
 
 ```js
 <TouchableHighlight accessibilityRole="button" onPress={this._handlePress}>
@@ -71,16 +81,13 @@ readers as a button.
 </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
+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`.
@@ -114,6 +121,18 @@ 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`).
 
+### Spatial navigation
+
+Focus-based web UIs, e.g., for TVs and Game Consoles can implement [TV remote
+control navigation](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS_for_TV/TV_remote_control_navigation)
+outside of React using existing directional-focus libraries. Every DOM element
+that React Native considers focusable can be matched by the attribute
+`data-focusable="true"`.
+
+```js
+const focusableElements = document.querySelectorAll('[data-focusable="true"]');
+```
+
 ### Other
 
 Other ARIA properties can be set via [direct

docs/guides/advanced.md

@@ -1,4 +1,4 @@
-# Advanced use
+# Experimental / unstable uses
 
 ## Use with existing React DOM components
 
@@ -101,9 +101,9 @@ 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`.
+alias `react-native` to `react-sketchapp`. This will allow you to render simple
+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)

docs/guides/client-side-rendering.md

@@ -0,0 +1,42 @@
+# Client-side rendering
+
+Render apps using `AppRegistry`:
+
+```js
+// index.web.js
+
+import App from './src/App';
+import React from 'react';
+import { AppRegistry } from 'react-native';
+
+// register the app
+AppRegistry.registerComponent('App', () => App);
+
+AppRegistry.runApplication('App', {
+  initialProps: {},
+  rootTag: document.getElementById('react-app')
+});
+```
+
+Or render individual components:
+
+```js
+import AppHeader from './src/AppHeader';
+import React from 'react';
+import { render } from 'react-native';
+
+render(<AppHeader />, document.getElementById('react-app-header'))
+```
+
+(Components will also be rendered within a tree produced by calling
+`ReactDOM.render` (i.e., an existing web app), but
+otherwise it is not recommended.)
+
+You might need to adjust the styles of the HTML document's root elements for
+your app to fill the viewport.
+
+```html
+<html style="height:100%">
+<body style="height:100%">
+<div id="react-root" style="display:flex;height:100%"></div>
+```

docs/guides/direct-manipulation.md

@@ -1,13 +1,13 @@
 # Direct manipulation
 
-React Native for Web provides several methods to directly access the underlying
-DOM node. This can be useful when you need to make changes directly to a
-component without using state/props to trigger a re-render of the entire
-subtree, or when you want to focus a view or measure its on-screen dimensions.
+React Native provides several methods to directly access the underlying host
+node. This can be useful when you need to make changes directly to a component
+without using state/props to trigger a re-render of the entire subtree, or when
+you want to focus a view or measure its on-screen dimensions.
 
 The methods described are available on most of the default components provided
-by React Native for Web. Note, however, that they are *not* available on the
-composite components that you define in your own app.
+by React Native for Web. Note, however, that they are *not* available on the composite
+components that you define in your own app.
 
 ## Instance methods
 
@@ -35,11 +35,17 @@ Like `measure`, but measures the view relative to another view, specified as
 `relativeToNativeNode`. This means that the returned `x`, `y` are relative to
 the origin `x`, `y` of the ancestor view.
 
+As always, to obtain a native node handle for a component, you can use
+`findNodeHandle(component)`.
+
+**measureInWindow**(callback: (x, y, width, height) => void)
+
+Determines the location of the given view in the window and returns the values
+via an async callback.
+
 **setNativeProps**(nativeProps: Object)
 
-This function sends props straight to the underlying DOM node. See the [direct
-manipulation](../guides/direct-manipulation.md) guide for cases where
-`setNativeProps` should be used.
+This function sends props straight to the underlying DOM node.
 
 ## About `setNativeProps`
 

docs/guides/getting-started.md

@@ -1,210 +1,109 @@
 # 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.)
+This guide will help you render components and applications with React Native
+for Web.
 
-It is recommended that your application provide a `Promise` and `Array.from`
-polyfill.
+Your application may need to polyfill `Promise`, `Object.assign`, `Array.from`,
+and [`ResizeObserver`](https://github.com/que-etc/resize-observer-polyfill) as
+necessary for your desired browser support.
 
-## Web packager
+If you're not familiar with setting up a new React web project, please follow
+the recommendations in the [React documentation](https://reactjs.org/).
 
-[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.
+## Install
 
-Create a `web/webpack.config.js` file:
+```
+yarn add react react-dom react-native-web
+```
+
+And if you need to use `ART`:
+
+```
+yarn add react-art
+```
+
+## Starter kits
+
+[create-react-app](https://github.com/facebookincubator/create-react-app)
+includes built-in support for aliasing `react-native-web` to `react-native`.
+
+```
+create-react-app my-app
+```
+
+## Configuring a module bundler
+
+If you have a custom setup, you may choose to configure your module bundler to
+alias the package to `react-native`.
+
+For example, modify your [webpack](https://github.com/webpack/webpack)
+configuration as follows:
 
 ```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]'
-    }
-  }
-};
-
+// webpack.config.js
 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' ]
+    alias: {
+      'react-native$': 'react-native-web'
+    }
   }
 }
 ```
 
-To run in development:
+Now you can create your components and applications with the React Native API.
+
+## Configuring Babel
+
+If you need to do the aliasing with Babel you can use
+[babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver)
 
 ```
-./node_modules/.bin/webpack-dev-server -d --config web/webpack.config.js --inline --hot --colors
+{
+  "plugins": [
+    ["module-resolver", {
+      "alias": {
+        "^react-native$": "react-native-web"
+      }
+    }]
+  ]
+}
 ```
 
-To build for production:
+## Configuring Jest
+
+[Jest](https://facebook.github.io/jest/) can be configured using the provided
+preset. This will map `react-native` to `react-native-web` and provide
+appropriate mocks:
 
 ```
-./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';
-
-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"
-  }
+{
+  "preset": "react-native-web"
 }
 ```
 
 Please refer to the Jest documentation for more information.
+
+## Configuring Flow
+
+[Flow](https://flow.org) can be configured to understand the aliased module:
+
+```
+[options]
+module.name_mapper='^react-native$' -> 'react-native-web'
+```
+
+You may also need to include a custom libdef
+([example](https://gist.github.com/paularmstrong/f60b40d16fc83e1e8e532d483336f9bb))
+in your config.
+
+## Other notes
+
+### Safari flexbox performance
+
+Safari prior to version 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.

docs/guides/known-issues.md

@@ -1,31 +0,0 @@
-# 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/multi-platform-apps.md

@@ -0,0 +1,154 @@
+# Multi-platform applications
+
+## 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 below 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.
+
+## Web packaging for existing React Native apps
+
+What follows is merely an _example_ of one basic way to package a web app using
+[Webpack](https://webpack.js.org) and [Babel](https://babeljs.io/). (You can
+also use the React Native bundler, [Metro](https://github.com/facebook/metro), to
+build web apps.)
+
+Packaging web apps is subtly different to packaging React Native apps and is
+complicated by the need to tree-shake and code-split non-trivial apps.
+
+Install webpack-related dependencies, for example:
+
+```
+yarn add --dev babel-loader url-loader webpack webpack-cli webpack-dev-server
+```
+
+React Native's Babel preset rewrites ES modules to CommonJS modules, preventing
+bundlers from automatically performing "tree-shaking" to remove unused modules
+from your web app build. To help with this, you can install the following Babel
+plugin:
+
+```
+yarn add --dev babel-plugin-react-native-web
+```
+
+Create a `web/webpack.config.js` file:
+
+```js
+// web/webpack.config.js
+
+const path = require('path');
+const webpack = require('webpack');
+
+const appDirectory = path.resolve(__dirname, '../');
+
+// This is needed for webpack to compile JavaScript.
+// Many OSS React Native packages are not compiled to ES5 before being
+// 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(appDirectory, 'index.web.js'),
+    path.resolve(appDirectory, 'src'),
+    path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
+  ],
+  use: {
+    loader: 'babel-loader',
+    options: {
+      cacheDirectory: true,
+      // The 'react-native' preset is recommended to match React Native's packager
+      presets: ['react-native'],
+      // Re-write paths to import only the modules needed by the app
+      plugins: ['react-native-web']
+    }
+  }
+};
+
+// 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 = {
+  entry: [
+    // load any web API polyfills
+    // path.resolve(appDirectory, 'polyfills-web.js'),
+    // your web-specific entry file
+    path.resolve(appDirectory, 'index.web.js')
+  ],
+
+  // configures where the build ends up
+  output: {
+    filename: 'bundle.web.js',
+    path: path.resolve(appDirectory, 'dist')
+  },
+
+  // ...the rest of your config
+
+  module: {
+    rules: [
+      babelLoaderConfiguration,
+      imageLoaderConfiguration
+    ]
+  },
+
+  resolve: {
+    // This will only alias the exact import "react-native"
+    alias: {
+      'react-native$': 'react-native-web'
+    },
+    // If you're working on a multi-platform React Native app, web-specific
+    // module implementations should be written in files using the extension
+    // `.web.js`.
+    extensions: [ '.web.js', '.js' ]
+  }
+}
+```
+
+To run in development from the root of your application:
+
+```
+./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.

docs/guides/server-side-rendering.md

@@ -0,0 +1,33 @@
+# Server-side rendering
+
+Server-side rendering to HTML is supported using `AppRegistry`:
+
+```js
+import App from './src/App';
+import ReactDOMServer from 'react-dom/server';
+import { AppRegistry } from 'react-native-web';
+
+// register the app
+AppRegistry.registerComponent('App', () => App);
+
+// prerender the app
+const { element, getStyleElement } = AppRegistry.getApplication('App', { initialProps });
+// first the element
+const html = ReactDOMServer.renderToString(element);
+// then the styles (optionally include a nonce if your CSP policy requires it)
+const css = ReactDOMServer.renderToStaticMarkup(getStyleElement({ nonce }));
+
+// example HTML document string
+const document = `
+<!DOCTYPE html>
+<html style="height:100%">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+${css}
+<body style="height:100%; overflow-y:hidden">
+<div id="root" style="display:flex; height: 100%">
+${html}
+</div>
+<script nonce="${nonce}" src="${bundlePath}"></script>
+`
+```

docs/guides/style.md

@@ -5,22 +5,22 @@ 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
+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
+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
 
@@ -43,6 +43,8 @@ const styles = StyleSheet.create({
 
 See the `style` documentation of individual components for supported properties.
 
+NOTE: React Native does not yet support `rem` or `em` units.
+
 ## Using styles
 
 All the React Native components accept a `style` property. The value can be a
@@ -126,7 +128,7 @@ the CSS and takes precedence over the previous rules, resulting in a margin of
 <div class="marginTop marginBottom margin"></div>
 ```
 
-But in React Native the most *specific* style property takes precedence,
+But in React Native the most *precise* style property takes precedence,
 resulting in margins of `10, 0, 20, 0`.
 
 ```js
@@ -192,7 +194,7 @@ 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),
+of the [fastest](https://github.com/necolas/react-native-web/blob/master/packages/benchmarks/README.md),
 safest, and most efficient styles-in-JavaScript solutions.
 
 ## FAQs
@@ -204,14 +206,11 @@ 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).
+Native provides the `Dimensions` API and the component-scoped `onLayout` prop.
+
+If you do choose to use Media Queries, using them in JavaScript via the
+`matchMedia` DOM API has the benefit of allowing you to swap out entire
+components, not just styles.
 
 ### What about pseudo-classes and pseudo-elements?
 

docs/guides/web-recipes.md

@@ -0,0 +1,51 @@
+# Web recipes
+
+Examples of how to implement web patterns with React Native.
+
+#### `html` and `body` styles
+
+The `html` and `body` elements require certain styles to support full-screen
+React Native apps, and disable "features" like pull-to-refresh in mobile
+browsers. Using the `body` as the root scroll view is [not reliably
+supported](https://github.com/necolas/react-native-web/issues/829).
+
+[Example code](https://codesandbox.io/s/52x1871vjl).
+
+#### Hover styles
+
+Relying on the web's native hover styles can result in several unwanted UX
+consequences. Hover styles might be displayed during touch interactions and can
+remain visually "stuck". Furthermore, there's no way to delay or persist hover
+for accessibility purposes. This recipe shows how to apply hover styles that
+integrate with the Responder event system (e.g., the `Touchable*` press styles)
+and display styles *only* when the mouse is active. It can also be used as the
+basis for programmatic hover delays and rendering of components (e.g., hover
+cards).
+
+[Example code](https://codesandbox.io/s/o9q8vy70l5)
+
+#### Link styles
+
+Cross-platform link components are straight-forward to create and can be
+combined with the hover recipe.
+
+[Example code](https://codesandbox.io/s/53r88k5opx)
+
+<!--
+#### Typography
+
+Rather than relying on inhereted global typography styles, React Native allows
+you to define components that encapsulate a typographic system. This has the
+added benefit of enabling content-specific typography adjustments, e.g.,
+different font sizes or weights for different languages.
+
+[Example code]()
+
+#### Responsive font size
+
+[Example code]()
+
+#### SVG icons
+
+[Example code]()
+-->

docs/package.json

@@ -1,11 +0,0 @@
-{
-  "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"
-  }
-}

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

@@ -1,36 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-
-module.exports = (storybookBaseConfig, configType) => {
-  const DEV = configType === 'DEVELOPMENT';
-
-  storybookBaseConfig.module.rules.push({
-    test: /\.js$/,
-    exclude: /node_modules/,
-    use: {
-      loader: 'babel-loader',
-      options: { cacheDirectory: true }
-    }
-  });
-
-  storybookBaseConfig.module.rules.push({
-    test: /\.(gif|jpe?g|png|svg)$/,
-    use: {
-      loader: 'url-loader',
-      options: { name: '[name].[ext]' }
-    }
-  });
-
-  storybookBaseConfig.plugins.push(
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
-      'process.env.__REACT_NATIVE_DEBUG_ENABLED__': DEV
-    })
-  );
-
-  storybookBaseConfig.resolve.alias = {
-    'react-native': path.join(__dirname, '../../../src/module')
-  };
-
-  return storybookBaseConfig;
-};

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

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

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

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

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

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

docs/storybook/1-components/View/examples/PropPointerEvents.js

@@ -1,28 +0,0 @@
-/**
- * @flow
- */
-
-import { logger } from '../helpers';
-import React from 'react';
-import { Text, TouchableHighlight, View } from 'react-native';
-
-const ViewStyleExample = () => (
-  <View pointerEvents="box-none">
-    <View pointerEvents="box-none">
-      <View pointerEvents="none">
-        <Text onPress={logger}>none</Text>
-      </View>
-      <TouchableHighlight onPress={logger} pointerEvents="auto">
-        <Text>auto</Text>
-      </TouchableHighlight>
-      <TouchableHighlight onPress={logger} pointerEvents="box-only">
-        <Text>box-only</Text>
-      </TouchableHighlight>
-      <TouchableHighlight onPress={logger} pointerEvents="box-none">
-        <Text>box-none</Text>
-      </TouchableHighlight>
-    </View>
-  </View>
-);
-
-export default ViewStyleExample;

docs/storybook/2-apis/NetInfo/NetInfoScreen.js

@@ -1,90 +0,0 @@
-/**
- * @flow
- */
-
-import React from 'react';
-import UIExplorer, {
-  AppText,
-  Code,
-  Description,
-  DocItem,
-  Section,
-  storiesOf,
-  TextList
-} from '../../ui-explorer';
-
-const NetInfoScreen = () => (
-  <UIExplorer title="NetInfo" url="2-apis/NetInfo">
-    <Description>
-      <AppText>
-        NetInfo asynchronously determines the online/offline status of the application.
-      </AppText>
-      <AppText>
-        Note that support for retrieving the connection type depends upon browser support (and is
-        limited to mobile browsers). It will default to <Code>unknown</Code> when support is
-        missing.
-      </AppText>
-    </Description>
-
-    <Section title="Methods">
-      <DocItem
-        description={[
-          <AppText>
-            Invokes the listener whenever network status changes. The listener receives one of the
-            following connectivity types (from the DOM connection API):
-          </AppText>,
-          <TextList
-            items={[
-              'bluetooth',
-              'cellular',
-              'ethernet',
-              'mixed',
-              'none',
-              'other',
-              'unknown',
-              'wifi',
-              'wimax'
-            ]}
-          />
-        ]}
-        example={{
-          code: "NetInfo.addEventListener('change', (connectionType) => {})"
-        }}
-        name="static addEventListener"
-        typeInfo="(eventName, handler) => void"
-      />
-
-      <DocItem
-        description="Returns a promise that resolves with one of the connectivity types listed above."
-        example={{
-          code: `NetInfo.fetch().then((connectionType) => {
-  console.log('Connection type:', connectionType);
-});`
-        }}
-        name="static fetch"
-        typeInfo="() => Promise<string>"
-      />
-
-      <DocItem
-        description="Removes the listener for network status changes."
-        name="static removeEventListener"
-        typeInfo="(eventName, handler) => void"
-      />
-    </Section>
-
-    <Section title="Properties">
-      <DocItem
-        description="An object with the same methods as above but the listener receives a boolean which represents the internet connectivity. Use this if you are only interested with whether the device has internet connectivity."
-        example={{
-          code: `NetInfo.isConnected.fetch().then((isConnected) => {
-  console.log('Connection status:', (isConnected ? 'online' : 'offline'));
-});`
-        }}
-        name="isConnected"
-        typeInfo="ObjectExpression"
-      />
-    </Section>
-  </UIExplorer>
-);
-
-storiesOf('APIs', module).add('NetInfo', NetInfoScreen);

docs/storybook/ui-explorer/AppText.js

@@ -1,30 +0,0 @@
-/* eslint-disable react/prop-types */
-
-/**
- * @flow
- */
-
-import React from 'react';
-import { StyleSheet, Text } from 'react-native';
-
-const AppText = ({ style, ...rest }) => (
-  <Text
-    {...rest}
-    accessibilityRole={rest.href ? 'link' : undefined}
-    style={[styles.baseText, style, rest.href && styles.link]}
-  />
-);
-
-export default AppText;
-
-const styles = StyleSheet.create({
-  baseText: {
-    fontSize: '1rem',
-    lineHeight: '1.3125em'
-  },
-  link: {
-    color: '#1B95E0',
-    marginTop: 'calc(0.5 * 1.3125rem)',
-    textDecorationLine: 'underline'
-  }
-});

package.json

@@ -1,119 +1,84 @@
 {
-  "name": "react-native-web",
-  "version": "0.0.130",
-  "description": "React Native for Web",
-  "main": "dist/index.js",
-  "files": [
-    "babel",
-    "dist",
-    "src",
-    "!**/__tests__"
-  ],
+  "private": true,
+  "version": "0.9.13",
+  "name": "react-native-web-monorepo",
   "scripts": {
-    "benchmark": "cd benchmarks && yarn && webpack && open index.html",
-    "build": "yarn compile && webpack --config webpack.config.js --sort-assets-by --progress",
-    "clean-dist": "del ./dist && mkdir dist",
-    "compile": "babel src -d dist --ignore *-test.js",
-    "docs:build": "cd docs && yarn build",
-    "docs:start": "cd docs && yarn && yarn start",
-    "docs:release": "cd docs && yarn release",
+    "clean": "del ./packages/*/dist",
+    "compile": "npm-run-all clean -p \"compile:* -- {@}\" --",
+    "compile:commonjs": "cd packages/react-native-web && BABEL_ENV=commonjs babel src --out-dir dist/cjs --ignore \"**/__tests__\"",
+    "compile:es": "cd packages/react-native-web && babel src --out-dir dist --ignore \"**/__tests__\"",
+    "benchmarks": "cd packages/benchmarks && yarn build",
+    "benchmarks:release": "cd packages/benchmarks && yarn release",
+    "examples": "cd packages/examples && yarn build",
+    "examples:release": "cd packages/examples && yarn release",
+    "website": "cd packages/website && yarn start",
+    "website:release": "cd packages/website && yarn release",
     "flow": "flow",
-    "fmt": "find babel benchmarks docs src -name '*.js' | grep -v -E '(node_modules|dist)' | xargs yarn fmt:cmd",
-    "fmt:cmd": "prettier --print-width=100 --single-quote --write",
-    "jest": "jest",
-    "jest:watch": "yarn test -- --watch",
-    "lint": "yarn lint:cmd -- babel benchmarks docs src",
-    "lint:cmd": "eslint --ignore-path .gitignore --fix",
+    "fmt": "prettier --write \"**/*.js\"",
+    "jest": "BABEL_ENV=commonjs jest --config ./scripts/jest/config.js",
+    "lint": "yarn lint:check --fix",
+    "lint:check": "eslint packages scripts",
     "precommit": "lint-staged",
-    "release": "yarn clean-dist && yarn lint && yarn test && yarn build && npm publish",
-    "test": "flow && jest"
-  },
-  "babel": {
-    "presets": [
-      "react-native"
-    ],
-    "plugins": [
-      [
-        "transform-react-remove-prop-types",
-        {
-          "mode": "wrap"
-        }
-      ]
-    ]
-  },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "timers": "fake",
-    "snapshotSerializers": [
-      "<rootDir>/node_modules/enzyme-to-json/serializer"
-    ]
-  },
-  "lint-staged": {
-    "**/*.js": [
-      "fmt:cmd",
-      "git update-index --again",
-      "lint:cmd"
-    ]
-  },
-  "dependencies": {
-    "animated": "^0.2.0",
-    "array-find-index": "^1.0.2",
-    "babel-runtime": "^6.26.0",
-    "create-react-class": "^15.6.0",
-    "debounce": "1.0.2",
-    "deep-assign": "^2.0.0",
-    "fbjs": "^0.8.14",
-    "hyphenate-style-name": "^1.0.2",
-    "inline-style-prefixer": "^3.0.8",
-    "normalize-css-color": "^1.0.2",
-    "prop-types": "^15.5.10",
-    "react-timer-mixin": "^0.13.3"
+    "prerelease": "yarn test && yarn compile && yarn compile:commonjs",
+    "release": "node ./scripts/release/publish.js",
+    "postrelease": "yarn benchmarks:release && yarn examples:release && yarn website:release",
+    "test": "yarn flow && yarn lint:check && yarn jest --runInBand"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.2",
-    "babel-plugin-tester": "^4.0.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-flow": "^6.23.0",
+    "babel-preset-react": "^6.24.1",
     "babel-preset-react-native": "^4.0.0",
     "caniuse-api": "^2.0.0",
     "del-cli": "^1.1.0",
-    "enzyme": "^2.9.1",
-    "enzyme-to-json": "^2.0.0",
-    "eslint": "^4.6.1",
-    "eslint-config-prettier": "^2.4.0",
-    "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-react": "^7.3.0",
-    "file-loader": "^0.11.2",
-    "flow-bin": "^0.49.1",
-    "jest": "^21.1.0",
-    "lint-staged": "^4.1.3",
-    "prettier": "^1.7.0",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1",
-    "url-loader": "^0.5.9",
-    "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.9.0"
+    "enzyme": "^3.6.0",
+    "enzyme-adapter-react-16": "^1.5.0",
+    "enzyme-to-json": "^3.3.3",
+    "eslint": "^4.19.1",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-react": "^7.7.0",
+    "flow-bin": "^0.63.1",
+    "glob": "^7.1.2",
+    "husky": "^0.14.3",
+    "inline-style-prefixer": "^5.0.3",
+    "jest": "^22.4.3",
+    "jest-canvas-mock": "^1.0.2",
+    "lint-staged": "^7.1.0",
+    "npm-run-all": "^4.1.3",
+    "prettier": "^1.12.1",
+    "react": "^16.7.0",
+    "react-art": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-test-renderer": "^16.7.0"
   },
-  "peerDependencies": {
-    "react": "15.4.x || 15.5.x || 15.6.x",
-    "react-dom": "15.4.x || 15.5.x || 15.6.x"
+  "workspaces": [
+    "packages/*"
+  ],
+  "lint-staged": {
+    "packages/react-native-web/src/index.js": [
+      "node ./scripts/babel/createModuleMap.js",
+      "prettier --write ./packages/babel-plugin-react-native-web/src/moduleMap.js",
+      "git add ./packages/babel-plugin-react-native-web/src/moduleMap.js"
+    ],
+    "**/*.js": [
+      "prettier --write",
+      "git update-index --again",
+      "eslint"
+    ]
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true
   },
   "author": "Nicolas Gallagher",
-  "license": "BSD-3-Clause",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/necolas/react-native-web.git"
-  },
-  "tags": [
-    "react"
-  ],
-  "keywords": [
-    "react",
-    "react-component",
-    "react-native",
-    "web"
-  ]
+  "license": "MIT"
 }

packages/babel-plugin-react-native-web/README.md

@@ -0,0 +1,52 @@
+# babel-plugin-react-native-web
+
+[![npm version][package-badge]][package-url] [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
+
+A Babel plugin that will alias `react-native` to `react-native-web` and exclude
+any modules not required by your app (keeping bundle size down).
+
+## Installation
+
+```
+yarn add --dev babel-plugin-react-native-web
+```
+
+## Usage
+
+**.babelrc**
+
+```
+{
+  "plugins": [
+    ["react-native-web", { commonjs: true }]
+  ]
+}
+```
+
+You should configure the plugin to match the module format used by your
+bundler. Most modern bundlers will use a package's ES modules by default (i.e.,
+if `package.json` has a `module` field). But if you need the plugin to rewrite
+import paths to point to CommonJS modules, you must set the `commonjs` option
+to `true`.
+
+## Example
+
+NOTE: `react-native-web` internal paths are _not stable_ and you must not rely
+on them. Always use the Babel plugin to optimize your build. What follows is an
+example of the rewrite performed by the plugin.
+
+**Before**
+
+```js
+import { StyleSheet, View } from 'react-native';
+```
+
+**After**
+
+```js
+import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
+import View from 'react-native-web/dist/exports/View';
+```
+
+[package-badge]: https://img.shields.io/npm/v/babel-plugin-react-native-web.svg?style=flat
+[package-url]: https://yarnpkg.com/en/package/babel-plugin-react-native-web

packages/babel-plugin-react-native-web/index.js

@@ -0,0 +1 @@
+module.exports = require('./src');

packages/babel-plugin-react-native-web/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "babel-plugin-react-native-web",
+  "version": "0.9.13",
+  "description": "Babel plugin for React Native for Web",
+  "main": "index.js",
+  "devDependencies": {
+    "babel-plugin-tester": "^5.0.0"
+  },
+  "author": "Nicolas Gallagher",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/necolas/react-native-web.git"
+  }
+}

packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Rewrite react-native to react-native-web export from "react-native": export from "react-native" 1`] = `
+"
+export { View } from 'react-native';
+export { ColorPropType, StyleSheet, Text, createElement } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as View } from 'react-native-web/dist/exports/View';
+export { default as ColorPropType } from 'react-native-web/dist/exports/ColorPropType';
+export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';
+export { default as Text } from 'react-native-web/dist/exports/Text';
+export { default as createElement } from 'react-native-web/dist/exports/createElement';
+"
+`;
+
+exports[`Rewrite react-native to react-native-web export from "react-native-web": export from "react-native-web" 1`] = `
+"
+export { View } from 'react-native-web';
+export { ColorPropType, StyleSheet, Text, createElement } from 'react-native-web';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as View } from 'react-native-web/dist/exports/View';
+export { default as ColorPropType } from 'react-native-web/dist/exports/ColorPropType';
+export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';
+export { default as Text } from 'react-native-web/dist/exports/Text';
+export { default as createElement } from 'react-native-web/dist/exports/createElement';
+"
+`;
+
+exports[`Rewrite react-native to react-native-web import from "native-native": import from "native-native" 1`] = `
+"
+import ReactNative from 'react-native';
+import { View } from 'react-native';
+import { Invalid, View as MyView, ViewPropTypes } from 'react-native';
+import * as ReactNativeModules from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import ReactNative from 'react-native-web/dist/index';
+import View from 'react-native-web/dist/exports/View';
+import { Invalid } from 'react-native-web/dist/index';
+import MyView from 'react-native-web/dist/exports/View';
+import ViewPropTypes from 'react-native-web/dist/exports/ViewPropTypes';
+import * as ReactNativeModules from 'react-native-web/dist/index';
+"
+`;
+
+exports[`Rewrite react-native to react-native-web import from "native-native": import from "native-native" 2`] = `
+"
+import ReactNative from 'react-native';
+import { View } from 'react-native';
+import { Invalid, View as MyView, ViewPropTypes } from 'react-native';
+import * as ReactNativeModules from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import ReactNative from 'react-native-web/dist/cjs/index';
+import View from 'react-native-web/dist/cjs/exports/View';
+import { Invalid } from 'react-native-web/dist/cjs/index';
+import MyView from 'react-native-web/dist/cjs/exports/View';
+import ViewPropTypes from 'react-native-web/dist/cjs/exports/ViewPropTypes';
+import * as ReactNativeModules from 'react-native-web/dist/cjs/index';
+"
+`;
+
+exports[`Rewrite react-native to react-native-web import from "react-native-web": import from "react-native-web" 1`] = `
+"
+import { createElement } from 'react-native-web';
+import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
+import * as ReactNativeModules from 'react-native-web';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import createElement from 'react-native-web/dist/exports/createElement';
+import ColorPropType from 'react-native-web/dist/exports/ColorPropType';
+import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
+import View from 'react-native-web/dist/exports/View';
+import TouchableOpacity from 'react-native-web/dist/exports/TouchableOpacity';
+import processColor from 'react-native-web/dist/exports/processColor';
+import * as ReactNativeModules from 'react-native-web/dist/index';
+"
+`;
+
+exports[`Rewrite react-native to react-native-web require "react-native": require "react-native" 1`] = `
+"
+const ReactNative = require('react-native');
+const { View } = require('react-native');
+const { StyleSheet, TouchableOpacity } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const ReactNative = require('react-native-web/dist/index').default;
+
+const View = require('react-native-web/dist/exports/View').default;
+
+const StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;
+
+const TouchableOpacity = require('react-native-web/dist/exports/TouchableOpacity').default;
+"
+`;
+
+exports[`Rewrite react-native to react-native-web require "react-native": require "react-native" 2`] = `
+"
+const ReactNative = require('react-native');
+const { View } = require('react-native');
+const { StyleSheet, TouchableOpacity } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const ReactNative = require('react-native-web/dist/cjs/index').default;
+
+const View = require('react-native-web/dist/cjs/exports/View').default;
+
+const StyleSheet = require('react-native-web/dist/cjs/exports/StyleSheet').default;
+
+const TouchableOpacity = require('react-native-web/dist/cjs/exports/TouchableOpacity').default;
+"
+`;
+
+exports[`Rewrite react-native to react-native-web require "react-native-web": require "react-native-web" 1`] = `
+"
+const ReactNative = require('react-native-web');
+const { createElement } = require('react-native-web');
+const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const ReactNative = require('react-native-web/dist/index').default;
+
+const createElement = require('react-native-web/dist/exports/createElement').default;
+
+const ColorPropType = require('react-native-web/dist/exports/ColorPropType').default;
+
+const StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;
+
+const View = require('react-native-web/dist/exports/View').default;
+
+const TouchableOpacity = require('react-native-web/dist/exports/TouchableOpacity').default;
+
+const processColor = require('react-native-web/dist/exports/processColor').default;
+"
+`;

packages/babel-plugin-react-native-web/src/__tests__/index-test.js

@@ -0,0 +1,69 @@
+const plugin = require('..');
+const pluginTester = require('babel-plugin-tester');
+
+const tests = [
+  // import react-native
+  {
+    title: 'import from "native-native"',
+    code: `import ReactNative from 'react-native';
+import { View } from 'react-native';
+import { Invalid, View as MyView, ViewPropTypes } from 'react-native';
+import * as ReactNativeModules from 'react-native';`,
+    snapshot: true
+  },
+  {
+    title: 'import from "native-native"',
+    code: `import ReactNative from 'react-native';
+import { View } from 'react-native';
+import { Invalid, View as MyView, ViewPropTypes } from 'react-native';
+import * as ReactNativeModules from 'react-native';`,
+    snapshot: true,
+    pluginOptions: { commonjs: true }
+  },
+  {
+    title: 'import from "react-native-web"',
+    code: `import { createElement } from 'react-native-web';
+import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
+import * as ReactNativeModules from 'react-native-web';`,
+    snapshot: true
+  },
+  {
+    title: 'export from "react-native"',
+    code: `export { View } from 'react-native';
+export { ColorPropType, StyleSheet, Text, createElement } from 'react-native';`,
+    snapshot: true
+  },
+  {
+    title: 'export from "react-native-web"',
+    code: `export { View } from 'react-native-web';
+export { ColorPropType, StyleSheet, Text, createElement } from 'react-native-web';`,
+    snapshot: true
+  },
+  {
+    title: 'require "react-native"',
+    code: `const ReactNative = require('react-native');
+const { View } = require('react-native');
+const { StyleSheet, TouchableOpacity } = require('react-native');`,
+    snapshot: true
+  },
+  {
+    title: 'require "react-native"',
+    code: `const ReactNative = require('react-native');
+const { View } = require('react-native');
+const { StyleSheet, TouchableOpacity } = require('react-native');`,
+    snapshot: true,
+    pluginOptions: { commonjs: true }
+  },
+  {
+    title: 'require "react-native-web"',
+    code: `const ReactNative = require('react-native-web');
+const { createElement } = require('react-native-web');
+const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');`,
+    snapshot: true
+  }
+];
+
+pluginTester({
+  plugin,
+  tests
+});

packages/babel-plugin-react-native-web/src/index.js

@@ -0,0 +1,136 @@
+const moduleMap = require('./moduleMap');
+
+const isCommonJS = opts => opts.commonjs === true;
+
+const getDistLocation = (importName, opts) => {
+  const format = isCommonJS(opts) ? 'cjs/' : '';
+  if (importName === 'index') {
+    return `react-native-web/dist/${format}index`;
+  } else if (importName && moduleMap[importName]) {
+    return `react-native-web/dist/${format}exports/${importName}`;
+  }
+};
+
+const isReactNativeRequire = (t, node) => {
+  const { declarations } = node;
+  if (declarations.length > 1) {
+    return false;
+  }
+  const { id, init } = declarations[0];
+  return (
+    (t.isObjectPattern(id) || t.isIdentifier(id)) &&
+    t.isCallExpression(init) &&
+    t.isIdentifier(init.callee) &&
+    init.callee.name === 'require' &&
+    init.arguments.length === 1 &&
+    (init.arguments[0].value === 'react-native' || init.arguments[0].value === 'react-native-web')
+  );
+};
+
+const isReactNativeModule = ({ source, specifiers }) =>
+  source &&
+  (source.value === 'react-native' || source.value === 'react-native-web') &&
+  specifiers.length;
+
+module.exports = function({ types: t }) {
+  return {
+    name: 'Rewrite react-native to react-native-web',
+    visitor: {
+      ImportDeclaration(path, state) {
+        const { specifiers } = path.node;
+        if (isReactNativeModule(path.node)) {
+          const imports = specifiers
+            .map(specifier => {
+              if (t.isImportSpecifier(specifier)) {
+                const importName = specifier.imported.name;
+                const distLocation = getDistLocation(importName, state.opts);
+
+                if (distLocation) {
+                  return t.importDeclaration(
+                    [t.importDefaultSpecifier(t.identifier(specifier.local.name))],
+                    t.stringLiteral(distLocation)
+                  );
+                }
+              }
+              return t.importDeclaration(
+                [specifier],
+                t.stringLiteral(getDistLocation('index', state.opts))
+              );
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(imports);
+        }
+      },
+      ExportNamedDeclaration(path, state) {
+        const { specifiers } = path.node;
+        if (isReactNativeModule(path.node)) {
+          const exports = specifiers
+            .map(specifier => {
+              if (t.isExportSpecifier(specifier)) {
+                const exportName = specifier.exported.name;
+                const localName = specifier.local.name;
+                const distLocation = getDistLocation(localName, state.opts);
+
+                if (distLocation) {
+                  return t.exportNamedDeclaration(
+                    null,
+                    [t.exportSpecifier(t.identifier('default'), t.identifier(exportName))],
+                    t.stringLiteral(distLocation)
+                  );
+                }
+              }
+              return t.exportNamedDeclaration(
+                null,
+                [specifier],
+                t.stringLiteral(getDistLocation('index', state.opts))
+              );
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(exports);
+        }
+      },
+      VariableDeclaration(path, state) {
+        if (isReactNativeRequire(t, path.node)) {
+          const { id } = path.node.declarations[0];
+          if (t.isObjectPattern(id)) {
+            const imports = id.properties
+              .map(identifier => {
+                const distLocation = getDistLocation(identifier.key.name, state.opts);
+                if (distLocation) {
+                  return t.variableDeclaration(path.node.kind, [
+                    t.variableDeclarator(
+                      t.identifier(identifier.value.name),
+                      t.memberExpression(
+                        t.callExpression(t.identifier('require'), [t.stringLiteral(distLocation)]),
+                        t.identifier('default')
+                      )
+                    )
+                  ]);
+                }
+              })
+              .filter(Boolean);
+
+            path.replaceWithMultiple(imports);
+          } else if (t.isIdentifier(id)) {
+            const name = id.name;
+            const importIndex = t.variableDeclaration(path.node.kind, [
+              t.variableDeclarator(
+                t.identifier(name),
+                t.memberExpression(
+                  t.callExpression(t.identifier('require'), [
+                    t.stringLiteral(getDistLocation('index', state.opts))
+                  ]),
+                  t.identifier('default')
+                )
+              )
+            ]);
+
+            path.replaceWith(importIndex);
+          }
+        }
+      }
+    }
+  };
+};

packages/babel-plugin-react-native-web/src/moduleMap.js

@@ -0,0 +1,70 @@
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+module.exports = {
+  ART: true,
+  AccessibilityInfo: true,
+  ActivityIndicator: true,
+  Alert: true,
+  Animated: true,
+  AppRegistry: true,
+  AppState: true,
+  AsyncStorage: true,
+  BackHandler: true,
+  Button: true,
+  CheckBox: true,
+  Clipboard: true,
+  ColorPropType: true,
+  DeviceInfo: true,
+  Dimensions: true,
+  Easing: true,
+  EdgeInsetsPropType: true,
+  FlatList: true,
+  I18nManager: true,
+  Image: true,
+  ImageBackground: true,
+  InteractionManager: true,
+  Keyboard: true,
+  KeyboardAvoidingView: true,
+  LayoutAnimation: true,
+  Linking: true,
+  ListView: true,
+  Modal: true,
+  NativeEventEmitter: true,
+  NativeModules: true,
+  NetInfo: true,
+  PanResponder: true,
+  Picker: true,
+  PixelRatio: true,
+  Platform: true,
+  PointPropType: true,
+  ProgressBar: true,
+  RefreshControl: true,
+  SafeAreaView: true,
+  ScrollView: true,
+  SectionList: true,
+  Share: true,
+  Slider: true,
+  StatusBar: true,
+  StyleSheet: true,
+  SwipeableFlatList: true,
+  SwipeableListView: true,
+  Switch: true,
+  Text: true,
+  TextInput: true,
+  TextPropTypes: true,
+  Touchable: true,
+  TouchableHighlight: true,
+  TouchableNativeFeedback: true,
+  TouchableOpacity: true,
+  TouchableWithoutFeedback: true,
+  UIManager: true,
+  Vibration: true,
+  View: true,
+  ViewPropTypes: true,
+  VirtualizedList: true,
+  YellowBox: true,
+  createElement: true,
+  findNodeHandle: true,
+  processColor: true,
+  render: true,
+  unmountComponentAtNode: true
+};

packages/benchmarks/README.md

@@ -0,0 +1,70 @@
+# benchmarks
+
+Try the [benchmarks app](https://necolas.github.io/react-native-web/benchmarks) online.
+
+To run the benchmarks locally:
+
+```
+yarn benchmarks
+open ./packages/benchmarks/dist/index.html
+```
+
+Develop against these benchmarks:
+
+```
+yarn compile --watch
+yarn benchmarks --watch
+```
+
+## Notes
+
+These benchmarks are approximations of extreme cases that libraries may
+encounter. Their purpose is to provide an early-warning signal for performance
+regressions. Each test report includes the mean and standard deviation of the
+timings, and approximations of the time spent in scripting (S) and layout (L).
+
+The components used in the render benchmarks are simple enough to be
+implemented by multiple UI or style libraries. The benchmark implementations
+and the features of the style libraries are _only approximately equivalent in
+functionality_.
+
+No benchmark will run for more than 20 seconds.
+
+### Mount deep/wide tree
+
+These cases look at the performance of mounting and rendering large trees of
+elements that use static styles.
+
+### Update dynamic styles
+
+This case looks at the performance of repeated style updates to a large mounted
+tree. Some libraries choose to inject new styles for each "dynamic style",
+whereas others choose to use inline styles. Libraries without built-in support
+for dynamic styles (i.e., they rely on user-authored inline styles) are not
+included.
+
+## Example results
+
+### MacBook Pro (2011)
+
+MacBook Pro (13-inch, Early 2011); 2.3 GHz Intel Core i5; 8 GB 1333 MHz DDR3 RAM. Google Chrome 63.
+
+Typical render timings: mean ± standard deviations.
+
+| Implementation                        | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) |
+| :--- | ---: | ---: | ---: |
+| `css-modules`                         |     `30.19` `±04.84` |     `38.25` `±04.85` |                   - |
+| `react-native-web@0.4.0`              |     `36.40` `±04.98` |     `51.28` `±05.58` |    `19.36` `±02.56` |
+| `inline-styles`                       |     `64.12` `±07.69` |     `94.49` `±11.34` |    `09.84` `±02.36` |
+
+### Moto G4
+
+Moto G4 (Android 7); Octa-core (4x1.5 GHz & 4x1.2 Ghz); 2 GB RAM. Google Chrome 63.
+
+Typical render timings: mean ± standard deviations.
+
+| Implementation                        | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) |
+| :--- | ---: | ---: | ---: |
+| `css-modules`                         |     `98.24` `±20.26` |    `143.75` `±25.50` |                   - |
+| `react-native-web@0.4.0`              |    `131.46` `±18.96` |    `174.70` `±14.88` |    `60.87` `±06.32` |
+| `inline-styles`                       |    `184.58` `±26.23` |    `273.86` `±26.23` |    `30.28` `±07.44` |

packages/benchmarks/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Performance tests</title>
+  <meta name="viewport" content="width=device-width">
+  <style>
+    html, body { height: 100%; width: 100%; overflow: hidden; }
+    .root { height: 100%; overflow: hidden; }
+  </style>
+</head>
+<body>
+  <div class="root"></div>
+  <script src="./bundle.js"></script>
+</body>
+</html>

packages/benchmarks/package.json

@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "name": "benchmarks",
+  "version": "0.9.13",
+  "scripts": {
+    "build": "mkdir -p dist && cp -f index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
+    "release": "NODE_ENV=production yarn build && git checkout gh-pages && rm -rf ../../benchmarks && mv dist ../../benchmarks && git add -A && git commit -m \"Benchmarks deploy\" && git push origin gh-pages && git checkout -"
+  },
+  "dependencies": {
+    "aphrodite": "^2.2.3",
+    "classnames": "^2.2.6",
+    "d3-scale-chromatic": "^1.3.3",
+    "emotion": "^10.0.5",
+    "fela": "^10.0.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-fela": "^10.0.2",
+    "react-jss": "^8.6.1",
+    "react-native-web": "0.9.13",
+    "reactxp": "^1.5.0",
+    "styled-components": "^4.1.3",
+    "styled-jsx": "^3.1.2",
+    "styletron-engine-atomic": "^1.0.13",
+    "styletron-react": "^4.4.4"
+  },
+  "devDependencies": {
+    "babel-plugin-react-native-web": "0.9.13",
+    "css-loader": "^2.0.2",
+    "style-loader": "^0.23.1",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.28.1",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.1.2"
+  }
+}