0.0.65

The 'createDOMElement' function wasn't pulling 'style' out of the
props. A change to the logic that sets DOM props meant that if
'StyleRegistry.resolve' didn't return a 'style' object, the React Native
styles would be passed through to the underlying DOM node.

Fix #315

.babelrc

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

.eslintrc

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

.gitignore

@@ -1,3 +1,4 @@
 /dist
 /dist-examples
+/dist-performance
 /node_modules

.travis.yml

@@ -5,5 +5,4 @@ before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
 script:
-  - npm run lint
   - npm test

CONTRIBUTING.md

@@ -1,7 +1,5 @@
 # Contributing
 
-We are open to, and grateful for, any contributions made by the community.
-
 ## Reporting Issues and Asking Questions
 
 Before opening an issue, please search the [issue
@@ -19,12 +17,24 @@ Fork, then clone the repo:
 git clone https://github.com/your-username/react-native-web.git
 ```
 
+Install dependencies (requires [yarn](https://yarnpkg.com/en/docs/install):
+
+```
+yarn
+```
+
 Run the examples:
 
 ```
 npm run examples
 ```
 
+Run the benchmarks in a browser by opening `./performance/index.html` after running:
+
+```
+npm run build:performance
+```
+
 ### Building
 
 ```
@@ -51,7 +61,7 @@ To continuously watch and run tests, run the following:
 npm run test:watch
 ```
 
-To perform linting, run the following:
+To perform only linting, run the following:
 
 ```
 npm run lint

README.md

@@ -7,46 +7,100 @@
 
 Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
 
+[npm-image]: https://badge.fury.io/js/react-native-web.svg
+[npm-url]: https://npmjs.org/package/react-native-web
+[react-native-url]: https://facebook.github.io/react-native/
+[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
+[travis-url]: https://travis-ci.org/necolas/react-native-web
+
 ## Overview
 
 "React Native for Web" is a project to bring React Native's building blocks and
-touch handling to the Web.
+touch handling to the Web. [Read more](#why).
 
-React Native – unlike React DOM – is a comprehensive UI framework for
-application developers. React Native's components are higher-level building
-blocks than those provided by React DOM. React Native also provides
-platform-agnostic JavaScript APIs for animating and styling components,
-responding to touch events, and interacting with the host environment.
-
-Bringing the React Native APIs and components to the Web allows React Native
-components to be run on the Web platform. But it also solves several problems
-facing the React DOM ecosystem: no framework-level animation or styling
-solution; difficulty sharing and composing UI components (without pulling in
-their build or runtime dependencies); and the lack of high-level base
-components.
+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
+npm install --save react@15.4 react-native-web
 ```
 
 Read the [Client and Server rendering](docs/guides/rendering.md) guide.
 
-You can also bootstrap a standard React Native project structure for web by
-using [react-native-web-starter](https://github.com/grabcode/react-native-web-starter).
+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).
 
-## Examples
+## Documentation
 
-Demos:
+Guides:
 
-* [React Native for Web: Playground](http://codepen.io/necolas/pen/PZzwBR).
-* [TicTacToe](http://codepen.io/necolas/full/eJaLZd/)
-* [2048](http://codepen.io/necolas/full/wMVvxj/)
+* [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)
 
-Sample:
+Exported modules:
+
+* Components
+  * [`ActivityIndicator`](docs/components/ActivityIndicator.md)
+  * [`Button`](docs/components/Button.md)
+  * [`Image`](docs/components/Image.md)
+  * [`ListView`](docs/components/ListView.md)
+  * [`ProgressBar`](docs/components/ProgressBar.md)
+  * [`ScrollView`](docs/components/ScrollView.md)
+  * [`Switch`](docs/components/Switch.md)
+  * [`Text`](docs/components/Text.md)
+  * [`TextInput`](docs/components/TextInput.md)
+  * [`TouchableHighlight`](http://facebook.github.io/react-native/releases/0.22/docs/touchablehighlight.html) (mirrors React Native)
+  * [`TouchableOpacity`](http://facebook.github.io/react-native/releases/0.22/docs/touchableopacity.html) (mirrors React Native)
+  * [`TouchableWithoutFeedback`](docs/components/TouchableWithoutFeedback.md)
+  * [`View`](docs/components/View.md)
+* APIs
+  * [`Animated`](http://facebook.github.io/react-native/releases/0.20/docs/animated.html) (mirrors React Native)
+  * [`AppRegistry`](docs/apis/AppRegistry.md)
+  * [`AppState`](docs/apis/AppState.md)
+  * [`AsyncStorage`](docs/apis/AsyncStorage.md)
+  * [`Clipboard`](docs/apis/Clipboard.md)
+  * [`Dimensions`](docs/apis/Dimensions.md)
+  * [`I18nManager`](docs/apis/I18nManager.md)
+  * [`NativeMethods`](docs/apis/NativeMethods.md)
+  * [`NetInfo`](docs/apis/NetInfo.md)
+  * [`PanResponder`](http://facebook.github.io/react-native/releases/0.20/docs/panresponder.html#content) (mirrors React Native)
+  * [`PixelRatio`](docs/apis/PixelRatio.md)
+  * [`Platform`](docs/apis/Platform.md)
+  * [`StyleSheet`](docs/apis/StyleSheet.md)
+  * [`Vibration`](docs/apis/Vibration.md)
+
+<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 from 'react'
@@ -85,50 +139,14 @@ AppRegistry.registerComponent('MyApp', () => App)
 AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })
 ```
 
-## Documentation
+## Related projects
 
-Guides:
-
-* [Accessibility](docs/guides/accessibility.md)
-* [Client and server rendering](docs/guides/rendering.md)
-* [Direct manipulation](docs/guides/direct-manipulation.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)
-  * [`ScrollView`](docs/components/ScrollView.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)
-  * [`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)
+* [react-native-web-starter](https://github.com/grabcode/react-native-web-starter)
+* [react-native-web-player](https://github.com/dabbott/react-native-web-player)
+* [react-web](https://github.com/taobaofed/react-web)
+* [react-native-for-web](https://github.com/KodersLab/react-native-for-web)
+* [rhinos-app](https://github.com/rhinos-app/rhinos-app-dev)
 
 ## License
 
 React Native for Web is [BSD licensed](LICENSE).
-
-[npm-image]: https://badge.fury.io/js/react-native-web.svg
-[npm-url]: https://npmjs.org/package/react-native-web
-[react-native-url]: https://facebook.github.io/react-native/
-[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
-[travis-url]: https://travis-ci.org/necolas/react-native-web

docs/apis/AppRegistry.md

@@ -3,8 +3,7 @@
 `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
+`AppRegistry.runApplication` (see the [client and server rendering
 guide](../guides/rendering.md) for more details).
 
 To "stop" an application when a view should be destroyed, call
@@ -13,14 +12,11 @@ into `runApplication`. These should always be used as a pair.
 
 ## Methods
 
-(web) static **prerenderApplication**(appKey:string, appParameters: object)
+(web) static **getApplication**(appKey:string, appParameters: object)
 
-Renders the given application to an HTML string. Use this for server-side
-rendering. Return object is of type `{ html: string; style: string;
-styleElement: ReactComponent }`. `html` is the prerendered HTML, `style` is the
-prerendered style sheet, and `styleElement` is a React Component. It's
-recommended that you use `styleElement` to render the style sheet in an app
-shell.
+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>)
 

docs/apis/Clipboard.md

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

docs/apis/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/NetInfo.md

@@ -29,7 +29,7 @@ static **removeEventListener**(eventName: ChangeEventName, handler: Function)
 
 ## Properties
 
-**isConnected**
+**isConnected**: bool = true
 
 Available on all user agents. Asynchronously fetch a boolean to determine
 internet connectivity.

docs/apis/StyleSheet.md

@@ -2,8 +2,8 @@
 
 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 to
-[how style your application](docs/guides/style).
+outside of the render loop and are applied as inline styles. Read more about
+[how to style your application](../guides/style.md).
 
 ## Methods
 
@@ -15,9 +15,9 @@ Each key of the object passed to `create` must define a style object.
 
 Flattens an array of styles into a single style object.
 
-**render**: function
+**renderToString**: function
 
-Returns a React `<style>` element for use in server-side rendering.
+Returns a string of the stylesheet for use in server-side rendering.
 
 ## Properties
 

docs/components/ActivityIndicator.md

@@ -6,17 +6,17 @@
 
 **animating**: bool = true
 
-Whether to show the indicator (true, the default) or hide it (false).
+Whether to show the indicator or hide it.
 
-**color**: string = #999999
+**color**: string = '#1976D2'
 
-The foreground color of the spinner (default is gray).
+The foreground color of the spinner.
 
 **hidesWhenStopped**: bool = true
 
-Whether the indicator should hide when not animating (true by default).
+Whether the indicator should hide when not animating.
 
-**size**: oneOf('small, 'large')
+**size**: oneOf('small, 'large') | number = 'small'
 
 Size of the indicator. Small has a height of `20`, large has a height of `36`.
 

docs/components/Button.md

@@ -0,0 +1,39 @@
+# Button
+
+A basic button component. Supports a minimal level of customization. You can
+build your own custom button using `TouchableOpacity` or
+`TouchableNativeFeedback`.
+
+## Props
+
+**accessibilityLabel**: string
+
+Defines the text available to assistive technologies upon interaction with the
+element. (This is implemented using `aria-label`.)
+
+**color**: string
+
+Background color of the button.
+
+**disabled**: bool = false
+
+If true, disable all interactions for this component
+
+**onPress**: function
+
+This function is called on press.
+
+**title**: string
+
+Text to display inside the button.
+
+## Examples
+
+```js
+<Button
+  accessibilityLabel="Learn more about this purple button"
+  color="#841584"
+  onPress={onPressLearnMore}
+  title="Learn More"
+/>
+```

docs/components/Image.md

@@ -46,7 +46,7 @@ Invoked when load either succeeds or fails,
 
 Invoked on load start.
 
-**resizeMode**: oneOf('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'stretch'
+**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.
@@ -75,6 +75,23 @@ Example usage:
 <Image resizeMode={Image.resizeMode.contain} />
 ```
 
+## Methods
+
+static **getSize**(uri: string, success: (width, height) => {}, failure: function)
+
+Retrieve the width and height (in pixels) of an image prior to displaying it.
+This method can fail if the image cannot be found, or fails to download.
+
+(In order to retrieve the image dimensions, the image may first need to be
+loaded or downloaded, after which it will be cached. This means that in
+principle you could use this method to preload images, however it is not
+optimized for that purpose, and may in future be implemented in a way that does
+not fully load/download the image data.)
+
+static **prefetch**(url: string): Promise
+
+Prefetches a remote image for later use by downloading it.
+
 ## Examples
 
 ```js

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

@@ -38,6 +38,18 @@ which this `ScrollView` renders.
 Fires at most once per frame during scrolling. The frequency of the events can
 be contolled using the `scrollEventThrottle` prop.
 
+Invoked on scroll with the following event:
+
+```js
+{
+  nativeEvent: {
+    contentOffset: { x, y },
+    contentSize: { height, width },
+    layoutMeasurement: { height, width }
+  }
+}
+```
+
 **refreshControl**: element
 
 TODO
@@ -51,8 +63,8 @@ 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
+This controls how often the scroll event will be fired while scrolling (as a
+time interval in ms). A lower number yields better accuracy for code that is
 tracking the scroll position, but can lead to scroll performance problems. The
 default value is `0`, which means the scroll event will be sent only once each
 time the view is scrolled.
@@ -104,7 +116,7 @@ export default class ScrollViewExample extends Component {
         contentContainerStyle={styles.container}
         horizontal
         onScroll={(e) => this.onScroll(e)}
-        scrollEventThrottle={60}
+        scrollEventThrottle={100}
         style={styles.root}
       />
     )

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

@@ -68,14 +68,22 @@ Lets the user select the text.
 + `fontWeight`
 + `letterSpacing`
 + `lineHeight`
-+ `textAlign`
++ `textAlign`‡
 + `textAlignVertical`
 + `textDecorationLine`
-+ `textShadow`
++ `textOverflow`
++ `textRendering`
++ `textShadowColor`
++ `textShadowOffset`‡
++ `textShadowRadius`
 + `textTransform`
++ `unicodeBidi`
 + `whiteSpace`
 + `wordWrap`
-+ `writingDirection`
++ `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
 

docs/components/TextInput.md

@@ -6,12 +6,10 @@ such as auto-complete, auto-focus, placeholder text, and event callbacks.
 Note: some props are exclusive to or excluded from `multiline`.
 
 Unsupported React Native props:
-`autoCapitalize`,
-`autoCorrect`,
 `onEndEditing`,
-`onSubmitEditing`,
 `clearButtonMode` (ios),
 `enablesReturnKeyAutomatically` (ios),
+`placeholderTextColor`,
 `returnKeyType` (ios),
 `selectionState` (ios),
 `underlineColorAndroid` (android)
@@ -20,15 +18,37 @@ Unsupported React Native props:
 
 [...View props](./View.md)
 
-(web) **autoComplete**: bool = false
+**autoCapitalize**: oneOf('characters', 'none', 'sentences', 'words') = 'sentences'
 
-Indicates whether the value of the control can be automatically completed by the browser.
+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
+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.
@@ -87,29 +107,25 @@ as an argument to the callback handler.
 
 Callback that is called when the text input is focused.
 
-(web) **onSelectionChange**: function
+**onKeyPress**: function
 
-Callback that is called when the text input's selection changes. The following
-object is passed as an argument to the callback handler.
+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.
 
-```js
-{
-  selectionDirection,
-  selectionEnd,
-  selectionStart,
-  nativeEvent
-}
-```
+**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.
 
-**placeholderTextColor**: string
-
-The text color of the placeholder string.
-
 **secureTextEntry**: bool = false
 
 If true, the text input obscures the text entered so that sensitive text like
@@ -117,6 +133,10 @@ 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.
@@ -152,6 +172,10 @@ Clear the text from the underlying DOM input.
 
 Focus the underlying DOM input.
 
+**isFocused()**
+
+Returns `true` if the input is currently focused; `false` otherwise.
+
 ## Examples
 
 ```js

docs/components/View.md

@@ -108,10 +108,26 @@ from `style`.
 + `backgroundPosition`
 + `backgroundRepeat`
 + `backgroundSize`
-+ `borderColor`
-+ `borderRadius`
-+ `borderStyle`
-+ `borderWidth`
++ `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`
@@ -124,12 +140,12 @@ from `style`.
 + `flexWrap`
 + `height`
 + `justifyContent`
-+ `left`
++ `left`‡
 + `margin` (single value)
 + `marginBottom`
 + `marginHorizontal`
-+ `marginLeft`
-+ `marginRight`
++ `marginLeft`‡
++ `marginRight`‡
 + `marginTop`
 + `marginVertical`
 + `maxHeight`
@@ -144,20 +160,22 @@ from `style`.
 + `padding` (single value)
 + `paddingBottom`
 + `paddingHorizontal`
-+ `paddingLeft`
-+ `paddingRight`
++ `paddingLeft`‡
++ `paddingRight`‡
 + `paddingTop`
 + `paddingVertical`
 + `position`
-+ `right`
++ `right`‡
 + `top`
 + `transform`
-+ `transformMatrix`
 + `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

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/react-native.md

@@ -27,14 +27,48 @@ the `url-loader` to the webpack config:
 module.exports = {
   // ...
   module: {
-    loaders: {
-      test: /\.(gif|jpe?g|png|svg)$/,
-      loader: 'url-loader',
-      query: { name: '[name].[hash:16].[ext]' }
-    }
+    loaders: [
+      {
+        test: /\.(gif|jpe?g|png|svg)$/,
+        loader: 'url-loader',
+        query: { name: '[name].[hash:16].[ext]' }
+      }
+    ]
   }
+};
 ```
 
+## Dependencies
+
+Many OSS React Native packages are not compiled to ES5 before being published.
+This can result in webpack build errors. To avoid this issue you should
+configure webpack (or your bundler of choice) to run
+`babel-preset-react-native` over the necessary `node_module`. For example:
+
+```js
+// webpack.config.js
+
+module.exports = {
+  // ...
+  module: {
+    loaders: [
+      {
+        // transpile to ES5
+        test: /\.jsx?$/,
+        include: [
+          path.resolve(__dirname, 'src'),
+          path.resolve(__dirname, 'node_modules/react-native-something')
+        ],
+        loader: 'babel-loader',
+        query: { cacheDirectory: true }
+      }
+    ]
+  }
+};
+```
+
+Please refer to the webpack documentation for more information.
+
 ## Web-specific code
 
 Minor platform differences can use the `Platform` module.

docs/guides/rendering.md

@@ -16,8 +16,9 @@ module.exports = {
 }
 ```
 
-The `react-native-web` package also includes a `core` module that exports only
-`ReactNative`, `Image`, `StyleSheet`, `Text`, `TextInput`, and `View`.
+The `react-native-web` package also includes a `core` module that exports a
+subset of modules: `ReactNative`, `I18nManager`, `Platform`, `StyleSheet`,
+`Image`, `Text`, `TextInput`, `Touchable`, and `View`.
 
 ```js
 // webpack.config.js
@@ -43,12 +44,7 @@ import ReactNative from 'react-native'
 // component that renders the app
 const AppHeaderContainer = (props) => { /* ... */ }
 
-// DOM render
 ReactNative.render(<AppHeaderContainer />, document.getElementById('react-app-header'))
-
-// Server render
-ReactNative.renderToString(<AppHeaderContainer />)
-ReactNative.renderToStaticMarkup(<AppHeaderContainer />)
 ```
 
 Rendering using the `AppRegistry`:
@@ -63,12 +59,31 @@ const AppContainer = (props) => { /* ... */ }
 // register the app
 AppRegistry.registerComponent('App', () => AppContainer)
 
-// DOM render
 AppRegistry.runApplication('App', {
   initialProps: {},
   rootTag: document.getElementById('react-app')
 })
+```
+
+Setting `process.env.__REACT_NATIVE_DEBUG_ENABLED__` to `true` will expose some
+debugging logs. This can help track down when you're rendering without the
+performance benefit of cached styles.
+
+## Server-side rendering
+
+Rendering using the `AppRegistry`:
+
+```js
+import ReactDOMServer from 'react-dom/server'
+import ReactNative, { AppRegistry } from 'react-native'
+
+// component that renders the app
+const AppContainer = (props) => { /* ... */ }
+
+// register the app
+AppRegistry.registerComponent('App', () => AppContainer)
 
 // prerender the app
-const { html, styleElement } = AppRegistry.prerenderApplication('App', { initialProps })
+const { element, stylesheet } = AppRegistry.getApplication('App', { initialProps });
+const initialHTML = ReactDOMServer.renderToString(element);
 ```

docs/guides/style.md

@@ -1,8 +1,7 @@
 # Style
 
 React Native for Web relies on JavaScript to define styles for your
-application. Along with a novel JS-to-CSS conversion strategy, this allows you
-to avoid issues arising from the [7 deadly sins of
+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
@@ -32,10 +31,9 @@ const styles = StyleSheet.create({
 })
 ```
 
-Using `StyleSheet.create` is optional but provides some key advantages: styles
-are immutable in development, styles are converted to CSS rather than applied
-as inline styles, and styles are only created once for the application and not
-on every render.
+Using `StyleSheet.create` is optional but provides the best performance
+(`style` is resolved to CSS stylesheets). Avoid creating unregistered style
+objects.
 
 The attribute names and values are a subset of CSS. See the `style`
 documentation of individual components.
@@ -57,12 +55,6 @@ A common pattern is to conditionally add style based on a condition:
   styles.base,
   this.state.active && styles.active
 ]} />
-
-// or
-<View style={{
-  ...styles.base,
-  ...(this.state.active && styles.active)
-}} />
 ```
 
 ## Composing styles
@@ -140,51 +132,8 @@ 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 the events
-(e.g. `onFocus`). Pseudo-elements are not supported; elements should be used
-instead.
-
-## How it works
-
-Every call to `StyleSheet.create` extracts the unique _declarations_ and
-converts them to a unique CSS rule. This is sometimes referred to as "atomic
-CSS". All the core components map their `style` property-value pairs to the
-corresponding `className`'s.
-
-By doing this, the total size of the generated CSS is determined by the
-total number of unique declarations (rather than the total number of rules in
-the application), making it viable to inline the style sheet when pre-rendering
-on the server. Styles are updated if new module bundle are loaded asynchronously.
-
-JavaScript definition:
-
-```js
-const styles = StyleSheet.create({
-  heading: {
-    color: 'gray',
-    fontSize: '2rem'
-  },
-  text: {
-    color: 'gray',
-    fontSize: '1.25rem'
-  }
-})
-```
-
-CSS output:
-
-```css
-.__style1 { color: gray; }
-.__style2 { font-size: 2rem; }
-.__style3 { font-size: 1.25rem; }
-```
-
-Rendered HTML:
-
-```html
-<span className="__style1 __style2">Heading</span>
-<span className="__style1 __style3">Text</span>
-```
+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
 
@@ -194,27 +143,3 @@ You **do not** need to include a CSS reset or
 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`).
-
-```css
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color:rgba(0,0,0,0)
-}
-
-body {
-  margin: 0;
-}
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-```

examples/.storybook/webpack.config.js

@@ -1,6 +1,8 @@
 const path = require('path')
 const webpack = require('webpack')
 
+const DEV = process.env.NODE_ENV !== 'production';
+
 module.exports = {
   module: {
     loaders: [
@@ -19,13 +21,9 @@ module.exports = {
   },
   plugins: [
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+      'process.env.__REACT_NATIVE_DEBUG_ENABLED__': DEV
     }),
-    // 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: {

examples/ListView/ListViewExample.js

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

examples/TextInput/TextInputExample.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
-import { StyleSheet, TextInput, View } from 'react-native'
-
-storiesOf('<TextInput>', module)
-  .add('tbd', () => (
-    <View>
-      <TextInput
-        defaultValue='Default textInput'
-        keyboardType='default'
-        onBlur={(e) => { console.log('TextInput.onBlur', e) }}
-        onChange={(e) => { console.log('TextInput.onChange', e) }}
-        onChangeText={(e) => { console.log('TextInput.onChangeText', e) }}
-        onFocus={(e) => { console.log('TextInput.onFocus', e) }}
-        onSelectionChange={(e) => { console.log('TextInput.onSelectionChange', e) }}
-      />
-      <TextInput secureTextEntry style={styles.textInput} />
-      <TextInput defaultValue='read only' editable={false} style={styles.textInput} />
-      <TextInput
-        style={[ styles.textInput, { flex:1, height: 60, padding: 20, fontSize: 20, textAlign: 'center' } ]}
-        keyboardType='email-address' placeholder='you@domain.com' placeholderTextColor='red'
-      />
-      <TextInput keyboardType='numeric' style={styles.textInput} />
-      <TextInput keyboardType='phone-pad' style={styles.textInput} />
-      <TextInput defaultValue='https://delete-me' keyboardType='url' placeholder='https://www.some-website.com' selectTextOnFocus style={styles.textInput} />
-      <TextInput
-        defaultValue='default value'
-        maxNumberOfLines={10}
-        multiline
-        numberOfLines={5}
-        style={styles.textInput}
-      />
-    </View>
-  ))
-
-const styles = StyleSheet.create({
-  textInput: {
-    borderWidth: 1
-  }
-})

examples/apis/Clipboard/ClipboardExample.js

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

examples/apis/I18nManager/I18nManagerExample.js

@@ -0,0 +1,79 @@
+import { storiesOf } from '@kadira/storybook';
+import { I18nManager, StyleSheet, TouchableHighlight, Text, View } from 'react-native'
+import React, { Component } from 'react';
+
+class I18nManagerExample extends Component {
+  componentWillUnmount() {
+    I18nManager.setPreferredLanguageRTL(false)
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text accessibilityRole='heading' style={styles.welcome}>
+          LTR/RTL layout example!
+        </Text>
+        <Text style={styles.text}>
+          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', () => (
+    <I18nManagerExample />
+  ))

examples/apis/Linking/LinkingExample.js

@@ -0,0 +1,29 @@
+import { Linking, StyleSheet, Text, View } from 'react-native'
+import React, { Component } from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+class LinkingExample extends Component {
+  render() {
+    return (
+      <View>
+        <Text onPress={() => { Linking.openURL('https://mathiasbynens.github.io/rel-noopener/malicious.html'); }} style={styles.text}>
+          Linking.openURL (Expect: "The previous tab is safe and intact")
+        </Text>
+        <Text accessibilityRole='link' href='https://mathiasbynens.github.io/rel-noopener/malicious.html' style={styles.text} target='_blank'>
+          target="_blank" (Expect: "The previous tab is safe and intact")
+        </Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  text: {
+    marginVertical: 10
+  }
+});
+
+storiesOf('api: Linking', module)
+  .add('Safe linking', () => (
+    <LinkingExample />
+  ));

examples/apis/PanResponder/PanResponderExample.js

@@ -113,5 +113,5 @@ var styles = StyleSheet.create({
 });
 
 
-storiesOf('PanResponder', module)
+storiesOf('api: PanResponder', module)
   .add('example', () => <PanResponderExample />)

examples/components/ActivityIndicator/ActivityIndicatorExample.js

@@ -50,7 +50,8 @@ const ToggleAnimatingActivityIndicator = React.createClass({
     return (
       <ActivityIndicator
         animating={this.state.animating}
-        style={[styles.centering, {height: 80}]}
+        style={styles.centering}
+        hidesWhenStopped={this.props.hidesWhenStopped}
         size="large"
       />
     );
@@ -59,31 +60,15 @@ const ToggleAnimatingActivityIndicator = React.createClass({
 
 const examples = [
   {
-    title: 'Default (small, white)',
+    title: 'Default',
     render() {
       return (
         <ActivityIndicator
-          style={[styles.centering, styles.gray]}
-          color="white"
+          style={[styles.centering]}
         />
       );
     }
   },
-  {
-    title: 'Gray',
-    render() {
-      return (
-        <View>
-          <ActivityIndicator
-            style={[styles.centering]}
-          />
-          <ActivityIndicator
-            style={[styles.centering, {backgroundColor: '#eeeeee'}]}
-          />
-        </View>
-      );
-    }
-  },
   {
     title: 'Custom colors',
     render() {
@@ -137,17 +122,25 @@ const examples = [
   {
     title: 'Start/stop',
     render() {
-      return <ToggleAnimatingActivityIndicator />;
+      return (
+        <View style={[styles.horizontal, styles.centering]}>
+          <ToggleAnimatingActivityIndicator />
+          <ToggleAnimatingActivityIndicator hidesWhenStopped={false} />
+        </View>
+      );
     }
   },
   {
     title: 'Custom size',
     render() {
       return (
-        <ActivityIndicator
-          style={[styles.centering, {transform: [{scale: 1.5}]}]}
-          size="large"
-        />
+        <View style={[styles.horizontal, styles.centering]}>
+          <ActivityIndicator size={40} />
+          <ActivityIndicator
+            style={{ marginLeft: 20, transform: [ {scale: 1.5} ] }}
+            size="large"
+          />
+        </View>
       );
     }
   },
@@ -170,6 +163,6 @@ const styles = StyleSheet.create({
 });
 
 examples.forEach((example) => {
-  storiesOf('<ActivityIndicator>', module)
+  storiesOf('component: ActivityIndicator', module)
     .add(example.title, () => example.render())
 })

examples/components/Button/ButtonExample.js

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

examples/components/Image/ImageExample.js

@@ -28,10 +28,9 @@ import { ActivityIndicator, Image, Platform, StyleSheet, Text, View } from 'reac
 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);
+const IMAGE_PREFETCH_URL = 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
+var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
 
-/*
 var NetworkImageCallbackExample = React.createClass({
   getInitialState: function() {
     return {
@@ -88,7 +87,6 @@ var NetworkImageCallbackExample = React.createClass({
     });
   }
 });
-*/
 
 var NetworkImageExample = React.createClass({
   getInitialState: function() {
@@ -118,7 +116,6 @@ var NetworkImageExample = React.createClass({
   }
 });
 
-/*
 var ImageSizeExample = React.createClass({
   getInitialState: function() {
     return {
@@ -133,24 +130,25 @@ var ImageSizeExample = React.createClass({
   },
   render: function() {
     return (
-      <View style={{flexDirection: 'row'}}>
-        <Image
-          style={{
-            width: 60,
-            height: 60,
-            backgroundColor: 'transparent',
-            marginRight: 10,
-          }}
-          source={this.props.source} />
+      <View>
         <Text>
           Actual dimensions:{'\n'}
-          Width: {this.state.width}, Height: {this.state.height}
+          width: {this.state.width}, height: {this.state.height}
         </Text>
+        <Image
+          source={this.props.source}
+          style={{
+            backgroundColor: '#eee',
+            height: 227,
+            marginTop: 10,
+            width: 323
+          }}
+        />
       </View>
     );
   },
 });
-*/
+
 /*
 var MultipleSourcesExample = React.createClass({
   getInitialState: function() {
@@ -218,7 +216,7 @@ const examples = [
     render: function() {
       return (
         <Image
-          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
+          source={{ uri: 'http://facebook.github.io/react/img/logo_og.png', width: 1200, height: 630 }}
           style={styles.base}
         />
       );
@@ -239,17 +237,17 @@ const examples = [
       );
     },
   },
-  /*
   {
     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}}/>
+        <NetworkImageCallbackExample
+          source={{uri: 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now()}}
+          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}
+        />
       );
     },
   },
-  */
   {
     title: 'Error Handler',
     render: function() {
@@ -263,7 +261,7 @@ const examples = [
     title: 'Image Download Progress',
     render: function() {
       return (
-        <NetworkImageExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
+        <NetworkImageExample source={{uri: 'http://origami.design/public/images/bird-logo.png?r=1'}}/>
       );
     },
     platform: 'ios',
@@ -406,6 +404,7 @@ const examples = [
       );
     },
   },
+  /*
   {
     title: 'Tint Color',
     description: 'The `tintColor` style prop changes all the non-alpha ' +
@@ -456,6 +455,7 @@ const examples = [
       );
     },
   },
+  */
   {
     title: 'Resize Mode',
     description: 'The `resizeMode` style prop controls how the image is ' +
@@ -565,14 +565,12 @@ const examples = [
     platform: 'ios',
   },
   */
-  /*
   {
     title: 'Image Size',
     render: function() {
-      return <ImageSizeExample source={fullImage} />;
+      return <ImageSizeExample source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Chestnut-mandibled_Toucan.jpg' }} />;
     },
   },
-  */
   /*
   {
     title: 'MultipleSourcesExample',
@@ -649,7 +647,7 @@ var styles = StyleSheet.create({
 });
 
 examples.forEach((example) => {
-  storiesOf('<Image>', module)
-    .addDecorator((renderStory) => <View>{renderStory()}</View>)
+  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,80 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import { ListView, StyleSheet, Text, View } from 'react-native';
+
+const generateData = (length) => Array.from({ length }).map((item, i) => i);
+const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
+
+storiesOf('component: ListView', module)
+  .add('vertical', () => (
+    <View style={styles.scrollViewContainer}>
+      <ListView
+        contentContainerStyle={styles.scrollViewContentContainerStyle}
+        dataSource={dataSource.cloneWithRows(generateData(100))}
+        initialListSize={100}
+        // eslint-disable-next-line react/jsx-no-bind
+        onScroll={(e) => { console.log('ScrollView.onScroll', e); } }
+        // eslint-disable-next-line react/jsx-no-bind
+        renderRow={(row) => (
+          <View><Text>{row}</Text></View>
+        )}
+        scrollEventThrottle={1000} // 1 event per second
+        style={styles.scrollViewStyle}
+      />
+    </View>
+  ))
+  .add('incremental rendering - large pageSize', () => (
+    <View style={styles.scrollViewContainer}>
+      <ListView
+        contentContainerStyle={styles.scrollViewContentContainerStyle}
+        dataSource={dataSource.cloneWithRows(generateData(5000))}
+        initialListSize={100}
+        // eslint-disable-next-line react/jsx-no-bind
+        onScroll={(e) => { console.log('ScrollView.onScroll', e); } }
+        pageSize={50}
+        // eslint-disable-next-line react/jsx-no-bind
+        renderRow={(row) => (
+          <View><Text>{row}</Text></View>
+        )}
+        scrollEventThrottle={1000} // 1 event per second
+        style={styles.scrollViewStyle}
+      />
+    </View>
+  ))
+  .add('incremental rendering - small pageSize', () => (
+    <View style={styles.scrollViewContainer}>
+      <ListView
+        contentContainerStyle={styles.scrollViewContentContainerStyle}
+        dataSource={dataSource.cloneWithRows(generateData(5000))}
+        initialListSize={5}
+        // eslint-disable-next-line react/jsx-no-bind
+        onScroll={(e) => { console.log('ScrollView.onScroll', e); } }
+        pageSize={1}
+        // eslint-disable-next-line react/jsx-no-bind
+        renderRow={(row) => (
+          <View><Text>{row}</Text></View>
+        )}
+        scrollEventThrottle={1000} // 1 event per second
+        style={styles.scrollViewStyle}
+      />
+    </View>
+  ));
+
+const styles = StyleSheet.create({
+  box: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    borderWidth: 1
+  },
+  scrollViewContainer: {
+    height: '200px',
+    width: 300
+  },
+  scrollViewStyle: {
+    borderWidth: '1px'
+  },
+  scrollViewContentContainerStyle: {
+    backgroundColor: '#eee',
+    padding: '10px'
+  }
+});

examples/components/ProgressBar/ProgressBarExample.js

@@ -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

@@ -1,19 +1,21 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
-import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { action, storiesOf } from '@kadira/storybook';
+import { ScrollView, StyleSheet, Text, TouchableHighlight, View } from 'react-native'
 
-storiesOf('<ScrollView>', module)
+const onScroll = action('ScrollView.onScroll');
+
+storiesOf('component: ScrollView', module)
   .add('vertical', () => (
     <View style={styles.scrollViewContainer}>
       <ScrollView
         contentContainerStyle={styles.scrollViewContentContainerStyle}
-        onScroll={e => console.log('ScrollView.onScroll', e)}
-        scrollEventThrottle={1} // 1 event per second
+        onScroll={onScroll}
+        scrollEventThrottle={1000} // 1 event per second
         style={styles.scrollViewStyle}
       >
         {Array.from({ length: 50 }).map((item, i) => (
           <View key={i} style={styles.box}>
-            <Text>{i}</Text>
+            <TouchableHighlight onPress={() => {}}><Text>{i}</Text></TouchableHighlight>
           </View>
         ))}
       </ScrollView>
@@ -24,8 +26,8 @@ storiesOf('<ScrollView>', module)
       <ScrollView
         contentContainerStyle={styles.scrollViewContentContainerStyle}
         horizontal
-        onScroll={e => console.log('ScrollView.onScroll', e)}
-        scrollEventThrottle={1} // 1 event per second
+        onScroll={onScroll}
+        scrollEventThrottle={16} // ~60 events per second
         style={styles.scrollViewStyle}
       >
         {Array.from({ length: 50 }).map((item, i) => (
@@ -39,7 +41,6 @@ storiesOf('<ScrollView>', module)
 
 const styles = StyleSheet.create({
   box: {
-    alignItems: 'center',
     flexGrow: 1,
     justifyContent: 'center',
     borderWidth: 1
@@ -49,9 +50,10 @@ const styles = StyleSheet.create({
     width: 300
   },
   scrollViewStyle: {
-    borderWidth: '1px'
+    borderWidth: 1
   },
   scrollViewContentContainerStyle: {
-    padding: '10px'
+    backgroundColor: '#eee',
+    padding: 10
   }
 })

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

@@ -79,7 +79,7 @@ const examples = [
   title: 'Wrap',
   render: function() {
     return (
-      <Text>
+      <Text style={{ WebkitFontSmoothing: 'antialiased' }}>
         The text should wrap if it goes on multiple lines. See, this is going to
         the next line.
       </Text>
@@ -271,7 +271,7 @@ const examples = [
         <Text>
           auto (default) - english LTR
         </Text>
-        <Text style={{ writingDirection: 'rtl' }}>
+        <Text style={{ writingDirection$noI18n: 'rtl' }}>
           أحب اللغة العربية auto (default) - arabic RTL
         </Text>
         <Text style={{textAlign: 'left'}}>
@@ -466,7 +466,7 @@ var styles = StyleSheet.create({
 });
 
 examples.forEach((example) => {
-  storiesOf('<Text>', module)
+  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 style={{ alignItems: 'center' }}>
+        <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, { maxWidth: 200 } ]}
+        />
+        <Text style={styles.eventLabel}>
+          {this.state.curText}{'\n'}
+          (prev: {this.state.prevText}){'\n'}
+          (prev2: {this.state.prev2Text}){'\n'}
+          (prev3: {this.state.prev3Text})
+        </Text>
+      </View>
+    );
+  }
+}
+
+class AutoExpandingTextInput extends React.Component {
+  state: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: 'React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.',
+      height: 0,
+    };
+  }
+  render() {
+    return (
+      <TextInput
+        {...this.props}
+        multiline={true}
+        onChangeText={(text) => {
+          this.setState({text});
+        }}
+        onContentSizeChange={(event) => {
+          this.setState({height: event.nativeEvent.contentSize.height});
+        }}
+        style={[styles.default, {height: Math.max(35, this.state.height)}]}
+        value={this.state.text}
+      />
+    );
+  }
+}
+
+class RewriteExample extends React.Component {
+  state: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {text: ''};
+  }
+  render() {
+    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

@@ -307,11 +307,11 @@ var TouchableDisabled = React.createClass({
   render: function() {
     return (
       <View>
-        <TouchableOpacity disabled={true} style={[styles.row, styles.block]}>
+        <TouchableOpacity disabled={true} style={[styles.row, styles.block]} onPress={action('TouchableOpacity')}>
           <Text style={styles.disabledButton}>Disabled TouchableOpacity</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity disabled={false} style={[styles.row, styles.block]}>
+        <TouchableOpacity disabled={false} style={[styles.row, styles.block]} onPress={action('TouchableOpacity')}>
           <Text style={styles.button}>Enabled TouchableOpacity</Text>
         </TouchableOpacity>
 
@@ -321,7 +321,7 @@ var TouchableDisabled = React.createClass({
           animationVelocity={0}
           underlayColor="rgb(210, 230, 255)"
           style={[styles.row, styles.block]}
-          onPress={() => console.log('custom THW text - highlight')}>
+          onPress={action('TouchableHighlight')}>
           <Text style={styles.disabledButton}>
             Disabled TouchableHighlight
           </Text>
@@ -332,7 +332,7 @@ var TouchableDisabled = React.createClass({
           animationVelocity={0}
           underlayColor="rgb(210, 230, 255)"
           style={[styles.row, styles.block]}
-          onPress={() => console.log('custom THW text - highlight')}>
+          onPress={action('TouchableHighlight')}>
           <Text style={styles.button}>
             Enabled TouchableHighlight
           </Text>
@@ -445,6 +445,6 @@ var styles = StyleSheet.create({
 });
 
 examples.forEach((example) => {
-  storiesOf('<Touchable*>', module)
+  storiesOf('component: Touchable*', module)
     .add(example.title, () => example.render())
 })

examples/components/View/ViewExample.js

@@ -31,6 +31,17 @@ var styles = StyleSheet.create({
     borderColor: '#000033',
     borderWidth: 1,
   },
+  shadowBox: {
+    width: 100,
+    height: 100,
+    borderWidth: 2,
+  },
+  shadow: {
+    shadowOpacity: 0.5,
+    shadowColor: 'red',
+    shadowRadius: 3,
+    shadowOffset: { width: 3, height: 3 },
+  },
   zIndex: {
     justifyContent: 'space-around',
     width: 100,
@@ -242,9 +253,22 @@ const examples = [
       return <ZIndexExample />;
     },
   },
+  {
+    title: 'Basic shadow',
+    render() {
+      return <View style={[ styles.shadowBox, styles.shadow ]} />;
+    }
+  },
+  {
+    title: 'Shaped shadow',
+    description: 'borderRadius: 50',
+    render() {
+      return <View style={[ styles.shadowBox, styles.shadow, {borderRadius: 50} ]} />;
+    }
+  }
 ];
 
 examples.forEach((example) => {
-  storiesOf('<View>', module)
+  storiesOf('component: View', module)
     .add(example.title, () => example.render())
 })

examples/components/View/ViewTransformsExample.js

@@ -281,6 +281,6 @@ const examples = [
 ];
 
 examples.forEach((example) => {
-  storiesOf('<View> transforms', module)
+  storiesOf('component: View (transforms)', module)
     .add(example.title, () => example.render())
 })

examples/demos/Game2048/Game2048.js

@@ -23,7 +23,7 @@ var {
   AppRegistry,
   StyleSheet,
   Text,
-  TouchableBounce,
+  TouchableOpacity,
   View,
 } = ReactNative;
 
@@ -139,9 +139,9 @@ class GameEndOverlay extends React.Component {
     return (
       <View style={styles.overlay}>
         <Text style={styles.overlayMessage}>{message}</Text>
-        <TouchableBounce onPress={this.props.onRestart} style={styles.tryAgain}>
+        <TouchableOpacity onPress={this.props.onRestart} style={styles.tryAgain}>
           <Text style={styles.tryAgainText}>Try Again?</Text>
-        </TouchableBounce>
+        </TouchableOpacity>
       </View>
     );
   }

examples/demos/Game2048/Game2048Example.js

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

examples/demos/TicTacToe/TicTacToe.js

@@ -113,7 +113,7 @@ var Cell = React.createClass({
       case 2:
         return styles.cellTextO;
       default:
-        return {};
+        return null;
     }
   },
 

examples/demos/TicTacToe/TicTacToeExample.js

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

karma.config.js

@@ -1,62 +0,0 @@
-const webpack = require('webpack')
-
-const testEntry = 'src/tests.webpack.js'
-
-module.exports = function (config) {
-  config.set({
-    browsers: process.env.TRAVIS ? [ 'Firefox' ] : [ 'Chrome' ],
-    browserNoActivityTimeout: 60000,
-    client: {
-      captureConsole: true,
-      mocha: { ui: 'tdd' },
-      useIframe: true
-    },
-    files: [
-      testEntry
-    ],
-    frameworks: [ 'mocha' ],
-    plugins: [
-      'karma-chrome-launcher',
-      'karma-firefox-launcher',
-      'karma-mocha',
-      'karma-mocha-reporter',
-      'karma-sourcemap-loader',
-      'karma-webpack'
-    ],
-    preprocessors: {
-      [testEntry]: [ 'webpack', 'sourcemap' ]
-    },
-    reporters: process.env.TRAVIS ? [ 'dots' ] : [ 'mocha' ],
-    singleRun: true,
-    webpack: {
-      devtool: 'inline-source-map',
-      // required by 'enzyme'
-      externals: {
-        'cheerio': 'window',
-        'react/addons': true,
-        'react/lib/ExecutionEnvironment': true,
-        'react/lib/ReactContext': true
-      },
-      module: {
-        loaders: [
-          {
-            test: /\.js$/,
-            exclude: /node_modules/,
-            loader: 'babel',
-            query: { cacheDirectory: true }
-          }
-        ]
-      },
-      plugins: [
-        new webpack.DefinePlugin({
-          'process.env': {
-            NODE_ENV: JSON.stringify('test')
-          }
-        })
-      ]
-    },
-    webpackServer: {
-      noInfo: true
-    }
-  })
-}

package.json

@@ -1,65 +1,66 @@
 {
   "name": "react-native-web",
-  "version": "0.0.41",
+  "version": "0.0.65",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/__tests__"
   ],
   "scripts": {
     "build": "del ./dist && mkdir dist && babel src -d dist --ignore **/__tests__",
     "build:examples": "build-storybook -o dist-examples -c ./examples/.storybook",
+    "build:performance": "cd performance && webpack",
     "build:umd": "webpack --config webpack.config.js --sort-assets-by --progress",
     "deploy:examples": "git checkout gh-pages && rm -rf ./storybook && mv dist-examples storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -",
-    "examples": "start-storybook -p 9001 -c ./examples/.storybook",
-    "lint": "eslint src",
+    "examples": "start-storybook -p 9001 -c ./examples/.storybook --dont-track",
+    "lint": "eslint performance src",
     "prepublish": "npm run build && npm run build:umd",
-    "test": "karma start karma.config.js",
-    "test:watch": "npm run test -- --no-single-run"
+    "test": "npm run lint && npm run test:jest",
+    "test:jest": "jest",
+    "test:watch": "npm run test:jest -- --watch"
   },
   "dependencies": {
-    "animated": "^0.1.3",
-    "babel-runtime": "^6.9.2",
-    "fbjs": "^0.8.1",
-    "inline-style-prefixer": "^2.0.0",
-    "lodash": "^4.13.1",
-    "react-dom": "^15.1.0",
-    "react-textarea-autosize": "^4.0.2",
+    "animated": "^0.1.5",
+    "array-find-index": "^1.0.2",
+    "asap": "^2.0.5",
+    "babel-runtime": "^6.20.0",
+    "debounce": "^1.0.0",
+    "deep-assign": "^2.0.0",
+    "fbjs": "^0.8.8",
+    "inline-style-prefixer": "^2.0.5",
+    "react-dom": "~15.4.1",
+    "react-textarea-autosize": "^4.0.4",
     "react-timer-mixin": "^0.13.3"
   },
   "devDependencies": {
-    "@kadira/storybook": "^1.38.0",
-    "babel-cli": "^6.10.1",
-    "babel-core": "^6.10.4",
-    "babel-eslint": "^6.1.0",
-    "babel-loader": "^6.2.4",
-    "babel-preset-react-native": "^1.9.0",
-    "del-cli": "^0.2.0",
-    "enzyme": "^2.3.0",
-    "eslint": "^2.12.0",
-    "eslint-config-standard": "^5.3.1",
-    "eslint-config-standard-react": "^2.4.0",
-    "eslint-plugin-promise": "^1.3.2",
-    "eslint-plugin-react": "^5.1.1",
-    "eslint-plugin-standard": "^1.3.2",
+    "@kadira/storybook": "^2.5.1",
+    "babel-cli": "^6.14.0",
+    "babel-core": "^6.21.0",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-react-remove-prop-types": "^0.2.11",
+    "babel-preset-react-native": "^1.9.1",
+    "del-cli": "^0.2.1",
+    "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",
-    "karma": "^0.13.22",
-    "karma-browserstack-launcher": "^1.0.1",
-    "karma-chrome-launcher": "^1.0.1",
-    "karma-firefox-launcher": "^1.0.0",
-    "karma-mocha": "^1.1.1",
-    "karma-mocha-reporter": "^2.0.4",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^2.5.3",
+    "jest": "^16.0.2",
+    "marky": "^1.1.1",
     "node-libs-browser": "^0.5.3",
-    "react": "^15.2.0",
-    "react-addons-test-utils": "^15.2.0",
+    "react": "~15.4.1",
+    "react-addons-test-utils": "~15.4.1",
+    "react-test-renderer": "~15.4.1",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.1"
+    "webpack": "^1.13.2",
+    "webpack-bundle-analyzer": "^1.5.3"
   },
   "peerDependencies": {
-    "react": "^15.1.0"
+    "react": "~15.4.1"
   },
   "author": "Nicolas Gallagher",
   "license": "BSD-3-Clause",
@@ -75,5 +76,9 @@
     "react-component",
     "react-native",
     "web"
-  ]
+  ],
+  "jest": {
+    "testEnvironment": "jsdom",
+    "timers": "fake"
+  }
 }

performance/benchmark.js

@@ -0,0 +1,65 @@
+import * as marky from 'marky';
+
+const fmt = (time) => `${Math.round(time * 100) / 100}ms`;
+
+const measure = (name, fn) => {
+  marky.mark(name);
+  fn();
+  const performanceMeasure = marky.stop(name);
+  return performanceMeasure;
+};
+
+const benchmark = ({ name, description, setup, teardown, task, runs }) => {
+  return new Promise((resolve) => {
+    const performanceMeasures = [];
+    let i = 0;
+
+    setup();
+    const first = measure('first', task);
+    teardown();
+
+    const done = () => {
+      const mean = performanceMeasures.reduce((sum, performanceMeasure) => {
+        return sum + performanceMeasure.duration;
+      }, 0) / runs;
+
+      const firstDuration = fmt(first.duration);
+      const meanDuration = fmt(mean);
+
+      console.log(`First: ${firstDuration}`);
+      console.log(`Mean: ${meanDuration}`);
+      console.groupEnd();
+      resolve(mean);
+    };
+
+    const a = () => {
+      setup();
+      window.requestAnimationFrame(b);
+    };
+
+    const b = () => {
+      performanceMeasures.push(measure('mean', task));
+      window.requestAnimationFrame(c);
+    };
+
+    const c = () => {
+      teardown();
+      window.requestAnimationFrame(d);
+    };
+
+    const d = () => {
+      i += 1;
+      if (i < runs) {
+        window.requestAnimationFrame(a);
+      } else {
+        window.requestAnimationFrame(done);
+      }
+    };
+
+    console.group(`[benchmark] ${name}`);
+    console.log(description);
+    window.requestAnimationFrame(a);
+  });
+};
+
+module.exports = benchmark;

performance/benchmarks/deepTree/createDeepTree.js

@@ -0,0 +1,88 @@
+import React, { Component, PropTypes } from 'react';
+
+const createDeepTree = ({ StyleSheet, View }, options = {}) => {
+  class DeepTree extends Component {
+    static propTypes = {
+      breadth: PropTypes.number.isRequired,
+      depth: PropTypes.number.isRequired,
+      id: PropTypes.number.isRequired,
+      wrap: PropTypes.number.isRequired
+    };
+
+    render() {
+      const { breadth, depth, id, wrap } = this.props;
+
+      let result = (
+        <View
+          style={[
+            styles.outer,
+            depth % 2 === 0 ? styles.even : styles.odd,
+            styles[`custom${id % 3}`]
+          ]}
+        >
+          {depth === 0 && (
+            <View
+              style={[
+                styles.terminal,
+                styles[`terminal${id % 3}`]
+              ]}
+            />
+          )}
+          {depth !== 0 && Array.from({ length: breadth }).map((el, i) => (
+            <DeepTree
+              breadth={breadth}
+              depth={depth - 1}
+              id={i}
+              key={i}
+              wrap={wrap}
+            />
+          ))}
+        </View>
+      );
+      for (let i = 0; i < wrap; i++) {
+        result = <View>{result}</View>;
+      }
+      return result;
+    }
+  }
+
+  const stylesObject = {
+    outer: {
+      padding: 4
+    },
+    odd: {
+      flexDirection: 'row'
+    },
+    even: {
+      flexDirection: 'column'
+    },
+    custom0: {
+      backgroundColor: '#222'
+    },
+    custom1: {
+      backgroundColor: '#666'
+    },
+    custom2: {
+      backgroundColor: '#999'
+    },
+    terminal: {
+      width: 20,
+      height: 20
+    },
+    terminal0: {
+      backgroundColor: 'blue'
+    },
+    terminal1: {
+      backgroundColor: 'orange'
+    },
+    terminal2: {
+      backgroundColor: 'red'
+    }
+  };
+
+  const styles = options.registerStyles ? StyleSheet.create(stylesObject) : stylesObject;
+
+  return DeepTree;
+};
+
+module.exports = createDeepTree;

performance/benchmarks/deepTree/index.js

@@ -0,0 +1,24 @@
+import benchmark from '../../benchmark';
+import createDeepTree from './createDeepTree';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactNative from 'react-native';
+
+const deepTreeBenchmark = ({ breadth, depth, registerStyles = true, runs, wrap }, node) => () => {
+  // React Native for Web implementation of the tree
+  const DeepTree = createDeepTree(ReactNative, { registerStyles });
+
+  const setup = () => {};
+  const teardown = () => ReactDOM.unmountComponentAtNode(node);
+
+  return benchmark({
+    name: `DeepTree (${registerStyles ? 'registered' : 'unregistered'}) styles)`,
+    description: `depth=${depth}, breadth=${breadth}, wrap=${wrap}`,
+    runs,
+    setup,
+    teardown,
+    task: () => ReactDOM.render(<DeepTree breadth={breadth} depth={depth} id={0} wrap={wrap} />, node)
+  });
+};
+
+module.exports = deepTreeBenchmark;

performance/index.html

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

performance/index.js

@@ -0,0 +1,16 @@
+import createDeepTree from './benchmarks/deepTree/createDeepTree';
+import deepTree from './benchmarks/deepTree';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactNative from 'react-native';
+
+const node = document.querySelector('.root');
+const DeepTree = createDeepTree(ReactNative);
+
+Promise.resolve()
+  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10, registerStyles: false }, node))
+  .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 20, registerStyles: false }, node))
+  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10 }, node))
+  .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 20 }, node))
+  .then(() => ReactDOM.render(<DeepTree breadth={3} depth={5} id={0} wrap={1} />, node));
+

performance/webpack.config.js

@@ -0,0 +1,45 @@
+const path = require('path');
+const webpack = require('webpack');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = {
+  entry: {
+    performance: './index'
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist-performance'),
+    filename: 'performance.bundle.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        query: { cacheDirectory: true }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
+    new webpack.optimize.DedupePlugin(),
+    // https://github.com/animatedjs/animated/issues/40
+    new webpack.NormalModuleReplacementPlugin(
+      /es6-set/,
+      path.join(__dirname, '../src/modules/polyfills/Set.js')
+    ),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        dead_code: true,
+        screw_ie8: true,
+        warnings: true
+      }
+    })
+  ],
+  resolve: {
+    alias: {
+      'react-native': path.join(__dirname, '../src')
+    }
+  }
+};

src/apis/Animated/index.js

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

src/apis/AppRegistry/ReactNativeApp.js

@@ -1,6 +1,6 @@
-import React, { Component, PropTypes } from 'react'
-import StyleSheet from '../StyleSheet'
-import View from '../../components/View'
+import StyleSheet from '../StyleSheet';
+import View from '../../components/View';
+import React, { Component, PropTypes } from 'react';
 
 class ReactNativeApp extends Component {
   static propTypes = {
@@ -10,13 +10,13 @@ class ReactNativeApp extends Component {
   };
 
   render() {
-    const { initialProps, rootComponent: RootComponent, rootTag } = this.props
+    const { initialProps, rootComponent: RootComponent, rootTag } = this.props;
 
     return (
       <View style={styles.appContainer}>
         <RootComponent {...initialProps} rootTag={rootTag} />
       </View>
-    )
+    );
   }
 }
 
@@ -31,6 +31,6 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0
   }
-})
+});
 
-module.exports = ReactNativeApp
+module.exports = ReactNativeApp;

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

@@ -0,0 +1,48 @@
+exports[`apis/AppRegistry/renderApplication getApplication 1`] = `
+"<style id=\"react-native-stylesheet\">
+/* React Native StyleSheet*/
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}
+body{margin:0}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform: rotate(0deg); transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg); transform: rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform: translateX(-100%); transform: translateX(-100%);}100%{-webkit-transform: translateX(400%); transform: translateX(400%);}}
+.rn-pointerEvents\\:auto,.rn_pointerEvents\\:box-only,.rn-pointerEvents\\:box-none *{pointer-events:auto}.rn-pointerEvents\\:none,.rn_pointerEvents\\:box-only *,.rn-pointerEvents\\:box-none{pointer-events:none}
+.rn-bottom\\:0px{bottom:0px}
+.rn-left\\:0px{left:0px}
+.rn-position\\:absolute{position:absolute}
+.rn-right\\:0px{right:0px}
+.rn-top\\:0px{top:0px}
+.rn-alignItems\\:stretch{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
+.rn-backgroundColor\\:transparent{background-color:transparent}
+.rn-borderTopStyle\\:solid{border-top-style:solid}
+.rn-borderRightStyle\\:solid{border-right-style:solid}
+.rn-borderBottomStyle\\:solid{border-bottom-style:solid}
+.rn-borderLeftStyle\\:solid{border-left-style:solid}
+.rn-borderTopWidth\\:0px{border-top-width:0px}
+.rn-borderRightWidth\\:0px{border-right-width:0px}
+.rn-borderBottomWidth\\:0px{border-bottom-width:0px}
+.rn-borderLeftWidth\\:0px{border-left-width:0px}
+.rn-boxSizing\\:border-box{-moz-box-sizing:border-box;box-sizing:border-box}
+.rn-color\\:inherit{color:inherit}
+.rn-display\\:flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
+.rn-flexBasis\\:auto{-ms-preferred-size:auto;-webkit-flex-basis:auto;flex-basis:auto}
+.rn-flexDirection\\:column{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
+.rn-font\\:inherit{font:inherit}
+.rn-listStyle\\:none{list-style:none}
+.rn-marginTop\\:0px{margin-top:0px}
+.rn-marginRight\\:0px{margin-right:0px}
+.rn-marginBottom\\:0px{margin-bottom:0px}
+.rn-marginLeft\\:0px{margin-left:0px}
+.rn-minHeight\\:0px{min-height:0px}
+.rn-minWidth\\:0px{min-width:0px}
+.rn-paddingTop\\:0px{padding-top:0px}
+.rn-paddingRight\\:0px{padding-right:0px}
+.rn-paddingBottom\\:0px{padding-bottom:0px}
+.rn-paddingLeft\\:0px{padding-left:0px}
+.rn-position\\:relative{position:relative}
+.rn-textAlign\\:inherit{text-align:inherit}
+.rn-textDecoration\\:none{text-decoration:none}
+.rn-flexShrink\\:0{-ms-flex-negative:0px;-webkit-flex-shrink:0px;flex-shrink:0}
+</style>"
+`;

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

@@ -1,16 +1,15 @@
-/* eslint-env mocha */
+/* eslint-env jasmine, jest */
 
-import assert from 'assert'
-import { prerenderApplication } from '../renderApplication'
-import React from 'react'
+import { getApplication } from '../renderApplication';
+import React from 'react';
 
-const component = () => <div />
+const component = () => <div />;
 
-suite('apis/AppRegistry/renderApplication', () => {
-  test('prerenderApplication', () => {
-    const { html, styleElement } = prerenderApplication(component, {})
+describe('apis/AppRegistry/renderApplication', () => {
+  test('getApplication', () => {
+    const { element, stylesheet } = getApplication(component, {});
 
-    assert.ok(html.indexOf('<div ') > -1)
-    assert.equal(styleElement.type, 'style')
-  })
-})
+    expect(element).toBeTruthy();
+    expect(stylesheet).toMatchSnapshot();
+  });
+});

src/apis/AppRegistry/index.js

@@ -6,12 +6,13 @@
  * @flow
  */
 
-import { Component } from 'react'
-import invariant from 'fbjs/lib/invariant'
-import ReactDOM from 'react-dom'
-import renderApplication, { prerenderApplication } from './renderApplication'
+import { Component } from 'react';
+import invariant from 'fbjs/lib/invariant';
+import { unmountComponentAtNode } from 'react-dom/lib/ReactMount';
+import renderApplication, { getApplication } from './renderApplication';
 
-const runnables = {}
+const emptyObject = {};
+const runnables = {};
 
 type ComponentProvider = () => Component<any, any, any>
 
@@ -26,67 +27,67 @@ type AppConfig = {
  */
 class AppRegistry {
   static getAppKeys(): Array<string> {
-    return Object.keys(runnables)
+    return Object.keys(runnables);
   }
 
-  static prerenderApplication(appKey: string, appParameters?: Object): string {
+  static getApplication(appKey: string, appParameters?: Object): string {
     invariant(
-      runnables[appKey] && runnables[appKey].prerender,
+      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].prerender(appParameters)
+    return runnables[appKey].getApplication(appParameters);
   }
 
   static registerComponent(appKey: string, getComponentFunc: ComponentProvider): string {
     runnables[appKey] = {
-      run: ({ initialProps, rootTag }) => renderApplication(getComponentFunc(), initialProps, rootTag),
-      prerender: ({ initialProps } = {}) => prerenderApplication(getComponentFunc(), initialProps)
-    }
-    return appKey
+      getApplication: ({ initialProps } = emptyObject) => getApplication(getComponentFunc(), initialProps),
+      run: ({ initialProps = emptyObject, rootTag }) => renderApplication(getComponentFunc(), initialProps, rootTag)
+    };
+    return appKey;
   }
 
   static registerConfig(config: Array<AppConfig>) {
     config.forEach(({ appKey, component, run }) => {
       if (run) {
-        AppRegistry.registerRunnable(appKey, run)
+        AppRegistry.registerRunnable(appKey, run);
       } else {
-        invariant(component, 'No component provider passed in')
-        AppRegistry.registerComponent(appKey, component)
+        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
+    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}`
+    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)
+    runnables[appKey].run(appParameters);
   }
 
   static unmountApplicationComponentAtRootTag(rootTag) {
-    ReactDOM.unmountComponentAtNode(rootTag)
+    unmountComponentAtNode(rootTag);
   }
 }
 
-module.exports = AppRegistry
+module.exports = AppRegistry;

src/apis/AppRegistry/renderApplication.js

@@ -6,15 +6,14 @@
  * @flow
  */
 
-import invariant from 'fbjs/lib/invariant'
-import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
-import ReactDOMServer from 'react-dom/server'
-import ReactNativeApp from './ReactNativeApp'
-import StyleSheet from '../../apis/StyleSheet'
+import invariant from 'fbjs/lib/invariant';
+import { render } from 'react-dom/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)
+  invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
   const component = (
     <ReactNativeApp
@@ -22,18 +21,17 @@ export default function renderApplication(RootComponent: Component, initialProps
       rootComponent={RootComponent}
       rootTag={rootTag}
     />
-  )
-  ReactDOM.render(component, rootTag)
+  );
+  render(component, rootTag);
 }
 
-export function prerenderApplication(RootComponent: Component, initialProps: Object): string {
-  const component = (
+export function getApplication(RootComponent: Component, initialProps: Object): Object {
+  const element = (
     <ReactNativeApp
       initialProps={initialProps}
       rootComponent={RootComponent}
     />
-  )
-  const html = ReactDOMServer.renderToString(component)
-  const styleElement = StyleSheet.render()
-  return { html, styleElement }
+  );
+  const stylesheet = StyleSheet.renderToString();
+  return { element, stylesheet };
 }

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

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

src/apis/AppState/index.js

@@ -1,54 +1,54 @@
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
-import findIndex from 'lodash/findIndex'
-import invariant from 'fbjs/lib/invariant'
+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 EVENT_TYPES = [ 'change' ];
+const VISIBILITY_CHANGE_EVENT = 'visibilitychange';
 
 const AppStates = {
   BACKGROUND: 'background',
   ACTIVE: 'active'
-}
+};
 
-const listeners = []
+const listeners = [];
 
 class AppState {
   static isSupported = ExecutionEnvironment.canUseDOM && document.visibilityState
 
   static get currentState() {
     if (!AppState.isSupported) {
-      return AppState.ACTIVE
+      return AppState.ACTIVE;
     }
 
     switch (document.visibilityState) {
       case 'hidden':
       case 'prerender':
       case 'unloaded':
-        return AppStates.BACKGROUND
+        return AppStates.BACKGROUND;
       default:
-        return AppStates.ACTIVE
+        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)
+      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)
+      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
+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

@@ -1,5 +1,74 @@
-/* eslint-env mocha */
+/* eslint-env jasmine, jest */
+import AsyncStorage from '..';
 
-suite('apis/AsyncStorage', () => {
-  test.skip('NO TEST COVERAGE', () => {})
-})
+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

@@ -3,14 +3,15 @@
  * 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({ ...oldObject, ...newObject })
-  window.localStorage.setItem(key, nextValue)
-}
+  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 {
   /**
@@ -19,12 +20,12 @@ class AsyncStorage {
   static clear() {
     return new Promise((resolve, reject) => {
       try {
-        window.localStorage.clear()
-        resolve(null)
+        window.localStorage.clear();
+        resolve(null);
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-    })
+    });
   }
 
   /**
@@ -33,17 +34,17 @@ class AsyncStorage {
   static getAllKeys() {
     return new Promise((resolve, reject) => {
       try {
-        const numberOfKeys = window.localStorage.length
-        const keys = []
+        const numberOfKeys = window.localStorage.length;
+        const keys = [];
         for (let i = 0; i < numberOfKeys; i += 1) {
-          const key = window.localStorage.key(i)
-          keys.push(key)
+          const key = window.localStorage.key(i);
+          keys.push(key);
         }
-        resolve(keys)
+        resolve(keys);
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-    })
+    });
   }
 
   /**
@@ -52,12 +53,12 @@ class AsyncStorage {
   static getItem(key: string) {
     return new Promise((resolve, reject) => {
       try {
-        const value = window.localStorage.getItem(key)
-        resolve(value)
+        const value = window.localStorage.getItem(key);
+        resolve(value);
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-    })
+    });
   }
 
   /**
@@ -66,12 +67,12 @@ class AsyncStorage {
   static mergeItem(key: string, value: string) {
     return new Promise((resolve, reject) => {
       try {
-        mergeLocalStorageItem(key, value)
-        resolve(null)
+        mergeLocalStorageItem(key, value);
+        resolve(null);
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-    })
+    });
   }
 
   /**
@@ -81,12 +82,12 @@ class AsyncStorage {
    *   multiGet(['k1', 'k2']) -> [['k1', 'val1'], ['k2', 'val2']]
    */
   static multiGet(keys: Array<string>) {
-    const promises = keys.map((key) => AsyncStorage.getItem(key))
+    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)
-    )
+    );
   }
 
   /**
@@ -96,24 +97,24 @@ class AsyncStorage {
    *   multiMerge([['k1', 'val1'], ['k2', 'val2']])
    */
   static multiMerge(keyValuePairs: Array<Array<string>>) {
-    const promises = keyValuePairs.map((item) => AsyncStorage.mergeItem(item[0], item[1]))
+    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))
+    const promises = keys.map((key) => AsyncStorage.removeItem(key));
 
     return Promise.all(promises).then(
       () => Promise.resolve(null),
       (error) => Promise.reject(error)
-    )
+    );
   }
 
   /**
@@ -121,12 +122,12 @@ class AsyncStorage {
    *   multiSet([['k1', 'val1'], ['k2', 'val2']])
    */
   static multiSet(keyValuePairs: Array<Array<string>>) {
-    const promises = keyValuePairs.map((item) => AsyncStorage.setItem(item[0], item[1]))
+    const promises = keyValuePairs.map((item) => AsyncStorage.setItem(item[0], item[1]));
 
     return Promise.all(promises).then(
       () => Promise.resolve(null),
       (error) => Promise.reject(error)
-    )
+    );
   }
 
   /**
@@ -135,12 +136,12 @@ class AsyncStorage {
   static removeItem(key: string) {
     return new Promise((resolve, reject) => {
       try {
-        window.localStorage.removeItem(key)
-        resolve(null)
+        window.localStorage.removeItem(key);
+        resolve(null);
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-    })
+    });
   }
 
   /**
@@ -149,13 +150,13 @@ class AsyncStorage {
   static setItem(key: string, value: string) {
     return new Promise((resolve, reject) => {
       try {
-        window.localStorage.setItem(key, value)
-        resolve(null)
+        window.localStorage.setItem(key, value);
+        resolve(null);
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-    })
+    });
   }
 }
 
-module.exports = AsyncStorage
+module.exports = AsyncStorage;

src/apis/BackAndroid/index.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2015-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.
+ *
+ * web stub for BackAndroid.android.js
+ *
+ * @providesModule BackAndroid
+ */
+
+'use strict';
+
+function emptyFunction() {}
+
+const BackAndroid = {
+  exitApp: emptyFunction,
+  addEventListener() {
+    return {
+      remove: emptyFunction
+    };
+  },
+  removeEventListener: emptyFunction
+};
+
+module.exports = BackAndroid;

src/apis/Clipboard/index.js

@@ -0,0 +1,21 @@
+class Clipboard {
+  static getString() {
+    return Promise.resolve('');
+  }
+
+  static setString(text) {
+    let success = false;
+    const textField = document.createElement('textarea');
+    textField.innerText = text;
+    document.body.appendChild(textField);
+    textField.select();
+    try {
+      document.execCommand('copy');
+      success = true;
+    } catch (e) {}
+    document.body.removeChild(textField);
+    return success;
+  }
+}
+
+module.exports = Clipboard;

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

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

src/apis/Dimensions/index.js

@@ -6,18 +6,18 @@
  * @flow
  */
 
-import debounce from 'lodash/debounce'
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
-import invariant from 'fbjs/lib/invariant'
+import debounce from 'debounce';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+import invariant from 'fbjs/lib/invariant';
 
-const win = ExecutionEnvironment.canUseDOM ? window : { screen: {} }
+const win = ExecutionEnvironment.canUseDOM ? window : { screen: {} };
 
-const dimensions = {}
+const dimensions = {};
 
 class Dimensions {
   static get(dimension: string): Object {
-    invariant(dimensions[dimension], 'No dimension set for key ' + dimension)
-    return dimensions[dimension]
+    invariant(dimensions[dimension], `No dimension set for key ${dimension}`);
+    return dimensions[dimension];
   }
 
   static set(): void {
@@ -26,18 +26,18 @@ class Dimensions {
       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))
+Dimensions.set();
+ExecutionEnvironment.canUseDOM && window.addEventListener('resize', debounce(Dimensions.set, 50));
 
-module.exports = Dimensions
+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

@@ -5,14 +5,13 @@
  * @flow
  */
 
-import keyMirror from 'fbjs/lib/keyMirror'
-import invariant from 'fbjs/lib/invariant'
+import invariant from 'fbjs/lib/invariant';
 
 const InteractionManager = {
-  Events: keyMirror({
-    interactionStart: true,
-    interactionComplete: true
-  }),
+  Events: {
+    interactionStart: 'interactionStart',
+    interactionComplete: 'interactionComplete'
+  },
 
   /**
    * Schedule a function to run after all interactions have completed.
@@ -21,15 +20,15 @@ const InteractionManager = {
     invariant(
       typeof callback === 'function',
       'Must specify a function to schedule.'
-    )
-    callback()
+    );
+    callback();
   },
 
   /**
    * Notify manager that an interaction has started.
    */
   createInteractionHandle() {
-    return 1
+    return 1;
   },
 
   /**
@@ -39,10 +38,10 @@ const InteractionManager = {
     invariant(
       !!handle,
       'Must provide a handle to clear.'
-    )
+    );
   },
 
   addListener: () => {}
-}
+};
 
-module.exports = InteractionManager
+module.exports = InteractionManager;

src/apis/Linking/index.js

@@ -0,0 +1,36 @@
+const Linking = {
+  addEventListener() {},
+  removeEventListener() {},
+  canOpenUrl() { return true; },
+  getInitialUrl() { return ''; },
+  openURL(url) {
+    iframeOpen(url);
+  }
+};
+
+/**
+ * Tabs opened using JavaScript may redirect the parent tab using
+ * `window.opener.location`, ignoring cross-origin restrictions and enabling
+ * phishing attacks.
+ *
+ * Safari requires that we open the url by injecting a hidden iframe that calls
+ * window.open(), then removes the iframe from the DOM.
+ *
+ * https://mathiasbynens.github.io/rel-noopener/
+ */
+const iframeOpen = (url) => {
+  const iframe = document.createElement('iframe');
+  iframe.style.display = 'none';
+  document.body.appendChild(iframe);
+
+  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+  const script = iframeDoc.createElement('script');
+  script.text = `
+    window.parent = null; window.top = null; window.frameElement = null;
+    var child = window.open("${url}"); child.opener = null;
+  `;
+  iframeDoc.body.appendChild(script);
+  document.body.removeChild(iframe);
+};
+
+module.exports = Linking;

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

@@ -1,5 +1,32 @@
-/* eslint-env mocha */
+/* eslint-env jasmine, jest */
 
-suite('apis/NetInfo', () => {
-  test.skip('NO TEST COVERAGE', () => {})
-})
+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

@@ -6,16 +6,19 @@
  * @flow
  */
 
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
-import invariant from 'fbjs/lib/invariant'
+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 eventTypes = [ 'change' ];
+
+const connectionListeners = [];
 
 /**
  * Navigator online: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine
@@ -23,63 +26,74 @@ const eventTypes = [ 'change' ]
  */
 const NetInfo = {
   addEventListener(type: string, handler: Function): { remove: () => void } {
-    invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type)
+    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.')
+      console.error('Network Connection API is not supported. Not listening for connection type changes.');
       return {
         remove: () => {}
-      }
+      };
     }
 
-    connection.addEventListener(type, handler)
+    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)
+    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)
+        resolve(connection.type);
       } catch (err) {
-        resolve('unknown')
+        resolve('unknown');
       }
-    })
+    });
   },
 
   isConnected: {
     addEventListener(type: string, handler: Function): { remove: () => void } {
-      invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type)
-      window.addEventListener('online', handler.bind(null, true), false)
-      window.addEventListener('offline', handler.bind(null, false), false)
+      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)
-      window.removeEventListener('online', handler.bind(null, true), false)
-      window.removeEventListener('offline', handler.bind(null, false), false)
+      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)
+          resolve(window.navigator.onLine);
         } catch (err) {
-          resolve(true)
+          resolve(true);
         }
-      })
+      });
     }
   }
-}
+};
 
-module.exports = NetInfo
+module.exports = NetInfo;

src/apis/PanResponder/index.js

@@ -6,7 +6,7 @@
 
 "use strict";
 
-var TouchHistoryMath = require('react/lib/TouchHistoryMath');
+var TouchHistoryMath = require('react-dom/lib/TouchHistoryMath');
 
 var currentCentroidXOfTouchesChangedAfter =
   TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;

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

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

src/apis/PixelRatio/index.js

@@ -6,7 +6,7 @@
  * @flow
  */
 
-import Dimensions from '../Dimensions'
+import Dimensions from '../Dimensions';
 
 /**
  * PixelRatio gives access to the device pixel density.
@@ -16,14 +16,14 @@ class PixelRatio {
    * Returns the device pixel density.
    */
   static get(): number {
-    return Dimensions.get('window').scale
+    return Dimensions.get('window').scale;
   }
 
   /**
    * No equivalent for Web
    */
   static getFontScale(): number {
-    return Dimensions.get('window').fontScale || PixelRatio.get()
+    return Dimensions.get('window').fontScale || PixelRatio.get();
   }
 
   /**
@@ -31,7 +31,7 @@ class PixelRatio {
    * Guaranteed to return an integer number.
    */
   static getPixelSizeForLayoutSize(layoutSize: number): number {
-    return Math.round(layoutSize * PixelRatio.get())
+    return Math.round(layoutSize * PixelRatio.get());
   }
 
   /**
@@ -41,9 +41,9 @@ class PixelRatio {
    * exactly (8.33 * 3) = 25 pixels.
    */
   static roundToNearestPixel(layoutSize: number): number {
-    const ratio = PixelRatio.get()
-    return Math.round(layoutSize * ratio) / ratio
+    const ratio = PixelRatio.get();
+    return Math.round(layoutSize * ratio) / ratio;
   }
 }
 
-module.exports = PixelRatio
+module.exports = PixelRatio;

src/apis/Platform/index.js

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

src/apis/StyleSheet/StyleSheetValidation.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /**
  * Copyright (c) 2016-present, Nicolas Gallagher.
  * Copyright (c) 2015-present, Facebook, Inc.
@@ -8,23 +9,31 @@
 
 import { PropTypes } from 'react'
 import ImageStylePropTypes from '../../components/Image/ImageStylePropTypes'
+import ReactPropTypeLocations from 'react-dom/lib/ReactPropTypeLocations'
+import ReactPropTypesSecret from 'react-dom/lib/ReactPropTypesSecret'
 import TextStylePropTypes from '../../components/Text/TextStylePropTypes'
 import ViewStylePropTypes from '../../components/View/ViewStylePropTypes'
 import warning from 'fbjs/lib/warning'
 
-const allStylePropTypes = {}
-
 class StyleSheetValidation {
   static validateStyleProp(prop, style, caller) {
     if (process.env.NODE_ENV !== 'production') {
       if (allStylePropTypes[prop] === undefined) {
-        const message1 = `"${prop}" is not a valid style property on Web.`
-        const message2 = '\nValid style props: ' + JSON.stringify(Object.keys(allStylePropTypes).sort(), null, '  ')
-        styleError(message1, style, caller, message2)
+        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 {
-        const error = allStylePropTypes[prop](style, prop, caller, 'prop')
+        var error = allStylePropTypes[prop](
+          style,
+          prop,
+          caller,
+          ReactPropTypeLocations.prop,
+          null,
+          ReactPropTypesSecret
+        );
         if (error) {
-          styleError(error.message, style, caller)
+          styleError(error.message, style, caller);
         }
       }
     }
@@ -32,26 +41,28 @@ class StyleSheetValidation {
 
   static validateStyle(name, styles) {
     if (process.env.NODE_ENV !== 'production') {
-      for (const prop in styles[name]) {
-        StyleSheetValidation.validateStyleProp(prop, styles[name], 'StyleSheet ' + name)
+      for (var prop in styles[name]) {
+        StyleSheetValidation.validateStyleProp(prop, styles[name], 'StyleSheet ' + name);
       }
     }
   }
 
   static addValidStylePropTypes(stylePropTypes) {
-    for (const key in stylePropTypes) {
-      allStylePropTypes[key] = stylePropTypes[key]
+    for (var key in stylePropTypes) {
+      allStylePropTypes[key] = stylePropTypes[key];
     }
   }
 }
 
-const styleError = (message1, style, caller, message2) => {
+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)
@@ -61,10 +72,10 @@ StyleSheetValidation.addValidStylePropTypes({
   clear: PropTypes.string,
   cursor: PropTypes.string,
   display: PropTypes.string,
-  direction: PropTypes.string, /* @private */
   float: PropTypes.oneOf([ 'left', 'none', 'right' ]),
   font: PropTypes.string, /* @private */
-  listStyle: PropTypes.string
+  listStyle: PropTypes.string,
+  WebkitOverflowScrolling: PropTypes.string /* @private */
 })
 
 module.exports = StyleSheetValidation

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

@@ -0,0 +1,15 @@
+exports[`apis/StyleSheet/createReactDOMStyle converts ReactNative style to ReactDOM style 1`] = `
+Object {
+  "borderBottomWidth": "1px",
+  "borderLeftWidth": "1px",
+  "borderRightWidth": "1px",
+  "borderTopWidth": "1px",
+  "borderWidthLeft": "2px",
+  "borderWidthRight": "3px",
+  "boxShadow": "1px 1px 1px 1px #000, 1px 2px 0px rgba(255,0,0,1)",
+  "display": "flex",
+  "marginBottom": "0px",
+  "marginTop": "0px",
+  "opacity": 0,
+}
+`;

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__/flattenStyle-test.js.snap

@@ -0,0 +1,26 @@
+exports[`apis/StyleSheet/flattenStyle should merge style objects 1`] = `
+Object {
+  "opacity": 1,
+  "order": 2,
+}
+`;
+
+exports[`apis/StyleSheet/flattenStyle should override style properties 1`] = `
+Object {
+  "backgroundColor": "#023c69",
+  "order": null,
+}
+`;
+
+exports[`apis/StyleSheet/flattenStyle should overwrite properties with \`undefined\` 1`] = `
+Object {
+  "backgroundColor": undefined,
+}
+`;
+
+exports[`apis/StyleSheet/flattenStyle should recursively flatten arrays 1`] = `
+Object {
+  "opacity": 1,
+  "order": 3,
+}
+`;

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

@@ -0,0 +1 @@
+exports[`apis/StyleSheet/generateCss generates correct css 1`] = `"-webkit-transition-duration:0.1s;border-width-left:2px;border-width-right:3px;box-shadow:1px 1px 1px 1px #000;position:absolute;transition-duration:0.1s"`;

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,14 @@
+exports[`apis/StyleSheet renderToString 1`] = `
+"<style id=\"react-native-stylesheet\">
+.rn-borderTopColor\\:red{border-top-color:red}
+.rn-borderRightColor\\:red{border-right-color:red}
+.rn-borderBottomColor\\:red{border-bottom-color:red}
+.rn-borderLeftColor\\:red{border-left-color:red}
+.rn-borderTopWidth\\:0px{border-top-width:0px}
+.rn-borderRightWidth\\:0px{border-right-width:0px}
+.rn-borderBottomWidth\\:0px{border-bottom-width:0px}
+.rn-borderLeftWidth\\:0px{border-left-width:0px}
+.rn-left\\:50px{left:50px}
+.rn-position\\:absolute{position:absolute}
+</style>"
+`;

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

@@ -0,0 +1,179 @@
+exports[`apis/StyleSheet/registry resolve with register, resolves to className 1`] = `
+Object {
+  "className": "
+rn-borderTopColor:red
+rn-borderRightColor:red
+rn-borderBottomColor:red
+rn-borderLeftColor:red
+rn-borderTopWidth:0px
+rn-borderRightWidth:0px
+rn-borderBottomWidth:0px
+rn-borderLeftWidth:0px
+rn-left:50px
+rn-pointerEvents:box-only
+rn-position:absolute
+rn-width:100px",
+  "style": Object {},
+}
+`;
+
+exports[`apis/StyleSheet/registry resolve with register, resolves to className 2`] = `
+Object {
+  "className": "
+rn-borderTopColor:red
+rn-borderRightColor:red
+rn-borderBottomColor:red
+rn-borderLeftColor:red
+rn-borderTopWidth:0px
+rn-borderRightWidth:0px
+rn-borderBottomWidth:0px
+rn-borderLeftWidth:0px
+rn-left:50px
+rn-pointerEvents:box-only
+rn-position:absolute
+rn-width:200px",
+  "style": Object {},
+}
+`;
+
+exports[`apis/StyleSheet/registry resolve with register, resolves to className 3`] = `
+Object {
+  "className": "
+rn-borderTopColor:red
+rn-borderRightColor:red
+rn-borderBottomColor:red
+rn-borderLeftColor:red
+rn-borderTopWidth:0px
+rn-borderRightWidth:0px
+rn-borderBottomWidth:0px
+rn-borderLeftWidth:0px
+rn-left:50px
+rn-pointerEvents:box-only
+rn-position:absolute
+rn-width:100px",
+  "style": Object {},
+}
+`;
+
+exports[`apis/StyleSheet/registry resolve with register, resolves to mixed 1`] = `
+Object {
+  "className": "
+rn-left:50px
+rn-pointerEvents:box-only
+rn-position:absolute",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "width": "100px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/registry resolve with register, resolves to mixed 2`] = `
+Object {
+  "className": "
+rn-left:50px
+rn-pointerEvents:box-only
+rn-position:absolute
+rn-width:200px",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/registry resolve with register, resolves to mixed 3`] = `
+Object {
+  "className": "
+rn-left:50px
+rn-pointerEvents:box-only
+rn-position:absolute",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "width": "100px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/registry resolve without register, resolves to inline styles 1`] = `
+Object {
+  "className": "
+",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "left": "50px",
+    "pointerEvents": "box-only",
+    "position": "absolute",
+    "width": "100px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/registry resolve without register, resolves to inline styles 2`] = `
+Object {
+  "className": "
+",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "left": "50px",
+    "pointerEvents": "box-only",
+    "position": "absolute",
+    "width": "200px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/registry resolve without register, resolves to inline styles 3`] = `
+Object {
+  "className": "
+",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "left": "50px",
+    "pointerEvents": "box-only",
+    "position": "absolute",
+    "width": "100px",
+  },
+}
+`;

src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js

@@ -0,0 +1,28 @@
+/* eslint-env jasmine, jest */
+
+import createReactDOMStyle from '../createReactDOMStyle';
+
+const reactNativeStyle = {
+  boxShadow: '1px 1px 1px 1px #000',
+  borderWidthLeft: 2,
+  borderWidth: 1,
+  borderWidthRight: 3,
+  display: 'flex',
+  marginVertical: 0,
+  opacity: 0,
+  shadowColor: 'red',
+  shadowOffset: { width: 1, height: 2 },
+  resizeMode: 'contain'
+};
+
+describe('apis/StyleSheet/createReactDOMStyle', () => {
+  test('converts ReactNative style to ReactDOM style', () => {
+    expect(createReactDOMStyle(reactNativeStyle)).toMatchSnapshot();
+  });
+
+  test('noop on DOM styles', () => {
+    const firstStyle = createReactDOMStyle(reactNativeStyle);
+    const secondStyle = createReactDOMStyle(firstStyle);
+    expect(firstStyle).toEqual(secondStyle);
+  });
+});

src/apis/StyleSheet/__tests__/createReactStyleObject-test.js

@@ -1,13 +0,0 @@
-/* eslint-env mocha */
-
-import assert from 'assert'
-import createReactStyleObject from '../createReactStyleObject'
-
-suite('apis/StyleSheet/createReactStyleObject', () => {
-  test('converts ReactNative style to ReactDOM style', () => {
-    const reactNativeStyle = { display: 'flex', marginVertical: 0, opacity: 0 }
-    const expectedStyle = { display: 'flex', marginTop: '0px', marginBottom: '0px', opacity: 0 }
-
-    assert.deepEqual(createReactStyleObject(reactNativeStyle), expectedStyle)
-  })
-})

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

@@ -1,11 +1,10 @@
-/* eslint-env mocha */
+/* eslint-env jasmine, jest */
 
-import assert from 'assert'
-import expandStyle from '../expandStyle'
+import expandStyle from '../expandStyle';
 
-suite('apis/StyleSheet/expandStyle', () => {
+describe('apis/StyleSheet/expandStyle', () => {
   test('shortform -> longform', () => {
-    const initial = {
+    const style = {
       borderStyle: 'solid',
       boxSizing: 'border-box',
       borderBottomColor: 'white',
@@ -14,53 +13,36 @@ suite('apis/StyleSheet/expandStyle', () => {
       marginTop: 50,
       marginVertical: 25,
       margin: 10
-    }
+    };
 
-    const expected = {
-      borderBottomStyle: 'solid',
-      borderLeftStyle: 'solid',
-      borderRightStyle: 'solid',
-      boxSizing: 'border-box',
-      borderBottomColor: 'white',
-      borderTopStyle: 'solid',
-      borderTopWidth: '0px',
-      borderLeftWidth: '0px',
-      borderRightWidth: '0px',
-      borderBottomWidth: '1px',
-      marginTop: '50px',
-      marginBottom: '25px',
-      marginLeft: '10px',
-      marginRight: '10px'
-    }
-
-    assert.deepEqual(expandStyle(initial), expected)
-  })
+    expect(expandStyle(style)).toMatchSnapshot();
+  });
 
   test('textAlignVertical', () => {
     const initial = {
       textAlignVertical: 'center'
-    }
+    };
 
     const expected = {
       verticalAlign: 'middle'
-    }
+    };
 
-    assert.deepEqual(expandStyle(initial), expected)
-  })
+    expect(expandStyle(initial)).toEqual(expected);
+  });
 
   test('flex', () => {
-    const value = 10
+    const value = 10;
 
     const initial = {
       flex: value
-    }
+    };
 
     const expected = {
       flexGrow: value,
       flexShrink: 1,
       flexBasis: 'auto'
-    }
+    };
 
-    assert.deepEqual(expandStyle(initial), expected)
-  })
-})
+    expect(expandStyle(initial)).toEqual(expected);
+  });
+});

src/apis/StyleSheet/__tests__/flattenStyle-test.js

@@ -0,0 +1,52 @@
+/* eslint-env jasmine, jest */
+
+/**
+ * Copyright (c) 2015-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.
+ */
+
+import flattenStyle from '../flattenStyle';
+
+describe('apis/StyleSheet/flattenStyle', () => {
+  test('should merge style objects', () => {
+    const style = flattenStyle([
+      { opacity: 1 },
+      { order: 2 }
+    ]);
+    expect(style).toMatchSnapshot();
+  });
+
+  test('should override style properties', () => {
+    const style = flattenStyle([
+      { backgroundColor: '#000', order: 1 },
+      { backgroundColor: '#023c69', order: null }
+    ]);
+    expect(style).toMatchSnapshot();
+  });
+
+  test('should overwrite properties with `undefined`', () => {
+    const style = flattenStyle([
+      { backgroundColor: '#000' },
+      { backgroundColor: undefined }
+    ]);
+    expect(style).toMatchSnapshot();
+  });
+
+  test('should not fail on falsy values', () => {
+    expect(() => flattenStyle([ null, false, undefined ])).not.toThrow();
+  });
+
+  test('should recursively flatten arrays', () => {
+    const style = flattenStyle([
+      null,
+      [],
+      [ { order: 2 }, { opacity: 1 } ],
+      { order: 3 }
+    ]);
+    expect(style).toMatchSnapshot();
+  });
+});

src/apis/StyleSheet/__tests__/generateCss-test.js

@@ -0,0 +1,16 @@
+/* eslint-env jasmine, jest */
+
+import generateCss from '../generateCss';
+
+describe('apis/StyleSheet/generateCss', () => {
+  test('generates correct css', () => {
+    const style = {
+      boxShadow: '1px 1px 1px 1px #000',
+      borderWidthLeft: 2,
+      borderWidthRight: 3,
+      position: 'absolute',
+      transitionDuration: '0.1s'
+    };
+    expect(generateCss(style)).toMatchSnapshot();
+  });
+});