0.3.1

An experimental CSS property to control the behavior when the scroll
position of a scroll container reaches the edge of the scrollport. This
allows web apps to get closer to native scrolling behaviour and
performance.

https://wicg.github.io/overscroll-behavior/
https://developers.google.com/web/updates/2017/11/overscroll-behavior

Fix #765

.babelrc

@@ -1,8 +1,5 @@
 {
   "presets": [
-    "react-native"
-  ],
-  "plugins": [
-    [ "transform-react-remove-prop-types", { "mode": "wrap" } ]
+    "./scripts/babel/preset"
   ]
 }

.editorconfig

@@ -1,9 +0,0 @@
-# EditorConfig: http://editorconfig.org
-
-root = true
-
-[*]
-end_of_line = lf
-insert_final_newline = true
-indent_style = space
-indent_size = 2

.eslintignore

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

.eslintrc

@@ -24,7 +24,16 @@
   "globals": {
     "document": false,
     "navigator": false,
-    "window": false
+    "window": false,
+    // Flow global types
+    "HTMLInputElement": false,
+    "ReactClass": false,
+    "ReactComponent": false,
+    "ReactElement": false,
+    "ReactPropsChainableTypeChecker": false,
+    "ReactPropsCheckType": false,
+    "ReactPropTypes": false,
+    "SyntheticEvent": false
   },
   "rules": {
     "camelcase": 0,

.flowconfig

@@ -1,13 +1,17 @@
+[version]
+^0.63.0
+
 [ignore]
-.*/__tests__/.*
-.*/examples/.*
-.*/performance/.*
-.*/node_modules/animated/*
+<PROJECT_ROOT>/.*/__tests__/.*
+<PROJECT_ROOT>/packages/benchmarks/.*
+<PROJECT_ROOT>/packages/.*/dist/.*
+<PROJECT_ROOT>/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

@@ -0,0 +1,132 @@
+# Contributing
+
+## Reporting Issues and Asking Questions
+
+Before opening an issue, please search the [issue
+tracker](https://github.com/necolas/react-native-web/issues) to make sure your
+issue hasn't already been reported.
+
+## Getting started
+
+Visit the [Issue tracker](https://github.com/necolas/react-native-web/issues)
+to find a list of open issues that need attention.
+
+Fork, then clone the repo:
+
+```
+git clone https://github.com/your-username/react-native-web.git
+```
+
+Install dependencies (requires [yarn](https://yarnpkg.com/en/docs/install)):
+
+```
+yarn
+```
+
+## Automated tests
+
+To run the linter:
+
+```
+yarn lint
+```
+
+To run flow:
+
+```
+yarn flow
+```
+
+To run the unit tests:
+
+```
+yarn jest
+```
+
+…in watch mode:
+
+```
+yarn jest --watch
+```
+
+To run all these automated tests:
+
+```
+yarn test
+```
+
+## Compile and build
+
+To compile the `react-native-web` source code:
+
+```
+yarn compile
+```
+
+…in watch mode:
+
+```
+yarn compile --watch
+```
+
+## Website and visual tests
+
+To run the interactive storybook:
+
+```
+yarn docs:start
+```
+
+When you're also making changes to the 'react-native-web' source files, run this command in another process:
+
+```
+yarn compile --watch
+```
+
+## Benchmarks
+
+To run the performance benchmarks in a browser (opening `./packages/benchmarks/index.html`):
+
+```
+yarn benchmark
+```
+
+### New Features
+
+Please open an issue with a proposal for a new feature or refactoring before
+starting on the work. We don't want you to waste your efforts on a pull request
+that we won't want to accept.
+
+## Pull requests
+
+**Before submitting a pull request**, please make sure the following is done:
+
+1. Fork the repository and create your branch from `master`.
+2. If you've added code that should be tested, add tests!
+3. If you've changed APIs, update the documentation.
+4. Ensure the tests pass (`yarn test`).
+
+You can now submit a pull request, referencing any issues it addresses.
+
+Please try to keep your pull request focused in scope and avoid including
+unrelated commits.
+
+After you have submitted your pull request, we'll try to get back to you as
+soon as possible. We may suggest some changes or improvements.
+
+Thank you for contributing!
+
+## 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,30 +1,20 @@
-<!--
-React Native for Web is an implementation of React Native. If you have feature
-requests, you should post them to https://productpains.com/product/react-native/.
-
-GitHub issues should only be used for bugs or Web-specific features you believe
-React Native requires.
-
-Make sure to add ALL the information needed to understand the bug so that
-someone can help. If the info is missing we'll add the 'needs more information'
-label and close the issue until there is enough information.
--->
+**Do you want to request a *feature* or report a *bug*?**
 
 **What is the current behavior?**
 
-Link to minimal test case: (template: [codepen](https://codepen.io/necolas/pen/PZzwBR?editors=0010))
-
-**What is the expected behaviour?**
-
-**Steps to reproduce**
+**If the current behavior is a bug, please provide the steps to reproduce and
+if a minimal demo of the problem via Glitch or similar (template:
+https://glitch.com/edit/#!/react-native-web-playground).**
 
 1.
 2.
 
-**Environment (include versions)**
+**What is the expected behavior?**
 
-OS:
-Device:
-Browser:
-React Native for Web (version):
-React (version):
+**Environment (include versions). Did this work in previous versions?**
+
+* OS:
+* Device:
+* Browser:
+* React Native for Web (version):
+* React (version):

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,18 +1 @@
-<!--
-Thanks for submitting a pull request! Make sure the PR does only one thing.
-Please provide enough information so that others can review your pull
-request. Make sure you have read the Contributing Guidelines -
-https://github.com/necolas/react-native-web/CONTRIBUTING.md
--->
-
-**This patch solves the following problem**
-
-**Test plan**
-
-**This pull request**
-
-- [ ] includes documentation
-- [ ] includes tests
-- [ ] includes benchmark reports
-- [ ] includes an interactive example
-- [ ] includes screenshots/videos
+**Before submitting a pull request,** please make sure you have followed the steps the CONTRIBUTING guide.

.gitignore

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

.travis.yml

@@ -1,8 +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 test
+  - yarn test

CONTRIBUTING.md

@@ -1,95 +0,0 @@
-# Contributing
-
-## Reporting Issues and Asking Questions
-
-Before opening an issue, please search the [issue
-tracker](https://github.com/necolas/react-native-web/issues) to make sure your
-issue hasn't already been reported.
-
-## Development
-
-Visit the [Issue tracker](https://github.com/necolas/react-native-web/issues)
-to find a list of open issues that need attention.
-
-Fork, then clone the repo:
-
-```
-git clone https://github.com/your-username/react-native-web.git
-```
-
-Install dependencies (requires [yarn](https://yarnpkg.com/en/docs/install):
-
-```
-yarn
-```
-
-Run the examples:
-
-```
-npm run examples
-```
-
-Run the benchmarks in a browser by opening `./performance/index.html` after running:
-
-```
-npm run build:performance
-```
-
-### Building
-
-```
-npm run build
-```
-
-To create a UMD build:
-
-```
-npm run build:umd
-```
-
-### Testing and Linting
-
-To run the tests:
-
-```
-npm run test
-```
-
-To continuously watch and run tests, run the following:
-
-```
-npm run test:watch
-```
-
-Before create a commit run:
-
-```
-npm run precommit
-```
-
-To format or lint the entire project:
-
-```
-npm run fmt
-npm run lint
-```
-
-### New Features
-
-Please open an issue with a proposal for a new feature or refactoring before
-starting on the work. We don't want you to waste your efforts on a pull request
-that we won't want to accept.
-
-## Submitting Changes
-
-* Open a new issue in the [Issue tracker](https://github.com/necolas/react-native-web/issues).
-* Fork the repo.
-* Create a new feature branch based off the `master` branch.
-* Make sure all tests pass and there are no linting errors.
-* Submit a pull request, referencing any issues it addresses.
-
-Please try to keep your pull request focused in scope and avoid including unrelated commits.
-
-After you have submitted your pull request, we'll try to get back to you as soon as possible. We may suggest some changes or improvements.
-
-Thank you for contributing!

README.md

@@ -1,146 +1,137 @@
 # 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][react-native-url] components and APIs for the Web.
+"React Native for Web" brings the platform-agnostic Components and APIs of
+[React Native][react-native-url] to the Web.
+
+* **High-quality user interfaces**: React Native for Web makes it easy to
+create [fast](packages/benchmarks/README.md), adaptive web UIs in JavaScript.
+It provides native-like 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.
+
+* **Write once, render anywhere**: React Native for Web 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 for Web? [Twitter](https://mobile.twitter.com),
+[Major League Soccer](https://matchcenter.mlssoccer.com), [The
+Times](https://github.com/newsuk/times-components), [React Native's
+documentation](http://facebook.github.io/react-native/).
 
 Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
 
-[npm-image]: https://badge.fury.io/js/react-native-web.svg
-[npm-url]: https://npmjs.org/package/react-native-web
-[react-native-url]: https://facebook.github.io/react-native/
-[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
-[travis-url]: https://travis-ci.org/necolas/react-native-web
-
-## Overview
-
-"React Native for Web" is a project to bring React Native's building blocks and
-touch handling to the Web. [Read more](#why).
-
-Browse the [UI Explorer](https://necolas.github.io/react-native-web/storybook/)
-to see React Native examples running on Web. Or try it out online with [React
-Native for Web: Playground](https://www.webpackbin.com/bins/-KgucwxRbn7HRU-V-3Bc).
-
 ## Quick start
 
-To install in your app:
+The easiest way to get started with React Native for Web is to use this
+[ready-to-go project on Glitch](https://glitch.com/edit/#!/react-native-web-playground).
+You don’t need to install anything to try it out.
 
-```
-npm install --save react@15.5 react-dom@15.5 react-native-web
-```
-
-Read the [Getting Started](docs/guides/getting-started.md) guide.
+If you are unfamiliar with setting up a React web project, please follow the
+recommendations in the [React documentation](https://reactjs.org/).
 
 ## Documentation
 
-Guides:
+You can find the React Native for Web API documentation [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)
+Please refer to the [React Native documentation][react-native-url] for more
+design details, and for 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).
 
-Exported modules:
+### Installation
 
-* Components
-  * [`ActivityIndicator`](docs/components/ActivityIndicator.md)
-  * [`Button`](docs/components/Button.md)
-  * [`Image`](docs/components/Image.md)
-  * [`ListView`](docs/components/ListView.md)
-  * [`ProgressBar`](docs/components/ProgressBar.md)
-  * [`ScrollView`](docs/components/ScrollView.md)
-  * [`Switch`](docs/components/Switch.md)
-  * [`Text`](docs/components/Text.md)
-  * [`TextInput`](docs/components/TextInput.md)
-  * [`TouchableHighlight`](http://facebook.github.io/react-native/releases/0.22/docs/touchablehighlight.html) (mirrors React Native)
-  * [`TouchableOpacity`](http://facebook.github.io/react-native/releases/0.22/docs/touchableopacity.html) (mirrors React Native)
-  * [`TouchableWithoutFeedback`](docs/components/TouchableWithoutFeedback.md)
-  * [`View`](docs/components/View.md)
-* APIs
-  * [`Animated`](http://facebook.github.io/react-native/releases/0.20/docs/animated.html) (mirrors React Native)
-  * [`AppRegistry`](docs/apis/AppRegistry.md)
-  * [`AppState`](docs/apis/AppState.md)
-  * [`AsyncStorage`](docs/apis/AsyncStorage.md)
-  * [`Clipboard`](docs/apis/Clipboard.md)
-  * [`Dimensions`](docs/apis/Dimensions.md)
-  * [`I18nManager`](docs/apis/I18nManager.md)
-  * [`NativeMethods`](docs/apis/NativeMethods.md)
-  * [`NetInfo`](docs/apis/NetInfo.md)
-  * [`PanResponder`](http://facebook.github.io/react-native/releases/0.20/docs/panresponder.html#content) (mirrors React Native)
-  * [`PixelRatio`](docs/apis/PixelRatio.md)
-  * [`Platform`](docs/apis/Platform.md)
-  * [`StyleSheet`](docs/apis/StyleSheet.md)
-  * [`Vibration`](docs/apis/Vibration.md)
+Install using `yarn` or `npm`:
 
-<span id="#why"></span>
-
-## Why?
-
-There are many different teams at Twitter building web applications with React.
-We want to share React components, libraries, and APIs between teams…much like
-the OSS community tries to do. At our scale, this involves dealing with
-multiple, inter-related problems including: component styles, animation, touch
-interactions, layout adaptation, accessibility, RTL layout, theming, and build-
-or server-rendering.
-
-This is hard to do with React DOM, as the components are essentially the same
-low-level building blocks that the browser provides. However, React Native
-avoids, solves, or can solve almost all these problems. Central to this is
-React Native's JavaScript style API (not strictly "CSS-in-JS") which avoids the
-key [problems with CSS](https://speakerdeck.com/vjeux/react-css-in-js) by
-giving up some of the complexity of CSS.
-
-## Example code
-
-```js
-import React from 'react'
-import { AppRegistry, Image, StyleSheet, Text, View } from 'react-native'
-
-// Components
-const Card = ({ children }) => <View style={styles.card}>{children}</View>
-const Title = ({ children }) => <Text style={styles.title}>{children}</Text>
-const 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
-  }
-})
-
-// App registration and rendering
-AppRegistry.registerComponent('MyApp', () => App)
-AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })
+```
+yarn add react react-dom react-native-web
+yarn add --dev babel-plugin-react-native-web
 ```
 
-## Related projects
+### Guides
 
-* [react-native-web-player](https://github.com/dabbott/react-native-web-player)
-* [react-native-web-starter](https://github.com/grabcode/react-native-web-starter)
-* [react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack)
-* [reactxp](https://github.com/microsoft/reactxp)
-* [react-web](https://github.com/taobaofed/react-web)
+* [Getting started](website/guides/getting-started.md)
+* [Style](website/guides/style.md)
+* [Accessibility](website/guides/accessibility.md)
+* [Internationalization](website/guides/internationalization.md)
+* [Direct manipulation](website/guides/direct-manipulation.md)
+* [Advanced use](website/guides/advanced.md)
+
+## Examples
+
+There are several examples [on the website][website-url] and in the [website's
+source code](./website). Here is an example to get you started:
+
+```js
+import React from 'react';
+import { AppRegistry, StyleSheet, Text, View } from 'react-native';
+
+class App extends React.Component {
+  render() {
+    return (
+      <View style={styles.box}>
+        <Text style={styles.text}>Hello, world!</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  box: { padding: 10 },
+  text: { fontWeight: 'bold' }
+});
+
+AppRegistry.registerComponent('App', () => App);
+AppRegistry.runApplication('App', { rootTag: document.getElementById('react-root') });
+```
+
+This example will render the `App` into a container on the page.
+
+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.
+
+## 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 [BSD licensed](./LICENSE).
+
+[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
+[website-url]: https://necolas.github.io/react-native-web/storybook/
+[react-native-url]: https://facebook.github.io/react-native/
+[contributing-url]: ./.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

core.js

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

docs/apis/AppRegistry.md

@@ -1,59 +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 [client and server rendering
-guide](../guides/rendering.md) for more details).
-
-To "stop" an application when a view should be destroyed, call
-`AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was passed
-into `runApplication`. These should always be used as a pair.
-
-## Methods
-
-(web) static **getApplication**(appKey:string, appParameters: object)
-
-Returns the given application element. Use this for server-side rendering.
-Return object is of type `{ element: ReactElement; stylesheet: ReactElement }`.
-It's recommended that you use `sheetsheet` to render the style sheet in an app
-
-static **registerConfig**(config: Array<AppConfig>)
-
-Registry multiple applications. `AppConfig` is of type `{ appKey: string;
-component: ComponentProvider; run?: Function }`.
-
-static **registerComponent**(appKey: string, getComponentFunc: ComponentProvider)
-
-Register a component provider under the given `appKey`.
-
-static **registerRunnable**(appKey: string, run: Function)
-
-Register a custom render function for an application. The function will receive
-the `appParameters` passed to `runApplication`.
-
-static **getAppKeys**()
-
-Returns all registered app keys.
-
-static **runApplication**(appKey: string, appParameters?: object)
-
-Runs the application that was registered under `appKey`. The `appParameters`
-must include the `rootTag` into which the application is rendered, and
-optionally any `initialProps`.
-
-static **unmountApplicationComponentAtRootTag**(rootTag: HTMLElement)
-
-To "stop" an application when a view should be destroyed, call
-`AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was passed
-into `runApplication`
-
-## Example
-
-```js
-AppRegistry.registerComponent('MyApp', () => AppComponent)
-AppRegistry.runApplication('MyApp', {
-  initialProps: {},
-  rootTag: document.getElementById('react-root')
-})
-```

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/NativeMethods.md

@@ -1,42 +0,0 @@
-# NativeMethods
-
-React Native for Web provides several methods to directly access the underlying
-DOM node. This can be useful in cases when you want to focus a view or measure
-its on-screen dimensions, for example.
-
-The methods described are available on most of the default components provided
-by React Native for Web. Note, however, that they are *not* available on the
-composite components that you define in your own app. For more information, see
-[Direct Manipulation](../guides/direct-manipulation.md).
-
-## Methods
-
-**blur**()
-
-Removes focus from an input or view. This is the opposite of `focus()`.
-
-**focus**()
-
-Requests focus for the given input or view. The exact behavior triggered will
-depend the type of view.
-
-**measure**(callback: (x, y, width, height, pageX, pageY) => void)
-
-For a given view, `measure` determines the offset relative to the parent view,
-width, height, and the offset relative to the viewport. Returns the values via
-an async callback.
-
-Note that these measurements are not available until after the rendering has
-been completed.
-
-**measureLayout**(relativeToNativeNode: DOMNode, onSuccess: (x, y, width, height) => void)
-
-Like `measure`, but measures the view relative to another view, specified as
-`relativeToNativeNode`. This means that the returned `x`, `y` are relative to
-the origin `x`, `y` of the ancestor view.
-
-**setNativeProps**(nativeProps: Object)
-
-This function sends props straight to the underlying DOM node. See the [direct
-manipulation](../guides/direct-manipulation.md) guide for cases where
-`setNativeProps` should be used.

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.
-
-**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,79 +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) **renderToString**: function
-
-Returns a string of the stylesheet for use in server-side rendering.
-
-## Properties
-
-**absoluteFill**: number
-
-A very common pattern is to create overlays with position absolute and zero positioning,
-so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
-styles.
-
-```js
-<View style={StyleSheet.absoluteFill} />
-```
-
-**absoluteFillObject**: object
-
-Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be
-used to create a customized entry in a `StyleSheet`, e.g.:
-
-```js
-const styles = StyleSheet.create({
-  wrapper: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'transparent',
-    top: 10
-  }
-})
-```
-
-**hairlineWidth**: number
-
-## Example
-
-```js
-<View style={styles.container}>
-  <Text
-    children={'Title text'}
-    style={[
-      styles.title,
-      this.props.isActive && styles.activeTitle
-    ]}
-  />
-</View>
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 4,
-    borderWidth: 0.5,
-    borderColor: '#d6d7da',
-  },
-  title: {
-    fontSize: 19,
-    fontWeight: 'bold',
-  },
-  activeTitle: {
-    color: 'red',
-  }
-})
-```

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/ListView.md

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

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,223 +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. Pressed key value is passed as
-an argument to the callback handler. Fires before `onChange` callbacks.
-
-**onSelectionChange**: ?function
-
-Callback that is called when the text input's selection changes. This will be called with
-`{ nativeEvent: { selection: { start, end } } }`.
-
-**onSubmitEditing**: ?function
-
-Callback that is called when the keyboard's submit button is pressed.
-
-**placeholder**: ?string
-
-The string that will be rendered in an empty `TextInput` before text has been
-entered.
-
-**secureTextEntry**: ?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,316 +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) 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) 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) 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**: ?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) 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 }
-.box-none * { pointer-events: auto }
-```
-
-`box-only` is the equivalent of:
-
-```css
-.box-only { pointer-events: auto }
-.box-only * { pointer-events: none }
-```
-
-**style**: ?style
-
-+ `alignContent`
-+ `alignItems`
-+ `alignSelf`
-+ `animationDelay` ‡
-+ `animationDirection` ‡
-+ `animationDuration` ‡
-+ `animationFillMode` ‡
-+ `animationIterationCount` ‡
-+ `animationName` ‡
-+ `animationPlayState` ‡
-+ `animationTimingFunction` ‡
-+ `backfaceVisibility`
-+ `backgroundAttachment` ‡
-+ `backgroundClip` ‡
-+ `backgroundColor`
-+ `backgroundImage` ‡
-+ `backgroundOrigin` ‡
-+ `backgroundPosition` ‡
-+ `backgroundRepeat` ‡
-+ `backgroundSize` ‡
-+ `borderColor` (single value)
-+ `borderTopColor`
-+ `borderBottomColor`
-+ `borderRightColor`
-+ `borderLeftColor`
-+ `borderRadius` (single value)
-+ `borderTopLeftRadius`
-+ `borderTopRightRadius`
-+ `borderBottomLeftRadius`
-+ `borderBottomRightRadius`
-+ `borderStyle` (single value)
-+ `borderTopStyle`
-+ `borderRightStyle`
-+ `borderBottomStyle`
-+ `borderLeftStyle`
-+ `borderWidth` (single value)
-+ `borderBottomWidth`
-+ `borderLeftWidth`
-+ `borderRightWidth`
-+ `borderTopWidth`
-+ `bottom`
-+ `boxShadow` ‡
-+ `boxSizing`
-+ `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/css-layout](https://github.com/facebook/css-layout)).
-
-**testID**: ?string
-
-Used to locate this view in end-to-end tests.
-
-## Examples
-
-```js
-import React, { Component, PropTypes } from 'react'
-import { StyleSheet, View } from 'react-native'
-
-export default class ViewExample extends Component {
-  render() {
-    return (
-      <View style={styles.row}>
-        {
-          ['1', '2', '3', '4', '5'].map((value, i) => {
-            return <View children={value} key={i} style={styles.cell} />
-          })
-        }
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row'
-  },
-  cell: {
-    flexGrow: 1
-  }
-})
-```

docs/guides/getting-started.md

@@ -1,203 +0,0 @@
-# Getting started
-
-This guide will help you to correctly configure build and test tools to work
-with React Native for Web.
-
-Alternatively, you can quickly setup a local project using
-[create-react-app](https://github.com/facebookincubator/create-react-app)
-(which supports `react-native-web` out-of-the-box once installed),
-[react-native-web-starter](https://github.com/grabcode/react-native-web-starter),
-or [react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack).
-
-It is recommended that your application provide a `Promise` and `Array.from`
-polyfill.
-
-## Webpack and Babel
-
-[Webpack](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.
-
-```js
-// 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,
-      // The 'react-native' preset is recommended
-      presets: ['react-native']
-    }
-  }
-};
-
-// This is needed for webpack to import static images in JavaScript files
-const imageLoaderConfiguration = {
-  test: /\.(gif|jpe?g|png|svg)$/,
-  use: {
-    loader: 'url-loader',
-    options: {
-      name: '[name].[ext]'
-    }
-  }
-};
-
-module.exports = {
-  // ...the rest of your config
-
-  module: {
-    rules: [
-      babelLoaderConfiguration,
-      imageLoaderConfiguration
-    ]
-  },
-
-  plugins: [
-    // `process.env.NODE_ENV === 'production'` must be `true` for production
-    // builds to eliminate development checks and reduce build size.
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    })
-  ],
-
-  resolve: {
-    // Maps the 'react-native' import to 'react-native-web'.
-    alias: {
-      'react-native': 'react-native-web'
-    },
-    // If you're working on a multi-platform React Native app, web-specific
-    // module implementations should be written in files using the extension
-    // `.web.js`.
-    extensions: [ '.web.js', '.js' ]
-  }
-}
-```
-
-Please refer to the Webpack documentation for more information.
-
-## Jest
-
-[Jest](https://facebook.github.io/jest/) also needs to map `react-native` to `react-native-web`.
-
-```
-"jest": {
-  "moduleNameMapper": {
-    "react-native": "<rootDir>/node_modules/react-native-web"
-  }
-}
-```
-
-Please refer to the Jest documentation for more information.
-
-## Web-specific code
-
-Minor platform differences can use the `Platform` module.
-
-```js
-import { AppRegistry, Platform } from 'react-native'
-
-AppRegistry.registerComponent('MyApp', () => MyApp)
-
-if (Platform.OS === 'web') {
-  AppRegistry.runApplication('MyApp', {
-    rootTag: document.getElementById('react-root')
-  });
-}
-```
-
-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.
-
-## Client-side rendering
-
-Rendering using `ReactNative`:
-
-```js
-import React from 'react'
-import ReactNative from 'react-native'
-
-// component that renders the app
-const AppHeaderContainer = (props) => { /* ... */ }
-
-ReactNative.render(<AppHeaderContainer />, document.getElementById('react-app-header'))
-```
-
-Rendering using `AppRegistry`:
-
-```js
-import React from 'react'
-import ReactNative, { AppRegistry } from 'react-native'
-
-// component that renders the app
-const AppContainer = (props) => { /* ... */ }
-
-// register the app
-AppRegistry.registerComponent('App', () => AppContainer)
-
-AppRegistry.runApplication('App', {
-  initialProps: {},
-  rootTag: document.getElementById('react-app')
-})
-```
-
-Rendering within `ReactDOM.render` also works when introducing
-`react-native-web` to an existing web app, but otherwise it is not recommended.
-
-## Server-side rendering
-
-Rendering using the `AppRegistry`:
-
-```js
-import ReactDOMServer from 'react-dom/server'
-import ReactNative, { AppRegistry } from 'react-native'
-
-// component that renders the app
-const AppContainer = (props) => { /* ... */ }
-
-// register the app
-AppRegistry.registerComponent('App', () => AppContainer)
-
-// prerender the app
-const { element, stylesheet } = AppRegistry.getApplication('App', { initialProps });
-const initialHTML = ReactDOMServer.renderToString(element);
-
-// construct HTML document
-const document = `
-<!DOCTYPE html>
-<html>
-<head>
-${stylesheet}
-</head>
-<body>
-${initialHTML}
-`
-```

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.

examples/.storybook/config.js

@@ -1,12 +0,0 @@
-import { configure, addDecorator } from '@kadira/storybook';
-import centered from './decorator-centered';
-
-const context = require.context('../', true, /Example\.js$/);
-
-addDecorator(centered);
-
-function loadStories() {
-  context.keys().forEach(context);
-}
-
-configure(loadStories, module);

examples/.storybook/decorator-centered.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-const styles = StyleSheet.create({
-  root: {
-    alignItems: 'center',
-    height: '100vh',
-    justifyContent: 'center'
-  }
-});
-
-export default function(renderStory) {
-  return (
-    <View style={[StyleSheet.absoluteFill, styles.root]}>
-      {renderStory()}
-    </View>
-  );
-}

examples/.storybook/webpack.config.js

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

examples/apis/Clipboard/ClipboardExample.js

@@ -1,34 +0,0 @@
-import { Clipboard, Text, TextInput, View } from 'react-native';
-import React, { Component } from 'react';
-import { storiesOf } from '@kadira/storybook';
-
-class ClipboardExample extends Component {
-  render() {
-    return (
-      <View style={{ minWidth: 300 }}>
-        <Text onPress={this._handleSet}>Copy to clipboard</Text>
-        <TextInput
-          multiline={true}
-          placeholder={'Try pasting here afterwards'}
-          style={{ borderWidth: 1, height: 200, marginVertical: 20 }}
-        />
-        <Text onPress={this._handleGet}>
-          (Clipboard.getString returns a Promise that always resolves to an empty string on web)
-        </Text>
-      </View>
-    );
-  }
-
-  _handleGet() {
-    Clipboard.getString().then(value => {
-      console.log(`Clipboard value: ${value}`);
-    });
-  }
-
-  _handleSet() {
-    const success = Clipboard.setString('This text was copied to the clipboard by React Native');
-    console.log(`Clipboard.setString success? ${success}`);
-  }
-}
-
-storiesOf('api: Clipboard', module).add('setString', () => <ClipboardExample />);

examples/apis/I18nManager/I18nManagerExample.js

@@ -1,87 +0,0 @@
-import { storiesOf } from '@kadira/storybook';
-import { I18nManager, StyleSheet, TouchableHighlight, Text, View } from 'react-native';
-import React, { Component } from 'react';
-
-class I18nManagerExample extends Component {
-  componentWillUnmount() {
-    I18nManager.setPreferredLanguageRTL(false);
-  }
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text accessibilityRole="heading" style={styles.welcome}>
-          LTR/RTL layout example!
-        </Text>
-        <Text style={styles.text}>
-          The writing direction of text is automatically determined by the browser, independent of the global writing direction of the app.
-        </Text>
-        <Text style={[styles.text, styles.rtlText]}>
-          أحب اللغة العربية
-        </Text>
-        <Text style={[styles.text, styles.textAlign]}>
-          textAlign toggles
-        </Text>
-        <View style={styles.horizontal}>
-          <View style={[styles.box, { backgroundColor: 'lightblue' }]}>
-            <Text>One</Text>
-          </View>
-          <View style={[styles.box]}>
-            <Text>Two</Text>
-          </View>
-        </View>
-        <TouchableHighlight
-          onPress={this._handleToggle}
-          style={styles.toggle}
-          underlayColor="rgba(0,0,0,0.25)"
-        >
-          <Text>Toggle LTR/RTL</Text>
-        </TouchableHighlight>
-      </View>
-    );
-  }
-
-  _handleToggle = () => {
-    I18nManager.setPreferredLanguageRTL(!I18nManager.isRTL);
-    this.forceUpdate();
-  };
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#F5FCFF',
-    flex: 1,
-    justifyContent: 'center',
-    padding: 10
-  },
-  welcome: {
-    fontSize: 28,
-    marginVertical: 10
-  },
-  text: {
-    color: '#333333',
-    fontSize: 18,
-    marginBottom: 5
-  },
-  textAlign: {
-    textAlign: 'left'
-  },
-  horizontal: {
-    flexDirection: 'row',
-    marginVertical: 10
-  },
-  box: {
-    borderWidth: 1,
-    flex: 1
-  },
-  toggle: {
-    alignSelf: 'center',
-    borderColor: 'black',
-    borderStyle: 'solid',
-    borderWidth: 1,
-    marginTop: 10,
-    padding: 10
-  }
-});
-
-storiesOf('api: I18nManager', module).add('RTL layout', () => <I18nManagerExample />);

examples/components/ActivityIndicator/ActivityIndicatorExample.js

@@ -1,145 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * 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 NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK 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.
- *
- * @flow
- */
-
-import createReactClass from 'create-react-class';
-import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
-import TimerMixin from 'react-timer-mixin';
-
-const ToggleAnimatingActivityIndicator = createReactClass({
-  mixins: [TimerMixin],
-
-  getInitialState() {
-    return {
-      animating: true
-    };
-  },
-
-  setToggleTimeout() {
-    this.setTimeout(() => {
-      this.setState({ animating: !this.state.animating });
-      this.setToggleTimeout();
-    }, 2000);
-  },
-
-  componentDidMount() {
-    this.setToggleTimeout();
-  },
-
-  render() {
-    return (
-      <ActivityIndicator
-        animating={this.state.animating}
-        hidesWhenStopped={this.props.hidesWhenStopped}
-        size="large"
-        style={styles.centering}
-      />
-    );
-  }
-});
-
-const examples = [
-  {
-    title: 'Default',
-    render() {
-      return <ActivityIndicator style={[styles.centering]} />;
-    }
-  },
-  {
-    title: 'Custom colors',
-    render() {
-      return (
-        <View style={styles.horizontal}>
-          <ActivityIndicator color="#0000ff" />
-          <ActivityIndicator color="#aa00aa" />
-          <ActivityIndicator color="#aa3300" />
-          <ActivityIndicator color="#00aa00" />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Large',
-    render() {
-      return (
-        <ActivityIndicator color="white" size="large" style={[styles.centering, styles.gray]} />
-      );
-    }
-  },
-  {
-    title: 'Large, custom colors',
-    render() {
-      return (
-        <View style={styles.horizontal}>
-          <ActivityIndicator color="#0000ff" size="large" />
-          <ActivityIndicator color="#aa00aa" size="large" />
-          <ActivityIndicator color="#aa3300" size="large" />
-          <ActivityIndicator color="#00aa00" size="large" />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Start/stop',
-    render() {
-      return (
-        <View style={[styles.horizontal, styles.centering]}>
-          <ToggleAnimatingActivityIndicator />
-          <ToggleAnimatingActivityIndicator hidesWhenStopped={false} />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Custom size',
-    render() {
-      return (
-        <View style={[styles.horizontal, styles.centering]}>
-          <ActivityIndicator size={40} />
-          <ActivityIndicator size="large" style={{ marginLeft: 20, transform: [{ scale: 1.5 }] }} />
-        </View>
-      );
-    }
-  }
-];
-
-const styles = StyleSheet.create({
-  centering: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 8
-  },
-  gray: {
-    backgroundColor: '#cccccc'
-  },
-  horizontal: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    padding: 8
-  }
-});
-
-examples.forEach(example => {
-  storiesOf('component: ActivityIndicator', module).add(example.title, () => example.render());
-});

examples/components/Button/ButtonExample.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import { action, storiesOf } from '@kadira/storybook';
-import { Button, View } from 'react-native';
-
-const onButtonPress = action('Button has been pressed!');
-
-const examples = [
-  {
-    title: 'Simple Button',
-    description: 'The title and onPress handler are required. It is ' +
-      'recommended to set accessibilityLabel to help make your app usable by ' +
-      'everyone.',
-    render: function() {
-      return (
-        <Button
-          accessibilityLabel="See an informative alert"
-          onPress={onButtonPress}
-          title="Press Me"
-        />
-      );
-    }
-  },
-  {
-    title: 'Adjusted color',
-    description: 'Adjusts the color in a way that looks standard on each ' +
-      'platform. On iOS, the color prop controls the color of the text. On ' +
-      'Android, the color adjusts the background color of the button.',
-    render: function() {
-      return (
-        <Button
-          accessibilityLabel="Learn more about purple"
-          color="#841584"
-          onPress={onButtonPress}
-          title="Press Purple"
-        />
-      );
-    }
-  },
-  {
-    title: 'Fit to text layout',
-    description: 'This layout strategy lets the title define the width of the button',
-    render: function() {
-      return (
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-          <Button
-            accessibilityLabel="This sounds great!"
-            onPress={onButtonPress}
-            title="This looks great!"
-          />
-          <Button
-            accessibilityLabel="Ok, Great!"
-            color="#841584"
-            onPress={onButtonPress}
-            title="Ok!"
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Disabled Button',
-    description: 'All interactions for the component are disabled.',
-    render: function() {
-      return (
-        <Button
-          accessibilityLabel="See an informative alert"
-          disabled
-          onPress={onButtonPress}
-          title="I Am Disabled"
-        />
-      );
-    }
-  }
-];
-
-examples.forEach(example => {
-  storiesOf('component: Button', module).add(example.title, () => example.render());
-});

examples/components/Image/ImageExample.js

@@ -1,637 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * 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 NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK 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.
- *
- * @flow
- */
-
-import createReactClass from 'create-react-class';
-import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import { ActivityIndicator, Image, StyleSheet, Text, View } from 'react-native';
-
-const base64Icon =
-  '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==';
-
-//var ImageCapInsetsExample = require('./ImageCapInsetsExample');
-const IMAGE_PREFETCH_URL = 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
-const prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
-
-const NetworkImageCallbackExample = createReactClass({
-  getInitialState: function() {
-    return {
-      events: [],
-      startLoadPrefetched: false,
-      mountTime: new Date()
-    };
-  },
-
-  componentWillMount() {
-    this.setState({ mountTime: new Date() });
-  },
-
-  render: function() {
-    const { mountTime } = this.state;
-
-    return (
-      <View>
-        <Image
-          onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
-          onLoadEnd={() => {
-            this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
-            this.setState({ startLoadPrefetched: true }, () => {
-              prefetchTask.then(
-                () => {
-                  this._loadEventFired(`✔ Prefetch OK (+${new Date() - mountTime}ms)`);
-                },
-                error => {
-                  this._loadEventFired(`✘ Prefetch failed (+${new Date() - mountTime}ms)`);
-                  console.log(error);
-                }
-              );
-            });
-          }}
-          onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
-          source={this.props.source}
-          style={[styles.base, { overflow: 'visible' }]}
-        />
-        {this.state.startLoadPrefetched
-          ? <Image
-              onLoad={() =>
-                this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
-              onLoadEnd={() =>
-                this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
-              onLoadStart={() =>
-                this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
-              source={this.props.prefetchedSource}
-              style={[styles.base, { overflow: 'visible' }]}
-            />
-          : null}
-        <Text style={{ marginTop: 20 }}>
-          {this.state.events.join('\n')}
-        </Text>
-      </View>
-    );
-  },
-
-  _loadEventFired(event) {
-    this.setState(state => {
-      return (state.events = [...state.events, event]);
-    });
-  }
-});
-
-const NetworkImageExample = createReactClass({
-  getInitialState: function() {
-    return {
-      error: false,
-      loading: false,
-      progress: 0
-    };
-  },
-  render: function() {
-    const loader = this.state.loading
-      ? <View style={styles.progress}>
-          <Text>{this.state.progress}%</Text>
-          <ActivityIndicator style={{ marginLeft: 5 }} />
-        </View>
-      : null;
-    return this.state.error
-      ? <Text>{this.state.error}</Text>
-      : <Image
-          onError={e => this.setState({ error: e.nativeEvent.error, loading: false })}
-          onLoad={() => this.setState({ loading: false, error: false })}
-          onLoadStart={e => this.setState({ loading: true })}
-          onProgress={e =>
-            this.setState({
-              progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)
-            })}
-          source={this.props.source}
-          style={[styles.base, { overflow: 'visible' }]}
-        >
-          {loader}
-        </Image>;
-  }
-});
-
-const ImageSizeExample = createReactClass({
-  getInitialState: function() {
-    return {
-      width: 0,
-      height: 0
-    };
-  },
-  componentDidMount: function() {
-    Image.getSize(this.props.source.uri, (width, height) => {
-      this.setState({ width, height });
-    });
-  },
-  render: function() {
-    return (
-      <View>
-        <Text>
-          Actual dimensions:{'\n'}
-          width: {this.state.width}, height: {this.state.height}
-        </Text>
-        <Image
-          source={this.props.source}
-          style={{
-            backgroundColor: '#eee',
-            height: 227,
-            marginTop: 10,
-            width: 323
-          }}
-        />
-      </View>
-    );
-  }
-});
-
-/*
-var MultipleSourcesExample = createReactClass({
-  getInitialState: function() {
-    return {
-      width: 30,
-      height: 30,
-    };
-  },
-  render: function() {
-    return (
-      <View style={styles.container}>
-        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
-          <Text
-            style={styles.touchableText}
-            onPress={this.decreaseImageSize} >
-            Decrease image size
-          </Text>
-          <Text
-            style={styles.touchableText}
-            onPress={this.increaseImageSize} >
-            Increase image size
-          </Text>
-        </View>
-        <Text>Container image size: {this.state.width}x{this.state.height} </Text>
-        <View
-          style={[styles.imageContainer, {height: this.state.height, width: this.state.width}]} >
-          <Image
-            style={{flex: 1}}
-            source={[
-              {uri: 'http://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
-              {uri: 'http://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},
-              {uri: 'http://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}
-            ]}
-          />
-        </View>
-      </View>
-    );
-  },
-  increaseImageSize: function() {
-    if (this.state.width >= 100) {
-      return;
-    }
-    this.setState({
-      width: this.state.width + 10,
-      height: this.state.height + 10,
-    });
-  },
-  decreaseImageSize: function() {
-    if (this.state.width <= 10) {
-      return;
-    }
-    this.setState({
-      width: this.state.width - 10,
-      height: this.state.height - 10,
-    });
-  },
-});
-*/
-
-const examples = [
-  {
-    title: 'Plain Network Image',
-    description: 'If the `source` prop `uri` property is prefixed with ' +
-      '"http", then it will be downloaded from the network.',
-    render: function() {
-      return (
-        <Image
-          source={{
-            uri: 'http://facebook.github.io/react/img/logo_og.png',
-            width: 1200,
-            height: 630
-          }}
-          style={styles.base}
-        />
-      );
-    }
-  },
-  {
-    title: 'Plain Static Image',
-    description: 'Static assets should be placed in the source code tree, and ' +
-      'required in the same way as JavaScript modules.',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <Image source={require('./uie_thumb_normal@2x.png')} style={styles.icon} />
-          <Image source={require('./uie_thumb_selected@2x.png')} style={styles.icon} />
-          {/*<Image source={require('./uie_comment_normal.png')} style={styles.icon} />*/}
-          {/*<Image source={require('./uie_comment_highlighted.png')} style={styles.icon} />*/}
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Image Loading Events',
-    render: function() {
-      return (
-        <NetworkImageCallbackExample
-          prefetchedSource={{ uri: IMAGE_PREFETCH_URL }}
-          source={{ uri: 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now() }}
-        />
-      );
-    }
-  },
-  {
-    title: 'Error Handler',
-    render: function() {
-      return (
-        <NetworkImageExample
-          source={{ uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png' }}
-        />
-      );
-    },
-    platform: 'ios'
-  },
-  {
-    title: 'Image Download Progress',
-    render: function() {
-      return (
-        <NetworkImageExample
-          source={{ uri: 'http://origami.design/public/images/bird-logo.png?r=1' }}
-        />
-      );
-    },
-    platform: 'ios'
-  },
-  {
-    title: 'defaultSource',
-    description: 'Show a placeholder image when a network image is loading',
-    render: function() {
-      return (
-        <Image
-          defaultSource={require('./bunny.png')}
-          source={{ uri: 'http://facebook.github.io/origami/public/images/birds.jpg' }}
-          style={styles.base}
-        />
-      );
-    },
-    platform: 'ios'
-  },
-  {
-    title: 'Border Color',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <Image
-            source={smallImage}
-            style={[styles.base, styles.background, { borderWidth: 3, borderColor: '#f099f0' }]}
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Border Width',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <Image
-            source={smallImage}
-            style={[styles.base, styles.background, { borderWidth: 5, borderColor: '#f099f0' }]}
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Border Radius',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <Image source={fullImage} style={[styles.base, { borderRadius: 5 }]} />
-          <Image
-            source={fullImage}
-            style={[styles.base, styles.leftMargin, { borderRadius: 19 }]}
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Background Color',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <Image source={smallImage} style={styles.base} />
-          <Image
-            source={smallImage}
-            style={[styles.base, styles.leftMargin, { backgroundColor: 'rgba(0, 0, 100, 0.25)' }]}
-          />
-          <Image
-            source={smallImage}
-            style={[styles.base, styles.leftMargin, { backgroundColor: 'red' }]}
-          />
-          <Image
-            source={smallImage}
-            style={[styles.base, styles.leftMargin, { backgroundColor: 'black' }]}
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Opacity',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <Image source={fullImage} style={[styles.base, { opacity: 1 }]} />
-          <Image source={fullImage} style={[styles.base, styles.leftMargin, { opacity: 0.8 }]} />
-          <Image source={fullImage} style={[styles.base, styles.leftMargin, { opacity: 0.6 }]} />
-          <Image source={fullImage} style={[styles.base, styles.leftMargin, { opacity: 0.4 }]} />
-          <Image source={fullImage} style={[styles.base, styles.leftMargin, { opacity: 0.2 }]} />
-          <Image source={fullImage} style={[styles.base, styles.leftMargin, { opacity: 0 }]} />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Nesting',
-    render: function() {
-      return (
-        <Image source={fullImage} style={{ width: 60, height: 60, backgroundColor: 'transparent' }}>
-          <Text style={styles.nestedText}>
-            React
-          </Text>
-        </Image>
-      );
-    }
-  },
-  /*
-  {
-    title: 'Tint Color',
-    description: 'The `tintColor` style prop changes all the non-alpha ' +
-      'pixels to the tint color.',
-    render: function() {
-      return (
-        <View>
-          <View style={styles.horizontal}>
-            <Image
-              source={require('./uie_thumb_normal@2x.png')}
-              style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa' }]}
-            />
-            <Image
-              source={require('./uie_thumb_normal@2x.png')}
-              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
-            />
-            <Image
-              source={require('./uie_thumb_normal@2x.png')}
-              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
-            />
-            <Image
-              source={require('./uie_thumb_normal@2x.png')}
-              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
-            />
-          </View>
-          <Text style={styles.sectionText}>
-            It also works with downloaded images:
-          </Text>
-          <View style={styles.horizontal}>
-            <Image
-              source={smallImage}
-              style={[styles.base, {borderRadius: 5, tintColor: '#5ac8fa' }]}
-            />
-            <Image
-              source={smallImage}
-              style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
-            />
-            <Image
-              source={smallImage}
-              style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
-            />
-            <Image
-              source={smallImage}
-              style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
-            />
-          </View>
-        </View>
-      );
-    },
-  },
-  */
-  {
-    title: 'Resize Mode',
-    description: 'The `resizeMode` style prop controls how the image is ' +
-      'rendered within the frame.',
-    render: function() {
-      return (
-        <View>
-          {[smallImage, fullImage].map((image, index) => {
-            return (
-              <View key={index}>
-                <View style={styles.horizontal}>
-                  <View>
-                    <Text style={[styles.resizeModeText]}>
-                      Contain
-                    </Text>
-                    <Image
-                      resizeMode={Image.resizeMode.contain}
-                      source={image}
-                      style={styles.resizeMode}
-                    />
-                  </View>
-                  <View style={styles.leftMargin}>
-                    <Text style={[styles.resizeModeText]}>
-                      Cover
-                    </Text>
-                    <Image
-                      resizeMode={Image.resizeMode.cover}
-                      source={image}
-                      style={styles.resizeMode}
-                    />
-                  </View>
-                </View>
-                <View style={styles.horizontal}>
-                  <View>
-                    <Text style={[styles.resizeModeText]}>
-                      Stretch
-                    </Text>
-                    <Image
-                      resizeMode={Image.resizeMode.stretch}
-                      source={image}
-                      style={styles.resizeMode}
-                    />
-                  </View>
-                  <View style={styles.leftMargin}>
-                    <Text style={[styles.resizeModeText]}>
-                      Repeat
-                    </Text>
-                    <Image resizeMode={'repeat'} source={image} style={styles.resizeMode} />
-                  </View>
-                  <View style={styles.leftMargin}>
-                    <Text style={[styles.resizeModeText]}>
-                      Center
-                    </Text>
-                    <Image resizeMode={'center'} source={image} style={styles.resizeMode} />
-                  </View>
-                </View>
-              </View>
-            );
-          })}
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Animated GIF',
-    render: function() {
-      return (
-        <Image
-          source={{
-            uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'
-          }}
-          style={styles.gif}
-        />
-      );
-    },
-    platform: 'ios'
-  },
-  {
-    title: 'Base64 image',
-    render: function() {
-      return <Image source={{ uri: base64Icon, scale: 3 }} style={styles.base64} />;
-    },
-    platform: 'ios'
-  },
-  /*
-  {
-    title: 'Cap Insets',
-    description:
-      'When the image is resized, the corners of the size specified ' +
-      'by capInsets will stay a fixed size, but the center content and ' +
-      'borders of the image will be stretched. This is useful for creating ' +
-      'resizable rounded buttons, shadows, and other resizable assets.',
-    render: function() {
-      return <ImageCapInsetsExample />;
-    },
-    platform: 'ios',
-  },
-  */
-  {
-    title: 'Image Size',
-    render: function() {
-      return (
-        <ImageSizeExample
-          source={{
-            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Chestnut-mandibled_Toucan.jpg'
-          }}
-        />
-      );
-    }
-  }
-  /*
-  {
-    title: 'MultipleSourcesExample',
-    description:
-      'The `source` prop allows passing in an array of uris, so that native to choose which image ' +
-      'to diplay based on the size of the of the target image',
-    render: function() {
-      return <MultipleSourcesExample />;
-    },
-    platform: 'android',
-  },
-  */
-];
-
-const fullImage = { uri: 'http://facebook.github.io/react/img/logo_og.png' };
-const smallImage = { uri: 'http://facebook.github.io/react/img/logo_small_2x.png' };
-
-const styles = StyleSheet.create({
-  base: {
-    width: 38,
-    height: 38
-  },
-  progress: {
-    flex: 1,
-    alignItems: 'center',
-    flexDirection: 'row',
-    width: 100
-  },
-  leftMargin: {
-    marginLeft: 10
-  },
-  background: {
-    backgroundColor: '#222222'
-  },
-  sectionText: {
-    marginVertical: 6
-  },
-  nestedText: {
-    marginLeft: 12,
-    marginTop: 20,
-    backgroundColor: 'transparent',
-    color: 'white'
-  },
-  resizeMode: {
-    width: 90,
-    height: 60,
-    borderWidth: 0.5,
-    borderColor: 'black'
-  },
-  resizeModeText: {
-    fontSize: 11,
-    marginBottom: 3
-  },
-  icon: {
-    width: 15,
-    height: 15
-  },
-  horizontal: {
-    flexDirection: 'row'
-  },
-  gif: {
-    flex: 1,
-    height: 200
-  },
-  base64: {
-    flex: 1,
-    height: 50,
-    resizeMode: 'contain'
-  },
-  touchableText: {
-    fontWeight: '500',
-    color: 'blue'
-  }
-});
-
-examples.forEach(example => {
-  storiesOf('component: Image', module)
-    .addDecorator(renderStory => <View style={{ width: '100%' }}>{renderStory()}</View>)
-    .add(example.title, () => example.render());
-});

examples/components/ListView/ListViewExample.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import { ListView, StyleSheet, Text, View } from 'react-native';
-
-const generateData = length => Array.from({ length }).map((item, i) => i);
-const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
-
-storiesOf('component: ListView', module)
-  .add('vertical', () => (
-    <View style={styles.scrollViewContainer}>
-      <ListView
-        contentContainerStyle={styles.scrollViewContentContainerStyle}
-        dataSource={dataSource.cloneWithRows(generateData(100))}
-        initialListSize={100}
-        // eslint-disable-next-line react/jsx-no-bind
-        onScroll={e => {
-          console.log('ScrollView.onScroll', e);
-        }}
-        // eslint-disable-next-line react/jsx-no-bind
-        renderRow={row => <View><Text>{row}</Text></View>}
-        scrollEventThrottle={1000} // 1 event per second
-        style={styles.scrollViewStyle}
-      />
-    </View>
-  ))
-  .add('incremental rendering - large pageSize', () => (
-    <View style={styles.scrollViewContainer}>
-      <ListView
-        contentContainerStyle={styles.scrollViewContentContainerStyle}
-        dataSource={dataSource.cloneWithRows(generateData(5000))}
-        initialListSize={100}
-        // eslint-disable-next-line react/jsx-no-bind
-        onScroll={e => {
-          console.log('ScrollView.onScroll', e);
-        }}
-        pageSize={50}
-        // eslint-disable-next-line react/jsx-no-bind
-        renderRow={row => <View><Text>{row}</Text></View>}
-        scrollEventThrottle={1000} // 1 event per second
-        style={styles.scrollViewStyle}
-      />
-    </View>
-  ))
-  .add('incremental rendering - small pageSize', () => (
-    <View style={styles.scrollViewContainer}>
-      <ListView
-        contentContainerStyle={styles.scrollViewContentContainerStyle}
-        dataSource={dataSource.cloneWithRows(generateData(5000))}
-        initialListSize={5}
-        // eslint-disable-next-line react/jsx-no-bind
-        onScroll={e => {
-          console.log('ScrollView.onScroll', e);
-        }}
-        pageSize={1}
-        // eslint-disable-next-line react/jsx-no-bind
-        renderRow={row => <View><Text>{row}</Text></View>}
-        scrollEventThrottle={1000} // 1 event per second
-        style={styles.scrollViewStyle}
-      />
-    </View>
-  ));
-
-const styles = StyleSheet.create({
-  box: {
-    flexGrow: 1,
-    justifyContent: 'center',
-    borderWidth: 1
-  },
-  scrollViewContainer: {
-    height: '200px',
-    width: 300
-  },
-  scrollViewStyle: {
-    borderWidth: '1px'
-  },
-  scrollViewContentContainerStyle: {
-    backgroundColor: '#eee',
-    padding: '10px'
-  }
-});

examples/components/ProgressBar/ProgressBarExample.js

@@ -1,95 +0,0 @@
-import createReactClass from 'create-react-class';
-import { ProgressBar, StyleSheet, View } from 'react-native';
-import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import TimerMixin from 'react-timer-mixin';
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * 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 NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK 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.
- *
- * @flow
- */
-
-const ProgressBarExample = createReactClass({
-  mixins: [TimerMixin],
-
-  getInitialState() {
-    return {
-      progress: 0
-    };
-  },
-
-  componentDidMount() {
-    this.updateProgress();
-  },
-
-  updateProgress() {
-    const progress = this.state.progress + 0.01;
-    this.setState({ progress });
-    this.requestAnimationFrame(() => this.updateProgress());
-  },
-
-  getProgress(offset) {
-    const progress = this.state.progress + offset;
-    return Math.sin(progress % Math.PI) % 1;
-  },
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <ProgressBar color="purple" progress={this.getProgress(0.2)} style={styles.progressView} />
-        <ProgressBar color="red" progress={this.getProgress(0.4)} style={styles.progressView} />
-        <ProgressBar color="orange" progress={this.getProgress(0.6)} style={styles.progressView} />
-        <ProgressBar color="yellow" progress={this.getProgress(0.8)} style={styles.progressView} />
-      </View>
-    );
-  }
-});
-
-const examples = [
-  {
-    title: 'progress',
-    render() {
-      return <ProgressBarExample />;
-    }
-  },
-  {
-    title: 'indeterminate',
-    render() {
-      return <ProgressBar indeterminate style={styles.progressView} trackColor="#D1E3F6" />;
-    }
-  }
-];
-
-const styles = StyleSheet.create({
-  container: {
-    minWidth: 200,
-    marginTop: -20,
-    backgroundColor: 'transparent'
-  },
-  progressView: {
-    marginTop: 20,
-    minWidth: 200
-  }
-});
-
-examples.forEach(example => {
-  storiesOf('component: ProgressBar', module).add(example.title, () => example.render());
-});

examples/components/ScrollView/ScrollViewExample.js

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

examples/components/Switch/SwitchExample.js

@@ -1,203 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * 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 NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK 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.
- *
- * @flow
- */
-
-import createReactClass from 'create-react-class';
-import { Switch, Text, View } from 'react-native';
-import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-
-const BasicSwitchExample = createReactClass({
-  getInitialState() {
-    return {
-      trueSwitchIsOn: true,
-      falseSwitchIsOn: false
-    };
-  },
-  render() {
-    return (
-      <View>
-        <Switch
-          onValueChange={value => this.setState({ falseSwitchIsOn: value })}
-          style={{ marginBottom: 10 }}
-          value={this.state.falseSwitchIsOn}
-        />
-        <Switch
-          onValueChange={value => this.setState({ trueSwitchIsOn: value })}
-          value={this.state.trueSwitchIsOn}
-        />
-      </View>
-    );
-  }
-});
-
-const DisabledSwitchExample = createReactClass({
-  render() {
-    return (
-      <View>
-        <Switch disabled={true} style={{ marginBottom: 10 }} value={true} />
-        <Switch disabled={true} value={false} />
-      </View>
-    );
-  }
-});
-
-const ColorSwitchExample = createReactClass({
-  getInitialState() {
-    return {
-      colorTrueSwitchIsOn: true,
-      colorFalseSwitchIsOn: false
-    };
-  },
-  render() {
-    return (
-      <View>
-        <Switch
-          activeThumbColor="#428bca"
-          activeTrackColor="#A0C4E3"
-          onValueChange={value => this.setState({ colorFalseSwitchIsOn: value })}
-          style={{ marginBottom: 10 }}
-          value={this.state.colorFalseSwitchIsOn}
-        />
-        <Switch
-          activeThumbColor="#5CB85C"
-          activeTrackColor="#ADDAAD"
-          onValueChange={value => this.setState({ colorTrueSwitchIsOn: value })}
-          thumbColor="#EBA9A7"
-          trackColor="#D9534F"
-          value={this.state.colorTrueSwitchIsOn}
-        />
-      </View>
-    );
-  }
-});
-
-const EventSwitchExample = createReactClass({
-  getInitialState() {
-    return {
-      eventSwitchIsOn: false,
-      eventSwitchRegressionIsOn: true
-    };
-  },
-  render() {
-    return (
-      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
-        <View>
-          <Switch
-            onValueChange={value => this.setState({ eventSwitchIsOn: value })}
-            style={{ marginBottom: 10 }}
-            value={this.state.eventSwitchIsOn}
-          />
-          <Switch
-            onValueChange={value => this.setState({ eventSwitchIsOn: value })}
-            style={{ marginBottom: 10 }}
-            value={this.state.eventSwitchIsOn}
-          />
-          <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
-        </View>
-        <View>
-          <Switch
-            onValueChange={value => this.setState({ eventSwitchRegressionIsOn: value })}
-            style={{ marginBottom: 10 }}
-            value={this.state.eventSwitchRegressionIsOn}
-          />
-          <Switch
-            onValueChange={value => this.setState({ eventSwitchRegressionIsOn: value })}
-            style={{ marginBottom: 10 }}
-            value={this.state.eventSwitchRegressionIsOn}
-          />
-          <Text>{this.state.eventSwitchRegressionIsOn ? 'On' : 'Off'}</Text>
-        </View>
-      </View>
-    );
-  }
-});
-
-const SizeSwitchExample = createReactClass({
-  getInitialState() {
-    return {
-      trueSwitchIsOn: true,
-      falseSwitchIsOn: false
-    };
-  },
-  render() {
-    return (
-      <View>
-        <Switch
-          onValueChange={value => this.setState({ falseSwitchIsOn: value })}
-          style={{ marginBottom: 10, height: '3rem' }}
-          value={this.state.falseSwitchIsOn}
-        />
-        <Switch
-          onValueChange={value => this.setState({ trueSwitchIsOn: value })}
-          style={{ marginBottom: 10, width: 150 }}
-          value={this.state.trueSwitchIsOn}
-        />
-      </View>
-    );
-  }
-});
-
-const examples = [
-  {
-    title: 'set to true or false',
-    render() {
-      return <BasicSwitchExample />;
-    }
-  },
-  {
-    title: 'disabled',
-    render() {
-      return <DisabledSwitchExample />;
-    }
-  },
-  {
-    title: 'change events',
-    render() {
-      return <EventSwitchExample />;
-    }
-  },
-  {
-    title: 'custom colors',
-    render() {
-      return <ColorSwitchExample />;
-    }
-  },
-  {
-    title: 'custom size',
-    render() {
-      return <SizeSwitchExample />;
-    }
-  },
-  {
-    title: 'controlled component',
-    render() {
-      return <Switch />;
-    }
-  }
-];
-
-examples.forEach(example => {
-  storiesOf('component: Switch', module).add(example.title, () => example.render());
-});

examples/components/TextInput/TextInputExample.js

@@ -1,833 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * 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 NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK 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.
- *
- * @flow
- */
-
-import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import { any, bool, object, string } from 'prop-types';
-import { StyleSheet, Text, TextInput, View } from 'react-native';
-
-class WithLabel extends React.Component {
-  static propTypes = {
-    children: any,
-    label: string
-  };
-
-  render() {
-    return (
-      <View style={styles.labelContainer}>
-        <View style={styles.label}>
-          <Text>{this.props.label}</Text>
-        </View>
-        {this.props.children}
-      </View>
-    );
-  }
-}
-
-class TextEventsExample extends React.Component {
-  state = {
-    curText: '<No Event>',
-    prevText: '<No Event>',
-    prev2Text: '<No Event>',
-    prev3Text: '<No Event>'
-  };
-
-  updateText = text => {
-    this.setState(state => {
-      return {
-        curText: text,
-        prevText: state.curText,
-        prev2Text: state.prevText,
-        prev3Text: state.prev2Text
-      };
-    });
-  };
-
-  render() {
-    return (
-      <View style={{ alignItems: 'center' }}>
-        <TextInput
-          autoCapitalize="none"
-          autoCorrect={false}
-          onBlur={() => this.updateText('onBlur')}
-          onChange={event => this.updateText('onChange text: ' + event.nativeEvent.text)}
-          onEndEditing={event => this.updateText('onEndEditing text: ' + event.nativeEvent.text)}
-          onFocus={() => this.updateText('onFocus')}
-          onKeyPress={event => {
-            this.updateText('onKeyPress key: ' + event.nativeEvent.key);
-          }}
-          onSelectionChange={event =>
-            this.updateText(
-              'onSelectionChange range: ' +
-                event.nativeEvent.selection.start +
-                ',' +
-                event.nativeEvent.selection.end
-            )}
-          onSubmitEditing={event =>
-            this.updateText('onSubmitEditing text: ' + event.nativeEvent.text)}
-          placeholder="Enter text to see events"
-          style={[styles.default, { maxWidth: 200 }]}
-        />
-        <Text style={styles.eventLabel}>
-          {this.state.curText}{'\n'}
-          (prev: {this.state.prevText}){'\n'}
-          (prev2: {this.state.prev2Text}){'\n'}
-          (prev3: {this.state.prev3Text})
-        </Text>
-      </View>
-    );
-  }
-}
-
-class AutoExpandingTextInput extends React.Component {
-  state: any;
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      text: 'React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.',
-      height: 0
-    };
-  }
-
-  render() {
-    return (
-      <TextInput
-        {...this.props}
-        multiline={true}
-        onChangeText={text => {
-          this.setState({ text });
-        }}
-        onContentSizeChange={event => {
-          this.setState({ height: event.nativeEvent.contentSize.height });
-        }}
-        style={[styles.default, { height: Math.max(35, this.state.height) }]}
-        value={this.state.text}
-      />
-    );
-  }
-}
-
-class RewriteExample extends React.Component {
-  state: any;
-
-  constructor(props) {
-    super(props);
-    this.state = { text: '' };
-  }
-
-  render() {
-    const limit = 20;
-    const remainder = limit - this.state.text.length;
-    const remainderColor = remainder > 5 ? 'blue' : 'red';
-    return (
-      <View style={styles.rewriteContainer}>
-        <TextInput
-          maxLength={limit}
-          multiline={false}
-          onChangeText={text => {
-            text = text.replace(/ /g, '_');
-            this.setState({ text });
-          }}
-          style={styles.default}
-          value={this.state.text}
-        />
-        <Text style={[styles.remainder, { color: remainderColor }]}>
-          {remainder}
-        </Text>
-      </View>
-    );
-  }
-}
-
-class RewriteExampleInvalidCharacters extends React.Component {
-  state: any;
-
-  constructor(props) {
-    super(props);
-    this.state = { text: '' };
-  }
-
-  render() {
-    return (
-      <View style={styles.rewriteContainer}>
-        <TextInput
-          multiline={false}
-          onChangeText={text => {
-            this.setState({ text: text.replace(/\s/g, '') });
-          }}
-          style={styles.default}
-          value={this.state.text}
-        />
-      </View>
-    );
-  }
-}
-
-class TokenizedTextExample extends React.Component {
-  state: any;
-
-  constructor(props) {
-    super(props);
-    this.state = { text: 'Hello #World' };
-  }
-
-  render() {
-    //define delimiter
-    const delimiter = /\s+/;
-
-    //split string
-    let _text = this.state.text;
-    let token, index;
-    const parts = [];
-    while (_text) {
-      delimiter.lastIndex = 0;
-      token = delimiter.exec(_text);
-      if (token === null) {
-        break;
-      }
-      index = token.index;
-      if (token[0].length === 0) {
-        index = 1;
-      }
-      parts.push(_text.substr(0, index));
-      parts.push(token[0]);
-      index = index + token[0].length;
-      _text = _text.slice(index);
-    }
-    parts.push(_text);
-
-    return (
-      <View>
-        <TextInput
-          multiline={true}
-          onChangeText={text => {
-            this.setState({ text });
-          }}
-          style={styles.multiline}
-          value={parts.join('')}
-        />
-      </View>
-    );
-  }
-}
-
-class BlurOnSubmitExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this._nodes = {};
-  }
-
-  focusNextField = nextField => {
-    this._nodes[nextField].focus();
-  };
-
-  render() {
-    return (
-      <View>
-        <TextInput
-          blurOnSubmit={false}
-          onSubmitEditing={() => this.focusNextField('2')}
-          placeholder="blurOnSubmit = false"
-          ref={c => {
-            this._nodes['1'] = c;
-          }}
-          returnKeyType="next"
-          style={styles.default}
-        />
-        <TextInput
-          blurOnSubmit={false}
-          keyboardType="email-address"
-          onSubmitEditing={() => this.focusNextField('3')}
-          placeholder="blurOnSubmit = false"
-          ref={c => {
-            this._nodes['2'] = c;
-          }}
-          returnKeyType="next"
-          style={styles.default}
-        />
-        <TextInput
-          blurOnSubmit={false}
-          keyboardType="url"
-          onSubmitEditing={() => this.focusNextField('4')}
-          placeholder="blurOnSubmit = false"
-          ref={c => {
-            this._nodes['3'] = c;
-          }}
-          returnKeyType="next"
-          style={styles.default}
-        />
-        <TextInput
-          blurOnSubmit={false}
-          keyboardType="numeric"
-          onSubmitEditing={() => this.focusNextField('5')}
-          placeholder="blurOnSubmit = false"
-          ref={c => {
-            this._nodes['4'] = c;
-          }}
-          style={styles.default}
-        />
-        <TextInput
-          keyboardType="numeric"
-          placeholder="blurOnSubmit = true"
-          ref={c => {
-            this._nodes['5'] = c;
-          }}
-          returnKeyType="done"
-          style={styles.default}
-        />
-      </View>
-    );
-  }
-}
-
-type SelectionExampleState = {
-  selection: {
-    start: number,
-    end?: number
-  },
-  value: string
-};
-
-class SelectionExample extends React.Component {
-  state: SelectionExampleState;
-
-  _textInput: any;
-
-  static propTypes = {
-    multiline: bool,
-    style: object,
-    value: string
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      selection: { start: 0, end: 0 },
-      value: props.value
-    };
-  }
-
-  onSelectionChange({ nativeEvent: { selection } }) {
-    this.setState({ selection });
-  }
-
-  getRandomPosition() {
-    const length = this.state.value.length;
-    return Math.round(Math.random() * length);
-  }
-
-  select(start, end) {
-    this._textInput.focus();
-    this.setState({ selection: { start, end } });
-  }
-
-  selectRandom() {
-    const positions = [this.getRandomPosition(), this.getRandomPosition()].sort();
-    this.select(...positions);
-  }
-
-  placeAt(position) {
-    this.select(position, position);
-  }
-
-  placeAtRandom() {
-    this.placeAt(this.getRandomPosition());
-  }
-
-  render() {
-    const length = this.state.value.length;
-
-    return (
-      <View>
-        <TextInput
-          multiline={this.props.multiline}
-          onChangeText={value => this.setState({ value })}
-          onSelectionChange={this.onSelectionChange.bind(this)}
-          ref={textInput => (this._textInput = textInput)}
-          selection={this.state.selection}
-          style={this.props.style}
-          value={this.state.value}
-        />
-        <View>
-          <Text>
-            selection = {JSON.stringify(this.state.selection)}
-          </Text>
-          <Text onPress={this.placeAt.bind(this, 0)}>
-            Place at Start (0, 0)
-          </Text>
-          <Text onPress={this.placeAt.bind(this, length)}>
-            Place at End ({length}, {length})
-          </Text>
-          <Text onPress={this.placeAtRandom.bind(this)}>
-            Place at Random
-          </Text>
-          <Text onPress={this.select.bind(this, 0, length)}>
-            Select All
-          </Text>
-          <Text onPress={this.selectRandom.bind(this)}>
-            Select Random
-          </Text>
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  page: {
-    paddingBottom: 300
-  },
-  default: {
-    height: 26,
-    borderWidth: 0.5,
-    borderColor: '#0f0f0f',
-    flex: 1,
-    fontSize: 13,
-    padding: 4
-  },
-  multiline: {
-    borderWidth: 0.5,
-    borderColor: '#0f0f0f',
-    flex: 1,
-    fontSize: 13,
-    height: 50,
-    padding: 4,
-    marginBottom: 4
-  },
-  multilineWithFontStyles: {
-    color: 'blue',
-    fontWeight: 'bold',
-    fontSize: 18,
-    fontFamily: 'Cochin',
-    height: 60
-  },
-  multilineChild: {
-    width: 50,
-    height: 40,
-    position: 'absolute',
-    right: 5,
-    backgroundColor: 'red'
-  },
-  eventLabel: {
-    margin: 3,
-    fontSize: 12
-  },
-  labelContainer: {
-    flexDirection: 'row',
-    marginVertical: 2,
-    flex: 1
-  },
-  label: {
-    width: 115,
-    alignItems: 'flex-end',
-    marginRight: 10,
-    paddingTop: 2
-  },
-  rewriteContainer: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  remainder: {
-    textAlign: 'right',
-    width: 24
-  },
-  hashtag: {
-    color: 'blue',
-    fontWeight: 'bold'
-  }
-});
-
-const examples = [
-  {
-    title: 'Auto-focus',
-    render: function() {
-      return (
-        <View>
-          <TextInput
-            accessibilityLabel="I am the accessibility label for text input"
-            autoFocus={true}
-            style={styles.default}
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: "Live Re-Write (<sp>  ->  '_') + maxLength",
-    render: function() {
-      return <RewriteExample />;
-    }
-  },
-  {
-    title: 'Live Re-Write (no spaces allowed)',
-    render: function() {
-      return <RewriteExampleInvalidCharacters />;
-    }
-  },
-  {
-    title: 'Auto-capitalize',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="none">
-            <TextInput autoCapitalize="none" style={styles.default} />
-          </WithLabel>
-          <WithLabel label="sentences">
-            <TextInput autoCapitalize="sentences" style={styles.default} />
-          </WithLabel>
-          <WithLabel label="words">
-            <TextInput autoCapitalize="words" style={styles.default} />
-          </WithLabel>
-          <WithLabel label="characters">
-            <TextInput autoCapitalize="characters" style={styles.default} />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Auto-correct',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="true">
-            <TextInput autoCorrect={true} style={styles.default} />
-          </WithLabel>
-          <WithLabel label="false">
-            <TextInput autoCorrect={false} style={styles.default} />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Keyboard types',
-    render: function() {
-      const keyboardTypes = [
-        'default',
-        //'ascii-capable',
-        //'numbers-and-punctuation',
-        'url',
-        'number-pad',
-        'phone-pad',
-        //'name-phone-pad',
-        'email-address',
-        //'decimal-pad',
-        //'twitter',
-        'web-search',
-        'numeric'
-      ];
-      const examples = keyboardTypes.map(type => {
-        return (
-          <WithLabel key={type} label={type}>
-            <TextInput keyboardType={type} style={styles.default} />
-          </WithLabel>
-        );
-      });
-      return <View>{examples}</View>;
-    }
-  },
-  {
-    title: 'Keyboard appearance',
-    render: function() {
-      const keyboardAppearance = ['default', 'light', 'dark'];
-      const examples = keyboardAppearance.map(type => {
-        return (
-          <WithLabel key={type} label={type}>
-            <TextInput keyboardAppearance={type} style={styles.default} />
-          </WithLabel>
-        );
-      });
-      return <View>{examples}</View>;
-    }
-  },
-  {
-    title: 'Return key types',
-    render: function() {
-      const returnKeyTypes = [
-        'default',
-        'go',
-        'google',
-        'join',
-        'next',
-        'route',
-        'search',
-        'send',
-        'yahoo',
-        'done',
-        'emergency-call'
-      ];
-      const examples = returnKeyTypes.map(type => {
-        return (
-          <WithLabel key={type} label={type}>
-            <TextInput returnKeyType={type} style={styles.default} />
-          </WithLabel>
-        );
-      });
-      return <View>{examples}</View>;
-    }
-  },
-  {
-    title: 'Enable return key automatically',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="true">
-            <TextInput enablesReturnKeyAutomatically={true} style={styles.default} />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Secure text entry',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="true">
-            <TextInput defaultValue="abc" secureTextEntry={true} style={styles.default} />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Event handling',
-    render: function(): React.Element<any> {
-      return <TextEventsExample />;
-    }
-  },
-  {
-    title: 'Colored input text',
-    render: function() {
-      return (
-        <View>
-          <TextInput defaultValue="Blue" style={[styles.default, { color: 'blue' }]} />
-          <TextInput defaultValue="Green" style={[styles.default, { color: 'green' }]} />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Colored highlight/cursor for text input',
-    render: function() {
-      return (
-        <View>
-          <TextInput defaultValue="Highlight me" selectionColor={'green'} style={styles.default} />
-          <TextInput
-            defaultValue="Highlight me"
-            selectionColor={'rgba(86, 76, 205, 1)'}
-            style={styles.default}
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Clear button mode',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="never">
-            <TextInput clearButtonMode="never" style={styles.default} />
-          </WithLabel>
-          <WithLabel label="while editing">
-            <TextInput clearButtonMode="while-editing" style={styles.default} />
-          </WithLabel>
-          <WithLabel label="unless editing">
-            <TextInput clearButtonMode="unless-editing" style={styles.default} />
-          </WithLabel>
-          <WithLabel label="always">
-            <TextInput clearButtonMode="always" style={styles.default} />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Clear and select',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="clearTextOnFocus">
-            <TextInput
-              clearTextOnFocus={true}
-              defaultValue="text is cleared on focus"
-              placeholder="text is cleared on focus"
-              style={styles.default}
-            />
-          </WithLabel>
-          <WithLabel label="selectTextOnFocus">
-            <TextInput
-              defaultValue="text is selected on focus"
-              placeholder="text is selected on focus"
-              selectTextOnFocus={true}
-              style={styles.default}
-            />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Blur on submit',
-    render: function(): React.Element<any> {
-      return <BlurOnSubmitExample />;
-    }
-  },
-  {
-    title: 'Multiline blur on submit',
-    render: function() {
-      return (
-        <View>
-          <TextInput
-            blurOnSubmit={true}
-            multiline={true}
-            onSubmitEditing={event => {
-              console.log(event.nativeEvent.text);
-            }}
-            placeholder="blurOnSubmit = true"
-            returnKeyType="next"
-            style={styles.multiline}
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Multiline',
-    render: function() {
-      return (
-        <View>
-          <TextInput multiline={true} placeholder="multiline text input" style={styles.multiline} />
-          <TextInput
-            autoCapitalize="words"
-            autoCorrect={true}
-            clearTextOnFocus={true}
-            keyboardType="url"
-            multiline={true}
-            placeholder="multiline text input with font styles and placeholder"
-            placeholderTextColor="red"
-            style={[styles.multiline, styles.multilineWithFontStyles]}
-          />
-          <TextInput
-            maxLength={5}
-            multiline={true}
-            placeholder="multiline text input with max length"
-            style={styles.multiline}
-          />
-          <TextInput
-            editable={false}
-            multiline={true}
-            placeholder="uneditable multiline text input"
-            style={styles.multiline}
-          />
-          <TextInput
-            dataDetectorTypes="phoneNumber"
-            defaultValue="uneditable multiline text input with phone number detection: 88888888."
-            editable={false}
-            multiline={true}
-            style={styles.multiline}
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Number of lines',
-    render: function() {
-      return (
-        <View>
-          <TextInput
-            multiline={true}
-            numberOfLines={4}
-            style={[styles.multiline, { height: 'auto' }]}
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Auto-expanding',
-    render: function() {
-      return (
-        <View>
-          <AutoExpandingTextInput
-            enablesReturnKeyAutomatically={true}
-            placeholder="height increases with content"
-            returnKeyType="default"
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Attributed text',
-    render: function() {
-      return <TokenizedTextExample />;
-    }
-  },
-  {
-    title: 'Text selection & cursor placement',
-    render: function() {
-      return (
-        <View>
-          <SelectionExample style={styles.default} value="text selection can be changed" />
-          <SelectionExample
-            multiline
-            style={styles.multiline}
-            value={'multiline text selection\ncan also be changed'}
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'TextInput maxLength',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="maxLength: 5">
-            <TextInput maxLength={5} style={styles.default} />
-          </WithLabel>
-          <WithLabel label="maxLength: 5 with placeholder">
-            <TextInput maxLength={5} placeholder="ZIP code entry" style={styles.default} />
-          </WithLabel>
-          <WithLabel label="maxLength: 5 with default value already set">
-            <TextInput defaultValue="94025" maxLength={5} style={styles.default} />
-          </WithLabel>
-          <WithLabel label="maxLength: 5 with very long default value already set">
-            <TextInput defaultValue="9402512345" maxLength={5} style={styles.default} />
-          </WithLabel>
-        </View>
-      );
-    }
-  }
-];
-
-examples.forEach(example => {
-  storiesOf('component: TextInput', module).add(example.title, () => example.render());
-});

examples/components/Touchable/TouchableExample.js

@@ -1,473 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * 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 NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK 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.
- *
- * @flow
- */
-
-import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
-import {
-  Image,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  TouchableOpacity,
-  Platform,
-  TouchableNativeFeedback,
-  View
-} from 'react-native';
-
-const examples = [
-  {
-    title: '<TouchableHighlight>',
-    description: 'TouchableHighlight works by adding an extra view with a ' +
-      'black background under the single child view.  This works best when the ' +
-      'child view is fully opaque, although it can be made to work as a simple ' +
-      'background color change as well with the activeOpacity and ' +
-      'underlayColor props.',
-    render: function() {
-      return (
-        <View>
-          <View style={styles.row}>
-            <TouchableHighlight
-              onPress={() => console.log('stock THW image - highlight')}
-              style={styles.wrapper}
-            >
-              <Image source={heartImage} style={styles.image} />
-            </TouchableHighlight>
-            <TouchableHighlight
-              activeOpacity={1}
-              onPress={() => console.log('custom THW text - highlight')}
-              style={styles.wrapper}
-              underlayColor="rgb(210, 230, 255)"
-            >
-              <View style={styles.wrapperCustom}>
-                <Text style={styles.text}>
-                  Tap Here For Custom Highlight!
-                </Text>
-              </View>
-            </TouchableHighlight>
-          </View>
-        </View>
-      );
-    }
-  },
-  {
-    title: '<Text onPress={fn}> with highlight',
-    render: function() {
-      return <TextOnPressBox />;
-    }
-  },
-  {
-    title: 'Touchable feedback events',
-    description: '<Touchable*> components accept onPress, onPressIn, ' +
-      'onPressOut, and onLongPress as props.',
-    render: function() {
-      return <TouchableFeedbackEvents />;
-    }
-  },
-  {
-    title: 'Touchable delay for events',
-    description: '<Touchable*> components also accept delayPressIn, ' +
-      'delayPressOut, and delayLongPress as props. These props impact the ' +
-      'timing of feedback events.',
-    render: function() {
-      return <TouchableDelayEvents />;
-    }
-  },
-  {
-    title: '3D Touch / Force Touch',
-    description: 'iPhone 6s and 6s plus support 3D touch, which adds a force property to touches',
-    render: function() {
-      return <ForceTouchExample />;
-    },
-    platform: 'ios'
-  },
-  {
-    title: 'Touchable Hit Slop',
-    description: '<Touchable*> components accept hitSlop prop which extends the touch area ' +
-      'without changing the view bounds.',
-    render: function() {
-      return <TouchableHitSlop />;
-    }
-  },
-  {
-    title: 'Disabled Touchable*',
-    description: '<Touchable*> components accept disabled prop which prevents ' +
-      'any interaction with component',
-    render: function() {
-      return <TouchableDisabled />;
-    }
-  }
-];
-
-class TextOnPressBox extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { timesPressed: 0 };
-  }
-
-  _handlePress = () => {
-    this.setState({
-      timesPressed: this.state.timesPressed + 1
-    });
-  };
-
-  render() {
-    let textLog = '';
-    if (this.state.timesPressed > 1) {
-      textLog = this.state.timesPressed + 'x text onPress';
-    } else if (this.state.timesPressed > 0) {
-      textLog = 'text onPress';
-    }
-
-    return (
-      <View>
-        <Text onPress={this._handlePress} style={styles.textBlock}>
-          Text has built-in onPress handling
-        </Text>
-        <View style={styles.logBox}>
-          <Text>{textLog}</Text>
-        </View>
-      </View>
-    );
-  }
-}
-
-class TouchableFeedbackEvents extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { eventLog: [] };
-  }
-
-  render() {
-    return (
-      <View testID="touchable_feedback_events">
-        <View style={[styles.row, { justifyContent: 'center' }]}>
-          <TouchableOpacity
-            accessibilityComponentType="button"
-            accessibilityLabel="touchable feedback events"
-            accessibilityTraits="button"
-            onLongPress={this._createPressHandler('longPress')}
-            onPress={this._createPressHandler('press')}
-            onPressIn={this._createPressHandler('pressIn')}
-            onPressOut={this._createPressHandler('pressOut')}
-            style={styles.wrapper}
-            testID="touchable_feedback_events_button"
-          >
-            <Text style={styles.button}>
-              Press Me
-            </Text>
-          </TouchableOpacity>
-        </View>
-        <View style={styles.eventLogBox} testID="touchable_feedback_events_console">
-          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
-        </View>
-      </View>
-    );
-  }
-
-  _createPressHandler = eventName => {
-    return () => {
-      const limit = 6;
-      const eventLog = this.state.eventLog.slice(0, limit - 1);
-      eventLog.unshift(eventName);
-      this.setState({ eventLog });
-    };
-  };
-}
-
-class TouchableDelayEvents extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { eventLog: [] };
-  }
-
-  render() {
-    return (
-      <View testID="touchable_delay_events">
-        <View style={[styles.row, { justifyContent: 'center' }]}>
-          <TouchableOpacity
-            delayLongPress={800}
-            delayPressIn={400}
-            delayPressOut={1000}
-            onLongPress={this._createPressHandler('longPress - 800ms delay')}
-            onPress={this._createPressHandler('press')}
-            onPressIn={this._createPressHandler('pressIn - 400ms delay')}
-            onPressOut={this._createPressHandler('pressOut - 1000ms delay')}
-            style={styles.wrapper}
-            testID="touchable_delay_events_button"
-          >
-            <Text style={styles.button}>
-              Press Me
-            </Text>
-          </TouchableOpacity>
-        </View>
-        <View style={styles.eventLogBox} testID="touchable_delay_events_console">
-          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
-        </View>
-      </View>
-    );
-  }
-
-  _createPressHandler = eventName => {
-    return () => {
-      const limit = 6;
-      const eventLog = this.state.eventLog.slice(0, limit - 1);
-      eventLog.unshift(eventName);
-      this.setState({ eventLog });
-    };
-  };
-}
-
-class ForceTouchExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { force: 0 };
-  }
-
-  _renderConsoleText() {
-    return View.forceTouchAvailable
-      ? 'Force: ' + this.state.force.toFixed(3)
-      : '3D Touch is not available on this device';
-  }
-
-  render() {
-    return (
-      <View testID="touchable_3dtouch_event">
-        <View style={styles.forceTouchBox} testID="touchable_3dtouch_output">
-          <Text>{this._renderConsoleText()}</Text>
-        </View>
-        <View style={[styles.row, { justifyContent: 'center' }]}>
-          <View
-            onResponderMove={event => this.setState({ force: event.nativeEvent.force })}
-            onResponderRelease={event => this.setState({ force: 0 })}
-            onStartShouldSetResponder={() => true}
-            style={styles.wrapper}
-            testID="touchable_3dtouch_button"
-          >
-            <Text style={styles.button}>
-              Press Me
-            </Text>
-          </View>
-        </View>
-      </View>
-    );
-  }
-}
-
-class TouchableHitSlop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { timesPressed: 0 };
-  }
-
-  _handlePress = () => {
-    this.setState({
-      timesPressed: this.state.timesPressed + 1
-    });
-  };
-
-  render() {
-    let log = '';
-    if (this.state.timesPressed > 1) {
-      log = this.state.timesPressed + 'x onPress';
-    } else if (this.state.timesPressed > 0) {
-      log = 'onPress';
-    }
-
-    return (
-      <View testID="touchable_hit_slop">
-        <View style={[styles.row, { justifyContent: 'center' }]}>
-          <TouchableOpacity
-            hitSlop={{ top: 30, bottom: 30, left: 60, right: 60 }}
-            onPress={this._handlePress}
-            style={styles.hitSlopWrapper}
-            testID="touchable_hit_slop_button"
-          >
-            <Text style={styles.hitSlopButton}>
-              Press Outside This View
-            </Text>
-          </TouchableOpacity>
-        </View>
-        <View style={styles.logBox}>
-          <Text>
-            {log}
-          </Text>
-        </View>
-      </View>
-    );
-  }
-}
-
-class TouchableDisabled extends React.Component {
-  render() {
-    return (
-      <View>
-        <TouchableOpacity
-          disabled={true}
-          onPress={action('TouchableOpacity')}
-          style={[styles.row, styles.block]}
-        >
-          <Text style={styles.disabledButton}>Disabled TouchableOpacity</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          disabled={false}
-          onPress={action('TouchableOpacity')}
-          style={[styles.row, styles.block]}
-        >
-          <Text style={styles.button}>Enabled TouchableOpacity</Text>
-        </TouchableOpacity>
-
-        <TouchableHighlight
-          activeOpacity={1}
-          disabled={true}
-          onPress={action('TouchableHighlight')}
-          style={[styles.row, styles.block]}
-          underlayColor="rgb(210, 230, 255)"
-        >
-          <Text style={styles.disabledButton}>
-            Disabled TouchableHighlight
-          </Text>
-        </TouchableHighlight>
-
-        <TouchableHighlight
-          activeOpacity={1}
-          onPress={action('TouchableHighlight')}
-          style={[styles.row, styles.block]}
-          underlayColor="rgb(210, 230, 255)"
-        >
-          <Text style={styles.button}>
-            Enabled TouchableHighlight
-          </Text>
-        </TouchableHighlight>
-
-        {Platform.OS === 'android' &&
-          <TouchableNativeFeedback
-            background={TouchableNativeFeedback.SelectableBackground()}
-            onPress={() => console.log('custom TNF has been clicked')}
-            style={[styles.row, styles.block]}
-          >
-            <View>
-              <Text style={[styles.button, styles.nativeFeedbackButton]}>
-                Enabled TouchableNativeFeedback
-              </Text>
-            </View>
-          </TouchableNativeFeedback>}
-
-        {Platform.OS === 'android' &&
-          <TouchableNativeFeedback
-            background={TouchableNativeFeedback.SelectableBackground()}
-            disabled={true}
-            onPress={() => console.log('custom TNF has been clicked')}
-            style={[styles.row, styles.block]}
-          >
-            <View>
-              <Text style={[styles.disabledButton, styles.nativeFeedbackButton]}>
-                Disabled TouchableNativeFeedback
-              </Text>
-            </View>
-          </TouchableNativeFeedback>}
-      </View>
-    );
-  }
-}
-
-const heartImage = { uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small' };
-
-const styles = StyleSheet.create({
-  row: {
-    justifyContent: 'center',
-    flexDirection: 'row'
-  },
-  icon: {
-    width: 24,
-    height: 24
-  },
-  image: {
-    width: 50,
-    height: 50
-  },
-  text: {
-    fontSize: 16
-  },
-  block: {
-    padding: 10
-  },
-  button: {
-    color: '#007AFF'
-  },
-  disabledButton: {
-    color: '#007AFF',
-    opacity: 0.5
-  },
-  nativeFeedbackButton: {
-    textAlign: 'center',
-    margin: 10
-  },
-  hitSlopButton: {
-    color: 'white'
-  },
-  wrapper: {
-    borderRadius: 8
-  },
-  wrapperCustom: {
-    borderRadius: 8,
-    padding: 6
-  },
-  hitSlopWrapper: {
-    backgroundColor: 'red',
-    marginVertical: 30
-  },
-  logBox: {
-    padding: 20,
-    margin: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9'
-  },
-  eventLogBox: {
-    padding: 10,
-    margin: 10,
-    height: 120,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9'
-  },
-  forceTouchBox: {
-    padding: 10,
-    margin: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
-    alignItems: 'center'
-  },
-  textBlock: {
-    fontWeight: '500',
-    color: 'blue'
-  }
-});
-
-examples.forEach(example => {
-  storiesOf('component: Touchable*', module).add(example.title, () => example.render());
-});

examples/demos/Game2048/Game2048Example.js

@@ -1,5 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import Game2048 from './Game2048';
-
-storiesOf('demo: Game2048', module).add('the game', () => <Game2048 />);

examples/demos/TicTacToe/TicTacToeExample.js

@@ -1,5 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import TicTacToe from './TicTacToe';
-
-storiesOf('demo: TicTacToe', module).add('the game', () => <TicTacToe />);

lerna.json

@@ -0,0 +1,10 @@
+{
+  "lerna": "2.5.1",
+  "version": "0.3.1",
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "packages": [
+    "packages/*",
+    "website"
+  ]
+}

package.json

@@ -1,104 +1,71 @@
 {
-  "name": "react-native-web",
-  "version": "0.0.95",
-  "description": "React Native for Web",
-  "main": "dist/index.js",
-  "files": [
-    "dist",
-    "src",
-    "!**/__tests__"
-  ],
+  "private": true,
+  "name": "react-native-web-monorepo",
   "scripts": {
-    "build": "del ./dist && mkdir dist && babel src -d dist --ignore **/__tests__",
-    "build:examples": "build-storybook -o dist-examples -c ./examples/.storybook",
-    "build:performance": "cd performance && yarn && webpack",
-    "build:umd": "webpack --config webpack.config.js --sort-assets-by --progress",
-    "deploy:examples": "git checkout gh-pages && rm -rf ./storybook && mv dist-examples storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -",
-    "examples": "start-storybook -p 9001 -c ./examples/.storybook --dont-track",
+    "benchmark": "cd packages/benchmarks && yarn benchmark",
+    "clean": "del ./packages/*/dist",
+    "compile": "yarn clean && cd packages/react-native-web && babel src --out-dir dist --ignore \"**/__tests__\"",
+    "docs:start": "cd website && yarn start",
+    "docs:release": "cd website && yarn release",
     "flow": "flow",
-    "fmt": "find examples performance src -name '*.js' | grep -v -E '(node_modules|dist)' | xargs npm run fmt:cmd",
-    "fmt:cmd": "prettier --print-width=100 --single-quote --write",
-    "lint": "npm run lint:cmd -- examples performance src",
-    "lint:cmd": "eslint --fix --ignore-path .gitignore",
+    "fmt": "find packages scripts types website -name '*.js' | grep -v -E '(node_modules|dist|vendor)' | xargs yarn fmt:cmd",
+    "fmt:cmd": "prettier --write",
+    "jest": "jest --config ./scripts/jest/config.js",
+    "lint": "yarn lint:check --fix",
+    "lint:check": "eslint packages scripts website",
     "precommit": "lint-staged",
-    "release": "npm run build && npm run build:umd && npm publish",
-    "test": "jest",
-    "test:watch": "npm run test -- --watch"
+    "prerelease": "yarn test && yarn compile",
+    "release": "node ./scripts/release/publish.js",
+    "postrelease": "yarn docs:release",
+    "test": "yarn flow && yarn lint:check && yarn jest"
   },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "timers": "fake",
-    "snapshotSerializers": [
-      "<rootDir>/node_modules/enzyme-to-json/serializer"
-    ]
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.3",
+    "babel-loader": "^7.1.2",
+    "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": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.0",
+    "enzyme-to-json": "^3.2.2",
+    "eslint": "^4.12.1",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-promise": "^3.6.0",
+    "eslint-plugin-react": "^7.5.1",
+    "flow-bin": "^0.63.1",
+    "husky": "^0.14.3",
+    "jest": "^21.2.1",
+    "lerna": "^2.6.0",
+    "lint-staged": "^6.0.0",
+    "prettier": "^1.8.2",
+    "raf": "^3.4.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0"
   },
+  "workspaces": [
+    "packages/*",
+    "website"
+  ],
   "lint-staged": {
     "**/*.js": [
       "fmt:cmd",
       "git update-index --again",
-      "lint:cmd"
+      "eslint"
     ]
   },
-  "dependencies": {
-    "animated": "^0.2.0",
-    "array-find-index": "^1.0.2",
-    "babel-runtime": "^6.23.0",
-    "create-react-class": "^15.5.2",
-    "debounce": "1.0.2",
-    "deep-assign": "^2.0.0",
-    "fbjs": "^0.8.12",
-    "hyphenate-style-name": "^1.0.2",
-    "inline-style-prefixer": "^3.0.3",
-    "normalize-css-color": "^1.0.2",
-    "prop-types": "^15.5.8",
-    "react-timer-mixin": "^0.13.3"
-  },
-  "devDependencies": {
-    "@kadira/storybook": "^2.5.1",
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
-    "babel-eslint": "^7.2.2",
-    "babel-loader": "^6.4.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.2",
-    "babel-preset-react-native": "^1.9.1",
-    "del-cli": "^0.2.1",
-    "enzyme": "^2.8.2",
-    "enzyme-to-json": "^1.5.1",
-    "eslint": "^3.19.0",
-    "eslint-config-prettier": "^1.7.0",
-    "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-react": "^6.10.3",
-    "file-loader": "^0.11.1",
-    "flow-bin": "^0.46.0",
-    "jest": "^19.0.2",
-    "lint-staged": "^3.4.2",
-    "node-libs-browser": "^0.5.3",
-    "prettier": "^1.3.1",
-    "react": "^15.5.4",
-    "react-addons-test-utils": "^15.5.1",
-    "react-dom": "^15.5.4",
-    "react-test-renderer": "^15.5.4",
-    "url-loader": "^0.5.8",
-    "webpack": "^2.5.0",
-    "webpack-bundle-analyzer": "^2.4.0"
-  },
-  "peerDependencies": {
-    "react": "15.4.x || 15.5.x",
-    "react-dom": "15.4.x || 15.5.x"
+  "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": "BSD-3-Clause"
 }

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

@@ -0,0 +1,39 @@
+# babel-plugin-react-native-web
+
+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"]
+}
+```
+
+## 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';
+```

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.3.1",
+  "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,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`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[`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[`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/exports/Invalid';
+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[`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[`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');
+
+const createElement = require('react-native-web/dist/exports/createElement');
+
+const ColorPropType = require('react-native-web/dist/exports/ColorPropType');
+
+const StyleSheet = require('react-native-web/dist/exports/StyleSheet');
+
+const View = require('react-native-web/dist/exports/View');
+
+const TouchableOpacity = require('react-native-web/dist/exports/TouchableOpacity');
+
+const processColor = require('react-native-web/dist/exports/processColor');
+"
+`;

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

@@ -0,0 +1,45 @@
+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 "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-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,106 @@
+const getDistLocation = importName =>
+  importName ? `react-native-web/dist/exports/${importName}` : undefined;
+
+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' || 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);
+
+                if (distLocation) {
+                  return t.importDeclaration(
+                    [t.importDefaultSpecifier(t.identifier(specifier.local.name))],
+                    t.stringLiteral(distLocation)
+                  );
+                }
+              }
+              return t.importDeclaration(
+                [specifier],
+                t.stringLiteral('react-native-web/dist/index')
+              );
+            })
+            .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);
+
+                if (distLocation) {
+                  return t.exportNamedDeclaration(
+                    null,
+                    [t.exportSpecifier(t.identifier('default'), t.identifier(exportName))],
+                    t.stringLiteral(distLocation)
+                  );
+                }
+              }
+              return t.exportNamedDeclaration(
+                null,
+                [specifier],
+                t.stringLiteral('react-native-web/dist/index')
+              );
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(exports);
+        }
+      },
+      VariableDeclaration(path, state) {
+        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);
+        }
+      }
+    }
+  };
+};

packages/benchmarks/README.md

@@ -0,0 +1,56 @@
+# benchmarks
+
+To run these benchmarks:
+
+```
+yarn benchmark
+```
+
+To run benchmarks for individual implementations append `?<name>,<name>` to the
+URL, e.g., `?css-modules,react-native-web`.
+
+## Notes
+
+These benchmarks are crude approximations of extreme cases that libraries may
+encounter. The deep and wide tree cases look at the performance of mounting and
+rendering large trees of styled elements. The Triangle case looks at the
+performance of repeated style updates to a large mounted tree. Some libraries
+must inject new styles for each "dynamic style", whereas others may not.
+Libraries without support for dynamic styles (i.e., they rely on user-authored
+inline styles) do not include the `SierpinskiTriangle` benchmark.
+
+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_.
+
+## Results
+
+Typical render timings*: mean ± two standard deviations.
+
+| Implementation                        | Deep tree (ms)    | Wide tree (ms)    | Triangle (ms)    |
+| :--- | ---: | ---: | ---: |
+| `react-native-web@0.2.2`              |  `89.67` `±28.51` | `167.46` `±27.03` | `65.40` `±19.50` |
+| `css-modules`                         |  `77.42` `±45.50` | `141.44` `±33.96` | - |
+| `inline-styles`                       | `236.25` `±95.57` | `477.01` `±88.30` | `40.95` `±23.53` |
+
+Other libraries
+
+| Implementation                        | Deep tree (ms)    | Wide tree (ms)    | Triangle (ms)     |
+| :--- | ---: | ---: | ---: |
+| `styletron@3.0.0-rc.5`                |  `83.53` `±33.55` | `153.12` `±39.13` |  `56.47` `±24.22` |
+| `aphrodite@1.2.5`                     |  `88.23` `±31.22` | `164.03` `±34.70` | - |
+| `glamor@2.20.40`                      | `110.09` `±34.20` | `182.06` `±50.39` | ‡ |
+| `emotion@8.0.12`                      | `103.44` `±32.12` | `204.45` `±41.00` | `110.28` `±26.94` |
+| `react-jss@8.2.0`                     | `136.17` `±59.23` | `270.51` `±69.20` | - |
+| `styled-components@2.3.2`             | `217.57` `±51.90` | `437.57` `±65.74` |  `76.99` `±41.79` |
+| `reactxp@0.46.6`                      | `240.88` `±79.82` | `467.32` `±74.42` |  `70.95` `±32.90`|
+| `radium@0.19.6`                       | `400.19` `±94.58` | `816.59` `±91.10` |  `71.13` `±27.22` |
+
+These results indicate that render times when using `react-native-web`,
+`css-modules`, `aphrodite`, and `styletron` are roughly equivalent and
+significantly faster than alternatives.
+
+*MacBook Pro (13-inch, Early 2011); 2.3 GHz Intel Core i5; 8 GB 1333 MHz DDR3. Google Chrome 62.
+
+‡Glamor essentially crashes the browser tab.

packages/benchmarks/package.json

@@ -0,0 +1,33 @@
+{
+  "private": true,
+  "name": "benchmarks",
+  "version": "0.3.1",
+  "scripts": {
+    "benchmark": "webpack --config ./webpack.config.js && open index.html"
+  },
+  "dependencies": {
+    "aphrodite": "^1.2.5",
+    "babel-polyfill": "^6.26.0",
+    "classnames": "^2.2.5",
+    "d3-scale-chromatic": "^1.1.1",
+    "emotion": "^8.0.12",
+    "glamor": "^2.20.40",
+    "marky": "^1.2.0",
+    "radium": "^0.19.6",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-jss": "^8.2.0",
+    "react-native-web": "^0.3.1",
+    "reactxp": "^0.46.6",
+    "styled-components": "^2.3.2",
+    "styletron-client": "^3.0.0-rc.5",
+    "styletron-utils": "^3.0.0-rc.3"
+  },
+  "devDependencies": {
+    "babel-plugin-react-native-web": "^0.3.1",
+    "css-loader": "^0.28.7",
+    "style-loader": "^0.19.1",
+    "webpack": "^3.10.0",
+    "webpack-bundle-analyzer": "^2.9.1"
+  }
+}

packages/benchmarks/src/benchmark.js

@@ -38,30 +38,31 @@ const standardDeviation = values => {
   return Math.sqrt(meanSquareDiff);
 };
 
+export const log = (name, description, durations) => {
+  const stdDev = standardDeviation(durations);
+  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(`Median: ${formattedMedian}`);
+  console.log(`Mean: ${formattedMean}`);
+  console.log(`Standard deviation: ${formattedStdDev}`);
+  console.log(durations);
+  console.groupEnd();
+};
+
 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();
+      log(name, description, durations);
       resolve();
     };
 

packages/benchmarks/src/cases/NestedTree.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 class DeepTree extends Component {
   static propTypes = {
@@ -9,6 +10,24 @@ class DeepTree extends Component {
     wrap: PropTypes.number.isRequired
   };
 
+  /* necessary for reactxp to work without errors */
+  static childContextTypes = {
+    focusManager: PropTypes.object
+  };
+
+  getChildContext() {
+    return {
+      focusManager: {
+        addFocusableComponent() {},
+        removeFocusableComponent() {},
+        restrictFocusWithin() {},
+        removeFocusRestriction() {},
+        limitFocusWithin() {},
+        removeFocusLimitation() {}
+      }
+    };
+  }
+
   render() {
     const { breadth, components, depth, id, wrap } = this.props;
     const { Box } = components;
@@ -36,4 +55,4 @@ class DeepTree extends Component {
   }
 }
 
-module.exports = DeepTree;
+export default DeepTree;

packages/benchmarks/src/cases/SierpinskiTriangle.js

@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { interpolatePurples, interpolateBuPu, interpolateRdPu } from 'd3-scale-chromatic';
+
+const targetSize = 25;
+
+class SierpinskiTriangle extends React.Component {
+  static propTypes = {
+    Dot: PropTypes.node,
+    depth: PropTypes.number,
+    renderCount: PropTypes.number,
+    s: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  };
+
+  static defaultProps = {
+    depth: 0,
+    renderCount: 0
+  };
+
+  render() {
+    const { x, y, depth, renderCount, Dot } = this.props;
+    let { s } = this.props;
+
+    if (s <= targetSize) {
+      let fn;
+      switch (depth) {
+        case 1:
+          fn = interpolatePurples;
+          break;
+        case 2:
+          fn = interpolateBuPu;
+          break;
+        case 3:
+        default:
+          fn = interpolateRdPu;
+      }
+
+      return (
+        <Dot
+          color={fn(renderCount / 20)}
+          size={targetSize}
+          x={x - targetSize / 2}
+          y={y - targetSize / 2}
+        />
+      );
+    }
+
+    s /= 2;
+
+    return [
+      <SierpinskiTriangle
+        Dot={Dot}
+        depth={1}
+        key={1}
+        renderCount={renderCount}
+        s={s}
+        x={x}
+        y={y - s / 2}
+      />,
+      <SierpinskiTriangle
+        Dot={Dot}
+        depth={2}
+        key={2}
+        renderCount={renderCount}
+        s={s}
+        x={x - s}
+        y={y + s / 2}
+      />,
+      <SierpinskiTriangle
+        Dot={Dot}
+        depth={3}
+        key={3}
+        renderCount={renderCount}
+        s={s}
+        x={x + s}
+        y={y + s / 2}
+      />
+    ];
+  }
+}
+
+export default SierpinskiTriangle;

packages/benchmarks/src/cases/renderDeepTree.js

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

packages/benchmarks/src/cases/renderSierpinskiTriangle.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import SierpinskiTriangle from './SierpinskiTriangle';
+import { log } from '../benchmark';
+
+const node = document.querySelector('.root');
+
+let runs = 20;
+
+class Speedometer extends React.Component {
+  /* necessary for reactxp to work without errors */
+  static childContextTypes = {
+    focusManager: PropTypes.object
+  };
+  getChildContext() {
+    return {
+      focusManager: {
+        addFocusableComponent() {},
+        removeFocusableComponent() {},
+        restrictFocusWithin() {},
+        removeFocusRestriction() {},
+        limitFocusWithin() {},
+        removeFocusLimitation() {}
+      }
+    };
+  }
+
+  static propTypes = {
+    Dot: PropTypes.node.isRequired,
+    description: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    onComplete: PropTypes.node.isRequired
+  };
+
+  state = { renderCount: -1 };
+
+  async componentDidMount() {
+    const durations = [];
+
+    while ((runs -= 1)) {
+      const prev = window.performance.now();
+      await new Promise(resolve => {
+        this.raf = window.requestAnimationFrame(() => {
+          this.setState({ renderCount: this.state.renderCount + 1 }, () => {
+            const now = window.performance.now();
+            durations.push(now - prev);
+            resolve();
+          });
+        });
+      });
+    }
+
+    const { description, name } = this.props;
+    log(name, description, durations);
+
+    runs = 20;
+    this.props.onComplete();
+  }
+
+  componentWillUnmount() {
+    window.cancelAnimationFrame(this.raf);
+  }
+
+  render() {
+    return (
+      <div style={styles.wrapper}>
+        <SierpinskiTriangle
+          Dot={this.props.Dot}
+          renderCount={this.state.renderCount}
+          s={1000}
+          x={0}
+          y={0}
+        />
+      </div>
+    );
+  }
+}
+
+const styles = {
+  wrapper: {
+    position: 'absolute',
+    transformOrigin: '0 0',
+    left: '50%',
+    top: '50%',
+    width: '10px',
+    height: '10px',
+    backgroundColor: '#eee',
+    transform: 'scale(0.33)'
+  }
+};
+
+const renderSierpinskiTriangle = (name, { Dot }) => () => {
+  return new Promise(resolve => {
+    /* eslint-disable react/jsx-no-bind */
+    ReactDOM.render(
+      <Speedometer
+        Dot={Dot}
+        description="Dynamic styles"
+        name={`[${name}] Triangle`}
+        onComplete={() => {
+          ReactDOM.unmountComponentAtNode(node);
+          resolve();
+        }}
+      />,
+      node
+    );
+    /* eslint-enable react/jsx-no-bind */
+  });
+};
+
+export default renderSierpinskiTriangle;

packages/benchmarks/src/cases/renderTweet.js

@@ -1,5 +1,4 @@
 import createRenderBenchmark from '../createRenderBenchmark';
-import Tweet from '../src/components/Tweet';
 import React from 'react';
 
 const tweet1 = {
@@ -96,9 +95,9 @@ const tweet2 = {
   }
 };
 
-const renderTweet = (label, components) =>
+const renderTweet = (label, { Tweet }) =>
   createRenderBenchmark({
-    name: `Tweet [${label}]`,
+    name: `[${label}] Tweet`,
     runs: 10,
     getElement() {
       return (

packages/benchmarks/src/cases/renderWideTree.js

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

packages/benchmarks/src/createRenderBenchmark.js

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

packages/benchmarks/src/implementations/aphrodite/Box.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import View from '../View/aphrodite';
+import View from './View';
 import { StyleSheet } from 'aphrodite';
 
 const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
@@ -46,4 +46,4 @@ const styles = StyleSheet.create({
   }
 });
 
-module.exports = Box;
+export default Box;

packages/benchmarks/src/implementations/aphrodite/View.js

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

packages/benchmarks/src/implementations/aphrodite/index.js

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

packages/benchmarks/src/implementations/css-modules/Box.js

@@ -1,8 +1,8 @@
 /* eslint-disable react/prop-types */
 import classnames from 'classnames';
 import React from 'react';
-import View from '../View/css-modules';
-import styles from './styles.css';
+import View from './View';
+import styles from './box-styles.css';
 
 const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
   <View
@@ -15,4 +15,4 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
   />
 );
 
-module.exports = Box;
+export default Box;

packages/benchmarks/src/implementations/css-modules/View.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import classnames from 'classnames';
 import React from 'react';
-import styles from './styles.css';
+import styles from './view-styles.css';
 
 class View extends React.Component {
   render() {
@@ -10,4 +10,4 @@ class View extends React.Component {
   }
 }
 
-module.exports = View;
+export default View;

packages/benchmarks/src/implementations/css-modules/index.js

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

packages/benchmarks/src/implementations/emotion/Box.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import View from '../View/glamor';
+import View from './View';
 
 const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
   <View
@@ -45,4 +45,4 @@ const styles = {
   }
 };
 
-module.exports = Box;
+export default Box;

packages/benchmarks/src/implementations/emotion/Dot.js

@@ -0,0 +1,32 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { css } from 'emotion';
+
+const Dot = ({ size, x, y, children, color }) => (
+  <div
+    className={css(styles.root, {
+      borderBottomColor: color,
+      borderRightWidth: `${size / 2}px`,
+      borderBottomWidth: `${size / 2}px`,
+      borderLeftWidth: `${size / 2}px`,
+      left: `${x}px`,
+      top: `${y}px`
+    })}
+  >
+    {children}
+  </div>
+);
+
+const styles = {
+  root: {
+    position: 'absolute',
+    cursor: 'pointer',
+    width: 0,
+    height: 0,
+    borderColor: 'transparent',
+    borderStyle: 'solid',
+    borderTopWidth: 0
+  }
+};
+
+export default Dot;

packages/benchmarks/src/implementations/emotion/View.js

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

packages/benchmarks/src/implementations/emotion/index.js

@@ -0,0 +1,9 @@
+import Box from './Box';
+import Dot from './Dot';
+import View from './View';
+
+export default {
+  Box,
+  Dot,
+  View
+};

packages/benchmarks/src/implementations/glamor/Box.js

@@ -1,7 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import StyleSheet from 'react-native/apis/StyleSheet';
-import View from '../View/react-native-stylesheet';
+import View from './View';
 
 const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
   <View
@@ -15,7 +14,7 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
   />
 );
 
-const styles = StyleSheet.create({
+const styles = {
   outer: {
     padding: 4
   },
@@ -44,6 +43,6 @@ const styles = StyleSheet.create({
     width: 20,
     height: 20
   }
-});
+};
 
-module.exports = Box;
+export default Box;

packages/benchmarks/src/implementations/glamor/Dot.js

@@ -0,0 +1,32 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { css } from 'glamor';
+
+const Dot = ({ size, x, y, children, color }) => (
+  <div
+    className={css(styles.root, {
+      borderBottomColor: color,
+      borderRightWidth: `${size / 2}px`,
+      borderBottomWidth: `${size / 2}px`,
+      borderLeftWidth: `${size / 2}px`,
+      left: `${x}px`,
+      top: `${y}px`
+    })}
+  >
+    {children}
+  </div>
+);
+
+const styles = {
+  root: {
+    position: 'absolute',
+    cursor: 'pointer',
+    width: 0,
+    height: 0,
+    borderColor: 'transparent',
+    borderStyle: 'solid',
+    borderTopWidth: 0
+  }
+};
+
+export default Dot;

packages/benchmarks/src/implementations/glamor/View.js

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

packages/benchmarks/src/implementations/glamor/index.js

@@ -0,0 +1,9 @@
+import Box from './Box';
+import Dot from './Dot';
+import View from './View';
+
+export default {
+  Box,
+  Dot,
+  View
+};

packages/benchmarks/src/implementations/inline-styles/Box.js

@@ -0,0 +1,48 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import View from './View';
+
+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;

packages/benchmarks/src/implementations/inline-styles/Dot.js

@@ -0,0 +1,34 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Dot = ({ size, x, y, children, color }) => (
+  <div
+    style={{
+      ...styles.root,
+      ...{
+        borderBottomColor: color,
+        borderRightWidth: `${size / 2}px`,
+        borderBottomWidth: `${size / 2}px`,
+        borderLeftWidth: `${size / 2}px`,
+        left: `${x}px`,
+        top: `${y}px`
+      }
+    }}
+  >
+    {children}
+  </div>
+);
+
+const styles = {
+  root: {
+    position: 'absolute',
+    cursor: 'pointer',
+    width: 0,
+    height: 0,
+    borderColor: 'transparent',
+    borderStyle: 'solid',
+    borderTopWidth: 0
+  }
+};
+
+export default Dot;

packages/benchmarks/src/implementations/inline-styles/View.js

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

packages/benchmarks/src/implementations/inline-styles/index.js

@@ -0,0 +1,9 @@
+import Box from './Box';
+import Dot from './Dot';
+import View from './View';
+
+export default {
+  Box,
+  Dot,
+  View
+};

packages/benchmarks/src/implementations/jss/Box.js

@@ -2,7 +2,7 @@
 import classnames from 'classnames';
 import injectSheet from 'react-jss';
 import React from 'react';
-import View from '../View/jss';
+import View from './View';
 
 const Box = ({ classes, color, fixed = false, layout = 'column', outer = false, ...other }) => (
   <View
@@ -47,4 +47,4 @@ const styles = {
   }
 };
 
-module.exports = injectSheet(styles)(Box);
+export default injectSheet(styles)(Box);

packages/benchmarks/src/implementations/jss/View.js

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

packages/benchmarks/src/implementations/jss/index.js

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

packages/benchmarks/src/implementations/radium/Box.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import Radium from 'radium';
+import React from 'react';
+import View from './View';
+
+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);