0.0.53

See: https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types/issues/68

.babelrc

@@ -1,7 +1,8 @@
 {
-  "optional": [
-    "es7.classProperties",
-    "runtime"
+  "presets": [
+    "react-native"
   ],
-  "stage": 1
+  "plugins": [
+    [ "transform-react-remove-prop-types", { "mode": "wrap" } ]
+  ]
 }

.editorconfig

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

.eslintignore

@@ -1,3 +0,0 @@
-dist
-docs
-example

.eslintrc

@@ -1,17 +1,213 @@
 {
-  // babel parser to support ES features
+  // babel parser to support ES6/7 features
   "parser": "babel-eslint",
-  // based on https://github.com/feross/standard
-  "extends": [ "standard", "standard-react" ],
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "jsx-a11y",
+    "promise",
+    "react"
+  ],
   "env": {
-    "mocha": true
+    "es6": true,
+    "node": true
+  },
+  "globals": {
+    "document": false,
+    "navigator": false,
+    "window": false
   },
   "rules": {
-    // overrides of the standard style
-    "space-before-function-paren": [ 2, { "anonymous": "always", "named": "never" } ],
-    "wrap-iife": [ 2, "outside" ],
-    // overrides of the standard-react style
+    "accessor-pairs": 2,
+    "array-bracket-spacing": ["error", "always"],
+    "arrow-parens": [2, "always"],
+    "arrow-spacing": [2, { "before": true, "after": true }],
+    "block-spacing": [2, "always"],
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "camelcase": 0,
+    "comma-dangle": [2, "never"],
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "comma-style": [2, "last"],
+    "computed-property-spacing": ["error", "never"],
+    "constructor-super": 2,
+    "curly": [2, "all"],
+    "default-case": [2, { commentPattern: '^no default$' }],
+    "dot-location": [2, "property"],
+    "eol-last": 2,
+    "eqeqeq": [2, "allow-null"],
+    "generator-star-spacing": [2, { "before": true, "after": true }],
+    "handle-callback-err": [2, "^(err|error)$" ],
+    "indent": [2, 2, { "SwitchCase": 1 }],
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "keyword-spacing": [2, { "before": true, "after": true }],
+    "max-len": [2, 120, 4],
+    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+    "new-parens": 2,
+    "no-alert": 1,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-case-declarations": 2,
+    "no-class-assign": 2,
+    "no-cond-assign": 2,
+    "no-const-assign": 2,
+    "no-control-regex": 2,
+    "no-debugger": 2,
+    "no-delete-var": 2,
+    "no-dupe-args": 2,
+    "no-dupe-class-members": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-duplicate-imports": 2,
+    "no-empty-character-class": 2,
+    "no-empty-pattern": 2,
+    "no-eval": 2,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-parens": [2, "functions"],
+    "no-extra-semi": 2,
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
+    "no-lone-blocks": 2,
+    "no-loop-func": 2,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": [2, { "max": 1 }],
+    "no-native-reassign": 2,
+    "no-negated-in-lhs": 2,
+    "no-new": 2,
+    "no-new-func": 2,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-symbol": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-path-concat": 2,
+    "no-proto": 2,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-return-assign": [2, "except-parens"],
+    "no-script-url": 2,
+    "no-self-assign": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 2,
+    "no-sparse-arrays": 2,
+    "no-this-before-super": 2,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-unexpected-multiline": 2,
+    "no-unmodified-loop-condition": 2,
+    "no-unneeded-ternary": [2, { "defaultAssignment": false }],
+    "no-unreachable": 2,
+    "no-unsafe-finally": 2,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "no-useless-call": 2,
+    "no-useless-computed-key": 2,
+    "no-useless-concat": 2,
+    "no-useless-constructor": 2,
+    "no-useless-escape": 2,
+    "no-var": 2,
+    "no-whitespace-before-property": 2,
+    "no-with": 2,
+    "object-curly-spacing": ["error", "always"],
+    "operator-linebreak": [2, "after"],
+    "padded-blocks": [2, "never"],
+    "prefer-const": 2,
+    "prefer-rest-params": 2,
+    "prefer-template": 2,
+    "quotes": [2, "single", "avoid-escape"],
+    "radix": 2,
+    "rest-spread-spacing": ["error"],
+    "semi": [2, "always"],
+    "semi-spacing": [2, { "before": false, "after": true }],
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": [2, { "anonymous": "always", "named": "never" }],
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] }],
+    "template-curly-spacing": [2, "never"],
+    "use-isnan": 2,
+    "valid-typeof": 2,
+    "wrap-iife": [2, "outside"],
+    "yield-star-spacing": [2, "both"],
+    "yoda": [2, "never"],
+
+    // promise
+    "promise/param-names": 2,
+
+    // jsx accessibility
+    "jsx-a11y/aria-props": 2,
+    "jsx-a11y/aria-proptypes": 2,
+    "jsx-a11y/aria-role": 2,
+    "jsx-a11y/aria-unsupported-elements": 2,
+    "jsx-a11y/heading-has-content": 2,
+    "jsx-a11y/href-no-hash": 2,
+    "jsx-a11y/html-has-lang": 2,
+    "jsx-a11y/img-has-alt": 2,
+    "jsx-a11y/img-redundant-alt": 2,
+    "jsx-a11y/label-has-for": 2,
+    "jsx-a11y/mouse-events-have-key-events": 2,
+    "jsx-a11y/no-access-key": 2,
+    "jsx-a11y/no-marquee": 2,
+    "jsx-a11y/no-onchange": 0,
+    "jsx-a11y/onclick-has-focus": 2,
+    "jsx-a11y/onclick-has-role": 2,
+    "jsx-a11y/role-has-required-aria-props": 2,
+    "jsx-a11y/role-supports-aria-props": 2,
+    "jsx-a11y/scope": 2,
+    "jsx-a11y/tabindex-no-positive": 2,
+
+    // react
+    "jsx-quotes": [2, "prefer-single"],
+    "react/display-name": 0,
+    "react/jsx-boolean-value": 2,
+    "react/jsx-handler-names": [2, {
+      "eventHandlerPrefix": "_handle"
+    }],
+    "react/jsx-indent": [2, 2],
+    "react/jsx-indent-props": [2, 2],
+    "react/jsx-no-bind": 2,
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-undef": 2,
+    "react/jsx-pascal-case": 2,
     "react/jsx-sort-props": 2,
-    "react/jsx-sort-prop-types": 2
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/no-did-mount-set-state": 0,
+    "react/no-did-update-set-state": 2,
+    "react/no-direct-mutation-state": 2,
+    "react/no-multi-comp": 0,
+    "react/no-string-refs": 2,
+    "react/no-unknown-property": 2,
+    "react/prefer-es6-class": 2,
+    "react/prop-types": 2,
+    "react/react-in-jsx-scope": 0,
+    "react/self-closing-comp": 2,
+    "react/sort-comp": 0,
+    "react/sort-prop-types": 2,
+    "react/wrap-multilines": 0
   }
 }

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,30 @@
+<!--
+React Native for Web is an implementation of React Native. If you have feature
+requests, you should post them to https://productpains.com/product/react-native/.
+
+GitHub issues should only be used for bugs or Web-specific features you believe
+React Native requires.
+
+Make sure to add ALL the information needed to understand the bug so that
+someone can help. If the info is missing we'll add the 'needs more information'
+label and close the issue until there is enough information.
+-->
+
+**What is the current behavior?**
+
+Link to minimal test case: (template: [codepen](https://codepen.io/necolas/pen/PZzwBR?editors=0010))
+
+**What is the expected behaviour?**
+
+**Steps to reproduce**
+
+1.
+2.
+
+**Environment (include versions)**
+
+OS:
+Device:
+Browser:
+React Native for Web (version):
+React (version):

.github/PULL_REQUEST_TEMPLATE.md

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

.gitignore

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

.travis.yml

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

CONTRIBUTING.md

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

LICENCE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015 Nicolas Gallagher
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

LICENSE

@@ -0,0 +1,31 @@
+BSD License
+
+For React Native software
+
+Copyright (c) 2015-present, Nicolas Gallagher. All rights reserved.
+Copyright (c) 2015-present, Facebook, Inc. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+ * Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+ * Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+ * Neither the name Facebook nor the names of its contributors may be used to
+   endorse or promote products derived from this software without specific
+   prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -1,158 +1,148 @@
 # React Native for Web
 
 [![Build Status][travis-image]][travis-url]
-[![npm version][npm-image]][npm-url] (14 KB gzipped)
+[![npm version][npm-image]][npm-url]
 
-The core [React Native][react-native-url] components built for the web, backed
-by a precomputed CSS library.
+[React Native][react-native-url] components and APIs for the Web.
 
-## Table of contents
+Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
 
-* [Install](#install)
-* [Use](#use)
-* [Components](#components)
-* [Styling](#styling)
-* [Contributing](#contributing)
-* [Thanks](#thanks)
-* [License](#license)
+[npm-image]: https://badge.fury.io/js/react-native-web.svg
+[npm-url]: https://npmjs.org/package/react-native-web
+[react-native-url]: https://facebook.github.io/react-native/
+[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
+[travis-url]: https://travis-ci.org/necolas/react-native-web
 
-## Install
+## Overview
+
+"React Native for Web" is a project to bring React Native's building blocks and
+touch handling to the Web. [Read more](#why).
+
+Browse the UI Explorer to see React Native [examples running on
+Web](https://necolas.github.io/react-native-web/storybook/). Or try it out
+online with [React Native for Web: Playground](http://codepen.io/necolas/pen/PZzwBR).
+
+## Quick start
+
+To install in your app:
 
 ```
 npm install --save react react-native-web
 ```
 
-## Use
+Read the [Client and Server rendering](docs/guides/rendering.md) guide.
 
-React Native for Web exports its components and a reference to the `React`
-installation. Styles are authored in JavaScript as plain objects.
+Alternatively, you can quickly setup a local project
+using [create-react-app](https://github.com/facebookincubator/create-react-app)
+(which supports `react-native-web` out-of-the-box once installed) and
+[react-native-web-starter](https://github.com/grabcode/react-native-web-starter).
+
+## Documentation
+
+Guides:
+
+* [Accessibility](docs/guides/accessibility.md)
+* [Client and server rendering](docs/guides/rendering.md)
+* [Direct manipulation](docs/guides/direct-manipulation.md)
+* [Internationalization](docs/guides/internationalization.md)
+* [Known issues](docs/guides/known-issues.md)
+* [React Native](docs/guides/react-native.md)
+* [Style](docs/guides/style.md)
+
+Exported modules:
+
+* Components
+  * [`ActivityIndicator`](docs/components/ActivityIndicator.md)
+  * [`Image`](docs/components/Image.md)
+  * [`ListView`](docs/components/ListView.md)
+  * [`ProgressBar`](docs/components/ProgressBar.md)
+  * [`ScrollView`](docs/components/ScrollView.md)
+  * [`Switch`](docs/components/Switch.md)
+  * [`Text`](docs/components/Text.md)
+  * [`TextInput`](docs/components/TextInput.md)
+  * [`TouchableHighlight`](http://facebook.github.io/react-native/releases/0.22/docs/touchablehighlight.html) (mirrors React Native)
+  * [`TouchableOpacity`](http://facebook.github.io/react-native/releases/0.22/docs/touchableopacity.html) (mirrors React Native)
+  * [`TouchableWithoutFeedback`](docs/components/TouchableWithoutFeedback.md)
+  * [`View`](docs/components/View.md)
+* APIs
+  * [`Animated`](http://facebook.github.io/react-native/releases/0.20/docs/animated.html) (mirrors React Native)
+  * [`AppRegistry`](docs/apis/AppRegistry.md)
+  * [`AppState`](docs/apis/AppState.md)
+  * [`AsyncStorage`](docs/apis/AsyncStorage.md)
+  * [`Dimensions`](docs/apis/Dimensions.md)
+  * [`I18nManager`](docs/apis/I18nManager.md)
+  * [`NativeMethods`](docs/apis/NativeMethods.md)
+  * [`NetInfo`](docs/apis/NetInfo.md)
+  * [`PanResponder`](http://facebook.github.io/react-native/releases/0.20/docs/panresponder.html#content) (mirrors React Native)
+  * [`PixelRatio`](docs/apis/PixelRatio.md)
+  * [`Platform`](docs/apis/Platform.md)
+  * [`StyleSheet`](docs/apis/StyleSheet.md)
+  * [`Vibration`](docs/apis/Vibration.md)
+
+<span id="#why"></span>
+## Why?
+
+There are many different teams at Twitter building web applications with React.
+We want to share React components, libraries, and APIs between teams…much like
+the OSS community tries to do. At our scale, this involves dealing with
+multiple, inter-related problems including: a common way to handle style,
+animation, touch, viewport adaptation, accessibility, themes, RTL layout, and
+server-rendering.
+
+This is hard to do with React DOM, as the components are essentially the same
+low-level building blocks that the browser provides. However, React Native
+avoids, solves, or can solve almost all these problems facing Web teams.
+Central to this is React Native's JavaScript style API (not strictly
+"CSS-in-JS") which avoids the key [problems with
+CSS](https://speakerdeck.com/vjeux/react-css-in-js) by giving up some of the
+complexity of CSS.
+
+## Example code
 
 ```js
-import React, { View } from 'react-native-web'
+import React from 'react'
+import { AppRegistry, Image, StyleSheet, Text, View } from 'react-native'
 
-class MyComponent extends React.Component {
-  render() {
-    return (
-      <View style={styles.root} />
-    )
-  }
-}
+// 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>
+)
 
-const styles = {
-  root: {
-    borderColor: 'currentcolor'
-    borderWidth: '5px',
-    flexDirection: 'row'
-    height: '5em'
-  }
-}
-```
-
-## Components
-
-Partial implementations of…
-
-* [`Image`](docs/components/Image.md)
-* [`Text`](docs/components/Text.md)
-* [`TextInput`](docs/components/TextInput.md)
-* [`View`](docs/components/View.md)
-
-## Styling
-
-React Native Web provides a mechanism to declare all your styles and layout
-inline with the components that use them. The `View` component makes it easy
-to build common layouts with flexbox, such as stacked and nested boxes with
-margin and padding.
-
-Styling is identical to using inline styles in React, but most inline styles
-are converted to single-purpose classes. The current implementation includes
-300+ precomputed CSS declarations (~4.5KB gzipped) that cover a large
-proportion of common styles. A more sophisticated build-time implementation may
-produce a slightly larger CSS file for large apps, and fall back to fewer
-inline styles.  Read more about the [styling
-strategy](docs/react-native-web-style/styling.md).
-
-See this [guide to flexbox][flexbox-guide-url].
-
-```js
-import React, { Image, Text, View } from 'react-native-web'
-
-class App extends React.Component {
-  render() {
-    return (
-      <View style={styles.row}>
-        <Image
-          source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
-          style={styles.image}
-        />
-        <View style={styles.text}>
-          <Text style={styles.title}>
-            React Native Web
-          </Text>
-          <Text style={styles.subtitle}>
-            Build high quality web apps using React
-          </Text>
-        </View>
-      </View>
-    )
-  },
-})
-
-const styles = {
-  row: {
-    flexDirection: 'row',
-    margin: 40
-  },
-  image: {
-    height: 40,
-    marginRight: 10,
-    width: 40,
-  },
-  text: {
-    flex: 1,
+// Styles
+const styles = StyleSheet.create({
+  card: {
+    flexGrow: 1,
     justifyContent: 'center'
   },
   title: {
     fontSize: '1.25rem',
     fontWeight: 'bold'
   },
-  subtitle: {
-    fontSize: '1rem'
+  image: {
+    height: 40,
+    marginVertical: 10,
+    width: 40
   }
-}
+})
+
+// App registration and rendering
+AppRegistry.registerComponent('MyApp', () => App)
+AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })
 ```
 
-Combine and override style objects:
+## Related projects
 
-```js
-import baseStyle from './baseStyle'
-
-const buttonStyle = {
-  ...baseStyle,
-  backgroundColor: '#333',
-  color: '#fff'
-}
-```
-
-## Contributing
-
-Please read the [contribution guidelines][contributing-url]. Contributions are
-welcome!
-
-## Thanks
-
-Thanks to current and past members of the React and React Native teams (in
-particular Vjeux and Pete Hunt), and Tobias Koppers for Webpack and CSS loader.
+* [react-native-web-starter](https://github.com/grabcode/react-native-web-starter)
+* [react-native-web-player](https://github.com/dabbott/react-native-web-player)
+* [react-web](https://github.com/taobaofed/react-web)
+* [react-native-for-web](https://github.com/KodersLab/react-native-for-web)
 
 ## License
 
-Copyright (c) 2015 Nicolas Gallagher. Released under the [MIT
-license](http://www.opensource.org/licenses/mit-license.php).
-
-[contributing-url]: https://github.com/necolas/react-native-web/blob/master/CONTRIBUTING.md
-[flexbox-guide]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-[npm-image]: https://img.shields.io/npm/v/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
+React Native for Web is [BSD licensed](LICENSE).

config/karma.config.js

@@ -1,45 +0,0 @@
-var assign = require('object-assign')
-var path = require('path')
-var webpackConfig = require('./webpack-base.config.js')
-
-module.exports = function (config) {
-  config.set({
-    basePath: path.resolve(__dirname, '..'),
-    browsers: [ 'Chrome' ],
-    browserNoActivityTimeout: 60000,
-    client: {
-      captureConsole: true,
-      mocha: {
-        ui: 'tdd'
-      },
-      useIframe: true
-    },
-    files: [
-      'src/specs.bundle.js'
-    ],
-    frameworks: [
-      'mocha'
-    ],
-    plugins: [
-      'karma-chrome-launcher',
-      'karma-mocha',
-      'karma-sourcemap-loader',
-      'karma-webpack'
-    ],
-    preprocessors: {
-      'src/specs.bundle.js': [ 'webpack', 'sourcemap' ]
-    },
-    reporters: [ 'dots' ],
-    singleRun: true,
-    webpack: assign({}, webpackConfig, { devtool: 'inline' }),
-    webpackMiddleware: {
-      stats: {
-        assetsSort: 'name',
-        colors: true,
-        children: false,
-        chunks: false,
-        modules: false
-      }
-    }
-  })
-}

config/webpack-base.config.js

@@ -1,23 +0,0 @@
-var autoprefixer = require('autoprefixer-core')
-
-module.exports = {
-  module: {
-    loaders: [
-      {
-        test: /\.css$/,
-        loader: [
-          'style-loader',
-          'css-loader?module&localIdentName=[hash:base64:5]',
-          '!postcss-loader'
-        ].join('!')
-      },
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: { cacheDirectory: true }
-      }
-    ]
-  },
-  postcss: [ autoprefixer ]
-}

config/webpack.config.js

@@ -1,29 +0,0 @@
-var assign = require('object-assign')
-var base = require('./webpack-base.config.js')
-var webpack = require('webpack')
-var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin
-
-module.exports = assign({}, base, {
-  entry: {
-    main: './src/index'
-  },
-  externals: [{
-    react: true
-  }],
-  output: {
-    filename: 'react-native-web.js',
-    library: 'ReactNativeWeb',
-    libraryTarget: 'commonjs2',
-    path: './dist'
-  },
-  plugins: [
-    new UglifyJsPlugin({
-      compress: {
-        dead_code: true,
-        drop_console: true,
-        screw_ie8: true,
-        warnings: true
-      }
-    })
-  ]
-})

core.js

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

docs/View.spec.md

@@ -1,66 +0,0 @@
-# View
-
-`View` is a flexbox container and the fundamental building block for UI. It is
-designed to be nested inside other `View`'s and to have 0-to-many children of
-any type.
-
-## PropTypes
-
-All other props are transferred directly to the `element`.
-
-+ `component`: `func` or `string` (default `"div"`)
-+ `pointerEvents`: `oneOf('all', 'box-only', 'box-none', 'none')`
-+ `style`: `ViewStylePropTypes`
-
-## ViewStylePropTypes
-
-+ BackgroundPropTypes
-+ BorderThemePropTypes
-+ LayoutPropTypes
-+ `boxShadow`: `string`
-+ `color`: `string`
-+ `opacity`: `number`
-
-## ViewStyleDefaultProps
-
-Implements the default styles from
-[facebook/css-layout](https://github.com/facebook/css-layout).
-
-1. All the flex elements are oriented from top-to-bottom, left-to-right and do
-   not shrink. This is how things are laid out using the default CSS settings
-   and what you'd expect.
-
-2. The most convenient way to express the relation between width and other
-   box-model properties.
-
-3. Everything is `display:flex` by default. All the behaviors of `block` and
-   `inline-block` can be expressed in term of flex but not the opposite.
-
-4. Everything is `position:relative`. This makes `position:absolute` target the
-   direct parent and not some parent which is either relative or absolute. If
-   you want to position an element relative to something else, you should move
-   it in the DOM instead of relying of CSS. It also makes `top`, `left`,
-   `right`, `bottom` do something when not specifying `position:absolute`.
-
-```js
-const ViewDefaultStyle = {
-  alignItems: 'stretch', // 1
-  borderWidth: 0,
-  borderStyle: 'solid',
-  boxSizing: 'border-box', // 2
-  display: 'flex', // 3
-  flexBasis: 'auto', // 1
-  flexDirection: 'column', // 1
-  flexShrink: 0, // 1
-  listStyle: 'none',
-  margin: 0,
-  padding: 0,
-  position: 'relative' // 4
-};
-```
-
-## Examples
-
-```js
-// TODO
-```

docs/apis/AppRegistry.md

@@ -0,0 +1,60 @@
+# 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`, and prerendered by invoking
+`AppRegistry.prerenderApplication` (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

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

docs/apis/AsyncStorage.md

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

docs/apis/Dimensions.md

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

docs/apis/I18nManager.md

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

docs/apis/NativeMethods.md

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

docs/apis/NetInfo.md

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

docs/apis/PixelRatio.md

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

docs/apis/Platform.md

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

docs/apis/StyleSheet.md

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

docs/apis/Vibration.md

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

docs/components/ActivityIndicator.md

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

docs/components/Image.md

@@ -1,31 +1,96 @@
-# Image spec
+# Image
 
-#### PropTypes
+An accessibile image component with support for image resizing, default image,
+and child content.
 
-All other props are transferred directly to the `element`.
+Unsupported React Native props:
+`capInsets` (ios),
+`onProgress` (ios)
 
-+ `accessibilityLabel`: `string`
-+ `async`: `bool` (TODO)
-+ `className`: `string`
-+ `source`: `string`
-+ `style`: `ImageStylePropTypes`
+## Props
 
-#### ImageStylePropTypes
+**accessibilityLabel**: string
 
-+ `BackgroundPropTypes`
-+ `BorderThemePropTypes`
-+ `LayoutPropTypes`
-+ `opacity`: `string`
+The text that's read by a screenreader when someone interacts with the image.
 
-#### Examples
+**accessible**: bool
+
+When `false`, the view is hidden from screenreaders. Default: `true`.
+
+**children**: any
+
+Content to display over the image.
+
+**defaultSource**: { uri: string }
+
+An image to display as a placeholder while downloading the final image off the network.
+
+**onError**: function
+
+Invoked on load error with `{nativeEvent: {error}}`.
+
+**onLayout**: function
+
+Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
+height } } }`, where `x` and `y` are the offsets from the parent node.
+
+**onLoad**: function
+
+Invoked when load completes successfully.
+
+**onLoadEnd**: function
+
+Invoked when load either succeeds or fails,
+
+**onLoadStart**: function
+
+Invoked on load start.
+
+**resizeMode**: oneOf('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'cover'
+
+Determines how to resize the image when the frame doesn't match the raw image
+dimensions.
+
+**source**: { uri: string }
+
+`uri` is a string representing the resource identifier for the image, which
+could be an http address or a base64 encoded image.
+
+**style**: style
+
++ ...[View#style](./View.md)
++ `resizeMode`
+
+**testID**: string
+
+Used to locate a view in end-to-end tests.
+
+## Properties
+
+static **resizeMode**: Object
+
+Example usage:
+
+```
+<Image resizeMode={Image.resizeMode.contain} />
+```
+
+## Examples
 
 ```js
-import {Image} from 'react-web-sdk';
-import React, {PropTypes} from 'react';
+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 }
+  }
 
-class Avatar extends React.Component {
   static propTypes = {
     size: PropTypes.oneOf(['small', 'normal', 'large']),
+    testID: Image.propTypes.testID,
     user: PropTypes.object
   }
 
@@ -33,34 +98,52 @@ class Avatar extends React.Component {
     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`}
-        source={user.avatarUrl}
-        style={ ...style.base, ...style[this.props.size] }
+        defaultSource={{ uri: placeholderAvatar }}
+        onLoad={this._onLoad.bind(this)}
+        resizeMode='cover'
+        source={{ uri: user.avatarUrl }}
+        style={[
+          styles.base,
+          styles[size],
+          loadingStyle
+        ]}
       />
-    );
+    )
   }
 }
 
-const style = {
+const styles = StyleSheet.create({
   base: {
     borderColor: 'white',
-    borderRadius: '5px',
-    borderWidth: '5px'
+    borderRadius: 5,
+    borderWidth: 5
+  },
+  loading: {
+    opacity: 0.5
   },
   small: {
-    height: '32px',
-    width: '32px'
+    height: 32,
+    width: 32
   },
   normal: {
-    height: '48px',
-    width: '48px'
+    height: 48,
+    width: 48
   },
   large: {
-    height: '64px',
-    width: '32px'
+    height: 64,
+    width: 64
   }
-}
+})
 ```

docs/components/ListView.md

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

docs/components/ProgressBar.md

@@ -0,0 +1,23 @@
+# ProgressBar
+
+Display an activity progress bar.
+
+## Props
+
+[...View props](./View.md)
+
+**color**: string = '#1976D2'
+
+Color of the progress bar.
+
+**indeterminate**: bool = true
+
+Whether the progress bar will show indeterminate progress.
+
+**progress**: number
+
+The progress value (between 0 and 1).
+
+(web) **trackColor**: string = 'transparent'
+
+Color of the track bar.

docs/components/ScrollView.md

@@ -0,0 +1,122 @@
+# ScrollView
+
+A scrollable `View` that provides itegration with the touch-locking "responder"
+system. `ScrollView`'s must have a bounded height: either set the height of the
+view directly (discouraged) or make sure all parent views have bounded height
+(e.g., transfer `{ flex: 1}` down the view stack).
+
+## Props
+
+[...View props](./View.md)
+
+**contentContainerStyle**: style
+
+These styles will be applied to the scroll view content container which wraps
+all of the child views.
+
+**horizontal**: bool = false
+
+When true, the scroll view's children are arranged horizontally in a row
+instead of vertically in a column.
+
+**keyboardDismissMode**: oneOf('none', 'on-drag') = 'none'
+
+Determines whether the keyboard gets dismissed in response to a scroll drag.
+
+* `none` (the default), drags do not dismiss the keyboard.
+* `on-drag`, the keyboard is dismissed when a drag begins.
+* `interactive` (not supported on web; same as `none`)
+
+**onContentSizeChange**: function
+
+Called when scrollable content view of the `ScrollView` changes. It's
+implemented using the `onLayout` handler attached to the content container
+which this `ScrollView` renders.
+
+**onScroll**: function
+
+Fires at most once per frame during scrolling. The frequency of the events can
+be contolled using the `scrollEventThrottle` prop.
+
+**refreshControl**: element
+
+TODO
+
+A [RefreshControl](../RefreshControl) component, used to provide
+pull-to-refresh functionality for the `ScrollView`.
+
+**scrollEnabled**: bool = true
+
+When false, the content does not scroll.
+
+**scrollEventThrottle**: number = 0
+
+This controls how often the scroll event will be fired while scrolling (in
+events per seconds). A higher number yields better accuracy for code that is
+tracking the scroll position, but can lead to scroll performance problems. The
+default value is `0`, which means the scroll event will be sent only once each
+time the view is scrolled.
+
+## 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={60}
+        style={styles.root}
+      />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    borderWidth: 1
+  },
+  container: {
+    padding: 10
+  }
+})
+```

docs/components/Switch.md

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

docs/components/Text.md

@@ -1,37 +1,114 @@
-# Text spec
+# Text
 
-Text layout and styles.
+`Text` is component for displaying text. It supports style, basic touch
+handling, and inherits typographic styles from ancestor elements.
 
-#### PropTypes
+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.
 
-All other props are transferred directly to the `element`.
+Unsupported React Native props:
+`allowFontScaling` (ios),
+`suppressHighlighting` (ios)
 
-+ `element`: `func` or `string` (default `"div"`)
-+ `style`: `TextStylePropTypes`
+## Props
 
-#### TextStylePropTypes
+NOTE: `Text` will transfer all other props to the rendered HTML element.
 
-+ ViewStylePropTypes
-+ TypographicPropTypes
+(web) **accessibilityLabel**: string
+
+Defines the text available to assistive technologies upon interaction with the
+element. (This is implemented using `aria-label`.)
+
+(web) **accessibilityRole**: oneOf(roles)
+
+Allows assistive technologies to present and support interaction with the view
+in a manner that is consistent with user expectations for similar views of that
+type. For example, marking a touchable view with an `accessibilityRole` of
+`button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
+
+Note: Avoid changing `accessibilityRole` values over time or after user
+actions. Generally, accessibility APIs do not provide a means of notifying
+assistive technologies of a `role` value change.
+
+**accessible**: bool = true
+
+When `false`, the text is hidden from assistive technologies. (This is
+implemented using `aria-hidden`.)
+
+**children**: any
+
+Child content.
+
+**numberOfLines**: number
+
+Truncates the text with an ellipsis after this many lines. Currently only supports `1`.
+
+**onLayout**: function
+
+Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
+height } } }`, where `x` and `y` are the offsets from the parent node.
+
+**onPress**: function
+
+This function is called on press.
+
+**selectable**: bool = true
+
+Lets the user select the text.
+
+**style**: style
+
++ ...[View#style](View.md)
++ `color`
++ `fontFamily`
++ `fontSize`
++ `fontStyle`
++ `fontWeight`
++ `letterSpacing`
++ `lineHeight`
++ `textAlign`‡
++ `textAlignVertical`
++ `textDecorationLine`
++ `textOverflow`
++ `textRendering`
++ `textShadowColor`
++ `textShadowOffset`‡
++ `textShadowRadius`
++ `textTransform`
++ `unicodeBidi`
++ `whiteSpace`
++ `wordWrap`
++ `writingDirection`‡
+
+‡ This property can be suffixed with `$noI18n` to prevent automatic
+bidi-flipping in RTL mode. This is only supported if `Platform.OS === 'web'`.
+
+**testID**: string
+
+Used to locate this view in end-to-end tests.
 
 ## Examples
 
 ```js
-import {Text} from 'react-web-sdk';
-import React, {PropTypes} from 'react';
+import React, { Component, PropTypes } from 'react'
+import { StyleSheet, Text } from 'react-native'
 
-class PrettyText extends React.Component {
+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;
@@ -39,32 +116,32 @@ class PrettyText extends React.Component {
     return (
       <Text
         ...other
-        style={{
-          ...style,
-          ...localStyle.color[color],
-          ...localStyle.size[size],
-          ...localStyle.weight[weight]
-        }}
+        style={[
+          style,
+          colorStyles[color],
+          sizeStyles[size],
+          weightStyles[weight]
+        ]}
       />
     );
   }
 }
 
-const localStyle = {
-  color: {
-    white: { color: 'white' },
-    gray: { color: 'gray' },
-    red: { color: 'red' }
-  },
-  size: {
-    small: { fontSize: '0.85rem', padding: '0.5rem' },
-    normal: { fontSize: '1rem', padding: '0.75rem' },
-    large: { fontSize: '1.5rem', padding: '1rem' }
-  },
-  weight: {
-    light: { fontWeight: '300' },
-    normal: { fontWeight: '400' },
-    bold: { fontWeight: '700' }
-  }
-}
+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,15 +1,227 @@
-# TextInput spec
+# TextInput
 
-Text input layout and styles.
+Accessible single- and multi-line text input via a keyboard. Supports features
+such as auto-complete, auto-focus, placeholder text, and event callbacks.
 
-#### PropTypes
+Note: some props are exclusive to or excluded from `multiline`.
 
-All other props are transferred directly to the `element`.
+Unsupported React Native props:
+`onEndEditing`,
+`clearButtonMode` (ios),
+`enablesReturnKeyAutomatically` (ios),
+`placeholderTextColor`,
+`returnKeyType` (ios),
+`selectionState` (ios),
+`underlineColorAndroid` (android)
 
-+ `component`: `func` or `string` (default `"div"`)
-+ `style`: `TextStylePropTypes`
+## Props
 
-#### TextStylePropTypes
+[...View props](./View.md)
 
-+ ViewStylePropTypes
-+ TypographicPropTypes
+**autoCapitalize**: oneOf('characters', 'none', 'sentences', 'words') = 'sentences'
+
+Automatically capitalize certain characters (only available in Chrome and iOS Safari).
+
+* `characters`: Automatically capitalize all characters.
+* `none`: Completely disables automatic capitalization
+* `sentences`: Automatically capitalize the first letter of sentences.
+* `words`: Automatically capitalize the first letter of words.
+
+(web) **autoComplete**: string
+
+Indicates whether the value of the control can be automatically completed by
+the browser. [Accepted values](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
+
+**autoCorrect**: bool = true
+
+Automatically correct spelling mistakes  (only available in iOS Safari).
+
+**autoFocus**: bool = false
+
+If `true`, focuses the input on `componentDidMount`. Only the first form element
+in a document with `autofocus` is focused.
+
+**blurOnSubmit**: bool
+
+If `true`, the text field will blur when submitted. The default value is `true`
+for single-line fields and `false` for multiline fields. Note, for multiline
+fields setting `blurOnSubmit` to `true` means that pressing return will blur
+the field and trigger the `onSubmitEditing` event instead of inserting a
+newline into the field.
+
+**clearTextOnFocus**: bool = false
+
+If `true`, clears the text field automatically when focused.
+
+**defaultValue**: string
+
+Provides an initial value that will change when the user starts typing. Useful
+for simple use-cases where you don't want to deal with listening to events and
+updating the `value` prop to keep the controlled state in sync.
+
+**editable**: bool = true
+
+If `false`, text is not editable (i.e., read-only).
+
+**keyboardType**: oneOf('default', 'email-address', 'numeric', 'phone-pad', 'search', 'url', 'web-search') = 'default'
+
+Determines which keyboard to open. (NOTE: Safari iOS requires an ancestral
+`<form action>` element to display the `search` keyboard).
+
+(Not available when `multiline` is `true`.)
+
+**maxLength**: number
+
+Limits the maximum number of characters that can be entered.
+
+(web) **maxNumberOfLines**: number = numberOfLines
+
+Limits the maximum number of lines for a multiline `TextInput`.
+
+(Requires `multiline` to be `true`.)
+
+**multiline**: bool = false
+
+If true, the text input can be multiple lines.
+
+**numberOfLines**: number = 2
+
+Sets the initial number of lines for a multiline `TextInput`.
+
+(Requires `multiline` to be `true`.)
+
+**onBlur**: function
+
+Callback that is called when the text input is blurred.
+
+**onChange**: function
+
+Callback that is called when the text input's text changes.
+
+**onChangeText**: function
+
+Callback that is called when the text input's text changes. The text is passed
+as an argument to the callback handler.
+
+**onFocus**: function
+
+Callback that is called when the text input is focused.
+
+**onKeyPress**: function
+
+Callback that is called when a key is pressed. Pressed key value is passed as
+an argument to the callback handler. Fires before `onChange` callbacks.
+
+**onSelectionChange**: function
+
+Callback that is called when the text input's selection changes. This will be called with
+`{ nativeEvent: { selection: { start, end } } }`.
+
+**onSubmitEditing**: function
+
+Callback that is called when the keyboard's submit button is pressed.
+
+**placeholder**: string
+
+The string that will be rendered in an empty `TextInput` before text has been
+entered.
+
+**secureTextEntry**: bool = false
+
+If true, the text input obscures the text entered so that sensitive text like
+passwords stay secure.
+
+(Not available when `multiline` is `true`.)
+
+**selection**: { start: number, end: ?number }
+
+The start and end of the text input's selection. Set start and end to the same value to position the cursor.
+
+**selectTextOnFocus**: bool = false
+
+If `true`, all text will automatically be selected on focus.
+
+**style**: style
+
++ ...[Text#style](./Text.md)
++ `outline`
+
+**testID**: string
+
+Used to locate this view in end-to-end tests.
+
+**value**: string
+
+The value to show for the text input. `TextInput` is a controlled component,
+which means the native `value` will be forced to match this prop if provided.
+Read about how [React form
+components](https://facebook.github.io/react/docs/forms.html) work. To prevent
+user edits to the value set `editable={false}`.
+
+## Instance methods
+
+**blur()**
+
+Blur the underlying DOM input.
+
+**clear()**
+
+Clear the text from the underlying DOM input.
+
+**focus()**
+
+Focus the underlying DOM input.
+
+**isFocused()**
+
+Returns `true` if the input is currently focused; `false` otherwise.
+
+## Examples
+
+```js
+import React, { Component } from 'react'
+import { StyleSheet, TextInput } from 'react-native'
+
+export default class TextInputExample extends Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = { isFocused: false }
+  }
+
+  _onBlur(e) {
+    this.setState({ isFocused: false })
+  }
+
+  _onFocus(e) {
+    this.setState({ isFocused: true })
+  }
+
+  render() {
+    return (
+      <TextInput
+        accessibilityLabel='Write a status update'
+        maxNumberOfLines={5}
+        multiline
+        numberOfLines={2}
+        onBlur={this._onBlur.bind(this)}
+        onFocus={this._onFocus.bind(this)}
+        placeholder={`What's happening?`}
+        style={[
+          styles.default
+          this.state.isFocused && styles.focused
+        ]}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  default: {
+    borderColor: 'gray',
+    borderBottomWidth: 2
+  },
+  focused: {
+    borderColor: 'blue'
+  }
+})
+```

docs/components/TouchableWithoutFeedback.md

@@ -0,0 +1,73 @@
+# TouchableWithoutFeedback
+
+Do not use unless you have a very good reason. All the elements that respond to
+press should have a visual feedback when touched. This is one of the primary
+reason a "web" app doesn't feel "native".
+
+**NOTE: `TouchableWithoutFeedback` supports only one child**. If you wish to have
+several child components, wrap them in a View.
+
+## Props
+
+[...View props](./View.md)
+
+**accessibilityLabel**: string
+
+Overrides the text that's read by the screen reader when the user interacts
+with the element.
+
+(web) **accessibilityRole**: oneOf(roles) = 'button'
+
+Allows assistive technologies to present and support interaction with the view
+
+**accessible**: bool = true
+
+When `false`, the view is hidden from screenreaders.
+
+**children**: View
+
+**delayLongPress**: number
+
+Delay in ms, from `onPressIn`, before `onLongPress` is called.
+
+**delayPressIn**: number
+
+Delay in ms, from the start of the touch, before `onPressIn` is called.
+
+**delayPressOut**: number
+
+Delay in ms, from the release of the touch, before `onPressOut` is called.
+
+**disabled**: bool
+
+If true, disable all interactions for this component.
+
+**hitSlop**: `{top: number, left: number, bottom: number, right: number}`
+
+This defines how far your touch can start away from the button. This is added
+to `pressRetentionOffset` when moving off of the button. **NOTE**: The touch
+area never extends past the parent view bounds and the z-index of sibling views
+always takes precedence if a touch hits two overlapping views.
+
+**onLayout**: function
+
+Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
+height } } }`, where `x` and `y` are the offsets from the parent node.
+
+**onLongPress**: function
+
+**onPress**: function
+
+Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).
+
+**onPressIn**: function
+
+**onPressOut**: function
+
+**pressRetentionOffset**: `{top: number, left: number, bottom: number, right: number}`
+
+When the scroll view is disabled, this defines how far your touch may move off
+of the button, before deactivating the button. Once deactivated, try moving it
+back and you'll see that the button is once again reactivated! Move it back and
+forth several times while the scroll view is disabled. Ensure you pass in a
+constant to reduce memory allocations.

docs/components/View.md

@@ -1,66 +1,231 @@
-# View spec
+# View
 
-`View` is a flexbox container and the fundamental building block for UI. It is
-designed to be nested inside other `View`'s and to have 0-to-many children of
-any type.
+`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.
 
-## PropTypes
+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).
 
-All other props are transferred directly to the `element`.
+Unsupported React Native props:
+`onAccessibilityTap`,
+`hitSlop`,
+`onMagicTap`
 
-+ `element`: `func` or `string` (default `"div"`)
-+ `pointerEvents`: `oneOf('all', 'box-only', 'box-none', 'none')`
-+ `style`: `ViewStylePropTypes`
+## Props
 
-## ViewStylePropTypes
+NOTE: `View` will transfer all other props to the rendered HTML element.
 
-+ BackgroundPropTypes
-+ BorderThemePropTypes
-+ LayoutPropTypes
-+ `boxShadow`: `string`
-+ `color`: `string`
-+ `opacity`: `number`
+**accessibilityLabel**: string
 
-## ViewStyleDefaultProps
+Defines the text available to assistive technologies upon interaction with the
+element. (This is implemented using `aria-label`.)
 
-Implements the default styles from
-[facebook/css-layout](https://github.com/facebook/css-layout).
+**accessibilityLiveRegion**: oneOf('assertive', 'off', 'polite') = 'off'
 
-1. All the flex elements are oriented from top-to-bottom, left-to-right and do
-   not shrink. This is how things are laid out using the default CSS settings
-   and what you'd expect.
+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).)
 
-2. The most convenient way to express the relation between width and other
-   box-model properties.
+(web) **accessibilityRole**: oneOf(roles)
 
-3. Everything is `display:flex` by default. All the behaviors of `block` and
-   `inline-block` can be expressed in term of flex but not the opposite.
+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)).
 
-4. Everything is `position:relative`. This makes `position:absolute` target the
-   direct parent and not some parent which is either relative or absolute. If
-   you want to position an element relative to something else, you should move
-   it in the DOM instead of relying of CSS. It also makes `top`, `left`,
-   `right`, `bottom` do something when not specifying `position:absolute`.
+Note: Avoid changing `accessibilityRole` values over time or after user
+actions. Generally, accessibility APIs do not provide a means of notifying
+assistive technologies of a `role` value change.
+
+**accessible**: bool = true
+
+When `false`, the view is hidden from assistive technologies. (This is
+implemented using `aria-hidden`.)
+
+**onLayout**: function
+
+Invoked on mount and layout changes with `{ nativeEvent: { layout: { x, y, width,
+height } } }`, where `x` and `y` are the offsets from the parent node.
+
+**onMoveShouldSetResponder**: function
+
+**onMoveShouldSetResponderCapture**: function
+
+**onResponderGrant**: function
+
+For most touch interactions, you'll simply want to wrap your component in
+`TouchableHighlight` or `TouchableOpacity`.
+
+**onResponderMove**: function
+
+**onResponderReject**: function
+
+**onResponderRelease**: function
+
+**onResponderTerminate**: function
+
+**onResponderTerminationRequest**: function
+
+**onStartShouldSetResponder**: function
+
+**onStartShouldSetResponderCapture**: function
+
+**pointerEvents**: oneOf('auto', 'box-only', 'box-none', 'none') = 'auto'
+
+Configure the `pointerEvents` of the view. The enhanced `pointerEvents` modes
+provided are not part of the CSS spec, therefore, `pointerEvents` is excluded
+from `style`.
+
+`box-none` is the equivalent of:
+
+```css
+.box-none { pointer-events: none }
+.box-none * { pointer-events: auto }
+```
+
+`box-only` is the equivalent of:
+
+```css
+.box-only { pointer-events: auto }
+.box-only * { pointer-events: none }
+```
+
+**style**: style
+
++ `alignContent`
++ `alignItems`
++ `alignSelf`
++ `backfaceVisibility`
++ `backgroundAttachment`
++ `backgroundClip`
++ `backgroundColor`
++ `backgroundImage`
++ `backgroundOrigin`
++ `backgroundPosition`
++ `backgroundRepeat`
++ `backgroundSize`
++ `borderColor` (single value)
++ `borderTopColor`
++ `borderBottomColor`
++ `borderRightColor`‡
++ `borderLeftColor`‡
++ `borderRadius` (single value)
++ `borderTopLeftRadius`‡
++ `borderTopRightRadius`‡
++ `borderBottomLeftRadius`‡
++ `borderBottomRightRadius`‡
++ `borderStyle` (single value)
++ `borderTopStyle`
++ `borderRightStyle`‡
++ `borderBottomStyle`
++ `borderLeftStyle`‡
++ `borderWidth` (single value)
++ `borderBottomWidth`
++ `borderLeftWidth`‡
++ `borderRightWidth`‡
++ `borderTopWidth`
++ `bottom`
++ `boxShadow`
++ `boxSizing`
++ `cursor`
++ `flex` (number)
++ `flexBasis`
++ `flexDirection`
++ `flexGrow`
++ `flexShrink`
++ `flexWrap`
++ `height`
++ `justifyContent`
++ `left`‡
++ `margin` (single value)
++ `marginBottom`
++ `marginHorizontal`
++ `marginLeft`‡
++ `marginRight`‡
++ `marginTop`
++ `marginVertical`
++ `maxHeight`
++ `maxWidth`
++ `minHeight`
++ `minWidth`
++ `opacity`
++ `order`
++ `overflow`
++ `overflowX`
++ `overflowY`
++ `padding` (single value)
++ `paddingBottom`
++ `paddingHorizontal`
++ `paddingLeft`‡
++ `paddingRight`‡
++ `paddingTop`
++ `paddingVertical`
++ `position`
++ `right`‡
++ `top`
++ `transform`
++ `userSelect`
++ `visibility`
++ `width`
++ `zIndex`
+
+‡ This property can be suffixed with `$noI18n` to prevent automatic
+bidi-flipping in RTL mode. This is only supported if `Platform.OS === 'web'`.
+
+Default:
 
 ```js
-const ViewStyleDefaultProps = {
-  alignItems: 'stretch', // 1
+{
+  alignItems: 'stretch',
   borderWidth: 0,
   borderStyle: 'solid',
-  boxSizing: 'border-box', // 2
-  display: 'flex', // 3
-  flexBasis: 'auto', // 1
-  flexDirection: 'column', // 1
-  flexShrink: 0, // 1
-  listStyle: 'none',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexBasis: 'auto',
+  flexDirection: 'column',
+  flexShrink: 0,
   margin: 0,
   padding: 0,
-  position: 'relative' // 4
+  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
-// TODO
+import React, { Component, PropTypes } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+export default class ViewExample extends Component {
+  render() {
+    return (
+      <View style={styles.row}>
+        {
+          ['1', '2', '3', '4', '5'].map((value, i) => {
+            return <View children={value} key={i} style={styles.cell} />
+          })
+        }
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row'
+  },
+  cell: {
+    flexGrow: 1
+  }
+})
 ```

docs/guides/accessibility.md

@@ -0,0 +1,33 @@
+# Accessibility
+
+On the Web, assistive technologies derive useful information about the
+structure, purpose, and interactivity of apps from their [HTML
+elements][html-accessibility-url], attributes, and [ARIA in
+HTML][aria-in-html-url].
+
+The most common and best supported accessibility features of the Web are
+exposed as the props: `accessible`, `accessibilityLabel`,
+`accessibilityLiveRegion`, and `accessibilityRole`.
+
+React Native for Web does not provide a way to directly control the type of the
+rendered HTML element. The `accessibilityRole` prop is used to infer an
+[analogous HTML element][html-aria-url] to use in addition to the resulting
+ARIA `role`, where possible. While this may contradict some ARIA
+recommendations, it also helps avoid certain HTML5 conformance errors and
+accessibility anti-patterns (e.g., giving a `heading` role to a `button`
+element).
+
+For example:
+
+* `<View accessibilityRole='article' />` => `<article role='article' />`.
+* `<View accessibilityRole='banner' />` => `<header role='banner' />`.
+* `<View accessibilityRole='button' />` => `<button type='button' role='button' />`.
+* `<Text accessibilityRole='link' href='/' />` => `<a role='link' href='/' />`.
+* `<View accessibilityRole='main' />` => `<main role='main' />`.
+
+Other ARIA properties should be set via [direct
+manipulation](./direct-manipulation.md).
+
+[aria-in-html-url]: https://w3c.github.io/aria-in-html/
+[html-accessibility-url]: http://www.html5accessibility.com/
+[html-aria-url]: http://www.w3.org/TR/html-aria/

docs/guides/direct-manipulation.md

@@ -0,0 +1,115 @@
+# Direct manipulation
+
+It is sometimes necessary to make changes directly to a component without using
+state/props to trigger a re-render of the entire subtree – in the browser, this
+is done by directly modifying a DOM node. `setNativeProps` is the React Native
+equivalent to setting properties directly on a DOM node. Use direct
+manipulation when frequent re-rendering creates a performance bottleneck Direct
+manipulation will not be a tool that you reach for frequently.
+
+## `setNativeProps` and `shouldComponentUpdate`
+
+`setNativeProps` is imperative and stores state in the native layer (DOM,
+UIView, etc.) and not within your React components, which makes your code more
+difficult to reason about. Before you use it, try to solve your problem with
+`setState` and `shouldComponentUpdate`.
+
+## Avoiding conflicts with the render function
+
+If you update a property that is also managed by the render function, you might
+end up with some unpredictable and confusing bugs because anytime the component
+re-renders and that property changes, whatever value was previously set from
+`setNativeProps` will be completely ignored and overridden.
+
+## Why use `setNativeProps` on Web?
+
+Using `setNativeProps` in web-specific code is required when making changes to
+`className` or `style`, as these properties are controlled by React Native for
+Web and setting them directly may cause unintended rendering issues.
+
+```js
+setOpacityTo(value) {
+  this._childElement.setNativeProps({
+    style: { opacity: value }
+  })
+}
+```
+
+## Composite components and `setNativeProps`
+
+Composite components are not backed by a DOM node, so you cannot call
+`setNativeProps` on them. Consider this example:
+
+```js
+const MyButton = (props) => (
+  <View>
+    <Text>{props.label}</Text>
+  </View>
+)
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+)
+```
+
+If you run this you will immediately see this error: `Touchable` child must
+either be native or forward `setNativeProps` to a native component. This occurs
+because `MyButton` isn't directly backed by a native view whose opacity should
+be set. You can think about it like this: if you define a component with
+`React.Component/createClass` you would not expect to be able to set a style
+prop on it and have that work - you would need to pass the style prop down to a
+child, unless you are wrapping a native component. Similarly, we are going to
+forward `setNativeProps` to a native-backed child component.
+
+## Forward `setNativeProps` to a child
+
+All we need to do is provide a `setNativeProps` method on our component that
+calls `setNativeProps` on the appropriate child with the given arguments.
+
+```js
+class MyButton extends React.Component {
+  setNativeProps(nativeProps) {
+    this._root.setNativeProps(nativeProps)
+  }
+
+  render() {
+    return (
+      <View ref={component => this._root = component}>
+        <Text>{this.props.label}</Text>
+      </View>
+    )
+  }
+}
+```
+
+You can now use `MyButton` inside of `TouchableOpacity`!
+
+## `setNativeProps` to clear `TextInput` value
+
+Another very common use case of `setNativeProps` is to clear the value of a
+`TextInput`. For example, the following code demonstrates clearing the input
+when you tap a button:
+
+```js
+class App extends React.Component {
+  _handlePress() {
+    this._textInput.setNativeProps({ text: '' })
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TextInput
+          ref={component => this._textInput = component}
+          style={styles.textInput}
+        />
+        <TouchableOpacity onPress={this._handlePress.bind(this)}>
+          <Text>Clear text</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+}
+```

docs/guides/internationalization.md

@@ -0,0 +1,34 @@
+# Internationalization
+
+To support right-to-left languages, application layout can be automatically
+flipped from LTR to RTL. The `I18nManager` API can be used to help with more
+fine-grained control and testing of RTL layouts.
+
+React Native for Web provides an experimental feature to support "true left"
+and "true right" styles. For example, `left` will be flipped to `right` in RTL
+mode, but `left$noI18n` will not. More information is available in the `Text`
+and `View` documentation.
+
+## Working with icons and images
+
+Icons and images that must match the LTR or RTL layout of the app need to be manually flipped.
+
+Either use a transform style:
+
+```js
+<Image
+  source={...}
+  style={{ transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }] }}
+/>
+```
+
+Or replace the source asset:
+
+```js
+import imageSourceLTR from './back.png';
+import imageSourceRTL from './forward.png';
+
+<Image
+  source={I18nManager.isRTL ? imageSourceRTL : imageSourceLTR}
+/>
+```

docs/guides/known-issues.md

@@ -0,0 +1,23 @@
+# Known issues
+
+## Missing modules and Views
+
+This is an initial release of React Native for Web, therefore, not all of the
+views present on iOS/Android are released on Web. We are very much interested in
+the community's feedback on the next set of modules and views.
+
+Not all the modules or views for iOS/Android can be implemented on Web. In some
+cases it will be necessary to use a Web counterpart or to guard the use of a
+module with `Platform.OS` (e.g. `NativeModules`)
+
+## Missing component props
+
+There are properties that do not work across all platforms. All web-specific
+props are annotated with `(web)` in the documentation.
+
+## Platform parity
+
+There are some known issues in React Native where APIs could be made more
+consistent between platforms. For example, React Native for Web includes
+`ActivityIndicator` and a horizontal `ProgressBar` for Web use, in anticipation
+of the convergence between the iOS and Android components in React Native.

docs/guides/react-native.md

@@ -0,0 +1,73 @@
+# React Native
+
+Use a module loader that supports package aliases (e.g., webpack), and alias
+`react-native` to `react-native-web`.
+
+```js
+// webpack.config.js
+
+module.exports = {
+  // ...
+  resolve: {
+    alias: {
+      'react-native': 'react-native-web'
+    }
+  }
+}
+```
+
+## Image assets
+
+In order to require image assets (e.g. `require('assets/myimage.png')`), add
+the `url-loader` to the webpack config:
+
+```js
+// webpack.config.js
+
+module.exports = {
+  // ...
+  module: {
+    loaders: {
+      test: /\.(gif|jpe?g|png|svg)$/,
+      loader: 'url-loader',
+      query: { name: '[name].[hash:16].[ext]' }
+    }
+  }
+```
+
+## 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 substantial Web-specific implementation code should be written in files
+with the extension `.web.js`, which webpack will automatically resolve.
+
+## Optimizations
+
+Production builds can benefit from dead-code elimination by defining the
+following variables:
+
+```js
+// webpack.config.js
+
+module.exports = {
+  // ...
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  }
+}
+```

docs/guides/rendering.md

@@ -0,0 +1,87 @@
+# Client and Server rendering
+
+It's recommended that you use a module loader that supports package aliases
+(e.g., webpack), and alias `react-native` to `react-native-web`.
+
+```js
+// webpack.config.js
+
+module.exports = {
+  // ...other configuration
+  resolve: {
+    alias: {
+      'react-native': 'react-native-web'
+    }
+  }
+}
+```
+
+The `react-native-web` package also includes a `core` module that exports only
+`ReactNative`, `Image`, `StyleSheet`, `Text`, `TextInput`, and `View`.
+
+```js
+// webpack.config.js
+
+module.exports = {
+  // ...other configuration
+  resolve: {
+    alias: {
+      'react-native': 'react-native-web/core'
+    }
+  }
+}
+```
+
+## Client-side rendering
+
+Rendering without using the `AppRegistry`:
+
+```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 the `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')
+})
+
+// prerender the app
+const { html, styleElement } = AppRegistry.prerenderApplication('App', { initialProps })
+```
+
+## Server-side rendering
+
+Rendering using the `AppRegistry`:
+
+```
+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);
+ ```

docs/guides/style.md

@@ -0,0 +1,152 @@
+# Style
+
+React Native for Web relies on JavaScript to define styles for your
+application. This allows you to avoid issues arising from the [7 deadly sins of
+CSS](https://speakerdeck.com/vjeux/react-css-in-js):
+
+1. Global namespace
+2. Dependency hell
+3. No dead code elimination
+4. No code minification
+5. No sharing of constants
+6. Non-deterministic resolution
+7. Lack of isolation
+
+## Defining styles
+
+Styles should be defined outside of the component:
+
+```js
+class Example extends React.Component {}
+
+const styles = StyleSheet.create({
+  heading: {
+    color: 'gray',
+    fontSize: '2rem'
+  },
+  text: {
+    color: 'gray',
+    fontSize: '1.25rem'
+  }
+})
+```
+
+Using `StyleSheet.create` is optional but provides some key advantages: styles
+are immutable in development, certain declarations are automatically converted
+to CSS rather than applied as inline styles, and styles are only created once
+for the application and not on every render.
+
+The attribute names and values are a subset of CSS. See the `style`
+documentation of individual components.
+
+## Using styles
+
+All the React Native components accept a `style` attribute.
+
+```js
+<Text style={styles.text} />
+<View style={styles.view} />
+```
+
+A common pattern is to conditionally add style based on a condition:
+
+```js
+// either
+<View style={[
+  styles.base,
+  this.state.active && styles.active
+]} />
+
+// or
+<View style={{
+  ...styles.base,
+  ...(this.state.active && styles.active)
+}} />
+```
+
+## Composing styles
+
+In order to let a call site customize the style of your component children, you
+can pass styles around. Use `View.propTypes.style` and `Text.propTypes.style` in
+order to make sure only valid styles are being passed.
+
+```js
+class List extends React.Component {
+  static propTypes = {
+    style: View.propTypes.style,
+    elementStyle: View.propTypes.style,
+  }
+
+  render() {
+    return (
+      <View style={this.props.style}>
+        {elements.map((element) =>
+          <View style={[ styles.element, this.props.elementStyle ]} />
+        )}
+      </View>
+    );
+  }
+}
+```
+
+In another file:
+
+```js
+<List style={styles.list} elementStyle={styles.listElement} />
+```
+
+You also have much greater control over how styles are composed when compared
+to using class names. For example, you may choose to accept a limited subset
+of style props in the component's API, and control when they are applied:
+
+```js
+class List extends React.Component {
+  static propTypes = {
+    children: React.PropTypes.any,
+    // limit which styles are accepted
+    style: React.PropTypes.shape({
+      borderColor: View.propTypes.borderColor,
+      borderWidth: View.propTypes.borderWidth
+    })
+  }
+
+  render() {
+    return (
+      <View
+        children={children}
+        style={[
+          this.props.style,
+          // override border-color when scrolling
+          isScrolling && { borderColor: 'transparent' }
+        ]}
+      />
+    )
+  }
+}
+```
+
+## Media Queries
+
+`StyleSheet.create` is a way of defining the styles your application requires;
+it does not concern itself with _where_ or _when_ those styles are applied to
+elements.
+
+There are various React libraries wrapping JavaScript Media Query API's, e.g.,
+[react-media-queries](https://github.com/bloodyowl/react-media-queries),
+[media-query-fascade](https://github.com/tanem/media-query-facade), or
+[react-responsive](https://github.com/contra/react-responsive). This has the
+benefit of co-locating breakpoint-specific DOM and style changes.
+
+## Pseudo-classes and pseudo-elements
+
+Pseudo-classes like `:hover` and `:focus` can be implemented with events (e.g.
+`onFocus`). Pseudo-elements are not supported; elements should be used instead.
+
+### Reset
+
+You **do not** need to include a CSS reset or
+[normalize.css](https://necolas.github.io/normalize.css/).
+
+React Native for Web includes a very small CSS reset taken from normalize.css.
+It removes unwanted User Agent styles from (pseudo-)elements beyond the reach
+of React (e.g., `html`, `body`) or inline styles (e.g., `::-moz-focus-inner`).

docs/react-native-web-style/style-props.md

@@ -1,89 +0,0 @@
-## StyleProp spec
-
-### Background
-
-+ `backgroundColor`: `string`
-+ `backgroundImage`: `string`
-+ `backgroundPosition`: `string`
-+ `backgroundRepeat`: `string`
-+ `backgroundSize`: `string`
-
-### BorderTheme
-
-+ `borderColor`: `string`
-+ `borderTopColor`: `string`
-+ `borderRightColor`: `string`
-+ `borderBottomColor`: `string`
-+ `borderLeftColor`: `string`
-+ `borderStyle`: `string`
-+ `borderRadius`: `number` or `string`
-+ `borderTopLeftRadius`: `number` or `string`
-+ `borderTopRightRadius`: `number` or `string`
-+ `borderBottomLeftRadius`: `number` or `string`
-+ `borderBottomRightRadius`: `number` or `string`
-
-### BoxModel
-
-+ `borderWidth`: `number` or `string`
-+ `borderTopWidth`: `number` or `string`
-+ `borderRightWidth`: `number` or `string`
-+ `borderBottomWidth`: `number` or `string`
-+ `borderLeftWidth`: `number` or `string`
-+ `boxSizing`: `oneOf('border-box', 'content-box')`
-+ `display`: `oneOf('block', 'flex', 'inline', 'inline-block', 'inline-flex')`
-+ `height`: `number` or `string`
-+ `margin`: `number` or `string`
-+ `marginTop`: `number` or `string`
-+ `marginRight`: `number` or `string`
-+ `marginBottom`: `number` or `string`
-+ `marginLeft`: `number` or `string`
-+ `padding`: `number` or `string`
-+ `paddingTop`: `number` or `string`
-+ `paddingRight`: `number` or `string`
-+ `paddingBottom`: `number` or `string`
-+ `paddingLeft`: `number` or `string`
-+ `width`: `number` or `string`
-
-### Flexbox
-
-* `alignContent`: `oneOf('center', 'flex-end', 'flex-start', 'stretch', 'space-around', 'space-between')`
-* `alignItems`: `oneOf('baseline', 'center', 'flex-end', 'flex-start', 'stretch')`
-* `alignSelf`: `oneOf('auto', 'baseline', 'center', 'flex-end', 'flex-start', 'stretch')`
-* `flex`: `string`
-* `flexBasis`: `string`
-* `flexDirection`: `oneOf('column', 'column-reverse', 'row', 'row-reverse')`
-* `flexGrow`: `number`
-* `flexShrink`: `number`
-* `flexWrap`: `oneOf('nowrap', 'wrap', 'wrap-reverse')`
-* `justifyContent`: `oneOf('center', 'flex-end', 'flex-start', 'space-around', 'space-between')`
-* `order`: `number`
-
-### Layout
-
-* BoxModel
-* Flexbox
-* Position
-
-### Position
-
-* `position`: `oneOf('absolute', 'fixed', 'relative')`
-* `bottom`: `number` or `string`
-* `left`: `number` or `string`
-* `right`: `number` or `string`
-* `top`: `number` or `string`
-* `zIndex`: `number`
-
-### Typographic
-
-* `direction`: `oneOf('auto', 'ltr', 'rtl')`
-* `fontFamily`: `string`
-* `fontSize`: `string`
-* `fontWeight`: `oneOf('100', '200', '300', '400', '500', '600', '700', '800', '900', 'bold', 'normal')`
-* `fontStyle`: `oneOf('normal', 'italic')`
-* `letterSpacing`: `string`
-* `lineHeight`: `number` or `string`
-* `textAlign`: `oneOf('auto', 'left', 'right', 'center')`
-* `textDecoration`: `oneOf('none', 'underline')`
-* `textTransform`: `oneOf('capitalize', 'lowercase', 'none', 'uppercase')`
-* `wordWrap`: `oneOf('break-word', 'normal')`
-

docs/react-native-web-style/styling.md

@@ -1,125 +0,0 @@
-# Styling strategy
-
-Using the `style` attribute would normally produce inline styles. There are
-several existing approaches to using the `style` attribute, some of which
-convert inline styles to static CSS:
-[jsxstyle](https://github.com/petehunt/jsxstyle),
-[react-free-style](https://github.com/blakeembrey/react-free-style/),
-[react-inline](https://github.com/martinandert/react-inline),
-[react-native](https://facebook.github.io/react-native/),
-[react-style](https://github.com/js-next/react-style),
-[stilr](https://github.com/kodyl/stilr).
-
-## Style syntax: native vs proprietary data structure
-
-React Web SDK (in a divergence from React Native) represents style using plain
-JS objects:
-
-```js
-<Text style={styles.root}>...</Text>
-
-const styles = {
-  root: {
-    background: 'transparent',
-    display: 'flex',
-    flexGrow: 1,
-    justifyContent: 'center'
-  }
-};
-```
-
-Most approaches to managing style in React introduce a proprietary data
-structure, often via an implementation of `Stylesheet.create`.
-
-```js
-<Text style={styles.root}>...</Text>
-
-const styles = Stylesheet.create({
-  root: {
-    background: 'transparent',
-    display: 'flex',
-    flexGrow: 1,
-    justifyContent: 'center'
-  }
-});
-```
-
-## JS-to-CSS: conversion strategies
-
-One strategy for converting styles from JS to CSS is to map style objects to
-CSS rules. Another strategy is to map declarations to declarataions.
-
-![](../static/styling-strategy.png)
-
-Mapping entire `style` objects to CSS rules can lead to increasingly large CSS
-files. Each new component adds new rules to the stylesheet.
-
-React Web SDK includes a proof-of-concept for the strategy of automatically
-mapping unique declarations to declarations, via a unique selector for each
-declaration. This strategy results in smaller CSS files because an application
-has fewer unique declarations than total declarations. Creating a new
-component with no new unique declarations results in no change to the CSS file.
-
-For example:
-
-```js
-<Text style={styles.root}>...</Text>
-
-const styles = {
-  root: {
-    background: 'transparent',
-    display: 'flex',
-    flexGrow: 1,
-    justifyContent: 'center'
-  }
-};
-```
-
-Yields:
-
-```html
-<span className="_abcde _fghij _klmno _pqrst">...</span>
-```
-
-And is backed by:
-
-```css
-._abcde { background: transparent }
-._fghij { display: flex }
-._klmno { flex-grow: 1 }
-._pqrst { justify-content: center }
-```
-
-The current implementation uses a precomputed CSS library of single-declaration
-rules, with obfuscated selectors. This handles a signficant portion of possible
-declarations. But a build-time implementation would produce more accurate CSS
-files and fall through to inline styles significantly less often.
-
-
-(CSS libraries like [Atomic CSS](http://acss.io/),
-[Basscss](http://www.basscss.com/), [SUIT CSS](https://suitcss.github.io/), and
-[tachyons](http://tachyons.io/) are attempts to limit style scope and limit
-stylesheet growth in a similar way. But they're CSS utility libraries, each with a
-particular set of classes and features to learn. All of them require developers
-to manually connect CSS classes for given styles.)
-
-## Dynamic styles: use inline styles
-
-Some styles cannot be resolved ahead of time and continue to rely on inline
-styles:
-
-```js
-<View style={{ backgroundColor: (Math.random() > 0.5 ? 'red' : 'black') }}>...</Text>
-```
-
-## Media Queries, pseudo-classes, and pseudo-elements
-
-Media Queries could be replaced with `mediaMatch`. This would have the added
-benefit of co-locating breakpoint-specific DOM and style changes. Perhaps Media
-Query data could be accessed on `this.content`?
-
-Pseudo-classes like `:hover` and `:focus` can be handled with JavaScript.
-
-Pseudo-elements should be avoided in general, but for particular cases like
-`::placeholder` it might be necessary to reimplement it in the SDK's
-`TextInput` component (see React Native's API).

example/example.js

@@ -1,52 +0,0 @@
-import React, { Image, Text, TextInput, View } from '../dist/react-native-web';
-
-class Example extends React.Component {
-  render() {
-    return (
-      <View>
-        <View style={styles.grid}>
-          {[1,2,3,4,5,6].map((item, i) => {
-            return (
-              <View key={i} style={{ ...styles.box, ...(item === 6 && styles.boxFull) }}>
-                <Text style={{ fontSize: '2rem' }}>{item}</Text>
-              </View>
-            );
-          })}
-        </View>
-
-        <View style={{
-          alignItems: 'center',
-          borderWidth: '1px',
-          justifyContent: 'center',
-          marginTop: '10px',
-          height: '200px'
-        }}>
-          <Text>This should be centered</Text>
-        </View>
-
-        <TextInput type="text" autoFocus />
-        <TextInput multiline defaultValue="default value" />
-      </View>
-    );
-  }
-}
-
-const styles = {
-  grid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap'
-  },
-  box: {
-    alignItems: 'center',
-    backgroundColor: 'lightblue',
-    flexGrow: 1,
-    justifyContent: 'center',
-    borderColor: 'blue',
-    borderWidth: '5px'
-  },
-  boxFull: {
-    width: '100%'
-  }
-}
-
-React.render(<Example />, document.getElementById('react-root'));

example/index.html

@@ -1,5 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<div id="react-root"></div>
-<script src="../dist/example.js"></script>

example/webpack.config.js

@@ -1,19 +0,0 @@
-module.exports = {
-  entry: {
-    example: './example.js'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: { cacheDirectory: true }
-      }
-    ]
-  },
-  output: {
-    filename: 'example.js',
-    path: '../dist'
-  }
-};

examples/.storybook/config.js

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

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

@@ -0,0 +1,36 @@
+const path = require('path')
+const webpack = require('webpack')
+
+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')
+    }),
+    // https://github.com/animatedjs/animated/issues/40
+    new webpack.NormalModuleReplacementPlugin(
+      /es6-set/,
+      path.join(__dirname, '../../src/modules/polyfills/Set.js')
+    ),
+    new webpack.optimize.OccurenceOrderPlugin()
+  ],
+  resolve: {
+    alias: {
+      'react-native': path.join(__dirname, '../../src')
+    }
+  }
+}

examples/apis/I18nManager/RTLExample.js

@@ -0,0 +1,79 @@
+import { I18nManager, StyleSheet, TouchableHighlight, Text, View } from 'react-native'
+import React, { Component } from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+class RTLExample 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}>
+          This is sample text. The writing direction can be changed by pressing the button below.
+        </Text>
+        <Text style={[ styles.text, styles.ltrText ]}>
+          This is text that will always display LTR.
+        </Text>
+        <Text style={[ styles.text, styles.rtlText ]}>
+          This is text that will always display RTL.
+        </Text>
+        <TouchableHighlight
+          onPress={this._handleToggle}
+          style={styles.toggle}
+          underlayColor='rgba(0,0,0,0.25)'
+        >
+          <Text>Toggle LTR/RTL</Text>
+        </TouchableHighlight>
+      </View>
+    )
+  }
+
+  _handleToggle = () => {
+    this._isRTL = !this._isRTL
+    I18nManager.setPreferredLanguageRTL(this._isRTL)
+  }
+}
+
+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
+  },
+  ltrText: {
+    textAlign$noI18n: 'left',
+    writingDirection$noI18n: 'ltr'
+  },
+  rtlText: {
+    textAlign$noI18n: 'right',
+    writingDirection$noI18n: 'rtl'
+  },
+  toggle: {
+    alignSelf: 'center',
+    borderColor: 'black',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    marginTop: 10,
+    padding: 10
+  }
+})
+
+storiesOf('api: I18nManager', module)
+  .add('RTL layout', () => (
+    <RTLExample />
+  ))

examples/apis/PanResponder/PanResponderExample.js

@@ -0,0 +1,117 @@
+'use strict';
+
+import { storiesOf, action } from '@kadira/storybook';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  PanResponder,
+  StyleSheet,
+  View
+} = ReactNative;
+
+var CIRCLE_SIZE = 80;
+
+var PanResponderExample = React.createClass({
+  _panResponder: {},
+  _previousLeft: 0,
+  _previousTop: 0,
+  _circleStyles: {},
+  circle: (null : ?{ setNativeProps(props: Object): void }),
+
+  componentWillMount: function() {
+    this._panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
+      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
+      onPanResponderGrant: this._handlePanResponderGrant,
+      onPanResponderMove: this._handlePanResponderMove,
+      onPanResponderRelease: this._handlePanResponderEnd,
+      onPanResponderTerminate: this._handlePanResponderEnd,
+    });
+    this._previousLeft = 20;
+    this._previousTop = 84;
+    this._circleStyles = {
+      style: {
+        left: this._previousLeft,
+        top: this._previousTop,
+        backgroundColor: 'green',
+      }
+    };
+  },
+
+  componentDidMount: function() {
+    this._updateNativeStyles();
+  },
+
+  render: function() {
+    return (
+      <View
+        style={styles.container}>
+        <View
+          ref={(circle) => {
+            this.circle = circle;
+          }}
+          style={styles.circle}
+          {...this._panResponder.panHandlers}
+        />
+      </View>
+    );
+  },
+
+  _highlight: function() {
+    this._circleStyles.style.backgroundColor = 'blue';
+    this._updateNativeStyles();
+  },
+
+  _unHighlight: function() {
+    this._circleStyles.style.backgroundColor = 'green';
+    this._updateNativeStyles();
+  },
+
+  _updateNativeStyles: function() {
+    this.circle && this.circle.setNativeProps(this._circleStyles);
+  },
+
+  _handleStartShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
+    // Should we become active when the user presses down on the circle?
+    return true;
+  },
+
+  _handleMoveShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
+    // Should we become active when the user moves a touch over the circle?
+    return false;
+  },
+
+  _handlePanResponderGrant: function(e: Object, gestureState: Object) {
+    this._highlight();
+  },
+  _handlePanResponderMove: function(e: Object, gestureState: Object) {
+    this._circleStyles.style.left = this._previousLeft + gestureState.dx;
+    this._circleStyles.style.top = this._previousTop + gestureState.dy;
+    this._updateNativeStyles();
+  },
+  _handlePanResponderEnd: function(e: Object, gestureState: Object) {
+    this._unHighlight();
+    this._previousLeft += gestureState.dx;
+    this._previousTop += gestureState.dy;
+  },
+});
+
+var styles = StyleSheet.create({
+  circle: {
+    width: CIRCLE_SIZE,
+    height: CIRCLE_SIZE,
+    borderRadius: CIRCLE_SIZE / 2,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+  },
+  container: {
+    flex: 1,
+    paddingTop: 64,
+  },
+});
+
+
+storiesOf('api: PanResponder', module)
+  .add('example', () => <PanResponderExample />)

examples/components/ActivityIndicator/ActivityIndicatorExample.js

@@ -0,0 +1,162 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
+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 ToggleAnimatingActivityIndicator = React.createClass({
+  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}
+        style={[styles.centering, {height: 80}]}
+        size="large"
+      />
+    );
+  }
+});
+
+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
+          style={[styles.centering, styles.gray]}
+          color="white"
+          size="large"
+        />
+      );
+    }
+  },
+  {
+    title: 'Large, custom colors',
+    render() {
+      return (
+        <View style={styles.horizontal}>
+          <ActivityIndicator
+            size="large"
+            color="#0000ff"
+          />
+          <ActivityIndicator
+            size="large"
+            color="#aa00aa"
+          />
+          <ActivityIndicator
+            size="large"
+            color="#aa3300"
+          />
+          <ActivityIndicator
+            size="large"
+            color="#00aa00"
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Start/stop',
+    render() {
+      return <ToggleAnimatingActivityIndicator />;
+    }
+  },
+  {
+    title: 'Custom size',
+    render() {
+      return (
+        <View style={[styles.horizontal, styles.centering]}>
+          <ActivityIndicator size="40" />
+          <ActivityIndicator
+            style={{ marginLeft: 20, transform: [ {scale: 1.5} ] }}
+            size="large"
+          />
+        </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/Image/ImageExample.js

@@ -0,0 +1,657 @@
+import React from 'react';
+import { storiesOf, action, addDecorator } from '@kadira/storybook';
+import { ActivityIndicator, Image, Platform, StyleSheet, Text, View } from 'react-native'
+
+/**
+ * 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
+ */
+
+var 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://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now();
+//var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
+
+/*
+var NetworkImageCallbackExample = React.createClass({
+  getInitialState: function() {
+    return {
+      events: [],
+      startLoadPrefetched: false,
+      mountTime: new Date(),
+    };
+  },
+
+  componentWillMount() {
+    this.setState({mountTime: new Date()});
+  },
+
+  render: function() {
+    var { mountTime } = this.state;
+
+    return (
+      <View>
+        <Image
+          source={this.props.source}
+          style={[styles.base, {overflow: 'visible'}]}
+          onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
+          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)`);
+              });
+            });
+          }}
+        />
+        {this.state.startLoadPrefetched ?
+          <Image
+            source={this.props.prefetchedSource}
+            style={[styles.base, {overflow: 'visible'}]}
+            onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
+            onLoad={() => this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
+            onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
+          />
+          : null}
+        <Text style={{marginTop: 20}}>
+          {this.state.events.join('\n')}
+        </Text>
+      </View>
+    );
+  },
+
+  _loadEventFired(event) {
+    this.setState((state) => {
+      return state.events = [...state.events, event];
+    });
+  }
+});
+*/
+
+var NetworkImageExample = React.createClass({
+  getInitialState: function() {
+    return {
+      error: false,
+      loading: false,
+      progress: 0
+    };
+  },
+  render: function() {
+    var 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
+        source={this.props.source}
+        style={[styles.base, {overflow: 'visible'}]}
+        onLoadStart={(e) => this.setState({loading: true})}
+        onError={(e) => this.setState({error: e.nativeEvent.error, loading: false})}
+        onProgress={(e) => this.setState({progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)})}
+        onLoad={() => this.setState({loading: false, error: false})}>
+        {loader}
+      </Image>;
+  }
+});
+
+/*
+var ImageSizeExample = React.createClass({
+  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 style={{flexDirection: 'row'}}>
+        <Image
+          style={{
+            width: 60,
+            height: 60,
+            backgroundColor: 'transparent',
+            marginRight: 10,
+          }}
+          source={this.props.source} />
+        <Text>
+          Actual dimensions:{'\n'}
+          Width: {this.state.width}, Height: {this.state.height}
+        </Text>
+      </View>
+    );
+  },
+});
+*/
+/*
+var MultipleSourcesExample = React.createClass({
+  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 source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now()}}
+          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/>
+      );
+    },
+  },
+  */
+  {
+    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://facebook.github.io/origami/public/images/blog-hero.jpg?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
+            style={[styles.base, {borderRadius: 5}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {borderRadius: 19}]}
+            source={fullImage}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Background Color',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image source={smallImage} style={styles.base} />
+          <Image
+            style={[
+              styles.base,
+              styles.leftMargin,
+              {backgroundColor: 'rgba(0, 0, 100, 0.25)'}
+            ]}
+            source={smallImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {backgroundColor: 'red'}]}
+            source={smallImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {backgroundColor: 'black'}]}
+            source={smallImage}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Opacity',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image
+            style={[styles.base, {opacity: 1}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.8}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.6}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.4}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.2}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0}]}
+            source={fullImage}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Nesting',
+    render: function() {
+      return (
+        <Image
+          style={{width: 60, height: 60, backgroundColor: 'transparent'}}
+          source={fullImage}>
+          <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
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.contain}
+                    source={image}
+                  />
+                </View>
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Cover
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.cover}
+                    source={image}
+                  />
+                </View>
+              </View>
+              <View style={styles.horizontal}>
+                <View>
+                  <Text style={[styles.resizeModeText]}>
+                    Stretch
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.stretch}
+                    source={image}
+                  />
+                </View>
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Repeat
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={'repeat'}
+                    source={image}
+                  />
+                </View>
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Center
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={'center'}
+                    source={image}
+                  />
+                </View>
+              </View>
+            </View>
+          );
+        })}
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Animated GIF',
+    render: function() {
+      return (
+        <Image
+          style={styles.gif}
+          source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
+        />
+      );
+    },
+    platform: 'ios',
+  },
+  {
+    title: 'Base64 image',
+    render: function() {
+      return (
+        <Image
+          style={styles.base64}
+          source={{uri: base64Icon, scale: 3}}
+        />
+      );
+    },
+    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={fullImage} />;
+    },
+  },
+  */
+  /*
+  {
+    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',
+  },
+  */
+];
+
+var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
+var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small_2x.png'};
+
+var 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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { ListView } from 'react-native'
+

examples/components/ProgressBar/ProgressBarExample.js

@@ -0,0 +1,96 @@
+import { ProgressBar, StyleSheet, View } from 'react-native'
+import React from 'react';
+import { storiesOf, action } 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
+ */
+
+var ProgressBarExample = React.createClass({
+  mixins: [TimerMixin],
+
+  getInitialState() {
+    return {
+      progress: 0,
+    };
+  },
+
+  componentDidMount() {
+    this.updateProgress();
+  },
+
+  updateProgress() {
+    var progress = this.state.progress + 0.01;
+    this.setState({ progress });
+    this.requestAnimationFrame(() => this.updateProgress());
+  },
+
+  getProgress(offset) {
+    var progress = this.state.progress + offset;
+    return Math.sin(progress % Math.PI) % 1;
+  },
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <ProgressBar style={styles.progressView} color="purple" progress={this.getProgress(0.2)} />
+        <ProgressBar style={styles.progressView} color="red" progress={this.getProgress(0.4)} />
+        <ProgressBar style={styles.progressView} color="orange" progress={this.getProgress(0.6)} />
+        <ProgressBar style={styles.progressView} color="yellow" progress={this.getProgress(0.8)} />
+      </View>
+    );
+  },
+});
+
+const examples = [{
+  title: 'progress',
+  render() {
+    return (
+      <ProgressBarExample />
+    );
+  },
+}, {
+  title: 'indeterminate',
+  render() {
+    return (
+      <ProgressBar indeterminate style={styles.progressView} trackColor='#D1E3F6' />
+    );
+  }
+}];
+
+var 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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { ScrollView, StyleSheet, Text, TouchableHighlight, View } from 'react-native'
+
+storiesOf('component: ScrollView', module)
+  .add('vertical', () => (
+    <View style={styles.scrollViewContainer}>
+      <ScrollView
+        contentContainerStyle={styles.scrollViewContentContainerStyle}
+        onScroll={e => { console.log('ScrollView.onScroll', e); } }
+        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={e => console.log('ScrollView.onScroll', e)}
+        scrollEventThrottle={1} // 1 event 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: '1px'
+  },
+  scrollViewContentContainerStyle: {
+    backgroundColor: '#eee',
+    padding: '10px'
+  }
+})

examples/components/Switch/SwitchExample.js

@@ -0,0 +1,190 @@
+import { Platform, Switch, Text, View } from 'react-native'
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+/**
+ * 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
+ */
+
+var BasicSwitchExample = React.createClass({
+  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>
+    );
+  }
+});
+
+var DisabledSwitchExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <Switch
+          disabled={true}
+          style={{marginBottom: 10}}
+          value={true} />
+        <Switch
+          disabled={true}
+          value={false} />
+      </View>
+    );
+  },
+});
+
+var ColorSwitchExample = React.createClass({
+  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>
+    );
+  },
+});
+
+var EventSwitchExample = React.createClass({
+  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>
+    );
+  }
+});
+
+var SizeSwitchExample = React.createClass({
+  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>
+    );
+  }
+});
+
+var examples = [
+  {
+    title: 'set to true or false',
+    render(): ReactElement<any> { return <BasicSwitchExample />; }
+  },
+  {
+    title: 'disabled',
+    render(): ReactElement<any> { return <DisabledSwitchExample />; }
+  },
+  {
+    title: 'change events',
+    render(): ReactElement<any> { return <EventSwitchExample />; }
+  },
+  {
+    title: 'custom colors',
+    render(): ReactElement<any> { return <ColorSwitchExample />; }
+  },
+  {
+    title: 'custom size',
+    render(): ReactElement<any> { return <SizeSwitchExample />; }
+  },
+  {
+    title: 'controlled component',
+    render(): ReactElement<any> { return <Switch />; }
+  }
+];
+
+examples.forEach((example) => {
+  storiesOf('component: Switch', module)
+    .add(example.title, () => example.render())
+})

examples/components/Text/TextExample.js

@@ -0,0 +1,472 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { Image, StyleSheet, Text, View } from 'react-native'
+
+/**
+ * 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
+ */
+
+var Entity = React.createClass({
+  render: function() {
+    return (
+      <Text style={{fontWeight: '500', color: '#527fe4'}}>
+        {this.props.children}
+      </Text>
+    );
+  }
+});
+
+var AttributeToggler = React.createClass({
+  getInitialState: function() {
+    return {fontWeight: 'bold', fontSize: 15};
+  },
+  toggleWeight: function() {
+    this.setState({
+      fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
+    });
+  },
+  increaseSize: function() {
+    this.setState({
+      fontSize: this.state.fontSize + 1
+    });
+  },
+  render: function() {
+    var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
+    return (
+      <View>
+        <Text style={curStyle}>
+          Tap the controls below to change attributes.
+        </Text>
+        <Text>
+          <Text>See how it will even work on <Text style={curStyle}>this nested text</Text></Text>
+        </Text>
+        <Text
+          style={{backgroundColor: '#ffaaaa', marginTop: 5}}
+          onPress={this.toggleWeight}>
+          Toggle Weight
+        </Text>
+        <Text
+          style={{backgroundColor: '#aaaaff', marginTop: 5}}
+          onPress={this.increaseSize}>
+          Increase Size
+        </Text>
+      </View>
+    );
+  }
+});
+
+const examples = [
+{
+  title: 'Wrap',
+  render: function() {
+    return (
+      <Text>
+        The text should wrap if it goes on multiple lines. See, this is going to
+        the next line.
+      </Text>
+    );
+  },
+}, {
+  title: 'Padding',
+  render: function() {
+    return (
+      <Text style={{padding: 10}}>
+        This text is indented by 10px padding on all sides.
+      </Text>
+    );
+  },
+}, {
+  title: 'Font Family',
+  render: function() {
+    return (
+      <View>
+        <Text style={{fontFamily: 'Cochin'}}>
+          Cochin
+        </Text>
+        <Text style={{fontFamily: 'Cochin', fontWeight: 'bold'}}>
+          Cochin bold
+        </Text>
+        <Text style={{fontFamily: 'Helvetica'}}>
+          Helvetica
+        </Text>
+        <Text style={{fontFamily: 'Helvetica', fontWeight: 'bold'}}>
+          Helvetica bold
+        </Text>
+        <Text style={{fontFamily: 'Verdana'}}>
+          Verdana
+        </Text>
+        <Text style={{fontFamily: 'Verdana', fontWeight: 'bold'}}>
+          Verdana bold
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Font Size',
+  render: function() {
+    return (
+      <View>
+        <Text style={{fontSize: 23}}>
+          Size 23
+        </Text>
+        <Text style={{fontSize: 8}}>
+          Size 8
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Color',
+  render: function() {
+    return (
+      <View>
+        <Text style={{color: 'red'}}>
+          Red color
+        </Text>
+        <Text style={{color: 'blue'}}>
+          Blue color
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Font Weight',
+  render: function() {
+    return (
+      <View>
+        <Text style={{fontSize: 20, fontWeight: '100'}}>
+          Move fast and be ultralight
+        </Text>
+        <Text style={{fontSize: 20, fontWeight: '200'}}>
+          Move fast and be light
+        </Text>
+        <Text style={{fontSize: 20, fontWeight: 'normal'}}>
+          Move fast and be normal
+        </Text>
+        <Text style={{fontSize: 20, fontWeight: 'bold'}}>
+          Move fast and be bold
+        </Text>
+        <Text style={{fontSize: 20, fontWeight: '900'}}>
+          Move fast and be ultrabold
+        </Text>
+      </View>
+    );
+  },
+},  {
+  title: 'Font Style',
+  render: function() {
+    return (
+      <View>
+        <Text style={{fontStyle: 'normal'}}>
+          Normal text
+        </Text>
+        <Text style={{fontStyle: 'italic'}}>
+          Italic text
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Text Decoration',
+  render: function() {
+    return (
+      <View>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'solid'}}>
+          Solid underline
+        </Text>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
+          Double underline with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
+          Dashed underline with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
+          Dotted underline with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'none'}}>
+          None textDecoration
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}>
+          Solid line-through
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
+          Double line-through with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
+          Dashed line-through with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
+          Dotted line-through with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'underline line-through'}}>
+          Both underline and line-through
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Nested',
+  description: 'Nested text components will inherit the styles of their ' +
+    'parents (only backgroundColor is inherited from non-Text parents).  ' +
+    '<Text> only supports other <Text> and raw text (strings) as children.',
+  render: function() {
+    return (
+      <View>
+        <Text>
+          (Normal text,
+          <Text style={{fontWeight: 'bold'}}>
+            (and bold
+            <Text style={{fontSize: 11, color: '#527fe4'}}>
+              (and tiny inherited bold blue)
+            </Text>
+            )
+          </Text>
+          )
+        </Text>
+        <Text style={{opacity:0.7}}>
+          (opacity
+            <Text>
+              (is inherited
+                <Text style={{opacity:0.7}}>
+                  (and accumulated
+                    <Text style={{backgroundColor:'#ffaaaa'}}>
+                      (and also applies to the background)
+                    </Text>
+                  )
+                </Text>
+              )
+            </Text>
+          )
+        </Text>
+        <Text style={{fontSize: 12}}>
+          <Entity>Entity Name</Entity>
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Text Align',
+  render: function() {
+    return (
+      <View>
+        <Text>
+          auto (default) - english LTR
+        </Text>
+        <Text style={{ writingDirection$noI18n: 'rtl' }}>
+          أحب اللغة العربية auto (default) - arabic RTL
+        </Text>
+        <Text style={{textAlign: 'left'}}>
+          left left left left left left left left left left left left left left left
+        </Text>
+        <Text style={{textAlign: 'center'}}>
+          center center center center center center center center center center center
+        </Text>
+        <Text style={{textAlign: 'right'}}>
+          right right right right right right right right right right right right right
+        </Text>
+        <Text style={{textAlign: 'justify'}}>
+          justify: this text component{"'"}s contents are laid out with "textAlign: justify"
+          and as you can see all of the lines except the last one span the
+          available width of the parent container.
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Letter Spacing',
+  render: function() {
+    return (
+      <View>
+        <Text style={{letterSpacing: 0}}>
+          letterSpacing = 0
+        </Text>
+        <Text style={{letterSpacing: 2, marginTop: 5}}>
+          letterSpacing = 2
+        </Text>
+        <Text style={{letterSpacing: 9, marginTop: 5}}>
+          letterSpacing = 9
+        </Text>
+        <Text style={{letterSpacing: -1, marginTop: 5}}>
+          letterSpacing = -1
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Spaces',
+  render: function() {
+    return (
+      <Text>
+        A {'generated'} {' '} {'string'} and    some &nbsp;&nbsp;&nbsp; spaces
+      </Text>
+    );
+  },
+}, {
+  title: 'Line Height',
+  render: function() {
+    return (
+      <Text>
+        <Text style={{lineHeight: 35}}>
+          A lot of space between the lines of this long passage that should
+          wrap once.
+        </Text>
+      </Text>
+    );
+  },
+}, {
+  title: 'Empty Text',
+  description: 'It\'s ok to have Text with zero or null children.',
+  render: function() {
+    return (
+      <Text />
+    );
+  },
+}, {
+  title: 'Toggling Attributes',
+  render: function(): ReactElement<any> {
+    return <AttributeToggler />;
+  },
+}, {
+  title: 'backgroundColor attribute',
+  description: 'backgroundColor is inherited from all types of views.',
+  render: function() {
+    return (
+      <Text style={{backgroundColor: 'yellow'}}>
+        Yellow container background,
+        <Text style={{backgroundColor: '#ffaaaa'}}>
+          {' '}red background,
+          <Text style={{backgroundColor: '#aaaaff'}}>
+            {' '}blue background,
+            <Text>
+              {' '}inherited blue background,
+              <Text style={{backgroundColor: '#aaffaa'}}>
+                {' '}nested green background.
+              </Text>
+            </Text>
+          </Text>
+        </Text>
+      </Text>
+    );
+  },
+}, {
+  title: 'numberOfLines attribute',
+  render: function() {
+    return (
+      <View>
+        <Text numberOfLines={1}>
+          Maximum of one line, no matter how much I write here. If I keep writing, it{"'"}ll just truncate after one line.
+        </Text>
+        <Text numberOfLines={2} style={{marginTop: 20}}>
+          Maximum of two lines, no matter how much I write here. If I keep writing, it{"'"}ll just truncate after two lines.
+        </Text>
+        <Text style={{marginTop: 20}}>
+          No maximum lines specified, no matter how much I write here. If I keep writing, it{"'"}ll just keep going and going.
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Text highlighting (tap the link to see highlight)',
+  render: function() {
+    return (
+      <View>
+        <Text>Lorem ipsum dolor sit amet, <Text suppressHighlighting={false} style={{backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue'}} onPress={() => null}>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</Text> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
+      </View>
+    );
+  },
+}, {
+  title: 'allowFontScaling attribute',
+  render: function() {
+    return (
+      <View>
+        <Text>
+          By default, text will respect Text Size accessibility setting on iOS.
+          It means that all font sizes will be increased or descreased depending on the value of Text Size setting in
+          {" "}<Text style={{fontWeight: 'bold'}}>Settings.app - Display & Brightness - Text Size</Text>
+        </Text>
+        <Text style={{marginTop: 10}}>
+          You can disable scaling for your Text component by passing {"\""}allowFontScaling={"{"}false{"}\""} prop.
+        </Text>
+        <Text allowFontScaling={false} style={{marginTop: 20}}>
+          This text will not scale.
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Inline views',
+  render: function() {
+    return (
+      <View>
+        <Text>
+          This text contains an inline blue view <View style={{width: 25, height: 25, backgroundColor: 'steelblue'}} /> and
+          an inline image <Image source={{ uri: 'http://lorempixel.com/30/11' }} style={{width: 30, height: 11, resizeMode: 'cover'}}/>. Neat, huh?
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Text shadow',
+  render: function() {
+    return (
+      <View>
+        <Text style={{fontSize: 20, textShadowOffset: {width: 2, height: 2}, textShadowRadius: 1, textShadowColor: '#00cccc'}}>
+          Demo text shadow
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Line break mode',
+  render: function() {
+    return (
+      <View>
+        <Text numberOfLines={1}>
+          This very long text should be truncated with dots in the end.
+        </Text>
+        <Text lineBreakMode="middle" numberOfLines={1}>
+          This very long text should be truncated with dots in the middle.
+        </Text>
+        <Text lineBreakMode="head" numberOfLines={1}>
+          This very long text should be truncated with dots in the beginning.
+        </Text>
+        <Text lineBreakMode="clip" numberOfLines={1}>
+          This very looooooooooooooooooooooooooooong text should be clipped.
+        </Text>
+      </View>
+    );
+  },
+}];
+
+var styles = StyleSheet.create({
+  backgroundColorText: {
+    margin: 5,
+    marginBottom: 0,
+    backgroundColor: 'rgba(100, 100, 100, 0.3)'
+  },
+});
+
+examples.forEach((example) => {
+  storiesOf('component: Text', module)
+    .addDecorator((renderStory) => <View style={{ width: 320 }}>{renderStory()}</View>)
+    .add(example.title, () => example.render())
+})

examples/components/TextInput/TextInputExample.js

@@ -0,0 +1,867 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { StyleSheet, Text, TextInput, View } from 'react-native'
+
+/**
+ * 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
+ */
+
+class WithLabel extends React.Component {
+  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>
+        <TextInput
+          autoCapitalize="none"
+          placeholder="Enter text to see events"
+          autoCorrect={false}
+          onFocus={() => this.updateText('onFocus')}
+          onBlur={() => this.updateText('onBlur')}
+          onChange={(event) => this.updateText(
+            'onChange text: ' + event.nativeEvent.text
+          )}
+          onEndEditing={(event) => this.updateText(
+            'onEndEditing text: ' + event.nativeEvent.text
+          )}
+          onSubmitEditing={(event) => this.updateText(
+            'onSubmitEditing text: ' + event.nativeEvent.text
+          )}
+          onSelectionChange={(event) => this.updateText(
+            'onSelectionChange range: ' +
+              event.nativeEvent.selection.start + ',' +
+              event.nativeEvent.selection.end
+          )}
+          onKeyPress={(event) => {
+            this.updateText('onKeyPress key: ' + event.nativeEvent.key);
+          }}
+          style={styles.default}
+        />
+        <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() {
+    var limit = 20;
+    var remainder = limit - this.state.text.length;
+    var remainderColor = remainder > 5 ? 'blue' : 'red';
+    return (
+      <View style={styles.rewriteContainer}>
+        <TextInput
+          multiline={false}
+          maxLength={limit}
+          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
+    let delimiter = /\s+/;
+
+    //split string
+    let _text = this.state.text;
+    let token, index, 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
+          value={parts.join('')}
+          multiline={true}
+          style={styles.multiline}
+          onChangeText={(text) => {
+            this.setState({text});
+          }}
+        />
+      </View>
+    );
+  }
+}
+
+class BlurOnSubmitExample extends React.Component {
+  focusNextField = (nextField) => {
+    this.refs[nextField].focus();
+  };
+
+  render() {
+    return (
+      <View>
+        <TextInput
+          ref="1"
+          style={styles.default}
+          placeholder="blurOnSubmit = false"
+          returnKeyType="next"
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('2')}
+        />
+        <TextInput
+          ref="2"
+          style={styles.default}
+          keyboardType="email-address"
+          placeholder="blurOnSubmit = false"
+          returnKeyType="next"
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('3')}
+        />
+        <TextInput
+          ref="3"
+          style={styles.default}
+          keyboardType="url"
+          placeholder="blurOnSubmit = false"
+          returnKeyType="next"
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('4')}
+        />
+        <TextInput
+          ref="4"
+          style={styles.default}
+          keyboardType="numeric"
+          placeholder="blurOnSubmit = false"
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('5')}
+        />
+        <TextInput
+          ref="5"
+          style={styles.default}
+          keyboardType="numeric"
+          placeholder="blurOnSubmit = true"
+          returnKeyType="done"
+        />
+      </View>
+    );
+  }
+}
+
+type SelectionExampleState = {
+  selection: {
+    start: number;
+    end?: number;
+  };
+  value: string;
+};
+
+class SelectionExample extends React.Component {
+  state: SelectionExampleState;
+
+  _textInput: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selection: {start: 0, end: 0},
+      value: props.value
+    };
+  }
+
+  onSelectionChange({nativeEvent: {selection}}) {
+    this.setState({selection});
+  }
+
+  getRandomPosition() {
+    var length = this.state.value.length;
+    return Math.round(Math.random() * length);
+  }
+
+  select(start, end) {
+    this._textInput.focus();
+    this.setState({selection: {start, end}});
+  }
+
+  selectRandom() {
+    var positions = [this.getRandomPosition(), this.getRandomPosition()].sort();
+    this.select(...positions);
+  }
+
+  placeAt(position) {
+    this.select(position, position);
+  }
+
+  placeAtRandom() {
+    this.placeAt(this.getRandomPosition());
+  }
+
+  render() {
+    var 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>
+    );
+  }
+}
+
+var 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
+            autoFocus={true}
+            style={styles.default}
+            accessibilityLabel="I am the accessibility label for text input"
+          />
+        </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() {
+      var keyboardTypes = [
+        'default',
+        //'ascii-capable',
+        //'numbers-and-punctuation',
+        'url',
+        'number-pad',
+        'phone-pad',
+        //'name-phone-pad',
+        'email-address',
+        //'decimal-pad',
+        //'twitter',
+        'web-search',
+        'numeric',
+      ];
+      var 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() {
+      var keyboardAppearance = [
+        'default',
+        'light',
+        'dark',
+      ];
+      var 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() {
+      var returnKeyTypes = [
+        'default',
+        'go',
+        'google',
+        'join',
+        'next',
+        'route',
+        'search',
+        'send',
+        'yahoo',
+        'done',
+        'emergency-call',
+      ];
+      var 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 secureTextEntry={true} style={styles.default} defaultValue="abc" />
+          </WithLabel>
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Event handling',
+    render: function(): React.Element<any> { return <TextEventsExample />; },
+  },
+  {
+    title: 'Colored input text',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            style={[styles.default, {color: 'blue'}]}
+            defaultValue="Blue"
+          />
+          <TextInput
+            style={[styles.default, {color: 'green'}]}
+            defaultValue="Green"
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Colored highlight/cursor for text input',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            style={styles.default}
+            selectionColor={"green"}
+            defaultValue="Highlight me"
+          />
+          <TextInput
+            style={styles.default}
+            selectionColor={"rgba(86, 76, 205, 1)"}
+            defaultValue="Highlight me"
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Clear button mode',
+    render: function () {
+      return (
+        <View>
+          <WithLabel label="never">
+            <TextInput
+              style={styles.default}
+              clearButtonMode="never"
+            />
+          </WithLabel>
+          <WithLabel label="while editing">
+            <TextInput
+              style={styles.default}
+              clearButtonMode="while-editing"
+            />
+          </WithLabel>
+          <WithLabel label="unless editing">
+            <TextInput
+              style={styles.default}
+              clearButtonMode="unless-editing"
+            />
+          </WithLabel>
+          <WithLabel label="always">
+            <TextInput
+              style={styles.default}
+              clearButtonMode="always"
+            />
+          </WithLabel>
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Clear and select',
+    render: function() {
+      return (
+        <View>
+          <WithLabel label="clearTextOnFocus">
+            <TextInput
+              placeholder="text is cleared on focus"
+              defaultValue="text is cleared on focus"
+              style={styles.default}
+              clearTextOnFocus={true}
+            />
+          </WithLabel>
+          <WithLabel label="selectTextOnFocus">
+            <TextInput
+              placeholder="text is selected on focus"
+              defaultValue="text is selected on focus"
+              style={styles.default}
+              selectTextOnFocus={true}
+            />
+          </WithLabel>
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Blur on submit',
+    render: function(): React.Element<any> { return <BlurOnSubmitExample />; },
+  },
+  {
+    title: 'Multiline blur on submit',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            style={styles.multiline}
+            placeholder="blurOnSubmit = true"
+            returnKeyType="next"
+            blurOnSubmit={true}
+            multiline={true}
+            onSubmitEditing={event => alert(event.nativeEvent.text)}
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Multiline',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            placeholder="multiline text input"
+            multiline={true}
+            style={styles.multiline}
+          />
+          <TextInput
+            placeholder="multiline text input with font styles and placeholder"
+            multiline={true}
+            clearTextOnFocus={true}
+            autoCorrect={true}
+            autoCapitalize="words"
+            placeholderTextColor="red"
+            keyboardType="url"
+            style={[styles.multiline, styles.multilineWithFontStyles]}
+          />
+          <TextInput
+            placeholder="multiline text input with max length"
+            maxLength={5}
+            multiline={true}
+            style={styles.multiline}
+          />
+          <TextInput
+            placeholder="uneditable multiline text input"
+            editable={false}
+            multiline={true}
+            style={styles.multiline}
+          />
+          <TextInput
+            defaultValue="uneditable multiline text input with phone number detection: 88888888."
+            editable={false}
+            multiline={true}
+            style={styles.multiline}
+            dataDetectorTypes="phoneNumber"
+          />
+        </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
+            placeholder="height increases with content"
+            enablesReturnKeyAutomatically={true}
+            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
+              maxLength={5}
+              defaultValue="94025"
+              style={styles.default}
+            />
+          </WithLabel>
+          <WithLabel label="maxLength: 5 with very long default value already set">
+            <TextInput
+              maxLength={5}
+              defaultValue="9402512345"
+              style={styles.default}
+            />
+          </WithLabel>
+        </View>
+      );
+    }
+  }
+];
+
+examples.forEach((example) => {
+  storiesOf('component: TextInput', module)
+    .add(example.title, () => example.render())
+});

examples/components/Touchable/TouchableExample.js

@@ -0,0 +1,450 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  TouchableOpacity,
+  Platform,
+  TouchableNativeFeedback,
+  View,
+ } from 'react-native'
+
+/**
+ * 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 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
+            style={styles.wrapper}
+            onPress={() => console.log('stock THW image - highlight')}>
+            <Image
+              source={heartImage}
+              style={styles.image}
+            />
+          </TouchableHighlight>
+          <TouchableHighlight
+            style={styles.wrapper}
+            activeOpacity={1}
+            animationVelocity={0}
+            underlayColor="rgb(210, 230, 255)"
+            onPress={() => console.log('custom THW text - highlight')}>
+            <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(): ReactElement<any> {
+    return <TextOnPressBox />;
+  },
+}, {
+  title: 'Touchable feedback events',
+  description: '<Touchable*> components accept onPress, onPressIn, ' +
+    'onPressOut, and onLongPress as props.',
+  render: function(): ReactElement<any> {
+    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(): ReactElement<any> {
+    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(): ReactElement<any> {
+    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(): ReactElement<any> {
+     return <TouchableHitSlop />;
+   },
+ }, {
+   title: 'Disabled Touchable*',
+   description: '<Touchable*> components accept disabled prop which prevents ' +
+     'any interaction with component',
+   render: function(): ReactElement<any> {
+     return <TouchableDisabled />;
+   },
+ }];
+
+var TextOnPressBox = React.createClass({
+  getInitialState: function() {
+    return {
+      timesPressed: 0,
+    };
+  },
+  textOnPress: function() {
+    this.setState({
+      timesPressed: this.state.timesPressed + 1,
+    });
+  },
+  render: function() {
+    var 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
+          style={styles.textBlock}
+          onPress={this.textOnPress}>
+          Text has built-in onPress handling
+        </Text>
+        <View style={styles.logBox}>
+          <Text>
+            {textLog}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+});
+
+var TouchableFeedbackEvents = React.createClass({
+  getInitialState: function() {
+    return {
+      eventLog: [],
+    };
+  },
+  render: function() {
+    return (
+      <View testID="touchable_feedback_events">
+        <View style={[styles.row, {justifyContent: 'center'}]}>
+          <TouchableOpacity
+            style={styles.wrapper}
+            testID="touchable_feedback_events_button"
+            accessibilityLabel="touchable feedback events"
+            accessibilityTraits="button"
+            accessibilityComponentType="button"
+            onPress={() => this._appendEvent('press')}
+            onPressIn={() => this._appendEvent('pressIn')}
+            onPressOut={() => this._appendEvent('pressOut')}
+            onLongPress={() => this._appendEvent('longPress')}>
+            <Text style={styles.button}>
+              Press Me
+            </Text>
+          </TouchableOpacity>
+        </View>
+        <View testID="touchable_feedback_events_console" style={styles.eventLogBox}>
+          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
+        </View>
+      </View>
+    );
+  },
+  _appendEvent: function(eventName) {
+    var limit = 6;
+    var eventLog = this.state.eventLog.slice(0, limit - 1);
+    eventLog.unshift(eventName);
+    this.setState({eventLog});
+  },
+});
+
+var TouchableDelayEvents = React.createClass({
+  getInitialState: function() {
+    return {
+      eventLog: [],
+    };
+  },
+  render: function() {
+    return (
+      <View testID="touchable_delay_events">
+        <View style={[styles.row, {justifyContent: 'center'}]}>
+          <TouchableOpacity
+            style={styles.wrapper}
+            testID="touchable_delay_events_button"
+            onPress={() => this._appendEvent('press')}
+            delayPressIn={400}
+            onPressIn={() => this._appendEvent('pressIn - 400ms delay')}
+            delayPressOut={1000}
+            onPressOut={() => this._appendEvent('pressOut - 1000ms delay')}
+            delayLongPress={800}
+            onLongPress={() => this._appendEvent('longPress - 800ms delay')}>
+            <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>
+    );
+  },
+  _appendEvent: function(eventName) {
+    var limit = 6;
+    var eventLog = this.state.eventLog.slice(0, limit - 1);
+    eventLog.unshift(eventName);
+    this.setState({eventLog});
+  },
+});
+
+var ForceTouchExample = React.createClass({
+  getInitialState: function() {
+    return {
+      force: 0,
+    };
+  },
+  _renderConsoleText: function() {
+    return View.forceTouchAvailable ?
+      'Force: ' + this.state.force.toFixed(3) :
+      '3D Touch is not available on this device';
+  },
+  render: function() {
+    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
+            style={styles.wrapper}
+            testID="touchable_3dtouch_button"
+            onStartShouldSetResponder={() => true}
+            onResponderMove={(event) => this.setState({force: event.nativeEvent.force})}
+            onResponderRelease={(event) => this.setState({force: 0})}>
+            <Text style={styles.button}>
+              Press Me
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  },
+});
+
+var TouchableHitSlop = React.createClass({
+  getInitialState: function() {
+    return {
+      timesPressed: 0,
+    };
+  },
+  onPress: function() {
+    this.setState({
+      timesPressed: this.state.timesPressed + 1,
+    });
+  },
+  render: function() {
+    var 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
+            onPress={this.onPress}
+            style={styles.hitSlopWrapper}
+            hitSlop={{top: 30, bottom: 30, left: 60, right: 60}}
+            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>
+    );
+  }
+});
+
+var TouchableDisabled = React.createClass({
+  render: function() {
+    return (
+      <View>
+        <TouchableOpacity disabled={true} style={[styles.row, styles.block]}>
+          <Text style={styles.disabledButton}>Disabled TouchableOpacity</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity disabled={false} style={[styles.row, styles.block]}>
+          <Text style={styles.button}>Enabled TouchableOpacity</Text>
+        </TouchableOpacity>
+
+        <TouchableHighlight
+          activeOpacity={1}
+          disabled={true}
+          animationVelocity={0}
+          underlayColor="rgb(210, 230, 255)"
+          style={[styles.row, styles.block]}
+          onPress={() => console.log('custom THW text - highlight')}>
+          <Text style={styles.disabledButton}>
+            Disabled TouchableHighlight
+          </Text>
+        </TouchableHighlight>
+
+        <TouchableHighlight
+          activeOpacity={1}
+          animationVelocity={0}
+          underlayColor="rgb(210, 230, 255)"
+          style={[styles.row, styles.block]}
+          onPress={() => console.log('custom THW text - highlight')}>
+          <Text style={styles.button}>
+            Enabled TouchableHighlight
+          </Text>
+        </TouchableHighlight>
+
+        {Platform.OS === 'android' &&
+          <TouchableNativeFeedback
+            style={[styles.row, styles.block]}
+            onPress={() => console.log('custom TNF has been clicked')}
+            background={TouchableNativeFeedback.SelectableBackground()}>
+            <View>
+              <Text style={[styles.button, styles.nativeFeedbackButton]}>
+                Enabled TouchableNativeFeedback
+              </Text>
+            </View>
+          </TouchableNativeFeedback>
+        }
+
+        {Platform.OS === 'android' &&
+          <TouchableNativeFeedback
+            disabled={true}
+            style={[styles.row, styles.block]}
+            onPress={() => console.log('custom TNF has been clicked')}
+            background={TouchableNativeFeedback.SelectableBackground()}>
+            <View>
+              <Text style={[styles.disabledButton, styles.nativeFeedbackButton]}>
+                Disabled TouchableNativeFeedback
+              </Text>
+            </View>
+          </TouchableNativeFeedback>
+        }
+      </View>
+    );
+  }
+});
+
+var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
+
+var 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/components/View/ViewExample.js

@@ -0,0 +1,250 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+
+/**
+ * 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
+ */
+
+var styles = StyleSheet.create({
+  box: {
+    backgroundColor: '#527FE4',
+    borderColor: '#000033',
+    borderWidth: 1,
+  },
+  zIndex: {
+    justifyContent: 'space-around',
+    width: 100,
+    height: 50,
+    marginTop: -10,
+  },
+});
+
+var ViewBorderStyleExample = React.createClass({
+  getInitialState() {
+    return {
+      showBorder: true
+    };
+  },
+
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View>
+          <View style={{
+            borderWidth: 1,
+            borderStyle: this.state.showBorder ? 'dashed' : null,
+            padding: 5
+          }}>
+            <Text style={{fontSize: 11}}>
+              Dashed border style
+            </Text>
+          </View>
+          <View style={{
+            marginTop: 5,
+            borderWidth: 1,
+            borderRadius: 5,
+            borderStyle: this.state.showBorder ? 'dotted' : null,
+            padding: 5
+          }}>
+            <Text style={{fontSize: 11}}>
+              Dotted border style
+            </Text>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  },
+
+  _handlePress() {
+    this.setState({showBorder: !this.state.showBorder});
+  }
+});
+
+var ZIndexExample = React.createClass({
+  getInitialState() {
+    return {
+      flipped: false
+    };
+  },
+
+  render() {
+    const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View>
+          <Text style={{paddingBottom: 10}}>Tap to flip sorting order</Text>
+          <View style={[
+            styles.zIndex,
+            {marginTop: 0, backgroundColor: '#E57373', zIndex: indices[0]}
+          ]}>
+            <Text>ZIndex {indices[0]}</Text>
+          </View>
+          <View style={[
+            styles.zIndex,
+            {marginLeft: 50, backgroundColor: '#FFF176', zIndex: indices[1]}
+          ]}>
+            <Text>ZIndex {indices[1]}</Text>
+          </View>
+          <View style={[
+            styles.zIndex,
+            {marginLeft: 100, backgroundColor: '#81C784', zIndex: indices[2]}
+          ]}>
+            <Text>ZIndex {indices[2]}</Text>
+          </View>
+          <View style={[
+            styles.zIndex,
+            {marginLeft: 150, backgroundColor: '#64B5F6', zIndex: indices[3]}
+          ]}>
+            <Text>ZIndex {indices[3]}</Text>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  },
+
+  _handlePress() {
+    this.setState({flipped: !this.state.flipped});
+  }
+});
+
+const examples = [
+  {
+    title: 'Background Color',
+    render: function() {
+      return (
+        <View style={{backgroundColor: '#527FE4', padding: 5}}>
+          <Text style={{fontSize: 11}}>
+            Blue background
+          </Text>
+        </View>
+      );
+    },
+  }, {
+    title: 'Border',
+    render: function() {
+      return (
+        <View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
+          <Text style={{fontSize: 11}}>5px blue border</Text>
+        </View>
+      );
+    },
+  }, {
+    title: 'Padding/Margin',
+    render: function() {
+      return (
+        <View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
+          <View style={[styles.box, {padding: 5}]}>
+            <Text style={{fontSize: 11}}>5px padding</Text>
+          </View>
+          <View style={[styles.box, {margin: 5}]}>
+            <Text style={{fontSize: 11}}>5px margin</Text>
+          </View>
+          <View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
+            <Text style={{fontSize: 11}}>
+              5px margin and padding,
+            </Text>
+            <Text style={{fontSize: 11}}>
+              widthAutonomous=true
+            </Text>
+          </View>
+        </View>
+      );
+    },
+  }, {
+    title: 'Border Radius',
+    render: function() {
+      return (
+        <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
+          <Text style={{fontSize: 11}}>
+            Too much use of `borderRadius` (especially large radii) on
+            anything which is scrolling may result in dropped frames.
+            Use sparingly.
+          </Text>
+        </View>
+      );
+    },
+  }, {
+    title: 'Border Style',
+    render: function() {
+      return <ViewBorderStyleExample />;
+    },
+  }, {
+    title: 'Circle with Border Radius',
+    render: function() {
+      return (
+        <View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
+      );
+    },
+  }, {
+    title: 'Overflow',
+    render: function() {
+      return (
+        <View style={{flexDirection: 'row'}}>
+          <View
+            style={{
+              width: 95,
+              height: 10,
+              marginRight: 10,
+              marginBottom: 5,
+              overflow: 'hidden',
+              borderWidth: 0.5,
+            }}>
+            <View style={{width: 200, height: 20}}>
+              <Text>Overflow hidden</Text>
+            </View>
+          </View>
+          <View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
+            <View style={{width: 200, height: 20}}>
+              <Text>Overflow visible</Text>
+            </View>
+          </View>
+        </View>
+      );
+    },
+  }, {
+    title: 'Opacity',
+    render: function() {
+      return (
+        <View>
+          <View style={{opacity: 0}}><Text>Opacity 0</Text></View>
+          <View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
+          <View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
+          <View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
+          <View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
+          <View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
+          <View style={{opacity: 1}}><Text>Opacity 1</Text></View>
+        </View>
+      );
+    },
+  }, {
+    title: 'ZIndex',
+    render: function() {
+      return <ZIndexExample />;
+    },
+  },
+];
+
+examples.forEach((example) => {
+  storiesOf('component: View', module)
+    .add(example.title, () => example.render())
+})

examples/components/View/ViewTransformsExample.js

@@ -0,0 +1,286 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { Animated, StyleSheet, Text, View } from 'react-native'
+
+/**
+ * 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
+ */
+
+var Flip = React.createClass({
+  getInitialState() {
+    return {
+      theta: new Animated.Value(45),
+    };
+  },
+
+  componentDidMount() {
+    this._animate();
+  },
+
+  _animate() {
+    this.state.theta.setValue(0);
+    Animated.timing(this.state.theta, {
+      toValue: 360,
+      duration: 5000,
+    }).start(this._animate);
+  },
+
+  render() {
+    return (
+      <View style={styles.flipCardContainer}>
+        <Animated.View style={[
+          styles.flipCard,
+          {transform: [
+            {perspective: 850},
+            {rotateX: this.state.theta.interpolate({
+              inputRange: [0, 180],
+              outputRange: ['0deg', '180deg']
+            })},
+          ]}]}>
+          <Text style={styles.flipText}>
+            This text is flipping great.
+          </Text>
+        </Animated.View>
+        <Animated.View style={[styles.flipCard, {
+          position: 'absolute',
+          top: 0,
+          backgroundColor: 'red',
+          transform: [
+            {perspective: 850},
+            {rotateX: this.state.theta.interpolate({
+              inputRange: [0, 180],
+              outputRange: ['180deg', '360deg']
+            })},
+          ]}]}>
+          <Text style={styles.flipText}>
+            On the flip side...
+          </Text>
+        </Animated.View>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  box1: {
+    left: 0,
+    backgroundColor: 'green',
+    height: 50,
+    top: 0,
+    transform: [
+      {translateX: 100},
+      {translateY: 50},
+      {rotate: '30deg'},
+      {scaleX: 2},
+      {scaleY: 2},
+    ],
+    width: 50,
+  },
+  box2: {
+    left: 0,
+    backgroundColor: 'purple',
+    height: 50,
+    top: 0,
+    transform: [
+      {scaleX: 2},
+      {scaleY: 2},
+      {translateX: 100},
+      {translateY: 50},
+      {rotate: '30deg'},
+    ],
+    width: 50,
+  },
+  box3step1: {
+    left: 0,
+    backgroundColor: 'lightpink',
+    height: 50,
+    top: 0,
+    transform: [
+      {rotate: '30deg'},
+    ],
+    width: 50,
+  },
+  box3step2: {
+    left: 0,
+    backgroundColor: 'hotpink',
+    height: 50,
+    opacity: 0.5,
+    top: 0,
+    transform: [
+      {rotate: '30deg'},
+      {scaleX: 2},
+      {scaleY: 2},
+    ],
+    width: 50,
+  },
+  box3step3: {
+    left: 0,
+    backgroundColor: 'deeppink',
+    height: 50,
+    opacity: 0.5,
+    top: 0,
+    transform: [
+      {rotate: '30deg'},
+      {scaleX: 2},
+      {scaleY: 2},
+      {translateX: 10},
+      {translateY: 50},
+    ],
+    width: 50,
+  },
+  box4: {
+    left: 0,
+    backgroundColor: 'darkorange',
+    height: 50,
+    top: 0,
+    transform: [
+      {translateX: 20},
+      {translateY: 35},
+      {scale: 2.5},
+      {rotate: '-0.2rad'},
+    ],
+    width: 100,
+  },
+  box5: {
+    backgroundColor: 'maroon',
+    height: 50,
+    right: 0,
+    top: 0,
+    width: 50,
+  },
+  box5Transform: {
+    transform: [
+      {translateX: -50},
+      {translateY: 35},
+      {rotate: '50deg'},
+      {scale: 2},
+    ],
+  },
+  flipCardContainer: {
+    marginVertical: 40,
+    flex: 1,
+    alignSelf: 'center',
+  },
+  flipCard: {
+    width: 200,
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'blue',
+    backfaceVisibility: 'hidden',
+  },
+  flipText: {
+    width: 90,
+    fontSize: 20,
+    color: 'white',
+    fontWeight: 'bold',
+  }
+});
+
+const examples = [
+  {
+    title: 'Perspective',
+    description: 'perspective: 850, rotateX: Animated.timing(0 -> 360)',
+    render(): ReactElement<any> { return <Flip />; }
+  },
+  {
+    title: 'Translate, Rotate, Scale',
+    description: "translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: 2",
+    render() {
+      return (
+
+          <View style={styles.box1} />
+
+      );
+    }
+  },
+  {
+    title: 'Scale, Translate, Rotate, ',
+    description: "scaleX: 2, scaleY: 2, translateX: 100, translateY: 50, rotate: '30deg'",
+    render() {
+      return (
+
+          <View style={styles.box2} />
+
+      );
+    }
+  },
+  {
+    title: 'Rotate',
+    description: "rotate: '30deg'",
+    render() {
+      return (
+
+          <View style={styles.box3step1} />
+
+      );
+    }
+  },
+  {
+    title: 'Rotate, Scale',
+    description: "rotate: '30deg', scaleX: 2, scaleY: 2",
+    render() {
+      return (
+
+          <View style={styles.box3step2} />
+
+      );
+    }
+  },
+  {
+    title: 'Rotate, Scale, Translate ',
+    description: "rotate: '30deg', scaleX: 2, scaleY: 2, translateX: 100, translateY: 50",
+    render() {
+      return (
+
+          <View style={styles.box3step3} />
+
+      );
+    }
+  },
+  {
+    title: 'Translate, Scale, Rotate',
+    description: "translate: [200, 350], scale: 2.5, rotate: '-0.2rad'",
+    render() {
+      return (
+
+          <View style={styles.box4} />
+
+      );
+    }
+  },
+  {
+    title: 'Translate, Rotate, Scale',
+    description: "translate: [-50, 35], rotate: '50deg', scale: 2",
+    render() {
+      return (
+
+          <View style={[styles.box5, styles.box5Transform]} />
+
+      );
+    }
+  }
+];
+
+examples.forEach((example) => {
+  storiesOf('component: View (transforms)', module)
+    .add(example.title, () => example.render())
+})

examples/demos/Game2048/Game2048.js

@@ -0,0 +1,325 @@
+/**
+ * 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.
+ *
+ * @providesModule Game2048
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  Animated,
+  AppRegistry,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} = ReactNative;
+
+var GameBoard = require('./GameBoard');
+
+var BOARD_PADDING = 3;
+var CELL_MARGIN = 4;
+var CELL_SIZE = 60;
+
+class Cell extends React.Component {
+  render() {
+    return <View style={styles.cell} />;
+  }
+}
+
+class Board extends React.Component {
+  render() {
+    return (
+      <View style={styles.board}>
+        <View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
+        <View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
+        <View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
+        <View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+class Tile extends React.Component {
+  state: any;
+
+  static _getPosition(index): number {
+    return BOARD_PADDING + (index * (CELL_SIZE + CELL_MARGIN * 2) + CELL_MARGIN);
+  }
+
+  constructor(props: {}) {
+    super(props);
+
+    var tile = this.props.tile;
+
+    this.state = {
+      opacity: new Animated.Value(0),
+      top: new Animated.Value(Tile._getPosition(tile.toRow())),
+      left: new Animated.Value(Tile._getPosition(tile.toColumn())),
+    };
+  }
+
+  calculateOffset(): {top: number; left: number; opacity: number} {
+    var tile = this.props.tile;
+
+    var offset = {
+      top: this.state.top,
+      left: this.state.left,
+      opacity: this.state.opacity,
+    };
+
+    if (tile.isNew()) {
+      Animated.timing(this.state.opacity, {
+        duration: 100,
+        toValue: 1,
+      }).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(offset.top, {
+          duration: 100,
+          toValue: Tile._getPosition(tile.toRow()),
+        }),
+        Animated.timing(offset.left, {
+          duration: 100,
+          toValue: Tile._getPosition(tile.toColumn()),
+        }),
+      ]).start();
+    }
+    return offset;
+  }
+
+  render() {
+    var tile = this.props.tile;
+
+    var tileStyles = [
+      styles.tile,
+      styles['tile' + tile.value],
+      this.calculateOffset(),
+    ];
+
+    var textStyles = [
+      styles.value,
+      tile.value > 4 && styles.whiteText,
+      tile.value > 100 && styles.threeDigits,
+      tile.value > 1000 && styles.fourDigits,
+    ];
+
+    return (
+      <Animated.View style={tileStyles}>
+        <Text style={textStyles}>{tile.value}</Text>
+      </Animated.View>
+    );
+  }
+}
+
+class GameEndOverlay extends React.Component {
+  render() {
+    var board = this.props.board;
+
+    if (!board.hasWon() && !board.hasLost()) {
+      return <View/>;
+    }
+
+    var message = board.hasWon() ?
+      'Good Job!' : 'Game Over';
+
+    return (
+      <View style={styles.overlay}>
+        <Text style={styles.overlayMessage}>{message}</Text>
+        <TouchableOpacity onPress={this.props.onRestart} style={styles.tryAgain}>
+          <Text style={styles.tryAgainText}>Try Again?</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+class Game2048 extends React.Component {
+  startX: number;
+  startY: number;
+  state: any;
+
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      board: new GameBoard(),
+    };
+    this.startX = 0;
+    this.startY = 0;
+  }
+
+  restartGame() {
+    this.setState({board: new GameBoard()});
+  }
+
+  handleTouchStart(event: Object) {
+    if (this.state.board.hasWon()) {
+      return;
+    }
+
+    this.startX = event.nativeEvent.pageX;
+    this.startY = event.nativeEvent.pageY;
+  }
+
+  handleTouchEnd(event: Object) {
+    if (this.state.board.hasWon()) {
+      return;
+    }
+
+    var deltaX = event.nativeEvent.pageX - this.startX;
+    var deltaY = event.nativeEvent.pageY - this.startY;
+
+    var direction = -1;
+    if (Math.abs(deltaX) > 3 * Math.abs(deltaY) && Math.abs(deltaX) > 30) {
+      direction = deltaX > 0 ? 2 : 0;
+    } else if (Math.abs(deltaY) > 3 * Math.abs(deltaX) && Math.abs(deltaY) > 30) {
+      direction = deltaY > 0 ? 3 : 1;
+    }
+
+    if (direction !== -1) {
+      this.setState({board: this.state.board.move(direction)});
+    }
+  }
+
+  render() {
+    var tiles = this.state.board.tiles
+      .filter((tile) => tile.value)
+      .map((tile) => <Tile ref={tile.id} key={tile.id} tile={tile} />);
+
+    return (
+      <View
+        style={styles.container}
+        onTouchStart={(event) => this.handleTouchStart(event)}
+        onTouchEnd={(event) => this.handleTouchEnd(event)}>
+        <Board>
+          {tiles}
+        </Board>
+        <GameEndOverlay board={this.state.board} onRestart={() => this.restartGame()} />
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  board: {
+    padding: BOARD_PADDING,
+    backgroundColor: '#bbaaaa',
+    borderRadius: 5,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(221, 221, 221, 0.5)',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  overlayMessage: {
+    fontSize: 40,
+    marginBottom: 20,
+  },
+  tryAgain: {
+    backgroundColor: '#887761',
+    padding: 20,
+    borderRadius: 5,
+  },
+  tryAgainText: {
+    color: '#ffffff',
+    fontSize: 20,
+    fontWeight: '500',
+  },
+  cell: {
+    width: CELL_SIZE,
+    height: CELL_SIZE,
+    borderRadius: 5,
+    backgroundColor: '#ddccbb',
+    margin: CELL_MARGIN,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  tile: {
+    position: 'absolute',
+    width: CELL_SIZE,
+    height: CELL_SIZE,
+    backgroundColor: '#ddccbb',
+    borderRadius: 5,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  value: {
+    fontSize: 24,
+    color: '#776666',
+    fontFamily: 'Verdana',
+    fontWeight: '500',
+  },
+  tile2: {
+    backgroundColor: '#eeeeee',
+  },
+  tile4: {
+    backgroundColor: '#eeeecc',
+  },
+  tile8: {
+    backgroundColor: '#ffbb87',
+  },
+  tile16: {
+    backgroundColor: '#ff9966',
+  },
+  tile32: {
+    backgroundColor: '#ff7755',
+  },
+  tile64: {
+    backgroundColor: '#ff5533',
+  },
+  tile128: {
+    backgroundColor: '#eecc77',
+  },
+  tile256: {
+    backgroundColor: '#eecc66',
+  },
+  tile512: {
+    backgroundColor: '#eecc55',
+  },
+  tile1024: {
+    backgroundColor: '#eecc33',
+  },
+  tile2048: {
+    backgroundColor: '#eecc22',
+  },
+  whiteText: {
+    color: '#ffffff',
+  },
+  threeDigits: {
+    fontSize: 20,
+  },
+  fourDigits: {
+    fontSize: 18,
+  },
+});
+
+AppRegistry.registerComponent('Game2048', () => Game2048);
+
+module.exports = Game2048;

examples/demos/Game2048/Game2048Example.js

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

examples/demos/Game2048/GameBoard.js

@@ -0,0 +1,201 @@
+/**
+ * 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.
+ *
+ * @providesModule GameBoard
+ * @flow
+ */
+'use strict';
+
+// NB: Taken straight from: https://github.com/IvanVergiliev/2048-react/blob/master/src/board.js
+//     with no modification except to format it for CommonJS and fix lint/flow errors
+
+var rotateLeft = function (matrix) {
+  var rows = matrix.length;
+  var columns = matrix[0].length;
+  var res = [];
+  for (var row = 0; row < rows; ++row) {
+    res.push([]);
+    for (var column = 0; column < columns; ++column) {
+      res[row][column] = matrix[column][columns - row - 1];
+    }
+  }
+  return res;
+};
+
+var Tile = function (value?: number, row?: number, column?: number) {
+  this.value = value || 0;
+  this.row = row || -1;
+
+  this.column = column || -1;
+  this.oldRow = -1;
+  this.oldColumn = -1;
+  this.markForDeletion = false;
+  this.mergedInto = null;
+  this.id = Tile.id++;
+};
+
+Tile.id = 0;
+
+Tile.prototype.moveTo = function (row, column) {
+  this.oldRow = this.row;
+  this.oldColumn = this.column;
+  this.row = row;
+  this.column = column;
+};
+
+Tile.prototype.isNew = function () {
+  return this.oldRow === -1 && !this.mergedInto;
+};
+
+Tile.prototype.hasMoved = function () {
+  return (this.fromRow() !== -1 && (this.fromRow() !== this.toRow() || this.fromColumn() !== this.toColumn())) ||
+    this.mergedInto;
+};
+
+Tile.prototype.fromRow = function () {
+  return this.mergedInto ? this.row : this.oldRow;
+};
+
+Tile.prototype.fromColumn = function () {
+  return this.mergedInto ? this.column : this.oldColumn;
+};
+
+Tile.prototype.toRow = function () {
+  return this.mergedInto ? this.mergedInto.row : this.row;
+};
+
+Tile.prototype.toColumn = function () {
+  return this.mergedInto ? this.mergedInto.column : this.column;
+};
+
+var Board = function () {
+  this.tiles = [];
+  this.cells = [];
+  for (var i = 0; i < Board.size; ++i) {
+    this.cells[i] = [this.addTile(), this.addTile(), this.addTile(), this.addTile()];
+  }
+  this.addRandomTile();
+  this.setPositions();
+  this.won = false;
+};
+
+Board.prototype.addTile = function () {
+  var res = new Tile();
+  Tile.apply(res, arguments);
+  this.tiles.push(res);
+  return res;
+};
+
+Board.size = 4;
+
+Board.prototype.moveLeft = function () {
+  var hasChanged = false;
+  for (var row = 0; row < Board.size; ++row) {
+    var currentRow = this.cells[row].filter(function (tile) { return tile.value !== 0; });
+    var resultRow = [];
+    for (var target = 0; target < Board.size; ++target) {
+      var targetTile = currentRow.length ? currentRow.shift() : this.addTile();
+      if (currentRow.length > 0 && currentRow[0].value === targetTile.value) {
+        var tile1 = targetTile;
+        targetTile = this.addTile(targetTile.value);
+        tile1.mergedInto = targetTile;
+        var tile2 = currentRow.shift();
+        tile2.mergedInto = targetTile;
+        targetTile.value += tile2.value;
+      }
+      resultRow[target] = targetTile;
+      this.won = this.won || (targetTile.value === 2048);
+      hasChanged = hasChanged || (targetTile.value !== this.cells[row][target].value);
+    }
+    this.cells[row] = resultRow;
+  }
+  return hasChanged;
+};
+
+Board.prototype.setPositions = function () {
+  this.cells.forEach(function (row, rowIndex) {
+    row.forEach(function (tile, columnIndex) {
+      tile.oldRow = tile.row;
+      tile.oldColumn = tile.column;
+      tile.row = rowIndex;
+      tile.column = columnIndex;
+      tile.markForDeletion = false;
+    });
+  });
+};
+
+Board.fourProbability = 0.1;
+
+Board.prototype.addRandomTile = function () {
+  var emptyCells = [];
+  for (var r = 0; r < Board.size; ++r) {
+    for (var c = 0; c < Board.size; ++c) {
+      if (this.cells[r][c].value === 0) {
+        emptyCells.push({r: r, c: c});
+      }
+    }
+  }
+  var index = Math.floor(Math.random() * emptyCells.length);
+  var cell = emptyCells[index];
+  var newValue = Math.random() < Board.fourProbability ? 4 : 2;
+  this.cells[cell.r][cell.c] = this.addTile(newValue);
+};
+
+Board.prototype.move = function (direction) {
+  // 0 -> left, 1 -> up, 2 -> right, 3 -> down
+  this.clearOldTiles();
+  for (var i = 0; i < direction; ++i) {
+    this.cells = rotateLeft(this.cells);
+  }
+  var hasChanged = this.moveLeft();
+  for (var i = direction; i < 4; ++i) {
+    this.cells = rotateLeft(this.cells);
+  }
+  if (hasChanged) {
+    this.addRandomTile();
+  }
+  this.setPositions();
+  return this;
+};
+
+Board.prototype.clearOldTiles = function () {
+  this.tiles = this.tiles.filter(function (tile) { return tile.markForDeletion === false; });
+  this.tiles.forEach(function (tile) { tile.markForDeletion = true; });
+};
+
+Board.prototype.hasWon = function () {
+  return this.won;
+};
+
+Board.deltaX = [-1, 0, 1, 0];
+Board.deltaY = [0, -1, 0, 1];
+
+Board.prototype.hasLost = function () {
+  var canMove = false;
+  for (var row = 0; row < Board.size; ++row) {
+    for (var column = 0; column < Board.size; ++column) {
+      canMove = canMove || (this.cells[row][column].value === 0);
+      for (var dir = 0; dir < 4; ++dir) {
+        var newRow = row + Board.deltaX[dir];
+        var newColumn = column + Board.deltaY[dir];
+        if (newRow < 0 || newRow >= Board.size || newColumn < 0 || newColumn >= Board.size) {
+          continue;
+        }
+        canMove = canMove || (this.cells[row][column].value === this.cells[newRow][newColumn].value);
+      }
+    }
+  }
+  return !canMove;
+};
+
+module.exports = Board;

examples/demos/TicTacToe/TicTacToe.js

@@ -0,0 +1,322 @@
+/**
+ * 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.
+ *
+ * @providesModule TicTacToeApp
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = ReactNative;
+
+class Board {
+  grid: Array<Array<number>>;
+  turn: number;
+
+  constructor() {
+    var size = 3;
+    var grid = Array(size);
+    for (var i = 0; i < size; i++) {
+      var row = Array(size);
+      for (var j = 0; j < size; j++) {
+        row[j] = 0;
+      }
+      grid[i] = row;
+    }
+    this.grid = grid;
+
+    this.turn = 1;
+  }
+
+  mark(row: number, col: number, player: number): Board {
+    this.grid[row][col] = player;
+    return this;
+  }
+
+  hasMark(row: number, col: number): boolean {
+    return this.grid[row][col] !== 0;
+  }
+
+  winner(): ?number {
+    for (var i = 0; i < 3; i++) {
+      if (this.grid[i][0] !== 0 && this.grid[i][0] === this.grid[i][1] &&
+          this.grid[i][0] === this.grid[i][2]) {
+        return this.grid[i][0];
+      }
+    }
+
+    for (var i = 0; i < 3; i++) {
+      if (this.grid[0][i] !== 0 && this.grid[0][i] === this.grid[1][i] &&
+          this.grid[0][i] === this.grid[2][i]) {
+        return this.grid[0][i];
+      }
+    }
+
+    if (this.grid[0][0] !== 0 && this.grid[0][0] === this.grid[1][1] &&
+        this.grid[0][0] === this.grid[2][2]) {
+      return this.grid[0][0];
+    }
+
+    if (this.grid[0][2] !== 0 && this.grid[0][2] === this.grid[1][1] &&
+        this.grid[0][2] === this.grid[2][0]) {
+      return this.grid[0][2];
+    }
+
+    return null;
+  }
+
+  tie(): boolean {
+    for (var i = 0; i < 3; i++) {
+      for (var j = 0; j < 3; j++) {
+        if (this.grid[i][j] === 0) {
+          return false;
+        }
+      }
+    }
+    return this.winner() === null;
+  }
+}
+
+var Cell = React.createClass({
+  cellStyle() {
+    switch (this.props.player) {
+      case 1:
+        return styles.cellX;
+      case 2:
+        return styles.cellO;
+      default:
+        return null;
+    }
+  },
+
+  textStyle() {
+    switch (this.props.player) {
+      case 1:
+        return styles.cellTextX;
+      case 2:
+        return styles.cellTextO;
+      default:
+        return {};
+    }
+  },
+
+  textContents() {
+    switch (this.props.player) {
+      case 1:
+        return 'X';
+      case 2:
+        return 'O';
+      default:
+        return '';
+    }
+  },
+
+  render() {
+    return (
+      <TouchableHighlight
+        onPress={this.props.onPress}
+        underlayColor="transparent"
+        activeOpacity={0.5}>
+        <View style={[styles.cell, this.cellStyle()]}>
+          <Text style={[styles.cellText, this.textStyle()]}>
+            {this.textContents()}
+          </Text>
+        </View>
+      </TouchableHighlight>
+    );
+  }
+});
+
+var GameEndOverlay = React.createClass({
+  render() {
+    var board = this.props.board;
+
+    var tie = board.tie();
+    var winner = board.winner();
+    if (!winner && !tie) {
+      return <View />;
+    }
+
+    var message;
+    if (tie) {
+      message = 'It\'s a tie!';
+    } else {
+      message = (winner === 1 ? 'X' : 'O') + ' wins!';
+    }
+
+    return (
+      <View style={styles.overlay}>
+        <Text style={styles.overlayMessage}>{message}</Text>
+        <TouchableHighlight
+          onPress={this.props.onRestart}
+          underlayColor="transparent"
+          activeOpacity={0.5}>
+          <View style={styles.newGame}>
+            <Text style={styles.newGameText}>New Game</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+});
+
+var TicTacToeApp = React.createClass({
+  getInitialState() {
+    return { board: new Board(), player: 1 };
+  },
+
+  restartGame() {
+    this.setState(this.getInitialState());
+  },
+
+  nextPlayer(): number {
+    return this.state.player === 1 ? 2 : 1;
+  },
+
+  handleCellPress(row: number, col: number) {
+    if (this.state.board.hasMark(row, col)) {
+      return;
+    }
+
+    this.setState({
+      board: this.state.board.mark(row, col, this.state.player),
+      player: this.nextPlayer(),
+    });
+  },
+
+  render() {
+    var rows = this.state.board.grid.map((cells, row) =>
+      <View key={'row' + row} style={styles.row}>
+        {cells.map((player, col) =>
+          <Cell
+            key={'cell' + col}
+            player={player}
+            onPress={this.handleCellPress.bind(this, row, col)}
+          />
+        )}
+      </View>
+    );
+
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>EXTREME T3</Text>
+        <View style={styles.board}>
+          {rows}
+        </View>
+        <GameEndOverlay
+          board={this.state.board}
+          onRestart={this.restartGame}
+        />
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white'
+  },
+  title: {
+    fontFamily: 'Chalkduster',
+    fontSize: 39,
+    marginBottom: 20,
+  },
+  board: {
+    padding: 5,
+    backgroundColor: '#47525d',
+    borderRadius: 10,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+
+  // CELL
+
+  cell: {
+    width: 80,
+    height: 80,
+    borderRadius: 5,
+    backgroundColor: '#7b8994',
+    margin: 5,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cellX: {
+    backgroundColor: '#72d0eb',
+  },
+  cellO: {
+    backgroundColor: '#7ebd26',
+  },
+
+  // CELL TEXT
+
+  cellText: {
+    borderRadius: 5,
+    fontSize: 50,
+    fontFamily: 'AvenirNext-Bold',
+  },
+  cellTextX: {
+    color: '#19a9e5',
+  },
+  cellTextO: {
+    color: '#b9dc2f',
+  },
+
+  // GAME OVER
+
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(221, 221, 221, 0.5)',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  overlayMessage: {
+    fontSize: 40,
+    marginBottom: 20,
+    marginLeft: 20,
+    marginRight: 20,
+    fontFamily: 'AvenirNext-DemiBold',
+    textAlign: 'center',
+  },
+  newGame: {
+    backgroundColor: '#887765',
+    padding: 20,
+    borderRadius: 5,
+  },
+  newGameText: {
+    color: 'white',
+    fontSize: 20,
+    fontFamily: 'AvenirNext-DemiBold',
+  },
+});
+
+AppRegistry.registerComponent('TicTacToeApp', () => TicTacToeApp);
+
+module.exports = TicTacToeApp;

examples/demos/TicTacToe/TicTacToeExample.js

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

package.json

@@ -1,53 +1,78 @@
 {
   "name": "react-native-web",
-  "version": "0.0.4",
+  "version": "0.0.53",
   "description": "React Native for Web",
-  "main": "dist/react-native-web.js",
+  "main": "dist/index.js",
   "files": [
     "dist"
   ],
   "scripts": {
-    "prepublish": "NODE_ENV=production npm run build",
-    "build": "rm -rf ./dist && webpack --config config/webpack.config.js --sort-assets-by --progress",
-    "lint": "eslint .",
-    "specs": "NODE_ENV=test karma start config/karma.config.js",
-    "specs:watch": "npm run specs -- --no-single-run",
-    "start": "webpack-dev-server --config config/webpack.config.js --inline --hot --colors --quiet",
-    "test": "npm run specs && npm run lint"
+    "build": "del ./dist && mkdir dist && babel src -d dist --ignore **/__tests__",
+    "build:examples": "build-storybook -o dist-examples -c ./examples/.storybook",
+    "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",
+    "lint": "eslint src",
+    "prepublish": "npm run build && npm run build:umd",
+    "test": "jest",
+    "test:watch": "npm run test -- --watch"
   },
   "dependencies": {
-    "react": "^0.13.3"
+    "animated": "^0.1.3",
+    "array-find-index": "^1.0.2",
+    "babel-runtime": "^6.11.6",
+    "debounce": "^1.0.0",
+    "deep-assign": "^2.0.0",
+    "fbjs": "^0.8.4",
+    "inline-style-prefixer": "^2.0.1",
+    "react-dom": "~15.3.2",
+    "react-textarea-autosize": "^4.0.4",
+    "react-timer-mixin": "^0.13.3"
   },
   "devDependencies": {
-    "autoprefixer-core": "^5.2.1",
-    "babel-core": "^5.8.23",
-    "babel-eslint": "^4.1.1",
-    "babel-loader": "^5.3.2",
-    "babel-runtime": "^5.8.20",
-    "css-loader": "^0.17.0",
-    "eslint": "^1.3.1",
-    "eslint-config-standard": "^4.3.1",
-    "eslint-config-standard-react": "^1.0.4",
-    "eslint-plugin-react": "^3.3.1",
-    "eslint-plugin-standard": "^1.3.0",
-    "extract-text-webpack-plugin": "^0.8.2",
-    "karma": "^0.13.9",
-    "karma-chrome-launcher": "^0.2.0",
-    "karma-mocha": "^0.2.0",
-    "karma-sourcemap-loader": "^0.3.5",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^2.3.0",
-    "node-libs-browser": "^0.5.2",
-    "object-assign": "^4.0.1",
-    "postcss-loader": "^0.4.4",
-    "style-loader": "^0.12.3",
-    "webpack": "^1.12.1",
-    "webpack-dev-server": "^1.10.1"
+    "@kadira/storybook": "^2.5.1",
+    "babel-cli": "^6.14.0",
+    "babel-core": "^6.14.0",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-transform-react-remove-prop-types": "^0.2.11",
+    "babel-preset-react-native": "^1.9.0",
+    "del-cli": "^0.2.0",
+    "enzyme": "^2.4.1",
+    "eslint": "^3.4.0",
+    "eslint-plugin-jsx-a11y": "^2.2.0",
+    "eslint-plugin-promise": "^2.0.1",
+    "eslint-plugin-react": "^6.1.2",
+    "file-loader": "^0.9.0",
+    "jest": "^16.0.2",
+    "node-libs-browser": "^0.5.3",
+    "react": "~15.3.2",
+    "react-addons-test-utils": "~15.3.2",
+    "react-test-renderer": "~15.3.2",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.2",
+    "webpack-bundle-analyzer": "^1.5.3"
+  },
+  "peerDependencies": {
+    "react": "~15.3.2"
   },
   "author": "Nicolas Gallagher",
-  "license": "MIT",
+  "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"
+  ],
+  "jest": {
+    "testEnvironment": "jsdom",
+    "timers": "fake"
   }
 }

src/apis/Animated/index.js

@@ -0,0 +1,14 @@
+import Animated from 'animated';
+import Image from '../../components/Image';
+import StyleSheet from '../StyleSheet';
+import Text from '../../components/Text';
+import View from '../../components/View';
+
+Animated.inject.FlattenStyle(StyleSheet.flatten);
+
+module.exports = {
+  ...Animated,
+  Image: Animated.createAnimatedComponent(Image),
+  Text: Animated.createAnimatedComponent(Text),
+  View: Animated.createAnimatedComponent(View)
+};

src/apis/AppRegistry/ReactNativeApp.js

@@ -0,0 +1,36 @@
+import StyleSheet from '../StyleSheet';
+import View from '../../components/View';
+import React, { Component, PropTypes } from 'react';
+
+class ReactNativeApp extends Component {
+  static propTypes = {
+    initialProps: PropTypes.object,
+    rootComponent: PropTypes.any.isRequired,
+    rootTag: PropTypes.any
+  };
+
+  render() {
+    const { initialProps, rootComponent: RootComponent, rootTag } = this.props;
+
+    return (
+      <View style={styles.appContainer}>
+        <RootComponent {...initialProps} rootTag={rootTag} />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  /**
+   * Ensure that the application covers the whole screen.
+   */
+  appContainer: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0
+  }
+});
+
+module.exports = ReactNativeApp;

src/apis/AppRegistry/__tests__/renderApplication-test.js

@@ -0,0 +1,15 @@
+/* eslint-env jasmine, jest */
+
+import { getApplication } from '../renderApplication';
+import React from 'react';
+
+const component = () => <div />;
+
+describe('apis/AppRegistry/renderApplication', () => {
+  test('getApplication', () => {
+    const { element, stylesheet } = getApplication(component, {});
+
+    expect(element).toBeTruthy();
+    expect(stylesheet.type).toEqual('style');
+  });
+});

src/apis/AppRegistry/index.js

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2015-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * @flow
+ */
+
+import { Component } from 'react';
+import invariant from 'fbjs/lib/invariant';
+import { unmountComponentAtNode } from 'react/lib/ReactMount';
+import renderApplication, { getApplication } from './renderApplication';
+
+const runnables = {};
+
+type ComponentProvider = () => Component<any, any, any>
+
+type AppConfig = {
+  appKey: string;
+  component?: ComponentProvider;
+  run?: Function;
+};
+
+/**
+ * `AppRegistry` is the JS entry point to running all React Native apps.
+ */
+class AppRegistry {
+  static getAppKeys(): Array<string> {
+    return Object.keys(runnables);
+  }
+
+  static getApplication(appKey: string, appParameters?: Object): string {
+    invariant(
+      runnables[appKey] && runnables[appKey].getApplication,
+      `Application ${appKey} has not been registered. ` +
+      'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
+    );
+
+    return runnables[appKey].getApplication(appParameters);
+  }
+
+  static registerComponent(appKey: string, getComponentFunc: ComponentProvider): string {
+    runnables[appKey] = {
+      getApplication: ({ initialProps } = {}) => getApplication(getComponentFunc(), initialProps),
+      run: ({ initialProps, rootTag }) => renderApplication(getComponentFunc(), initialProps, rootTag)
+    };
+    return appKey;
+  }
+
+  static registerConfig(config: Array<AppConfig>) {
+    config.forEach(({ appKey, component, run }) => {
+      if (run) {
+        AppRegistry.registerRunnable(appKey, run);
+      } else {
+        invariant(component, 'No component provider passed in');
+        AppRegistry.registerComponent(appKey, component);
+      }
+    });
+  }
+
+  // TODO: fix style sheet creation when using this method
+  static registerRunnable(appKey: string, run: Function): string {
+    runnables[appKey] = { run };
+    return appKey;
+  }
+
+  static runApplication(appKey: string, appParameters?: Object): void {
+    const isDevelopment = process.env.NODE_ENV !== 'production';
+    const params = { ...appParameters };
+    params.rootTag = `#${params.rootTag.id}`;
+
+    console.log(
+      `Running application "${appKey}" with appParams: ${JSON.stringify(params)}. ` +
+      `development-level warnings are ${isDevelopment ? 'ON' : 'OFF'}, ` +
+      `performance optimizations are ${isDevelopment ? 'OFF' : 'ON'}`
+    );
+
+    invariant(
+      runnables[appKey] && runnables[appKey].run,
+      `Application "${appKey}" has not been registered. ` +
+      'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
+    );
+
+    runnables[appKey].run(appParameters);
+  }
+
+  static unmountApplicationComponentAtRootTag(rootTag) {
+    unmountComponentAtNode(rootTag);
+  }
+}
+
+module.exports = AppRegistry;

src/apis/AppRegistry/renderApplication.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2015-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * @flow
+ */
+
+import invariant from 'fbjs/lib/invariant';
+import { render } from 'react/lib/ReactMount';
+import ReactNativeApp from './ReactNativeApp';
+import StyleSheet from '../../apis/StyleSheet';
+import React, { Component } from 'react';
+
+export default function renderApplication(RootComponent: Component, initialProps: Object, rootTag: any) {
+  invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
+
+  const component = (
+    <ReactNativeApp
+      initialProps={initialProps}
+      rootComponent={RootComponent}
+      rootTag={rootTag}
+    />
+  );
+  render(component, rootTag);
+}
+
+export function getApplication(RootComponent: Component, initialProps: Object): Object {
+  const element = (
+    <ReactNativeApp
+      initialProps={initialProps}
+      rootComponent={RootComponent}
+    />
+  );
+  const stylesheet = StyleSheet.render();
+  return { element, stylesheet };
+}

src/apis/AppState/__tests__/index-test.js

@@ -0,0 +1,30 @@
+/* eslint-env jasmine, jest */
+
+import AppState from '..';
+
+describe('apis/AppState', () => {
+  const handler = () => {};
+
+  afterEach(() => {
+    try { AppState.removeEventListener('change', handler); } catch (e) {}
+  });
+
+  describe('addEventListener', () => {
+    test('throws if the provided "eventType" is not supported', () => {
+      expect(() => AppState.addEventListener('foo', handler)).toThrow();
+      expect(() => AppState.addEventListener('change', handler)).not.toThrow();
+    });
+  });
+
+  describe('removeEventListener', () => {
+    test('throws if the handler is not registered', () => {
+      expect(() => AppState.removeEventListener('change', handler)).toThrow();
+    });
+
+    test('throws if the provided "eventType" is not supported', () => {
+      AppState.addEventListener('change', handler);
+      expect(() => AppState.removeEventListener('foo', handler)).toThrow();
+      expect(() => AppState.removeEventListener('change', handler)).not.toThrow();
+    });
+  });
+});

src/apis/AppState/index.js

@@ -0,0 +1,54 @@
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+import findIndex from 'array-find-index';
+import invariant from 'fbjs/lib/invariant';
+
+const EVENT_TYPES = [ 'change' ];
+const VISIBILITY_CHANGE_EVENT = 'visibilitychange';
+
+const AppStates = {
+  BACKGROUND: 'background',
+  ACTIVE: 'active'
+};
+
+const listeners = [];
+
+class AppState {
+  static isSupported = ExecutionEnvironment.canUseDOM && document.visibilityState
+
+  static get currentState() {
+    if (!AppState.isSupported) {
+      return AppState.ACTIVE;
+    }
+
+    switch (document.visibilityState) {
+      case 'hidden':
+      case 'prerender':
+      case 'unloaded':
+        return AppStates.BACKGROUND;
+      default:
+        return AppStates.ACTIVE;
+    }
+  }
+
+  static addEventListener(type: string, handler: Function) {
+    if (AppState.isSupported) {
+      invariant(EVENT_TYPES.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+      const callback = () => handler(AppState.currentState);
+      listeners.push([ handler, callback ]);
+      document.addEventListener(VISIBILITY_CHANGE_EVENT, callback, false);
+    }
+  }
+
+  static removeEventListener(type: string, handler: Function) {
+    if (AppState.isSupported) {
+      invariant(EVENT_TYPES.indexOf(type) !== -1, 'Trying to remove listener for unknown event: "%s"', type);
+      const listenerIndex = findIndex(listeners, (pair) => pair[0] === handler);
+      invariant(listenerIndex !== -1, 'Trying to remove AppState listener for unregistered handler');
+      const callback = listeners[listenerIndex][1];
+      document.removeEventListener(VISIBILITY_CHANGE_EVENT, callback, false);
+      listeners.splice(listenerIndex, 1);
+    }
+  }
+}
+
+module.exports = AppState;

src/apis/AsyncStorage/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,11 @@
+exports[`apis/AsyncStorage mergeLocalStorageItem should have same behavior as react-native 1`] = `
+Object {
+  "age": 31,
+  "name": "Chris",
+  "traits": Object {
+    "eyes": "blue",
+    "hair": "brown",
+    "shoe_size": 10,
+  },
+}
+`;

src/apis/AsyncStorage/__tests__/index-test.js

@@ -0,0 +1,74 @@
+/* eslint-env jasmine, jest */
+import AsyncStorage from '..';
+
+const waterfall = (fns, cb) => {
+  const _waterfall = (...args) => {
+    const fn = (fns || []).shift();
+    if (typeof fn === 'function') {
+      fn(...args, (err, ...nextArgs) => {
+        if (err) {
+          return cb(err);
+        } else {
+          return _waterfall(...nextArgs);
+        }
+      });
+    } else {
+      cb(null, ...args);
+    }
+  };
+  _waterfall();
+};
+
+const obj = {};
+const mockLocalStorage = {
+  getItem(key) {
+    return obj[key];
+  },
+  setItem(key, value) {
+    obj[key] = value;
+  }
+};
+const originalLocalStorage = window.localStorage;
+
+describe('apis/AsyncStorage', () => {
+  describe('mergeLocalStorageItem', () => {
+    test('should have same behavior as react-native', (done) => {
+      window.localStorage = mockLocalStorage;
+      // https://facebook.github.io/react-native/docs/asyncstorage.html
+      const UID123_object = {
+        name: 'Chris',
+        age: 30,
+        traits: { hair: 'brown', eyes: 'brown' }
+      };
+      const UID123_delta = {
+        age: 31,
+        traits: { eyes: 'blue', shoe_size: 10 }
+      };
+
+      waterfall([
+        (cb) => {
+          AsyncStorage.setItem('UID123', JSON.stringify(UID123_object))
+            .then(() => cb(null))
+            .catch(cb);
+        },
+        (cb) => {
+          AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta))
+            .then(() => cb(null))
+            .catch(cb);
+        },
+        (cb) => {
+          AsyncStorage.getItem('UID123')
+            .then((result) => {
+              cb(null, JSON.parse(result));
+            })
+            .catch(cb);
+        }
+      ], (err, result) => {
+        expect(err).toEqual(null);
+        expect(result).toMatchSnapshot();
+        window.localStorage = originalLocalStorage;
+        done();
+      });
+    });
+  });
+});

src/apis/AsyncStorage/index.js

@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) 2015-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ */
+import merge from 'deep-assign';
+
+const mergeLocalStorageItem = (key, value) => {
+  const oldValue = window.localStorage.getItem(key);
+  const oldObject = JSON.parse(oldValue);
+  const newObject = JSON.parse(value);
+  const nextValue = JSON.stringify(merge({}, oldObject, newObject));
+  window.localStorage.setItem(key, nextValue);
+};
+
+class AsyncStorage {
+  /**
+   * Erases *all* AsyncStorage for the domain.
+   */
+  static clear() {
+    return new Promise((resolve, reject) => {
+      try {
+        window.localStorage.clear();
+        resolve(null);
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+
+  /**
+   * Gets *all* keys known to the app, for all callers, libraries, etc.
+   */
+  static getAllKeys() {
+    return new Promise((resolve, reject) => {
+      try {
+        const numberOfKeys = window.localStorage.length;
+        const keys = [];
+        for (let i = 0; i < numberOfKeys; i += 1) {
+          const key = window.localStorage.key(i);
+          keys.push(key);
+        }
+        resolve(keys);
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+
+  /**
+   * Fetches `key` value.
+   */
+  static getItem(key: string) {
+    return new Promise((resolve, reject) => {
+      try {
+        const value = window.localStorage.getItem(key);
+        resolve(value);
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+
+  /**
+   * Merges existing value with input value, assuming they are stringified JSON.
+   */
+  static mergeItem(key: string, value: string) {
+    return new Promise((resolve, reject) => {
+      try {
+        mergeLocalStorageItem(key, value);
+        resolve(null);
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+
+  /**
+   * multiGet resolves to an array of key-value pair arrays that matches the
+   * input format of multiSet.
+   *
+   *   multiGet(['k1', 'k2']) -> [['k1', 'val1'], ['k2', 'val2']]
+   */
+  static multiGet(keys: Array<string>) {
+    const promises = keys.map((key) => AsyncStorage.getItem(key));
+
+    return Promise.all(promises).then(
+      (result) => Promise.resolve(result.map((value, i) => [ keys[i], value ])),
+      (error) => Promise.reject(error)
+    );
+  }
+
+  /**
+   * Takes an array of key-value array pairs and merges them with existing
+   * values, assuming they are stringified JSON.
+   *
+   *   multiMerge([['k1', 'val1'], ['k2', 'val2']])
+   */
+  static multiMerge(keyValuePairs: Array<Array<string>>) {
+    const promises = keyValuePairs.map((item) => AsyncStorage.mergeItem(item[0], item[1]));
+
+    return Promise.all(promises).then(
+      () => Promise.resolve(null),
+      (error) => Promise.reject(error)
+    );
+  }
+
+  /**
+   * Delete all the keys in the `keys` array.
+   */
+  static multiRemove(keys: Array<string>) {
+    const promises = keys.map((key) => AsyncStorage.removeItem(key));
+
+    return Promise.all(promises).then(
+      () => Promise.resolve(null),
+      (error) => Promise.reject(error)
+    );
+  }
+
+  /**
+   * Takes an array of key-value array pairs.
+   *   multiSet([['k1', 'val1'], ['k2', 'val2']])
+   */
+  static multiSet(keyValuePairs: Array<Array<string>>) {
+    const promises = keyValuePairs.map((item) => AsyncStorage.setItem(item[0], item[1]));
+
+    return Promise.all(promises).then(
+      () => Promise.resolve(null),
+      (error) => Promise.reject(error)
+    );
+  }
+
+  /**
+   * Removes a `key`
+   */
+  static removeItem(key: string) {
+    return new Promise((resolve, reject) => {
+      try {
+        window.localStorage.removeItem(key);
+        resolve(null);
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+
+  /**
+   * Sets `value` for `key`.
+   */
+  static setItem(key: string, value: string) {
+    return new Promise((resolve, reject) => {
+      try {
+        window.localStorage.setItem(key, value);
+        resolve(null);
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+}
+
+module.exports = AsyncStorage;

src/apis/Dimensions/__tests__/index-test.js

@@ -0,0 +1,5 @@
+/* eslint-env jasmine, jest */
+
+describe('apis/Dimensions', () => {
+  test.skip('NO TEST COVERAGE', () => {});
+});

src/apis/Dimensions/index.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2015-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * @flow
+ */
+
+import debounce from 'debounce';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+import invariant from 'fbjs/lib/invariant';
+
+const win = ExecutionEnvironment.canUseDOM ? window : { screen: {} };
+
+const dimensions = {};
+
+class Dimensions {
+  static get(dimension: string): Object {
+    invariant(dimensions[dimension], `No dimension set for key ${dimension}`);
+    return dimensions[dimension];
+  }
+
+  static set(): void {
+    dimensions.window = {
+      fontScale: 1,
+      height: win.innerHeight,
+      scale: win.devicePixelRatio || 1,
+      width: win.innerWidth
+    };
+
+    dimensions.screen = {
+      fontScale: 1,
+      height: win.screen.height,
+      scale: win.devicePixelRatio || 1,
+      width: win.screen.width
+    };
+  }
+}
+
+Dimensions.set();
+ExecutionEnvironment.canUseDOM && window.addEventListener('resize', debounce(Dimensions.set, 50));
+
+module.exports = Dimensions;

src/apis/I18nManager/__tests__/index-test.js

@@ -0,0 +1,45 @@
+/* eslint-env jasmine, jest */
+
+import I18nManager from '..';
+
+describe('apis/I18nManager', () => {
+  describe('when RTL not enabled', () => {
+    beforeEach(() => {
+      I18nManager.setPreferredLanguageRTL(false);
+    });
+
+    test('is "false" by default', () => {
+      expect(I18nManager.isRTL).toEqual(false);
+      expect(document.documentElement.getAttribute('dir')).toEqual('ltr');
+    });
+
+    test('is "true" when forced', () => {
+      I18nManager.forceRTL(true);
+      expect(I18nManager.isRTL).toEqual(true);
+      expect(document.documentElement.getAttribute('dir')).toEqual('rtl');
+      I18nManager.forceRTL(false);
+    });
+  });
+
+  describe('when RTL is enabled', () => {
+    beforeEach(() => {
+      I18nManager.setPreferredLanguageRTL(true);
+    });
+
+    afterEach(() => {
+      I18nManager.setPreferredLanguageRTL(false);
+    });
+
+    test('is "true" by default', () => {
+      expect(I18nManager.isRTL).toEqual(true);
+      expect(document.documentElement.getAttribute('dir')).toEqual('rtl');
+    });
+
+    test('is "false" when not allowed', () => {
+      I18nManager.allowRTL(false);
+      expect(I18nManager.isRTL).toEqual(false);
+      expect(document.documentElement.getAttribute('dir')).toEqual('ltr');
+      I18nManager.allowRTL(true);
+    });
+  });
+});

src/apis/I18nManager/index.js

@@ -0,0 +1,45 @@
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+
+type I18nManagerStatus = {
+  allowRTL: (allowRTL: boolean) => {},
+  forceRTL: (forceRTL: boolean) => {},
+  setRTL: (setRTL: boolean) => {},
+  isRTL: boolean
+}
+
+let isPreferredLanguageRTL = false;
+let isRTLAllowed = true;
+let isRTLForced = false;
+
+const isRTL = () => {
+  if (isRTLForced) {
+    return true;
+  }
+  return isRTLAllowed && isPreferredLanguageRTL;
+};
+
+const onChange = () => {
+  if (ExecutionEnvironment.canUseDOM) {
+    document.documentElement.setAttribute('dir', isRTL() ? 'rtl' : 'ltr');
+  }
+};
+
+const I18nManager: I18nManagerStatus = {
+  allowRTL(bool) {
+    isRTLAllowed = bool;
+    onChange();
+  },
+  forceRTL(bool) {
+    isRTLForced = bool;
+    onChange();
+  },
+  setPreferredLanguageRTL(bool) {
+    isPreferredLanguageRTL = bool;
+    onChange();
+  },
+  get isRTL() {
+    return isRTL();
+  }
+};
+
+module.exports = I18nManager;

src/apis/InteractionManager/index.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * @flow
+ */
+
+import invariant from 'fbjs/lib/invariant';
+
+const InteractionManager = {
+  Events: {
+    interactionStart: 'interactionStart',
+    interactionComplete: 'interactionComplete'
+  },
+
+  /**
+   * Schedule a function to run after all interactions have completed.
+   */
+  runAfterInteractions(callback: Function) {
+    invariant(
+      typeof callback === 'function',
+      'Must specify a function to schedule.'
+    );
+    callback();
+  },
+
+  /**
+   * Notify manager that an interaction has started.
+   */
+  createInteractionHandle() {
+    return 1;
+  },
+
+  /**
+   * Notify manager that an interaction has completed.
+   */
+  clearInteractionHandle(handle) {
+    invariant(
+      !!handle,
+      'Must provide a handle to clear.'
+    );
+  },
+
+  addListener: () => {}
+};
+
+module.exports = InteractionManager;

src/apis/NetInfo/__tests__/index-test.js

@@ -0,0 +1,32 @@
+/* eslint-env jasmine, jest */
+
+import NetInfo from '..';
+
+describe('apis/NetInfo', () => {
+  describe('isConnected', () => {
+    const handler = () => {};
+
+    afterEach(() => {
+      try { NetInfo.isConnected.removeEventListener('change', handler); } catch (e) {}
+    });
+
+    describe('addEventListener', () => {
+      test('throws if the provided "eventType" is not supported', () => {
+        expect(() => NetInfo.isConnected.addEventListener('foo', handler)).toThrow();
+        expect(() => NetInfo.isConnected.addEventListener('change', handler)).not.toThrow();
+      });
+    });
+
+    describe('removeEventListener', () => {
+      test('throws if the handler is not registered', () => {
+        expect(() => NetInfo.isConnected.removeEventListener('change', handler)).toThrow;
+      });
+
+      test('throws if the provided "eventType" is not supported', () => {
+        NetInfo.isConnected.addEventListener('change', handler);
+        expect(() => NetInfo.isConnected.removeEventListener('foo', handler)).toThrow;
+        expect(() => NetInfo.isConnected.removeEventListener('change', handler)).not.toThrow;
+      });
+    });
+  });
+});

src/apis/NetInfo/index.js

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2015-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * @flow
+ */
+
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+import findIndex from 'array-find-index';
+import invariant from 'fbjs/lib/invariant';
+
+const connection = ExecutionEnvironment.canUseDOM && (
+  window.navigator.connection ||
+  window.navigator.mozConnection ||
+  window.navigator.webkitConnection
+);
+
+const eventTypes = [ 'change' ];
+
+const connectionListeners = [];
+
+/**
+ * Navigator online: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine
+ * Network Connection API: https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
+ */
+const NetInfo = {
+  addEventListener(type: string, handler: Function): { remove: () => void } {
+    invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+    if (!connection) {
+      console.error('Network Connection API is not supported. Not listening for connection type changes.');
+      return {
+        remove: () => {}
+      };
+    }
+
+    connection.addEventListener(type, handler);
+    return {
+      remove: () => NetInfo.removeEventListener(type, handler)
+    };
+  },
+
+  removeEventListener(type: string, handler: Function): void {
+    invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+    if (!connection) { return; }
+    connection.removeEventListener(type, handler);
+  },
+
+  fetch(): Promise {
+    return new Promise((resolve, reject) => {
+      try {
+        resolve(connection.type);
+      } catch (err) {
+        resolve('unknown');
+      }
+    });
+  },
+
+  isConnected: {
+    addEventListener(type: string, handler: Function): { remove: () => void } {
+      invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+      const onlineCallback = () => handler(true);
+      const offlineCallback = () => handler(false);
+      connectionListeners.push([ handler, onlineCallback, offlineCallback ]);
+
+      window.addEventListener('online', onlineCallback, false);
+      window.addEventListener('offline', offlineCallback, false);
+
+      return {
+        remove: () => NetInfo.isConnected.removeEventListener(type, handler)
+      };
+    },
+
+    removeEventListener(type: string, handler: Function): void {
+      invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+
+      const listenerIndex = findIndex(connectionListeners, (pair) => pair[0] === handler);
+      invariant(listenerIndex !== -1, 'Trying to remove NetInfo connection listener for unregistered handler');
+      const [ , onlineCallback, offlineCallback ] = connectionListeners[listenerIndex];
+
+      window.removeEventListener('online', onlineCallback, false);
+      window.removeEventListener('offline', offlineCallback, false);
+
+      connectionListeners.splice(listenerIndex, 1);
+    },
+
+    fetch(): Promise {
+      return new Promise((resolve, reject) => {
+        try {
+          resolve(window.navigator.onLine);
+        } catch (err) {
+          resolve(true);
+        }
+      });
+    }
+  }
+};
+
+module.exports = NetInfo;

src/apis/PanResponder/index.js

@@ -0,0 +1,385 @@
+/* eslint-disable */
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ */
+
+"use strict";
+
+var TouchHistoryMath = require('react/lib/TouchHistoryMath');
+
+var currentCentroidXOfTouchesChangedAfter =
+  TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;
+var currentCentroidYOfTouchesChangedAfter =
+  TouchHistoryMath.currentCentroidYOfTouchesChangedAfter;
+var previousCentroidXOfTouchesChangedAfter =
+  TouchHistoryMath.previousCentroidXOfTouchesChangedAfter;
+var previousCentroidYOfTouchesChangedAfter =
+  TouchHistoryMath.previousCentroidYOfTouchesChangedAfter;
+var currentCentroidX = TouchHistoryMath.currentCentroidX;
+var currentCentroidY = TouchHistoryMath.currentCentroidY;
+
+/**
+ * `PanResponder` reconciles several touches into a single gesture. It makes
+ * single-touch gestures resilient to extra touches, and can be used to
+ * recognize simple multi-touch gestures.
+ *
+ * It provides a predictable wrapper of the responder handlers provided by the
+ * [gesture responder system](docs/gesture-responder-system.html).
+ * For each handler, it provides a new `gestureState` object alongside the
+ * native event object:
+ *
+ * ```
+ * onPanResponderMove: (event, gestureState) => {}
+ * ```
+ *
+ * A native event is a synthetic touch event with the following form:
+ *
+ *  - `nativeEvent`
+ *      + `changedTouches` - Array of all touch events that have changed since the last event
+ *      + `identifier` - The ID of the touch
+ *      + `locationX` - The X position of the touch, relative to the element
+ *      + `locationY` - The Y position of the touch, relative to the element
+ *      + `pageX` - The X position of the touch, relative to the root element
+ *      + `pageY` - The Y position of the touch, relative to the root element
+ *      + `target` - The node id of the element receiving the touch event
+ *      + `timestamp` - A time identifier for the touch, useful for velocity calculation
+ *      + `touches` - Array of all current touches on the screen
+ *
+ * A `gestureState` object has the following:
+ *
+ *  - `stateID` - ID of the gestureState- persisted as long as there at least
+ *     one touch on screen
+ *  - `moveX` - the latest screen coordinates of the recently-moved touch
+ *  - `moveY` - the latest screen coordinates of the recently-moved touch
+ *  - `x0` - the screen coordinates of the responder grant
+ *  - `y0` - the screen coordinates of the responder grant
+ *  - `dx` - accumulated distance of the gesture since the touch started
+ *  - `dy` - accumulated distance of the gesture since the touch started
+ *  - `vx` - current velocity of the gesture
+ *  - `vy` - current velocity of the gesture
+ *  - `numberActiveTouches` - Number of touches currently on screen
+ *
+ * ### Basic Usage
+ *
+ * ```
+ *   componentWillMount: function() {
+ *     this._panResponder = PanResponder.create({
+ *       // Ask to be the responder:
+ *       onStartShouldSetPanResponder: (evt, gestureState) => true,
+ *       onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
+ *       onMoveShouldSetPanResponder: (evt, gestureState) => true,
+ *       onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
+ *
+ *       onPanResponderGrant: (evt, gestureState) => {
+ *         // The guesture has started. Show visual feedback so the user knows
+ *         // what is happening!
+ *
+ *         // gestureState.{x,y}0 will be set to zero now
+ *       },
+ *       onPanResponderMove: (evt, gestureState) => {
+ *         // The most recent move distance is gestureState.move{X,Y}
+ *
+ *         // The accumulated gesture distance since becoming responder is
+ *         // gestureState.d{x,y}
+ *       },
+ *       onPanResponderTerminationRequest: (evt, gestureState) => true,
+ *       onPanResponderRelease: (evt, gestureState) => {
+ *         // The user has released all touches while this view is the
+ *         // responder. This typically means a gesture has succeeded
+ *       },
+ *       onPanResponderTerminate: (evt, gestureState) => {
+ *         // Another component has become the responder, so this gesture
+ *         // should be cancelled
+ *       },
+ *       onShouldBlockNativeResponder: (evt, gestureState) => {
+ *         // Returns whether this component should block native components from becoming the JS
+ *         // responder. Returns true by default. Is currently only supported on android.
+ *         return true;
+ *       },
+ *     });
+ *   },
+ *
+ *   render: function() {
+ *     return (
+ *       <View {...this._panResponder.panHandlers} />
+ *     );
+ *   },
+ *
+ * ```
+ *
+ * ### Working Example
+ *
+ * To see it in action, try the
+ * [PanResponder example in UIExplorer](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/PanResponderExample.js)
+ */
+
+var PanResponder = {
+
+  /**
+   *
+   * A graphical explanation of the touch data flow:
+   *
+   * +----------------------------+             +--------------------------------+
+   * | ResponderTouchHistoryStore |             |TouchHistoryMath                |
+   * +----------------------------+             +----------+---------------------+
+   * |Global store of touchHistory|             |Allocation-less math util       |
+   * |including activeness, start |             |on touch history (centroids     |
+   * |position, prev/cur position.|             |and multitouch movement etc)    |
+   * |                            |             |                                |
+   * +----^-----------------------+             +----^---------------------------+
+   *      |                                          |
+   *      | (records relevant history                |
+   *      |  of touches relevant for                 |
+   *      |  implementing higher level               |
+   *      |  gestures)                               |
+   *      |                                          |
+   * +----+-----------------------+             +----|---------------------------+
+   * | ResponderEventPlugin       |             |    |   Your App/Component      |
+   * +----------------------------+             +----|---------------------------+
+   * |Negotiates which view gets  | Low level   |    |             High level    |
+   * |onResponderMove events.     | events w/   |  +-+-------+     events w/     |
+   * |Also records history into   | touchHistory|  |   Pan   |     multitouch +  |
+   * |ResponderTouchHistoryStore. +---------------->Responder+-----> accumulative|
+   * +----------------------------+ attached to |  |         |     distance and  |
+   *                                 each event |  +---------+     velocity.     |
+   *                                            |                                |
+   *                                            |                                |
+   *                                            +--------------------------------+
+   *
+   *
+   *
+   * Gesture that calculates cumulative movement over time in a way that just
+   * "does the right thing" for multiple touches. The "right thing" is very
+   * nuanced. When moving two touches in opposite directions, the cumulative
+   * distance is zero in each dimension. When two touches move in parallel five
+   * pixels in the same direction, the cumulative distance is five, not ten. If
+   * two touches start, one moves five in a direction, then stops and the other
+   * touch moves fives in the same direction, the cumulative distance is ten.
+   *
+   * This logic requires a kind of processing of time "clusters" of touch events
+   * so that two touch moves that essentially occur in parallel but move every
+   * other frame respectively, are considered part of the same movement.
+   *
+   * Explanation of some of the non-obvious fields:
+   *
+   * - moveX/moveY: If no move event has been observed, then `(moveX, moveY)` is
+   *   invalid. If a move event has been observed, `(moveX, moveY)` is the
+   *   centroid of the most recently moved "cluster" of active touches.
+   *   (Currently all move have the same timeStamp, but later we should add some
+   *   threshold for what is considered to be "moving"). If a palm is
+   *   accidentally counted as a touch, but a finger is moving greatly, the palm
+   *   will move slightly, but we only want to count the single moving touch.
+   * - x0/y0: Centroid location (non-cumulative) at the time of becoming
+   *   responder.
+   * - dx/dy: Cumulative touch distance - not the same thing as sum of each touch
+   *   distance. Accounts for touch moves that are clustered together in time,
+   *   moving the same direction. Only valid when currently responder (otherwise,
+   *   it only represents the drag distance below the threshold).
+   * - vx/vy: Velocity.
+   */
+
+  _initializeGestureState: function(gestureState) {
+    gestureState.moveX = 0;
+    gestureState.moveY = 0;
+    gestureState.x0 = 0;
+    gestureState.y0 = 0;
+    gestureState.dx = 0;
+    gestureState.dy = 0;
+    gestureState.vx = 0;
+    gestureState.vy = 0;
+    gestureState.numberActiveTouches = 0;
+    // All `gestureState` accounts for timeStamps up until:
+    gestureState._accountsForMovesUpTo = 0;
+  },
+
+  /**
+   * This is nuanced and is necessary. It is incorrect to continuously take all
+   * active *and* recently moved touches, find the centroid, and track how that
+   * result changes over time. Instead, we must take all recently moved
+   * touches, and calculate how the centroid has changed just for those
+   * recently moved touches, and append that change to an accumulator. This is
+   * to (at least) handle the case where the user is moving three fingers, and
+   * then one of the fingers stops but the other two continue.
+   *
+   * This is very different than taking all of the recently moved touches and
+   * storing their centroid as `dx/dy`. For correctness, we must *accumulate
+   * changes* in the centroid of recently moved touches.
+   *
+   * There is also some nuance with how we handle multiple moved touches in a
+   * single event. With the way `ReactNativeEventEmitter` dispatches touches as
+   * individual events, multiple touches generate two 'move' events, each of
+   * them triggering `onResponderMove`. But with the way `PanResponder` works,
+   * all of the gesture inference is performed on the first dispatch, since it
+   * looks at all of the touches (even the ones for which there hasn't been a
+   * native dispatch yet). Therefore, `PanResponder` does not call
+   * `onResponderMove` passed the first dispatch. This diverges from the
+   * typical responder callback pattern (without using `PanResponder`), but
+   * avoids more dispatches than necessary.
+   */
+  _updateGestureStateOnMove: function(gestureState, touchHistory) {
+    gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
+    gestureState.moveX = currentCentroidXOfTouchesChangedAfter(
+      touchHistory,
+      gestureState._accountsForMovesUpTo
+    );
+    gestureState.moveY = currentCentroidYOfTouchesChangedAfter(
+      touchHistory,
+      gestureState._accountsForMovesUpTo
+    );
+    var movedAfter = gestureState._accountsForMovesUpTo;
+    var prevX = previousCentroidXOfTouchesChangedAfter(touchHistory, movedAfter);
+    var x = currentCentroidXOfTouchesChangedAfter(touchHistory, movedAfter);
+    var prevY = previousCentroidYOfTouchesChangedAfter(touchHistory, movedAfter);
+    var y = currentCentroidYOfTouchesChangedAfter(touchHistory, movedAfter);
+    var nextDX = gestureState.dx + (x - prevX);
+    var nextDY = gestureState.dy + (y - prevY);
+
+    // TODO: This must be filtered intelligently.
+    var dt =
+      (touchHistory.mostRecentTimeStamp - gestureState._accountsForMovesUpTo);
+    gestureState.vx = (nextDX - gestureState.dx) / dt;
+    gestureState.vy = (nextDY - gestureState.dy) / dt;
+
+    gestureState.dx = nextDX;
+    gestureState.dy = nextDY;
+    gestureState._accountsForMovesUpTo = touchHistory.mostRecentTimeStamp;
+  },
+
+  /**
+   * @param {object} config Enhanced versions of all of the responder callbacks
+   * that provide not only the typical `ResponderSyntheticEvent`, but also the
+   * `PanResponder` gesture state.  Simply replace the word `Responder` with
+   * `PanResponder` in each of the typical `onResponder*` callbacks. For
+   * example, the `config` object would look like:
+   *
+   *  - `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
+   *  - `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
+   *  - `onStartShouldSetPanResponder: (e, gestureState) => {...}`
+   *  - `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
+   *  - `onPanResponderReject: (e, gestureState) => {...}`
+   *  - `onPanResponderGrant: (e, gestureState) => {...}`
+   *  - `onPanResponderStart: (e, gestureState) => {...}`
+   *  - `onPanResponderEnd: (e, gestureState) => {...}`
+   *  - `onPanResponderRelease: (e, gestureState) => {...}`
+   *  - `onPanResponderMove: (e, gestureState) => {...}`
+   *  - `onPanResponderTerminate: (e, gestureState) => {...}`
+   *  - `onPanResponderTerminationRequest: (e, gestureState) => {...}`
+   *  - `onShouldBlockNativeResponder: (e, gestureState) => {...}`
+   *
+   *  In general, for events that have capture equivalents, we update the
+   *  gestureState once in the capture phase and can use it in the bubble phase
+   *  as well.
+   *
+   *  Be careful with onStartShould* callbacks. They only reflect updated
+   *  `gestureState` for start/end events that bubble/capture to the Node.
+   *  Once the node is the responder, you can rely on every start/end event
+   *  being processed by the gesture and `gestureState` being updated
+   *  accordingly. (numberActiveTouches) may not be totally accurate unless you
+   *  are the responder.
+   */
+  create: function(config) {
+    var gestureState = {
+      // Useful for debugging
+      stateID: Math.random(),
+    };
+    PanResponder._initializeGestureState(gestureState);
+    var panHandlers = {
+      onStartShouldSetResponder: function(e) {
+        return config.onStartShouldSetPanResponder === undefined ? false :
+          config.onStartShouldSetPanResponder(e, gestureState);
+      },
+      onMoveShouldSetResponder: function(e) {
+        return config.onMoveShouldSetPanResponder === undefined ? false :
+          config.onMoveShouldSetPanResponder(e, gestureState);
+      },
+      onStartShouldSetResponderCapture: function(e) {
+        // TODO: Actually, we should reinitialize the state any time
+        // touches.length increases from 0 active to > 0 active.
+        if (e.nativeEvent.touches) {
+          if (e.nativeEvent.touches.length === 1) {
+            PanResponder._initializeGestureState(gestureState);
+          }
+        }
+        else if (e.nativeEvent.originalEvent && e.nativeEvent.originalEvent.type === 'mousedown') {
+          PanResponder._initializeGestureState(gestureState);
+        }
+        gestureState.numberActiveTouches = e.touchHistory.numberActiveTouches;
+        return config.onStartShouldSetPanResponderCapture !== undefined ?
+          config.onStartShouldSetPanResponderCapture(e, gestureState) : false;
+      },
+
+      onMoveShouldSetResponderCapture: function(e) {
+        var touchHistory = e.touchHistory;
+        // Responder system incorrectly dispatches should* to current responder
+        // Filter out any touch moves past the first one - we would have
+        // already processed multi-touch geometry during the first event.
+        if (gestureState._accountsForMovesUpTo === touchHistory.mostRecentTimeStamp) {
+          return false;
+        }
+        PanResponder._updateGestureStateOnMove(gestureState, touchHistory);
+        return config.onMoveShouldSetPanResponderCapture ?
+          config.onMoveShouldSetPanResponderCapture(e, gestureState) : false;
+      },
+
+      onResponderGrant: function(e) {
+        gestureState.x0 = currentCentroidX(e.touchHistory);
+        gestureState.y0 = currentCentroidY(e.touchHistory);
+        gestureState.dx = 0;
+        gestureState.dy = 0;
+        config.onPanResponderGrant && config.onPanResponderGrant(e, gestureState);
+        // TODO: t7467124 investigate if this can be removed
+        return config.onShouldBlockNativeResponder === undefined ? true :
+          config.onShouldBlockNativeResponder();
+      },
+
+      onResponderReject: function(e) {
+        config.onPanResponderReject && config.onPanResponderReject(e, gestureState);
+      },
+
+      onResponderRelease: function(e) {
+        config.onPanResponderRelease && config.onPanResponderRelease(e, gestureState);
+        PanResponder._initializeGestureState(gestureState);
+      },
+
+      onResponderStart: function(e) {
+        var touchHistory = e.touchHistory;
+        gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
+        config.onPanResponderStart && config.onPanResponderStart(e, gestureState);
+      },
+
+      onResponderMove: function(e) {
+        var touchHistory = e.touchHistory;
+        // Guard against the dispatch of two touch moves when there are two
+        // simultaneously changed touches.
+        if (gestureState._accountsForMovesUpTo === touchHistory.mostRecentTimeStamp) {
+          return;
+        }
+        // Filter out any touch moves past the first one - we would have
+        // already processed multi-touch geometry during the first event.
+        PanResponder._updateGestureStateOnMove(gestureState, touchHistory);
+        config.onPanResponderMove && config.onPanResponderMove(e, gestureState);
+      },
+
+      onResponderEnd: function(e) {
+        var touchHistory = e.touchHistory;
+        gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
+        config.onPanResponderEnd && config.onPanResponderEnd(e, gestureState);
+      },
+
+      onResponderTerminate: function(e) {
+        config.onPanResponderTerminate &&
+          config.onPanResponderTerminate(e, gestureState);
+        PanResponder._initializeGestureState(gestureState);
+      },
+
+      onResponderTerminationRequest: function(e) {
+        return config.onPanResponderTerminationRequest === undefined ? true :
+          config.onPanResponderTerminationRequest(e, gestureState);
+      },
+    };
+    return {panHandlers: panHandlers};
+  },
+};
+
+module.exports = PanResponder;

src/apis/PixelRatio/__tests__/index-test.js

@@ -0,0 +1,5 @@
+/* eslint-env jasmine, jest */
+
+describe('apis/PixelRatio', () => {
+  test.skip('NO TEST COVERAGE', () => {});
+});

src/apis/PixelRatio/index.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2015-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * @flow
+ */
+
+import Dimensions from '../Dimensions';
+
+/**
+ * PixelRatio gives access to the device pixel density.
+ */
+class PixelRatio {
+  /**
+   * Returns the device pixel density.
+   */
+  static get(): number {
+    return Dimensions.get('window').scale;
+  }
+
+  /**
+   * No equivalent for Web
+   */
+  static getFontScale(): number {
+    return Dimensions.get('window').fontScale || PixelRatio.get();
+  }
+
+  /**
+   * Converts a layout size (dp) to pixel size (px).
+   * Guaranteed to return an integer number.
+   */
+  static getPixelSizeForLayoutSize(layoutSize: number): number {
+    return Math.round(layoutSize * PixelRatio.get());
+  }
+
+  /**
+   * 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.
+   */
+  static roundToNearestPixel(layoutSize: number): number {
+    const ratio = PixelRatio.get();
+    return Math.round(layoutSize * ratio) / ratio;
+  }
+}
+
+module.exports = PixelRatio;

src/apis/Platform/index.js

@@ -0,0 +1,6 @@
+const Platform = {
+  OS: 'web',
+  select: (obj: Object) => obj.web
+};
+
+module.exports = Platform;

src/apis/StyleSheet/StyleSheetValidation.js

@@ -0,0 +1,81 @@
+/* eslint-disable */
+/**
+ * Copyright (c) 2016-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+
+ * @flow
+ */
+
+import { PropTypes } from 'react'
+import ImageStylePropTypes from '../../components/Image/ImageStylePropTypes'
+import ReactPropTypeLocations from 'react/lib/ReactPropTypeLocations'
+import ReactPropTypesSecret from 'react/lib/ReactPropTypesSecret'
+import TextStylePropTypes from '../../components/Text/TextStylePropTypes'
+import ViewStylePropTypes from '../../components/View/ViewStylePropTypes'
+import warning from 'fbjs/lib/warning'
+
+class StyleSheetValidation {
+  static validateStyleProp(prop, style, caller) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (allStylePropTypes[prop] === undefined) {
+        var message1 = '"' + prop + '" is not a valid style property.';
+        var message2 = '\nValid style props: ' +
+          JSON.stringify(Object.keys(allStylePropTypes).sort(), null, '  ');
+        styleError(message1, style, caller, message2);
+      } else {
+        var error = allStylePropTypes[prop](
+          style,
+          prop,
+          caller,
+          ReactPropTypeLocations.prop,
+          null,
+          ReactPropTypesSecret
+        );
+        if (error) {
+          styleError(error.message, style, caller);
+        }
+      }
+    }
+  }
+
+  static validateStyle(name, styles) {
+    if (process.env.NODE_ENV !== 'production') {
+      for (var prop in styles[name]) {
+        StyleSheetValidation.validateStyleProp(prop, styles[name], 'StyleSheet ' + name);
+      }
+    }
+  }
+
+  static addValidStylePropTypes(stylePropTypes) {
+    for (var key in stylePropTypes) {
+      allStylePropTypes[key] = stylePropTypes[key];
+    }
+  }
+}
+
+var styleError = function(message1, style, caller?, message2?) {
+  warning(
+    false,
+    message1 + '\n' + (caller || '<<unknown>>') + ': ' +
+    JSON.stringify(style, null, '  ') + (message2 || '')
+  );
+};
+
+var allStylePropTypes = {};
+
+StyleSheetValidation.addValidStylePropTypes(ImageStylePropTypes)
+StyleSheetValidation.addValidStylePropTypes(TextStylePropTypes)
+StyleSheetValidation.addValidStylePropTypes(ViewStylePropTypes)
+StyleSheetValidation.addValidStylePropTypes({
+  appearance: PropTypes.string,
+  clear: PropTypes.string,
+  cursor: PropTypes.string,
+  display: PropTypes.string,
+  float: PropTypes.oneOf([ 'left', 'none', 'right' ]),
+  font: PropTypes.string, /* @private */
+  listStyle: PropTypes.string,
+  WebkitOverflowScrolling: PropTypes.string /* @private */
+})
+
+module.exports = StyleSheetValidation

src/apis/StyleSheet/__tests__/__snapshots__/expandStyle-test.js.snap

@@ -0,0 +1,18 @@
+exports[`apis/StyleSheet/expandStyle shortform -> longform 1`] = `
+Object {
+  "borderBottomColor": "white",
+  "borderBottomStyle": "solid",
+  "borderBottomWidth": "1px",
+  "borderLeftStyle": "solid",
+  "borderLeftWidth": "0px",
+  "borderRightStyle": "solid",
+  "borderRightWidth": "0px",
+  "borderTopStyle": "solid",
+  "borderTopWidth": "0px",
+  "boxSizing": "border-box",
+  "marginBottom": "25px",
+  "marginLeft": "10px",
+  "marginRight": "10px",
+  "marginTop": "50px",
+}
+`;

src/apis/StyleSheet/__tests__/__snapshots__/i18nStyle-test.js.snap

@@ -0,0 +1,107 @@
+exports[`apis/StyleSheet/i18nStyle LTR mode does not auto-flip 1`] = `
+Object {
+  "borderBottomLeftRadius": 20,
+  "borderBottomRightRadius": "2rem",
+  "borderLeftColor": "red",
+  "borderLeftStyle": "solid",
+  "borderLeftWidth": 5,
+  "borderRightColor": "blue",
+  "borderRightStyle": "dotted",
+  "borderRightWidth": 6,
+  "borderTopLeftRadius": 10,
+  "borderTopRightRadius": "1rem",
+  "left": 1,
+  "marginLeft": 7,
+  "marginRight": 8,
+  "paddingLeft": 9,
+  "paddingRight": 10,
+  "right": 2,
+  "textAlign": "left",
+  "textShadowOffset": Object {
+    "height": 10,
+    "width": "1rem",
+  },
+  "writingDirection": "ltr",
+}
+`;
+
+exports[`apis/StyleSheet/i18nStyle LTR mode normalizes properties 1`] = `
+Object {
+  "borderBottomLeftRadius": 20,
+  "borderBottomRightRadius": "2rem",
+  "borderLeftColor": "red",
+  "borderLeftStyle": "solid",
+  "borderLeftWidth": 5,
+  "borderRightColor": "blue",
+  "borderRightStyle": "dotted",
+  "borderRightWidth": 6,
+  "borderTopLeftRadius": 10,
+  "borderTopRightRadius": "1rem",
+  "left": 1,
+  "marginLeft": 7,
+  "marginRight": 8,
+  "paddingLeft": 9,
+  "paddingRight": 10,
+  "right": 2,
+  "textAlign": "left",
+  "textShadowOffset": Object {
+    "height": 10,
+    "width": "1rem",
+  },
+  "writingDirection": "ltr",
+}
+`;
+
+exports[`apis/StyleSheet/i18nStyle RTL mode does auto-flip 1`] = `
+Object {
+  "borderBottomLeftRadius": "2rem",
+  "borderBottomRightRadius": 20,
+  "borderLeftColor": "blue",
+  "borderLeftStyle": "dotted",
+  "borderLeftWidth": 6,
+  "borderRightColor": "red",
+  "borderRightStyle": "solid",
+  "borderRightWidth": 5,
+  "borderTopLeftRadius": "1rem",
+  "borderTopRightRadius": 10,
+  "left": 2,
+  "marginLeft": 8,
+  "marginRight": 7,
+  "paddingLeft": 10,
+  "paddingRight": 9,
+  "right": 1,
+  "textAlign": "right",
+  "textShadowOffset": Object {
+    "height": 10,
+    "width": "-1rem",
+  },
+  "writingDirection": "rtl",
+}
+`;
+
+exports[`apis/StyleSheet/i18nStyle RTL mode normalizes properties 1`] = `
+Object {
+  "borderBottomLeftRadius": 20,
+  "borderBottomRightRadius": "2rem",
+  "borderLeftColor": "red",
+  "borderLeftStyle": "solid",
+  "borderLeftWidth": 5,
+  "borderRightColor": "blue",
+  "borderRightStyle": "dotted",
+  "borderRightWidth": 6,
+  "borderTopLeftRadius": 10,
+  "borderTopRightRadius": "1rem",
+  "left": 1,
+  "marginLeft": 7,
+  "marginRight": 8,
+  "paddingLeft": 9,
+  "paddingRight": 10,
+  "right": 2,
+  "textAlign": "left",
+  "textShadowOffset": Object {
+    "height": 10,
+    "width": "-1rem",
+  },
+  "writingDirection": "ltr",
+}
+`;

src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,10 @@
+exports[`apis/StyleSheet resolve 1`] = `
+Object {
+  "className": "test __style_df __style_pebn",
+  "style": Object {
+    "display": null,
+    "opacity": 1,
+    "pointerEvents": null,
+  },
+}
+`;