0.0.29

Portal was undocumented and has been removed from React Native.

Fix #149

.babelrc

@@ -3,5 +3,8 @@
     "es2015",
     "stage-1",
     "react"
+  ],
+  "plugins": [
+    "transform-decorators-legacy"
   ]
 }

.editorconfig

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

.travis.yml

@@ -1,7 +1,6 @@
 language: node_js
 node_js:
-  - "5"
-  - "4"
+  - "6"
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start

README.md

@@ -2,39 +2,55 @@
 
 [![Build Status][travis-image]][travis-url]
 [![npm version][npm-image]][npm-url]
-![gzipped size](https://img.shields.io/badge/gzipped-~23k-blue.svg)
+![gzipped size](https://img.shields.io/badge/gzipped-~41.0k-blue.svg)
 
 [React Native][react-native-url] components and APIs for the Web.
 
+Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
+
+## Overview
+
+"React Native for Web" is a project to bring React Native's building blocks and
+touch handling to the Web.
+
+React Native provides a foundational layer to support interoperable,
+zero-configuration React component development. This is missing from React's
+web ecosystem where OSS components rely on inline styles (usually without
+vendor prefixes), or require build tool configuration. This project allows
+components built upon React Native to be run on the Web, and it manages all
+component styling out-of-the-box.
+
+For example, the [`View`](docs/components/View.md) component makes it easy to build
+cross-browser layouts with flexbox, such as stacked and nested boxes with
+margin and padding. And the [`StyleSheet`](docs/guides/style.md) API converts
+styles defined in JavaScript into "Atomic CSS".
+
 ## Quick start
 
 To install in your app:
 
 ```
-npm install --save react@0.14 react-dom@0.14 react-native-web
+npm install --save react react-native-web
 ```
 
-Or [try it on CodePen](http://codepen.io/necolas/pen/PZzwBR).
+Read the [Client and Server rendering](docs/guides/rendering.md) guide.
 
-Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
+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).
 
-## Overview
+## Examples
 
-This is a web implementation of React Native components and APIs. The React
-Native components are good web application building blocks, and provide a common
-foundation for component libraries.
+Demos:
 
-For example, the [`View`](docs/apis/View.md) component makes it easy to build
-common layouts with flexbox, such as stacked and nested boxes with margin and
-padding. And the [`StyleSheet`](docs/guides/style.md) API converts styles
-defined in JavaScript to "atomic" CSS.
+* [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/)
 
-## Example
-
-More examples can be found in the [`examples` directory](examples).
+Sample:
 
 ```js
-import React, { AppRegistry, Image, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { AppRegistry, Image, StyleSheet, Text, View } from 'react-native'
 
 // Components
 const Card = ({ children }) => <View style={styles.card}>{children}</View>
@@ -47,10 +63,6 @@ const App = () => (
   </Card>
 )
 
-// App registration and rendering
-AppRegistry.registerComponent('MyApp', () => App)
-AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })
-
 // Styles
 const styles = StyleSheet.create({
   card: {
@@ -67,6 +79,10 @@ const styles = StyleSheet.create({
     width: 40
   }
 })
+
+// App registration and rendering
+AppRegistry.registerComponent('MyApp', () => App)
+AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })
 ```
 
 ## Documentation
@@ -86,21 +102,22 @@ Exported modules:
   * [`ActivityIndicator`](docs/components/ActivityIndicator.md)
   * [`Image`](docs/components/Image.md)
   * [`ListView`](docs/components/ListView.md)
-  * [`Portal`](docs/components/Portal.md)
   * [`ScrollView`](docs/components/ScrollView.md)
   * [`Text`](docs/components/Text.md)
   * [`TextInput`](docs/components/TextInput.md)
-  * [`TouchableHighlight`](docs/components/TouchableHighlight.md)
-  * [`TouchableOpacity`](docs/components/TouchableOpacity.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)

config/constants.js

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

docs/apis/AppRegistry.md

@@ -16,8 +16,11 @@ into `runApplication`. These should always be used as a pair.
 (web) static **prerenderApplication**(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; }`, where
-`html` the prerendered HTML, and `style` is the prerendered style sheet.
+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.
 
 static **registerConfig**(config: Array<AppConfig>)
 
@@ -51,7 +54,7 @@ into `runApplication`
 
 ## Example
 
-```
+```js
 AppRegistry.registerComponent('MyApp', () => AppComponent)
 AppRegistry.runApplication('MyApp', {
   initialProps: {},

docs/apis/AppState.md

@@ -37,7 +37,6 @@ class Example extends React.Component {
   constructor(props) {
     super(props)
     this.state = { currentAppState: AppState.currentState }
-    this._handleAppStateChange = this._handleAppStateChange.bind(this)
   }
 
   componentDidMount() {
@@ -48,7 +47,7 @@ class Example extends React.Component {
     AppState.removeEventListener('change', this._handleAppStateChange);
   }
 
-  _handleAppStateChange(currentAppState) {
+  _handleAppStateChange = (currentAppState) => {
     this.setState({ currentAppState });
   }
 

docs/apis/NetInfo.md

@@ -44,7 +44,7 @@ internet connectivity.
 
 Fetching the connection type:
 
-```
+```js
 NetInfo.fetch().then((connectionType) => {
   console.log('Connection type:', connectionType);
 });

docs/apis/Platform.md

@@ -10,19 +10,36 @@ specific.
 
 `Platform.OS` will be `web` when running in a Web browser.
 
-**userAgent**: string
-
-On Web, the `Platform` module can be also be used to detect the browser
-`userAgent`.
-
-## Examples
-
 ```js
+import { Platform } from 'react-native';
+
 const styles = StyleSheet.create({
   height: (Platform.OS === 'web') ? 200 : 100,
 });
-
-if (Platform.userAgent.includes('Android')) {
-  console.log('Running on Android!');
-}
+```
+
+## Methods
+
+**select**: any
+
+`Platform.select` takes an object containing `Platform.OS` as keys and returns
+the value for the platform you are currently running on.
+
+```js
+import { Platform } from 'react-native';
+
+const containerStyles = {
+  flex: 1,
+  ...Platform.select({
+    android: {
+      backgroundColor: 'blue'
+    },
+    ios: {
+      backgroundColor: 'red'
+    },
+    web: {
+      backgroundColor: 'green'
+    }
+  })
+});
 ```

docs/apis/StyleSheet.md

@@ -11,6 +11,18 @@ outside of the render loop and are applied as inline styles. Read more about to
 
 Each key of the object passed to `create` must define a style object.
 
+**flatten**: function
+
+Flattens an array of styles into a single style object.
+
+**renderToString**: function
+
+Returns a string of CSS used to style the application.
+
+## Properties
+
+**hairlineWidth**: number
+
 ## Example
 
 ```js

docs/components/ActivityIndicator.md

@@ -23,7 +23,8 @@ Size of the indicator. Small has a height of `20`, large has a height of `36`.
 ## Examples
 
 ```js
-import React, { ActivityIndicator, Component, StyleSheet, View } from 'react-native'
+import React, { Component } from 'react'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
 
 class ToggleAnimatingActivityIndicator extends Component {
   constructor(props) {

docs/components/Image.md

@@ -58,25 +58,28 @@ could be an http address or a base64 encoded image.
 **style**: style
 
 + ...[View#style](View.md)
-
-Defaults:
-
-```js
-{
-  alignSelf: 'flex-start',
-  backgroundColor: 'transparent'
-}
-```
++ `resizeMode`
 
 **testID**: string
 
 Used to locate a view in end-to-end tests.
 
+## Properties
+
+static **resizeMode**: Object
+
+Example usage:
+
+```
+<Image resizeMode={Image.resizeMode.contain} />
+```
+
 ## Examples
 
 ```js
 import placeholderAvatar from './placeholderAvatar.png'
-import React, { Component, Image, PropTypes, StyleSheet } from 'react-native'
+import React, { Component } from 'react'
+import { Image, PropTypes, StyleSheet } from 'react-native'
 
 export default class ImageExample extends Component {
   constructor(props, context) {

docs/components/ListView.md

@@ -15,7 +15,8 @@ Content to display over the image.
 ## Examples
 
 ```js
-import React, { Component, ListView, PropTypes } from 'react-native'
+import React, { Component, PropTypes } from 'react'
+import { ListView } from 'react-native'
 
 export default class ListViewExample extends Component {
   static propTypes = {}

docs/components/Portal.md

@@ -33,7 +33,8 @@ React component to render.  This same tag can later be used in `closeModal`.
 ## Examples
 
 ```js
-import React, { Portal, Text, Touchable } from 'react-native'
+import React, { Component } from 'react'
+import { Portal, Text, Touchable } from 'react-native'
 
 export default class PortalExample extends Component {
   componentWillMount() {

docs/components/ScrollView.md

@@ -1,13 +1,13 @@
 # ScrollView
 
-Scrollable `View` for use with bounded height, either by setting the height of
-the view directly (discouraged) or by bounding the height of ancestor views.
+A scrollable `View` that provides itegration with the touch-locking "responder"
+system. `ScrollView`'s must have a bounded height: either set the height of the
+view directly (discouraged) or make sure all parent views have bounded height
+(e.g., transfer `{ flex: 1}` down the view stack).
 
 ## Props
 
-**children**: any
-
-Child content.
+[...View props](./View.md)
 
 **contentContainerStyle**: style
 
@@ -19,11 +19,34 @@ all of the child views.
 When true, the scroll view's children are arranged horizontally in a row
 instead of vertically in a column.
 
+**keyboardDismissMode**: oneOf('none', 'on-drag') = 'none'
+
+Determines whether the keyboard gets dismissed in response to a scroll drag.
+
+* `none` (the default), drags do not dismiss the keyboard.
+* `on-drag`, the keyboard is dismissed when a drag begins.
+* `interactive` (not supported on web; same as `none`)
+
+**onContentSizeChange**: function
+
+TODO
+
+Called when scrollable content view of the `ScrollView` changes. It's
+implemented using the `onLayout` handler attached to the content container
+which this `ScrollView` renders.
+
 **onScroll**: function
 
 Fires at most once per frame during scrolling. The frequency of the events can
 be contolled using the `scrollEventThrottle` prop.
 
+**refreshControl**: element
+
+TODO
+
+A [RefreshControl](../RefreshControl) component, used to provide
+pull-to-refresh functionality for the `ScrollView`.
+
 **scrollEnabled**: bool = true
 
 When false, the content does not scroll.
@@ -36,21 +59,39 @@ tracking the scroll position, but can lead to scroll performance problems. The
 default value is `0`, which means the scroll event will be sent only once each
 time the view is scrolled.
 
-**style**: style
+## Instance methods
 
-+ ...[View#style](View.md)
+**getInnerViewNode()**: any
+
+Returns a reference to the underlying content container DOM node within the `ScrollView`.
+
+**getScrollableNode()**: any
+
+Returns a reference to the underlying scrollable DOM node.
+
+**getScrollResponder()**: Component
+
+Returns a reference to the underlying scroll responder, which supports
+operations like `scrollTo`. All `ScrollView`-like components should implement
+this method so that they can be composed while providing access to the
+underlying scroll responder's methods.
+
+**scrollTo(options: { x: number = 0; y: number = 0; animated: boolean = true })**
+
+Scrolls to a given `x`, `y` offset (animation is not currently supported).
 
 ## Examples
 
 ```js
-import React, { Component, ScrollView, StyleSheet } from 'react-native'
+import React, { Component } from 'react'
+import { ScrollView, StyleSheet } from 'react-native'
 import Item from './Item'
 
 export default class ScrollViewExample extends Component {
   constructor(props, context) {
     super(props, context)
     this.state = {
-      items: Array.from({ length: 20 }).map((_, i) => ({ id: i }))
+      items: Array.from(new Array(20)).map((_, i) => ({ id: i }))
     }
   }
 

docs/components/Text.md

@@ -60,7 +60,8 @@ This function is called on press.
 + `letterSpacing`
 + `lineHeight`
 + `textAlign`
-+ `textDecoration`
++ `textAlignVertical`
++ `textDecorationLine`
 + `textShadow`
 + `textTransform`
 + `whiteSpace`
@@ -74,7 +75,8 @@ Used to locate this view in end-to-end tests.
 ## Examples
 
 ```js
-import React, { Component, PropTypes, StyleSheet, Text } from 'react-native'
+import React, { Component, PropTypes } from 'react'
+import { StyleSheet, Text } from 'react-native'
 
 export default class PrettyText extends Component {
   static propTypes = {

docs/components/TextInput.md

@@ -147,10 +147,25 @@ Read about how [React form
 components](https://facebook.github.io/react/docs/forms.html) work. To prevent
 user edits to the value set `editable={false}`.
 
+## Instance methods
+
+**blur()**
+
+Blur the underlying DOM input.
+
+**clear()**
+
+Clear the text from the underlying DOM input.
+
+**focus()**
+
+Focus the underlying DOM input.
+
 ## Examples
 
 ```js
-import React, { Component, StyleSheet, TextInput } from 'react-native'
+import React, { Component } from 'react'
+import { StyleSheet, TextInput } from 'react-native'
 
 export default class TextInputExample extends Component {
   constructor(props, context) {

docs/components/Touchable.md

@@ -1,100 +0,0 @@
-# Touchable
-
-A wrapper for making views respond to mouse, keyboard, and touch presses. On
-press in, the touchable area can display a highlight color, and the opacity of
-the wrapped view can be decreased.
-
-This component combines the various `Touchable*` components from React Native.
-
-Unsupported React Native props:
-`accessibilityComponentType` (android) – use `accessibilityRole`,
-`accessibilityTraits` (ios) – use `accessibilityRole`,
-`onHideUnderlay` – use `onPressOut`,
-`onShowUnderlay` – use `onPressIn`,
-`underlayColor` – use `activeUnderlayColor`
-
-## Props
-
-**accessibilityLabel**: string
-
-Overrides the text that's read by the screen reader when the user interacts
-with the element.
-
-(web) **accessibilityRole**: oneOf(roles) = 'button'
-
-Allows assistive technologies to present and support interaction with the view
-in a manner that is consistent with user expectations for similar views of that
-type. For example, marking a touchable view with an `accessibilityRole` of
-`button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
-
-Note: Avoid changing `accessibilityRole` values over time or after user
-actions. Generally, accessibility APIs do not provide a means of notifying
-assistive technologies of a `role` value change.
-
-**accessible**: bool = true
-
-When `false`, the view is hidden from screenreaders.
-
-**activeOpacity**: number = 0.8
-
-Sets the opacity of the child view when `onPressIn` is called. The opacity is
-reset when `onPressOut` is called.
-
-(web) **activeUnderlayColor**: string = 'black'
-
-Sets the color of the background highlight when `onPressIn` is called. The
-highlight is removed when `onPressOut` is called.
-
-**children**: element
-
-A single child element.
-
-**delayLongPress**: number = 500
-
-Delay in ms, from `onPressIn`, before `onLongPress` is called.
-
-**delayPressIn**: number = 0
-
-(TODO)
-
-Delay in ms, from the start of the touch, before `onPressIn` is called.
-
-**delayPressOut**: number = 100
-
-(TODO)
-
-Delay in ms, from the release of the touch, before `onPressOut` is called.
-
-**onLayout**: function
-
-(TODO)
-
-**onLongPress**: function
-
-**onPress**: function
-
-**onPressIn**: function
-
-**onPressOut**: function
-
-**style**: style
-
-+ ...[View#style](View.md)
-
-## Examples
-
-```js
-import React, { Component, PropTypes, Touchable } from 'react-native'
-
-export default class Example extends Component {
-  static propTypes = {}
-
-  static defaultProps = {}
-
-  render() {
-    return (
-      <Touchable />
-    )
-  }
-}
-```

docs/components/TouchableWithoutFeedback.md

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

docs/components/View.md

@@ -4,21 +4,13 @@
 style, layout with flexbox, and accessibility controls. It can be nested
 inside another `View` and has 0-to-many children of any type.
 
+Also, refer to React Native's documentation about the [Gesture Responder
+System](http://facebook.github.io/react-native/releases/0.22/docs/gesture-responder-system.html).
+
 Unsupported React Native props:
-`accessibilityComponentType` (android) – use `accessibilityRole`,
-`accessibilityTraits` (ios) – use `accessibilityRole`,
-`collapsable` (android),
-`importantForAccessibility` (android),
-`needsOffscreenAlphaCompositing` (android),
 `onAccessibilityTap`,
-`onMagicTap`,
-`onMoveShouldSetResponder`,
-`onResponder*`,
-`onStartShouldSetResponder`,
-`onStartShouldSetResponderCapture`
-`removeClippedSubviews` (ios),
-`renderToHardwareTextureAndroid` (android),
-`shouldRasterizeIOS` (ios)
+`hitSlop`,
+`onMagicTap`
 
 ## Props
 
@@ -58,6 +50,29 @@ implemented using `aria-hidden`.)
 
 (TODO)
 
+**onMoveShouldSetResponder**: function
+
+**onMoveShouldSetResponderCapture**: function
+
+**onResponderGrant**: function
+
+For most touch interactions, you'll simply want to wrap your component in
+`TouchableHighlight` or `TouchableOpacity`.
+
+**onResponderMove**: function
+
+**onResponderReject**: function
+
+**onResponderRelease**: function
+
+**onResponderTerminate**: function
+
+**onResponderTerminationRequest**: function
+
+**onStartShouldSetResponder**: function
+
+**onStartShouldSetResponderCapture**: function
+
 **pointerEvents**: oneOf('auto', 'box-only', 'box-none', 'none') = 'auto'
 
 Configure the `pointerEvents` of the view. The enhanced `pointerEvents` modes
@@ -136,6 +151,7 @@ from `style`.
 + `right`
 + `top`
 + `transform`
++ `transformMatrix`
 + `userSelect`
 + `visibility`
 + `width`
@@ -168,7 +184,8 @@ Used to locate this view in end-to-end tests.
 ## Examples
 
 ```js
-import React, { Component, PropTypes, StyleSheet, View } from 'react-native'
+import React, { Component, PropTypes } from 'react'
+import { StyleSheet, View } from 'react-native'
 
 export default class ViewExample extends Component {
   render() {

docs/guides/known-issues.md

@@ -7,22 +7,17 @@ views present on iOS/Android are released on Web. We are very much interested in
 the community's feedback on the next set of modules and views.
 
 Not all the modules or views for iOS/Android can be implemented on Web. In some
-cases it will be necessary to use a Web counterpart.
+cases it will be necessary to use a Web counterpart or to guard the use of a
+module with `Platform.OS` (e.g. `NativeModules`)
 
 ## Missing component props
 
 There are properties that do not work across all platforms. All web-specific
-props are annotated with `(web)` in the documentaiton.
+props are annotated with `(web)` in the documentation.
 
 ## Platform parity
 
 There are some known issues in React Native where APIs could be made more
 consistent between platforms. For example, React Native for Web includes
-`ActivityIndicator` and a horizontal `ProgressBar`.
-
-Other parts of React Native, such as the `Animated` and `PanResponder` APIs,
-are highly complex and have not yet been ported to React Native for Web. Given
-the difficulties keeping these APIs in sync with React Native, we'd prefer the
-APIs to be published as separate npm packages. If not, we will consider a web
-implementation, possibly using the [Web Animations
-API/polyfill](https://github.com/web-animations/web-animations-js)
+`ActivityIndicator` and a horizontal `ProgressBar` for Web use, in anticipation
+of the convergence between the iOS and Android components in React Native.

docs/guides/react-native.md

@@ -1,8 +1,5 @@
 # React Native
 
-This is an experimental feature to support: using community-developed React
-Native components on the Web; and rendering React Native apps to Web.
-
 Use a module loader that supports package aliases (e.g., webpack), and alias
 `react-native` to `react-native-web`.
 
@@ -10,6 +7,7 @@ Use a module loader that supports package aliases (e.g., webpack), and alias
 // webpack.config.js
 
 module.exports = {
+  // ...
   resolve: {
     alias: {
       'react-native': 'react-native-web'
@@ -18,17 +16,31 @@ module.exports = {
 }
 ```
 
-Web-specific implementations can use the `*.web.js` naming pattern, which
-webpack will resolve.
+## Image assets
+
+In order to require image assets (e.g. `require('assets/myimage.png')`), add
+the `url-loader` to the webpack config:
+
+```js
+// webpack.config.js
+
+module.exports = {
+  // ...
+  module: {
+    loaders: {
+      test: /\.(gif|jpe?g|png|svg)$/,
+      loader: 'url-loader',
+      query: { name: '[name].[hash:16].[ext]' }
+    }
+  }
+```
+
+## Web-specific code
 
 Minor platform differences can use the `Platform` module.
 
 ```js
-import { AppRegistry, Platform, StyleSheet } from 'react-native'
-
-const styles = StyleSheet.create({
-  height: (Platform.OS === 'web') ? 200 : 100
-})
+import { AppRegistry, Platform } from 'react-native'
 
 AppRegistry.registerComponent('MyApp', () => MyApp)
 
@@ -38,3 +50,24 @@ if (Platform.OS === 'web') {
   });
 }
 ```
+
+More substantial Web-specific implementation code should be written in files
+with the extension `.web.js`, which webpack will automatically resolve.
+
+## Optimizations
+
+Production builds can benefit from dead-code elimination by defining the
+following variables:
+
+```js
+// webpack.config.js
+
+module.exports = {
+  // ...
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  }
+}
+```

docs/guides/rendering.md

@@ -1,57 +1,58 @@
 # Client and Server rendering
 
+It's recommended that you use a module loader that supports package aliases
+(e.g., webpack), and alias `react-native` to `react-native-web`.
+
+```js
+// webpack.config.js
+
+module.exports = {
+  // ...other configuration
+  resolve: {
+    alias: {
+      'react-native': 'react-native-web'
+    }
+  }
+}
+```
+
 ## Client-side rendering
 
+Rendering without using the `AppRegistry`:
+
 ```js
-// client.js
+import React from 'react'
+import ReactNative from 'react-native'
 
-import React, { AppRegistry } from 'react-native'
-import MyApp from './MyApp'
-
-// register the app
-AppRegistry.registerApp('MyApp', () => MyApp)
-
-// mount the app within the `rootTag` and run it
-AppRegistry.runApplication('MyApp', { initialProps, rootTag: document.getElementById('react-root') })
+// component that renders the app
+const AppHeaderContainer = (props) => { /* ... */ }
 
 // DOM render
-React.render(<div />, document.getElementById('sidebar-app'))
+ReactNative.render(<AppHeaderContainer />, document.getElementById('react-app-header'))
 
 // Server render
-React.renderToString(<div />)
+ReactNative.renderToString(<AppHeaderContainer />)
+ReactNative.renderToStaticMarkup(<AppHeaderContainer />)
 ```
 
-## Server-side rendering
-
-Pre-rendering React apps on the server is a key feature for Web applications.
-React Native for Web extends `AppRegistry` to provide support for server-side
-rendering.
+Rendering using the `AppRegistry`:
 
 ```js
-// server.js
+import React from 'react'
+import ReactNative, { AppRegistry } from 'react-native'
 
-import React, { AppRegistry } from 'react-native'
-import MyApp from './MyApp'
+// component that renders the app
+const AppContainer = (props) => { /* ... */ }
 
 // register the app
-AppRegistry.registerApp('MyApp', () => MyApp)
+AppRegistry.registerComponent('App', () => AppContainer)
+
+// DOM render
+AppRegistry.runApplication('App', {
+  initialProps: {},
+  rootTag: document.getElementById('react-app')
+})
 
 // prerender the app
-const { html, style } = AppRegistry.prerenderApplication('MyApp', { initialProps })
-
-// construct full page markup
-const HtmlShell = (html, style) => (
-  <html>
-    <head>
-      <meta charSet="utf-8" />
-      <meta content="initial-scale=1,width=device-width" name="viewport" />
-      {style}
-    </head>
-    <body>
-      <div id="react-root" dangerouslySetInnerHTML={{ __html: html }} />
-    </body>
-  </html>
-)
-
-React.renderToStaticMarkup(<HtmlShell html={html} style={style} />)
+const { html, style, styleElement } = AppRegistry.prerenderApplication('App', { initialProps })
 ```

docs/guides/style.md

@@ -174,16 +174,16 @@ const styles = StyleSheet.create({
 CSS output:
 
 ```css
-._s1 { color: gray; }
-._s2 { font-size: 2rem; }
-._s3 { font-size: 1.25rem; }
+.__style1 { color: gray; }
+.__style2 { font-size: 2rem; }
+.__style3 { font-size: 1.25rem; }
 ```
 
 Rendered HTML:
 
 ```html
-<span className="_s1 _s2">Heading</span>
-<span className="_s1 _s3">Text</span>
+<span className="__style1 __style2">Heading</span>
+<span className="__style1 __style3">Text</span>
 ```
 
 ### Reset
@@ -200,6 +200,7 @@ 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 {
@@ -214,12 +215,6 @@ input::-moz-focus-inner {
 
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-ol,
-ul,
-li {
-  list-style:none
+  display: none;
 }
 ```

examples/2048/Game2048.js

@@ -0,0 +1,325 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule Game2048
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  Animated,
+  AppRegistry,
+  StyleSheet,
+  Text,
+  TouchableBounce,
+  View,
+} = ReactNative;
+
+var GameBoard = require('./GameBoard');
+
+var BOARD_PADDING = 3;
+var CELL_MARGIN = 4;
+var CELL_SIZE = 60;
+
+class Cell extends React.Component {
+  render() {
+    return <View style={styles.cell} />;
+  }
+}
+
+class Board extends React.Component {
+  render() {
+    return (
+      <View style={styles.board}>
+        <View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
+        <View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
+        <View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
+        <View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+class Tile extends React.Component {
+  state: any;
+
+  static _getPosition(index): number {
+    return BOARD_PADDING + (index * (CELL_SIZE + CELL_MARGIN * 2) + CELL_MARGIN);
+  }
+
+  constructor(props: {}) {
+    super(props);
+
+    var tile = this.props.tile;
+
+    this.state = {
+      opacity: new Animated.Value(0),
+      top: new Animated.Value(Tile._getPosition(tile.toRow())),
+      left: new Animated.Value(Tile._getPosition(tile.toColumn())),
+    };
+  }
+
+  calculateOffset(): {top: number; left: number; opacity: number} {
+    var tile = this.props.tile;
+
+    var offset = {
+      top: this.state.top,
+      left: this.state.left,
+      opacity: this.state.opacity,
+    };
+
+    if (tile.isNew()) {
+      Animated.timing(this.state.opacity, {
+        duration: 100,
+        toValue: 1,
+      }).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(offset.top, {
+          duration: 100,
+          toValue: Tile._getPosition(tile.toRow()),
+        }),
+        Animated.timing(offset.left, {
+          duration: 100,
+          toValue: Tile._getPosition(tile.toColumn()),
+        }),
+      ]).start();
+    }
+    return offset;
+  }
+
+  render() {
+    var tile = this.props.tile;
+
+    var tileStyles = [
+      styles.tile,
+      styles['tile' + tile.value],
+      this.calculateOffset(),
+    ];
+
+    var textStyles = [
+      styles.value,
+      tile.value > 4 && styles.whiteText,
+      tile.value > 100 && styles.threeDigits,
+      tile.value > 1000 && styles.fourDigits,
+    ];
+
+    return (
+      <Animated.View style={tileStyles}>
+        <Text style={textStyles}>{tile.value}</Text>
+      </Animated.View>
+    );
+  }
+}
+
+class GameEndOverlay extends React.Component {
+  render() {
+    var board = this.props.board;
+
+    if (!board.hasWon() && !board.hasLost()) {
+      return <View/>;
+    }
+
+    var message = board.hasWon() ?
+      'Good Job!' : 'Game Over';
+
+    return (
+      <View style={styles.overlay}>
+        <Text style={styles.overlayMessage}>{message}</Text>
+        <TouchableBounce onPress={this.props.onRestart} style={styles.tryAgain}>
+          <Text style={styles.tryAgainText}>Try Again?</Text>
+        </TouchableBounce>
+      </View>
+    );
+  }
+}
+
+class Game2048 extends React.Component {
+  startX: number;
+  startY: number;
+  state: any;
+
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      board: new GameBoard(),
+    };
+    this.startX = 0;
+    this.startY = 0;
+  }
+
+  restartGame() {
+    this.setState({board: new GameBoard()});
+  }
+
+  handleTouchStart(event: Object) {
+    if (this.state.board.hasWon()) {
+      return;
+    }
+
+    this.startX = event.nativeEvent.pageX;
+    this.startY = event.nativeEvent.pageY;
+  }
+
+  handleTouchEnd(event: Object) {
+    if (this.state.board.hasWon()) {
+      return;
+    }
+
+    var deltaX = event.nativeEvent.pageX - this.startX;
+    var deltaY = event.nativeEvent.pageY - this.startY;
+
+    var direction = -1;
+    if (Math.abs(deltaX) > 3 * Math.abs(deltaY) && Math.abs(deltaX) > 30) {
+      direction = deltaX > 0 ? 2 : 0;
+    } else if (Math.abs(deltaY) > 3 * Math.abs(deltaX) && Math.abs(deltaY) > 30) {
+      direction = deltaY > 0 ? 3 : 1;
+    }
+
+    if (direction !== -1) {
+      this.setState({board: this.state.board.move(direction)});
+    }
+  }
+
+  render() {
+    var tiles = this.state.board.tiles
+      .filter((tile) => tile.value)
+      .map((tile) => <Tile ref={tile.id} key={tile.id} tile={tile} />);
+
+    return (
+      <View
+        style={styles.container}
+        onTouchStart={(event) => this.handleTouchStart(event)}
+        onTouchEnd={(event) => this.handleTouchEnd(event)}>
+        <Board>
+          {tiles}
+        </Board>
+        <GameEndOverlay board={this.state.board} onRestart={() => this.restartGame()} />
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  board: {
+    padding: BOARD_PADDING,
+    backgroundColor: '#bbaaaa',
+    borderRadius: 5,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(221, 221, 221, 0.5)',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  overlayMessage: {
+    fontSize: 40,
+    marginBottom: 20,
+  },
+  tryAgain: {
+    backgroundColor: '#887761',
+    padding: 20,
+    borderRadius: 5,
+  },
+  tryAgainText: {
+    color: '#ffffff',
+    fontSize: 20,
+    fontWeight: '500',
+  },
+  cell: {
+    width: CELL_SIZE,
+    height: CELL_SIZE,
+    borderRadius: 5,
+    backgroundColor: '#ddccbb',
+    margin: CELL_MARGIN,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  tile: {
+    position: 'absolute',
+    width: CELL_SIZE,
+    height: CELL_SIZE,
+    backgroundColor: '#ddccbb',
+    borderRadius: 5,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  value: {
+    fontSize: 24,
+    color: '#776666',
+    fontFamily: 'Verdana',
+    fontWeight: '500',
+  },
+  tile2: {
+    backgroundColor: '#eeeeee',
+  },
+  tile4: {
+    backgroundColor: '#eeeecc',
+  },
+  tile8: {
+    backgroundColor: '#ffbb87',
+  },
+  tile16: {
+    backgroundColor: '#ff9966',
+  },
+  tile32: {
+    backgroundColor: '#ff7755',
+  },
+  tile64: {
+    backgroundColor: '#ff5533',
+  },
+  tile128: {
+    backgroundColor: '#eecc77',
+  },
+  tile256: {
+    backgroundColor: '#eecc66',
+  },
+  tile512: {
+    backgroundColor: '#eecc55',
+  },
+  tile1024: {
+    backgroundColor: '#eecc33',
+  },
+  tile2048: {
+    backgroundColor: '#eecc22',
+  },
+  whiteText: {
+    color: '#ffffff',
+  },
+  threeDigits: {
+    fontSize: 20,
+  },
+  fourDigits: {
+    fontSize: 18,
+  },
+});
+
+AppRegistry.registerComponent('Game2048', () => Game2048);
+
+module.exports = Game2048;

examples/2048/GameBoard.js

@@ -0,0 +1,201 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule GameBoard
+ * @flow
+ */
+'use strict';
+
+// NB: Taken straight from: https://github.com/IvanVergiliev/2048-react/blob/master/src/board.js
+//     with no modification except to format it for CommonJS and fix lint/flow errors
+
+var rotateLeft = function (matrix) {
+  var rows = matrix.length;
+  var columns = matrix[0].length;
+  var res = [];
+  for (var row = 0; row < rows; ++row) {
+    res.push([]);
+    for (var column = 0; column < columns; ++column) {
+      res[row][column] = matrix[column][columns - row - 1];
+    }
+  }
+  return res;
+};
+
+var Tile = function (value?: number, row?: number, column?: number) {
+  this.value = value || 0;
+  this.row = row || -1;
+
+  this.column = column || -1;
+  this.oldRow = -1;
+  this.oldColumn = -1;
+  this.markForDeletion = false;
+  this.mergedInto = null;
+  this.id = Tile.id++;
+};
+
+Tile.id = 0;
+
+Tile.prototype.moveTo = function (row, column) {
+  this.oldRow = this.row;
+  this.oldColumn = this.column;
+  this.row = row;
+  this.column = column;
+};
+
+Tile.prototype.isNew = function () {
+  return this.oldRow === -1 && !this.mergedInto;
+};
+
+Tile.prototype.hasMoved = function () {
+  return (this.fromRow() !== -1 && (this.fromRow() !== this.toRow() || this.fromColumn() !== this.toColumn())) ||
+    this.mergedInto;
+};
+
+Tile.prototype.fromRow = function () {
+  return this.mergedInto ? this.row : this.oldRow;
+};
+
+Tile.prototype.fromColumn = function () {
+  return this.mergedInto ? this.column : this.oldColumn;
+};
+
+Tile.prototype.toRow = function () {
+  return this.mergedInto ? this.mergedInto.row : this.row;
+};
+
+Tile.prototype.toColumn = function () {
+  return this.mergedInto ? this.mergedInto.column : this.column;
+};
+
+var Board = function () {
+  this.tiles = [];
+  this.cells = [];
+  for (var i = 0; i < Board.size; ++i) {
+    this.cells[i] = [this.addTile(), this.addTile(), this.addTile(), this.addTile()];
+  }
+  this.addRandomTile();
+  this.setPositions();
+  this.won = false;
+};
+
+Board.prototype.addTile = function () {
+  var res = new Tile();
+  Tile.apply(res, arguments);
+  this.tiles.push(res);
+  return res;
+};
+
+Board.size = 4;
+
+Board.prototype.moveLeft = function () {
+  var hasChanged = false;
+  for (var row = 0; row < Board.size; ++row) {
+    var currentRow = this.cells[row].filter(function (tile) { return tile.value !== 0; });
+    var resultRow = [];
+    for (var target = 0; target < Board.size; ++target) {
+      var targetTile = currentRow.length ? currentRow.shift() : this.addTile();
+      if (currentRow.length > 0 && currentRow[0].value === targetTile.value) {
+        var tile1 = targetTile;
+        targetTile = this.addTile(targetTile.value);
+        tile1.mergedInto = targetTile;
+        var tile2 = currentRow.shift();
+        tile2.mergedInto = targetTile;
+        targetTile.value += tile2.value;
+      }
+      resultRow[target] = targetTile;
+      this.won = this.won || (targetTile.value === 2048);
+      hasChanged = hasChanged || (targetTile.value !== this.cells[row][target].value);
+    }
+    this.cells[row] = resultRow;
+  }
+  return hasChanged;
+};
+
+Board.prototype.setPositions = function () {
+  this.cells.forEach(function (row, rowIndex) {
+    row.forEach(function (tile, columnIndex) {
+      tile.oldRow = tile.row;
+      tile.oldColumn = tile.column;
+      tile.row = rowIndex;
+      tile.column = columnIndex;
+      tile.markForDeletion = false;
+    });
+  });
+};
+
+Board.fourProbability = 0.1;
+
+Board.prototype.addRandomTile = function () {
+  var emptyCells = [];
+  for (var r = 0; r < Board.size; ++r) {
+    for (var c = 0; c < Board.size; ++c) {
+      if (this.cells[r][c].value === 0) {
+        emptyCells.push({r: r, c: c});
+      }
+    }
+  }
+  var index = Math.floor(Math.random() * emptyCells.length);
+  var cell = emptyCells[index];
+  var newValue = Math.random() < Board.fourProbability ? 4 : 2;
+  this.cells[cell.r][cell.c] = this.addTile(newValue);
+};
+
+Board.prototype.move = function (direction) {
+  // 0 -> left, 1 -> up, 2 -> right, 3 -> down
+  this.clearOldTiles();
+  for (var i = 0; i < direction; ++i) {
+    this.cells = rotateLeft(this.cells);
+  }
+  var hasChanged = this.moveLeft();
+  for (var i = direction; i < 4; ++i) {
+    this.cells = rotateLeft(this.cells);
+  }
+  if (hasChanged) {
+    this.addRandomTile();
+  }
+  this.setPositions();
+  return this;
+};
+
+Board.prototype.clearOldTiles = function () {
+  this.tiles = this.tiles.filter(function (tile) { return tile.markForDeletion === false; });
+  this.tiles.forEach(function (tile) { tile.markForDeletion = true; });
+};
+
+Board.prototype.hasWon = function () {
+  return this.won;
+};
+
+Board.deltaX = [-1, 0, 1, 0];
+Board.deltaY = [0, -1, 0, 1];
+
+Board.prototype.hasLost = function () {
+  var canMove = false;
+  for (var row = 0; row < Board.size; ++row) {
+    for (var column = 0; column < Board.size; ++column) {
+      canMove = canMove || (this.cells[row][column].value === 0);
+      for (var dir = 0; dir < 4; ++dir) {
+        var newRow = row + Board.deltaX[dir];
+        var newColumn = column + Board.deltaY[dir];
+        if (newRow < 0 || newRow >= Board.size || newColumn < 0 || newColumn >= Board.size) {
+          continue;
+        }
+        canMove = canMove || (this.cells[row][column].value === this.cells[newRow][newColumn].value);
+      }
+    }
+  }
+  return !canMove;
+};
+
+module.exports = Board;

examples/TicTacToe/TicTacToe.js

@@ -0,0 +1,322 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule TicTacToeApp
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = ReactNative;
+
+class Board {
+  grid: Array<Array<number>>;
+  turn: number;
+
+  constructor() {
+    var size = 3;
+    var grid = Array(size);
+    for (var i = 0; i < size; i++) {
+      var row = Array(size);
+      for (var j = 0; j < size; j++) {
+        row[j] = 0;
+      }
+      grid[i] = row;
+    }
+    this.grid = grid;
+
+    this.turn = 1;
+  }
+
+  mark(row: number, col: number, player: number): Board {
+    this.grid[row][col] = player;
+    return this;
+  }
+
+  hasMark(row: number, col: number): boolean {
+    return this.grid[row][col] !== 0;
+  }
+
+  winner(): ?number {
+    for (var i = 0; i < 3; i++) {
+      if (this.grid[i][0] !== 0 && this.grid[i][0] === this.grid[i][1] &&
+          this.grid[i][0] === this.grid[i][2]) {
+        return this.grid[i][0];
+      }
+    }
+
+    for (var i = 0; i < 3; i++) {
+      if (this.grid[0][i] !== 0 && this.grid[0][i] === this.grid[1][i] &&
+          this.grid[0][i] === this.grid[2][i]) {
+        return this.grid[0][i];
+      }
+    }
+
+    if (this.grid[0][0] !== 0 && this.grid[0][0] === this.grid[1][1] &&
+        this.grid[0][0] === this.grid[2][2]) {
+      return this.grid[0][0];
+    }
+
+    if (this.grid[0][2] !== 0 && this.grid[0][2] === this.grid[1][1] &&
+        this.grid[0][2] === this.grid[2][0]) {
+      return this.grid[0][2];
+    }
+
+    return null;
+  }
+
+  tie(): boolean {
+    for (var i = 0; i < 3; i++) {
+      for (var j = 0; j < 3; j++) {
+        if (this.grid[i][j] === 0) {
+          return false;
+        }
+      }
+    }
+    return this.winner() === null;
+  }
+}
+
+var Cell = React.createClass({
+  cellStyle() {
+    switch (this.props.player) {
+      case 1:
+        return styles.cellX;
+      case 2:
+        return styles.cellO;
+      default:
+        return null;
+    }
+  },
+
+  textStyle() {
+    switch (this.props.player) {
+      case 1:
+        return styles.cellTextX;
+      case 2:
+        return styles.cellTextO;
+      default:
+        return {};
+    }
+  },
+
+  textContents() {
+    switch (this.props.player) {
+      case 1:
+        return 'X';
+      case 2:
+        return 'O';
+      default:
+        return '';
+    }
+  },
+
+  render() {
+    return (
+      <TouchableHighlight
+        onPress={this.props.onPress}
+        underlayColor="transparent"
+        activeOpacity={0.5}>
+        <View style={[styles.cell, this.cellStyle()]}>
+          <Text style={[styles.cellText, this.textStyle()]}>
+            {this.textContents()}
+          </Text>
+        </View>
+      </TouchableHighlight>
+    );
+  }
+});
+
+var GameEndOverlay = React.createClass({
+  render() {
+    var board = this.props.board;
+
+    var tie = board.tie();
+    var winner = board.winner();
+    if (!winner && !tie) {
+      return <View />;
+    }
+
+    var message;
+    if (tie) {
+      message = 'It\'s a tie!';
+    } else {
+      message = (winner === 1 ? 'X' : 'O') + ' wins!';
+    }
+
+    return (
+      <View style={styles.overlay}>
+        <Text style={styles.overlayMessage}>{message}</Text>
+        <TouchableHighlight
+          onPress={this.props.onRestart}
+          underlayColor="transparent"
+          activeOpacity={0.5}>
+          <View style={styles.newGame}>
+            <Text style={styles.newGameText}>New Game</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+});
+
+var TicTacToeApp = React.createClass({
+  getInitialState() {
+    return { board: new Board(), player: 1 };
+  },
+
+  restartGame() {
+    this.setState(this.getInitialState());
+  },
+
+  nextPlayer(): number {
+    return this.state.player === 1 ? 2 : 1;
+  },
+
+  handleCellPress(row: number, col: number) {
+    if (this.state.board.hasMark(row, col)) {
+      return;
+    }
+
+    this.setState({
+      board: this.state.board.mark(row, col, this.state.player),
+      player: this.nextPlayer(),
+    });
+  },
+
+  render() {
+    var rows = this.state.board.grid.map((cells, row) =>
+      <View key={'row' + row} style={styles.row}>
+        {cells.map((player, col) =>
+          <Cell
+            key={'cell' + col}
+            player={player}
+            onPress={this.handleCellPress.bind(this, row, col)}
+          />
+        )}
+      </View>
+    );
+
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>EXTREME T3</Text>
+        <View style={styles.board}>
+          {rows}
+        </View>
+        <GameEndOverlay
+          board={this.state.board}
+          onRestart={this.restartGame}
+        />
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white'
+  },
+  title: {
+    fontFamily: 'Chalkduster',
+    fontSize: 39,
+    marginBottom: 20,
+  },
+  board: {
+    padding: 5,
+    backgroundColor: '#47525d',
+    borderRadius: 10,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+
+  // CELL
+
+  cell: {
+    width: 80,
+    height: 80,
+    borderRadius: 5,
+    backgroundColor: '#7b8994',
+    margin: 5,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cellX: {
+    backgroundColor: '#72d0eb',
+  },
+  cellO: {
+    backgroundColor: '#7ebd26',
+  },
+
+  // CELL TEXT
+
+  cellText: {
+    borderRadius: 5,
+    fontSize: 50,
+    fontFamily: 'AvenirNext-Bold',
+  },
+  cellTextX: {
+    color: '#19a9e5',
+  },
+  cellTextO: {
+    color: '#b9dc2f',
+  },
+
+  // GAME OVER
+
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(221, 221, 221, 0.5)',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  overlayMessage: {
+    fontSize: 40,
+    marginBottom: 20,
+    marginLeft: 20,
+    marginRight: 20,
+    fontFamily: 'AvenirNext-DemiBold',
+    textAlign: 'center',
+  },
+  newGame: {
+    backgroundColor: '#887765',
+    padding: 20,
+    borderRadius: 5,
+  },
+  newGameText: {
+    color: 'white',
+    fontSize: 20,
+    fontFamily: 'AvenirNext-DemiBold',
+  },
+});
+
+AppRegistry.registerComponent('TicTacToeApp', () => TicTacToeApp);
+
+module.exports = TicTacToeApp;

examples/components/App.js

@@ -1,27 +1,23 @@
 import GridView from './GridView'
 import Heading from './Heading'
-import MediaQueryWidget from './MediaQueryWidget'
-import React, { Image, StyleSheet, ScrollView, Text, TextInput, TouchableHighlight, View } from 'react-native'
+import React from 'react'
+import { Image, StyleSheet, ScrollView, Text, TextInput, TouchableHighlight, View } from 'react-native'
 
 export default class App extends React.Component {
   static propTypes = {
-    mediaQuery: React.PropTypes.object,
     style: View.propTypes.style
   }
 
-  constructor(...args) {
-    super(...args)
+  constructor(props) {
+    super(props)
     this.state = {
       scrollEnabled: true
     }
   }
 
   render() {
-    const { mediaQuery } = this.props
     const finalRootStyles = [
-      rootStyles.common,
-      mediaQuery.small.matches && rootStyles.mqSmall,
-      mediaQuery.large.matches && rootStyles.mqLarge
+      rootStyles.common
     ]
 
     return (
@@ -35,8 +31,6 @@ export default class App extends React.Component {
         scroll views – from which more complex components and apps can be
         constructed.</Text>
 
-        <MediaQueryWidget mediaQuery={mediaQuery} />
-
         <Heading size='large'>Image</Heading>
         <Image
           accessibilityLabel='accessible image'
@@ -96,7 +90,10 @@ export default class App extends React.Component {
         />
         <TextInput secureTextEntry />
         <TextInput defaultValue='read only' editable={false} />
-        <TextInput keyboardType='email-address' placeholder='you@domain.com' placeholderTextColor='red' />
+        <TextInput
+          style={{ flex:1, height: 60, padding: 20, fontSize: 20, textAlign: 'center' }}
+          keyboardType='email-address' placeholder='you@domain.com' placeholderTextColor='red'
+        />
         <TextInput keyboardType='numeric' />
         <TextInput keyboardType='phone-pad' />
         <TextInput defaultValue='https://delete-me' keyboardType='url' placeholder='https://www.some-website.com' selectTextOnFocus />

examples/components/GridView.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes, StyleSheet, View } from 'react-native'
+import React, { Component, PropTypes } from 'react'
+import { StyleSheet, View } from 'react-native'
 
 export default class GridView extends Component {
   static propTypes = {
@@ -12,8 +13,8 @@ export default class GridView extends Component {
   }
 
   static defaultProps = {
-    alley: '0',
-    gutter: '0'
+    alley: '0px',
+    gutter: '0px'
   }
 
   render() {

examples/components/Heading.js

@@ -1,4 +1,5 @@
-import React, { StyleSheet, Text } from 'react-native'
+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
 
 const Heading = ({ children, size = 'normal' }) => (
   <Text

examples/components/MediaQueryWidget.js

@@ -1,39 +0,0 @@
-import React, { StyleSheet, Text, View } from 'react-native'
-
-const MediaQueryWidget = ({ mediaQuery = {} }) => {
-  const active = Object.keys(mediaQuery).reduce((active, alias) => {
-    if (mediaQuery[alias].matches) {
-      active = {
-        alias,
-        mql: mediaQuery[alias]
-      }
-    }
-    return active
-  }, {})
-
-  return (
-    <View style={styles.root}>
-      <Text style={styles.heading}>Active Media Query</Text>
-      <Text style={styles.text}>{`"${active.alias}"`} {active.mql && active.mql.media}</Text>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  root: {
-    alignItems: 'center',
-    borderWidth: 1,
-    marginVertical: 10,
-    padding: 10
-  },
-  heading: {
-    fontWeight: 'bold',
-    padding: 5,
-    textAlign: 'center'
-  },
-  text: {
-    textAlign: 'center'
-  }
-})
-
-export default MediaQueryWidget

examples/index.html

@@ -3,4 +3,4 @@
 <title>React Native for Web</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <div id="react-root"></div>
-<script src="/examples.js"></script>
+<script src="/bundle.js"></script>

examples/index.js

@@ -1,23 +1,10 @@
-import { MediaProvider, matchMedia } from 'react-media-queries'
+import { AppRegistry } from 'react-native'
 import App from './components/App'
-import createGetter from 'react-media-queries/lib/createMediaQueryGetter'
-import createListener from 'react-media-queries/lib/createMediaQueryListener'
-import React, { AppRegistry } from 'react-native'
+import Game2048 from './2048/Game2048'
+import TicTacToeApp from './TicTacToe/TicTacToe'
 
-const mediaQueries = {
-  small: '(min-width: 300px)',
-  medium: '(min-width: 400px)',
-  large: '(min-width: 500px)'
-}
-const ResponsiveApp = matchMedia()(App)
-const WrappedApp = () => (
-  <MediaProvider getMedia={createGetter(mediaQueries)} listener={createListener(mediaQueries)}>
-    <ResponsiveApp />
-  </MediaProvider>
-)
+AppRegistry.registerComponent('App', () => App)
 
-AppRegistry.registerComponent('Example', () => WrappedApp)
-
-AppRegistry.runApplication('Example', {
+AppRegistry.runApplication('App', {
   rootTag: document.getElementById('react-root')
 })

examples/webpack.config.js

@@ -1,13 +1,14 @@
-const constants = require('./constants')
 const path = require('path')
 const webpack = require('webpack')
 
+const EXAMPLES_DIRECTORY = __dirname
+
 module.exports = {
   devServer: {
-    contentBase: constants.EXAMPLES_DIRECTORY
+    contentBase: EXAMPLES_DIRECTORY
   },
   entry: {
-    example: constants.EXAMPLES_DIRECTORY
+    example: EXAMPLES_DIRECTORY
   },
   module: {
     loaders: [
@@ -20,18 +21,23 @@ module.exports = {
     ]
   },
   output: {
-    filename: 'examples.js'
+    filename: 'bundle.js'
   },
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
     }),
     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()
   ],
   resolve: {
     alias: {
-      'react-native': path.join(__dirname, '../dist/react-native-web')
+      'react-native': path.join(__dirname, '../src')
     }
   }
 }

karma.config.js

@@ -1,9 +1,9 @@
-var constants = require('./constants')
-var webpack = require('webpack')
+const webpack = require('webpack')
+
+const testEntry = 'tests.webpack.js'
 
 module.exports = function (config) {
   config.set({
-    basePath: constants.ROOT_DIRECTORY,
     browsers: process.env.TRAVIS ? [ 'Firefox' ] : [ 'Chrome' ],
     browserNoActivityTimeout: 60000,
     client: {
@@ -12,24 +12,31 @@ module.exports = function (config) {
       useIframe: true
     },
     files: [
-      constants.TEST_ENTRY
+      testEntry
     ],
     frameworks: [ 'mocha' ],
     plugins: [
       'karma-chrome-launcher',
       'karma-firefox-launcher',
       'karma-mocha',
+      'karma-mocha-reporter',
       'karma-sourcemap-loader',
-      'karma-spec-reporter',
       'karma-webpack'
     ],
     preprocessors: {
-      [constants.TEST_ENTRY]: [ 'webpack', 'sourcemap' ]
+      [testEntry]: [ 'webpack', 'sourcemap' ]
     },
-    reporters: process.env.TRAVIS ? [ 'dots' ] : [ 'spec' ],
+    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: [
           {

package.json

@@ -1,62 +1,64 @@
 {
   "name": "react-native-web",
-  "version": "0.0.15",
+  "version": "0.0.29",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rm -rf ./dist && mkdir dist && babel src -d dist --ignore **/__tests__,src/modules/specHelpers",
-    "build:umd": "webpack --config config/webpack.config.js --sort-assets-by --progress",
-    "examples": "webpack-dev-server --config config/webpack.config.example.js --inline --hot --colors --quiet",
-    "lint": "eslint config examples src",
+    "build": "del ./dist && mkdir dist && babel src -d dist --ignore **/__tests__,src/modules/specHelpers",
+    "build:umd": "webpack --config webpack.config.js --sort-assets-by --progress",
+    "examples": "webpack-dev-server --config examples/webpack.config.js --inline --hot --colors --quiet",
+    "lint": "eslint src",
     "prepublish": "npm run build && npm run build:umd",
-    "test": "karma start config/karma.config.js",
-    "test:watch": "npm run test:unit -- --no-single-run"
+    "test": "karma start karma.config.js",
+    "test:watch": "npm run test -- --no-single-run"
   },
   "dependencies": {
-    "exenv": "^1.2.0",
-    "inline-style-prefixer": "^0.5.3",
-    "invariant": "^2.2.0",
-    "lodash.debounce": "^3.1.1",
-    "react-tappable": "^0.7.1",
-    "react-textarea-autosize": "^3.1.0"
+    "animated": "^0.1.3",
+    "babel-runtime": "^6.9.2",
+    "fbjs": "^0.8.1",
+    "inline-style-prefix-all": "^2.0.2",
+    "lodash": "^4.13.1",
+    "react-dom": "^15.1.0",
+    "react-textarea-autosize": "^4.0.2",
+    "react-timer-mixin": "^0.13.3"
   },
   "devDependencies": {
-    "babel-cli": "^6.3.17",
-    "babel-core": "^6.3.13",
-    "babel-eslint": "^4.1.6",
-    "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-1": "^6.3.13",
-    "babel-runtime": "^6.3.19",
-    "eslint": "^1.10.3",
-    "eslint-config-standard": "^4.4.0",
-    "eslint-config-standard-react": "^1.2.1",
-    "eslint-plugin-react": "^3.13.1",
-    "eslint-plugin-standard": "^1.3.1",
-    "karma": "^0.13.16",
-    "karma-browserstack-launcher": "^0.1.8",
-    "karma-chrome-launcher": "^0.2.2",
-    "karma-firefox-launcher": "^0.1.7",
-    "karma-mocha": "^0.2.1",
-    "karma-sourcemap-loader": "^0.3.6",
-    "karma-spec-reporter": "0.0.23",
+    "babel-cli": "^6.10.1",
+    "babel-core": "^6.9.1",
+    "babel-eslint": "^6.0.4",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-1": "^6.5.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",
+    "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.0.1",
+    "karma-mocha-reporter": "^2.0.4",
+    "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
-    "mocha": "^2.3.4",
+    "mocha": "^2.5.3",
     "node-libs-browser": "^0.5.3",
-    "react": "^0.14.3",
-    "react-addons-test-utils": "^0.14.3",
-    "react-dom": "^0.14.3",
-    "react-media-queries": "^2.0.1",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0"
+    "react": "^15.1.0",
+    "react-addons-test-utils": "^15.1.0",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
   },
   "peerDependencies": {
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3"
+    "react": "^15.1.0"
   },
   "author": "Nicolas Gallagher",
   "license": "BSD-3-Clause",

src/__tests__/index-test.js

@@ -1,23 +0,0 @@
-/* eslint-env mocha */
-
-import assert from 'assert'
-import React from '..'
-
-suite('ReactNativeWeb', () => {
-  suite('exports', () => {
-    test('React', () => {
-      assert.ok(React)
-    })
-
-    test('ReactDOM methods', () => {
-      assert.ok(React.findDOMNode)
-      assert.ok(React.render)
-      assert.ok(React.unmountComponentAtNode)
-    })
-
-    test('ReactDOM/server methods', () => {
-      assert.ok(React.renderToString)
-      assert.ok(React.renderToStaticMarkup)
-    })
-  })
-})

src/apis/Animated/index.js

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

src/apis/AppRegistry/ReactNativeApp.js

@@ -1,32 +1,21 @@
-import Portal from '../../components/Portal'
 import React, { Component, PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import StyleSheet from '../StyleSheet'
 import View from '../../components/View'
 
-export default class ReactNativeApp extends Component {
+class ReactNativeApp extends Component {
   static propTypes = {
     initialProps: PropTypes.object,
     rootComponent: PropTypes.any.isRequired,
     rootTag: PropTypes.any
   };
 
-  constructor(props, context) {
-    super(props, context)
-    this._handleModalVisibilityChange = this._handleModalVisibilityChange.bind(this)
-  }
-
-  _handleModalVisibilityChange(modalVisible) {
-    ReactDOM.findDOMNode(this._root).setAttribute('aria-hidden', `${modalVisible}`)
-  }
-
   render() {
     const { initialProps, rootComponent: RootComponent, rootTag } = this.props
 
     return (
       <View style={styles.appContainer}>
-        <RootComponent {...initialProps} ref={(c) => { this._root = c }} rootTag={rootTag} />
-        <Portal onModalVisibilityChanged={this._handleModalVisibilityChange} />
+        <RootComponent {...initialProps} rootTag={rootTag} />
       </View>
     )
   }
@@ -34,8 +23,7 @@ export default class ReactNativeApp extends Component {
 
 const styles = StyleSheet.create({
   /**
-   * Ensure that the application covers the whole screen. This prevents the
-   * Portal content from being clipped.
+   * Ensure that the application covers the whole screen.
    */
   appContainer: {
     position: 'absolute',
@@ -45,3 +33,5 @@ const styles = StyleSheet.create({
     bottom: 0
   }
 })
+
+module.exports = ReactNativeApp

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

@@ -0,0 +1,20 @@
+/* eslint-env mocha */
+
+import assert from 'assert'
+import React from 'react'
+import { elementId } from '../../StyleSheet'
+import { prerenderApplication } from '../renderApplication'
+
+const component = () => <div />
+
+suite('apis/AppRegistry/renderApplication', () => {
+  test('prerenderApplication', () => {
+    const { html, style, styleElement } = prerenderApplication(component, {})
+
+    assert.ok(html.indexOf('<div ') > -1)
+    assert.ok(typeof style === 'string')
+    assert.equal(styleElement.type, 'style')
+    assert.equal(styleElement.props.id, elementId)
+    assert.equal(styleElement.props.dangerouslySetInnerHTML.__html, style)
+  })
+})

src/apis/AppRegistry/index.js

@@ -7,7 +7,7 @@
  */
 
 import { Component } from 'react'
-import invariant from 'invariant'
+import invariant from 'fbjs/lib/invariant'
 import ReactDOM from 'react-dom'
 import renderApplication, { prerenderApplication } from './renderApplication'
 
@@ -24,7 +24,7 @@ type AppConfig = {
 /**
  * `AppRegistry` is the JS entry point to running all React Native apps.
  */
-export default class AppRegistry {
+class AppRegistry {
   static getAppKeys(): Array<string> {
     return Object.keys(runnables)
   }
@@ -33,7 +33,7 @@ export default class AppRegistry {
     invariant(
       runnables[appKey] && runnables[appKey].prerender,
       `Application ${appKey} has not been registered. ` +
-      `This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.`
+      'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
     )
 
     return runnables[appKey].prerender(appParameters)
@@ -65,7 +65,7 @@ export default class AppRegistry {
   }
 
   static runApplication(appKey: string, appParameters?: Object): void {
-    const isDevelopment = process.env.NODE_ENV === 'development'
+    const isDevelopment = process.env.NODE_ENV !== 'production'
     const params = { ...appParameters }
     params.rootTag = `#${params.rootTag.id}`
 
@@ -78,7 +78,7 @@ export default class AppRegistry {
     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.`
+      'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
     )
 
     runnables[appKey].run(appParameters)
@@ -88,3 +88,5 @@ export default class AppRegistry {
     ReactDOM.unmountComponentAtNode(rootTag)
   }
 }
+
+module.exports = AppRegistry

src/apis/AppRegistry/renderApplication.js

@@ -6,21 +6,23 @@
  * @flow
  */
 
-import invariant from 'invariant'
+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'
 
-const renderStyleSheetToString = () => `<style id="${StyleSheet.elementId}">${StyleSheet._renderToString()}</style>`
+const renderStyleSheetToString = () => StyleSheet.renderToString()
+const styleAsElement = (style) => <style dangerouslySetInnerHTML={{ __html: style }} id={StyleSheet.elementId} />
+const styleAsTagString = (style) => `<style id="${StyleSheet.elementId}">${style}</style>`
 
 export default function renderApplication(RootComponent: Component, initialProps: Object, rootTag: any) {
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag)
 
   // insert style sheet if needed
   const styleElement = document.getElementById(StyleSheet.elementId)
-  if (!styleElement) { rootTag.insertAdjacentHTML('beforebegin', renderStyleSheetToString()) }
+  if (!styleElement) { rootTag.insertAdjacentHTML('beforebegin', styleAsTagString(renderStyleSheetToString())) }
 
   const component = (
     <ReactNativeApp
@@ -41,5 +43,6 @@ export function prerenderApplication(RootComponent: Component, initialProps: Obj
   )
   const html = ReactDOMServer.renderToString(component)
   const style = renderStyleSheetToString()
-  return { html, style }
+  const styleElement = styleAsElement(style)
+  return { html, style, styleElement }
 }

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

@@ -1,5 +1,31 @@
 /* eslint-env mocha */
 
+import AppState from '..'
+import assert from 'assert'
+
 suite('apis/AppState', () => {
-  test.skip('NO TEST COVERAGE', () => {})
+  const handler = () => {}
+
+  teardown(() => {
+    try { AppState.removeEventListener('change', handler) } catch (e) {}
+  })
+
+  suite('addEventListener', () => {
+    test('throws if the provided "eventType" is not supported', () => {
+      assert.throws(() => AppState.addEventListener('foo', handler))
+      assert.doesNotThrow(() => AppState.addEventListener('change', handler))
+    })
+  })
+
+  suite('removeEventListener', () => {
+    test('throws if the handler is not registered', () => {
+      assert.throws(() => AppState.removeEventListener('change', handler))
+    })
+
+    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))
+    })
+  })
 })

src/apis/AppState/index.js

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

src/apis/AsyncStorage/index.js

@@ -12,7 +12,7 @@ const mergeLocalStorageItem = (key, value) => {
   window.localStorage.setItem(key, nextValue)
 }
 
-export default class AsyncStorage {
+class AsyncStorage {
   /**
    * Erases *all* AsyncStorage for the domain.
    */
@@ -157,3 +157,5 @@ export default class AsyncStorage {
     })
   }
 }
+
+module.exports = AsyncStorage

src/apis/Dimensions/index.js

@@ -6,26 +6,38 @@
  * @flow
  */
 
-import invariant from 'invariant'
+import debounce from 'lodash/debounce'
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
+import invariant from 'fbjs/lib/invariant'
 
-const dimensions = {
-  screen: {
-    fontScale: 1,
-    get height() { return window.screen.height },
-    scale: window.devicePixelRatio || 1,
-    get width() { return window.screen.width }
-  },
-  window: {
-    fontScale: 1,
-    get height() { return document.documentElement.clientHeight },
-    scale: window.devicePixelRatio || 1,
-    get width() { return document.documentElement.clientWidth }
-  }
-}
+const win = ExecutionEnvironment.canUseDOM ? window : { screen: {} }
 
-export default class Dimensions {
+const dimensions = {}
+
+class Dimensions {
   static get(dimension: string): Object {
     invariant(dimensions[dimension], 'No dimension set for key ' + dimension)
     return dimensions[dimension]
   }
+
+  static set(): void {
+    dimensions.window = {
+      fontScale: 1,
+      height: win.innerHeight,
+      scale: win.devicePixelRatio || 1,
+      width: win.innerWidth
+    }
+
+    dimensions.screen = {
+      fontScale: 1,
+      height: win.screen.height,
+      scale: win.devicePixelRatio || 1,
+      width: win.screen.width
+    }
+  }
 }
+
+Dimensions.set()
+ExecutionEnvironment.canUseDOM && window.addEventListener('resize', debounce(Dimensions.set, 50))
+
+module.exports = Dimensions

src/apis/InteractionManager/index.js

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

src/apis/NetInfo/index.js

@@ -6,9 +6,15 @@
  * @flow
  */
 
-import invariant from 'invariant'
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
+import invariant from 'fbjs/lib/invariant'
+
+const connection = ExecutionEnvironment.canUseDOM && (
+  window.navigator.connection ||
+  window.navigator.mozConnection ||
+  window.navigator.webkitConnection
+)
 
-const connection = window.navigator.connection || window.navigator.mozConnection || window.navigator.webkitConnection
 const eventTypes = [ 'change' ]
 
 /**
@@ -50,8 +56,8 @@ const NetInfo = {
   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(true), false)
-      window.addEventListener('offline', handler.bind(false), false)
+      window.addEventListener('online', handler.bind(null, true), false)
+      window.addEventListener('offline', handler.bind(null, false), false)
 
       return {
         remove: () => NetInfo.isConnected.removeEventListener(type, handler)
@@ -60,8 +66,8 @@ const NetInfo = {
 
     removeEventListener(type: string, handler: Function): void {
       invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type)
-      window.removeEventListener('online', handler.bind(true), false)
-      window.removeEventListener('offline', handler.bind(false), false)
+      window.removeEventListener('online', handler.bind(null, true), false)
+      window.removeEventListener('offline', handler.bind(null, false), false)
     },
 
     fetch(): Promise {
@@ -76,4 +82,4 @@ const NetInfo = {
   }
 }
 
-export default NetInfo
+module.exports = NetInfo

src/apis/PanResponder/TouchHistoryMath.js

@@ -0,0 +1,124 @@
+/* eslint-disable */
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ */
+
+"use strict";
+
+var TouchHistoryMath = {
+  /**
+   * This code is optimized and not intended to look beautiful. This allows
+   * computing of touch centroids that have moved after `touchesChangedAfter`
+   * timeStamp. You can compute the current centroid involving all touches
+   * moves after `touchesChangedAfter`, or you can compute the previous
+   * centroid of all touches that were moved after `touchesChangedAfter`.
+   *
+   * @param {TouchHistoryMath} touchHistory Standard Responder touch track
+   * data.
+   * @param {number} touchesChangedAfter timeStamp after which moved touches
+   * are considered "actively moving" - not just "active".
+   * @param {boolean} isXAxis Consider `x` dimension vs. `y` dimension.
+   * @param {boolean} ofCurrent Compute current centroid for actively moving
+   * touches vs. previous centroid of now actively moving touches.
+   * @return {number} value of centroid in specified dimension.
+   */
+  centroidDimension: function(touchHistory, touchesChangedAfter, isXAxis, ofCurrent) {
+    var touchBank = touchHistory.touchBank;
+    var total = 0;
+    var count = 0;
+
+    var oneTouchData = touchHistory.numberActiveTouches === 1 ?
+      touchHistory.touchBank[touchHistory.indexOfSingleActiveTouch] : null;
+
+    if (oneTouchData !== null) {
+      if (oneTouchData.touchActive && oneTouchData.currentTimeStamp > touchesChangedAfter) {
+        total += ofCurrent && isXAxis ? oneTouchData.currentPageX :
+          ofCurrent && !isXAxis ? oneTouchData.currentPageY :
+          !ofCurrent && isXAxis ? oneTouchData.previousPageX :
+          oneTouchData.previousPageY;
+        count = 1;
+      }
+    } else {
+      for (var i = 0; i < touchBank.length; i++) {
+        var touchTrack = touchBank[i];
+        if (touchTrack !== null &&
+            touchTrack !== undefined &&
+            touchTrack.touchActive &&
+            touchTrack.currentTimeStamp >= touchesChangedAfter) {
+          var toAdd;  // Yuck, program temporarily in invalid state.
+          if (ofCurrent && isXAxis) {
+            toAdd = touchTrack.currentPageX;
+          } else if (ofCurrent && !isXAxis) {
+            toAdd = touchTrack.currentPageY;
+          } else if (!ofCurrent && isXAxis) {
+            toAdd = touchTrack.previousPageX;
+          } else {
+            toAdd = touchTrack.previousPageY;
+          }
+          total += toAdd;
+          count++;
+        }
+      }
+    }
+    return count > 0 ? total / count : TouchHistoryMath.noCentroid;
+  },
+
+  currentCentroidXOfTouchesChangedAfter: function(touchHistory, touchesChangedAfter) {
+    return TouchHistoryMath.centroidDimension(
+      touchHistory,
+      touchesChangedAfter,
+      true,  // isXAxis
+      true   // ofCurrent
+    );
+  },
+
+  currentCentroidYOfTouchesChangedAfter: function(touchHistory, touchesChangedAfter) {
+    return TouchHistoryMath.centroidDimension(
+      touchHistory,
+      touchesChangedAfter,
+      false,  // isXAxis
+      true    // ofCurrent
+    );
+  },
+
+  previousCentroidXOfTouchesChangedAfter: function(touchHistory, touchesChangedAfter) {
+    return TouchHistoryMath.centroidDimension(
+      touchHistory,
+      touchesChangedAfter,
+      true,  // isXAxis
+      false  // ofCurrent
+    );
+  },
+
+  previousCentroidYOfTouchesChangedAfter: function(touchHistory, touchesChangedAfter) {
+    return TouchHistoryMath.centroidDimension(
+      touchHistory,
+      touchesChangedAfter,
+      false,  // isXAxis
+      false   // ofCurrent
+    );
+  },
+
+  currentCentroidX: function(touchHistory) {
+    return TouchHistoryMath.centroidDimension(
+      touchHistory,
+      0,     // touchesChangedAfter
+      true,  // isXAxis
+      true   // ofCurrent
+    );
+  },
+
+  currentCentroidY: function(touchHistory) {
+    return TouchHistoryMath.centroidDimension(
+      touchHistory,
+      0,     // touchesChangedAfter
+      false,  // isXAxis
+      true    // ofCurrent
+    );
+  },
+
+  noCentroid: -1,
+};
+
+module.exports = TouchHistoryMath;

src/apis/PanResponder/index.js

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

src/apis/PanResponder/injectResponderEventPlugin.js

@@ -0,0 +1,59 @@
+// based on https://github.com/facebook/react/pull/4303/files
+
+import EventConstants from 'react/lib/EventConstants'
+import EventPluginRegistry from 'react/lib/EventPluginRegistry'
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
+import ResponderEventPlugin from 'react/lib/ResponderEventPlugin'
+import ResponderTouchHistoryStore from 'react/lib/ResponderTouchHistoryStore'
+import normalizeNativeEvent from './normalizeNativeEvent'
+
+const {
+  topMouseDown,
+  topMouseMove,
+  topMouseUp,
+  topScroll,
+  topSelectionChange,
+  topTouchCancel,
+  topTouchEnd,
+  topTouchMove,
+  topTouchStart
+} = EventConstants.topLevelTypes
+
+const supportsTouch = ExecutionEnvironment.canUseDOM && (
+  'ontouchstart' in window ||
+  window.DocumentTouch && document instanceof window.DocumentTouch
+)
+
+const endDependencies = supportsTouch ? [ topTouchCancel, topTouchEnd ] : [ topMouseUp ]
+const moveDependencies = supportsTouch ? [ topTouchMove ] : [ topMouseMove ]
+const startDependencies = supportsTouch ? [ topTouchStart ] : [ topMouseDown ]
+
+/**
+ * Setup ResponderEventPlugin dependencies
+ */
+ResponderEventPlugin.eventTypes.responderMove.dependencies = moveDependencies
+ResponderEventPlugin.eventTypes.responderEnd.dependencies = endDependencies
+ResponderEventPlugin.eventTypes.responderStart.dependencies = startDependencies
+ResponderEventPlugin.eventTypes.responderRelease.dependencies = endDependencies
+ResponderEventPlugin.eventTypes.responderTerminationRequest.dependencies = []
+ResponderEventPlugin.eventTypes.responderGrant.dependencies = []
+ResponderEventPlugin.eventTypes.responderReject.dependencies = []
+ResponderEventPlugin.eventTypes.responderTerminate.dependencies = []
+ResponderEventPlugin.eventTypes.moveShouldSetResponder.dependencies = moveDependencies
+ResponderEventPlugin.eventTypes.selectionChangeShouldSetResponder.dependencies = [ topSelectionChange ]
+ResponderEventPlugin.eventTypes.scrollShouldSetResponder.dependencies = [ topScroll ]
+ResponderEventPlugin.eventTypes.startShouldSetResponder.dependencies = startDependencies
+
+const originalRecordTouchTrack = ResponderTouchHistoryStore.recordTouchTrack
+
+ResponderTouchHistoryStore.recordTouchTrack = (topLevelType, nativeEvent) => {
+  // Filter out mouse-move events when the mouse button is not down
+  if ((topLevelType === topMouseMove) && !ResponderTouchHistoryStore.touchHistory.touchBank.length) {
+    return
+  }
+  originalRecordTouchTrack.call(ResponderTouchHistoryStore, topLevelType, normalizeNativeEvent(nativeEvent))
+}
+
+EventPluginRegistry.injectEventPluginsByName({
+  ResponderEventPlugin
+})

src/apis/PanResponder/normalizeNativeEvent.js

@@ -0,0 +1,91 @@
+// Mobile Safari re-uses touch objects, so we copy the properties we want and normalize the identifier
+const normalizeTouches = (touches = []) => Array.prototype.slice.call(touches).map((touch) => {
+  const identifier = touch.identifier > 20 ? (touch.identifier % 20) : touch.identifier
+
+  const rect = touch.target && touch.target.getBoundingClientRect()
+  const locationX = touch.pageX - rect.left
+  const locationY = touch.pageY - rect.top
+
+  return {
+    clientX: touch.clientX,
+    clientY: touch.clientY,
+    force: touch.force,
+    locationX: locationX,
+    locationY: locationY,
+    identifier: identifier,
+    pageX: touch.pageX,
+    pageY: touch.pageY,
+    radiusX: touch.radiusX,
+    radiusY: touch.radiusY,
+    rotationAngle: touch.rotationAngle,
+    screenX: touch.screenX,
+    screenY: touch.screenY,
+    target: touch.target,
+    // normalize the timestamp
+    // https://stackoverflow.com/questions/26177087/ios-8-mobile-safari-wrong-timestamp-on-touch-events
+    timestamp: Date.now()
+  }
+})
+
+function normalizeTouchEvent(nativeEvent) {
+  const changedTouches = normalizeTouches(nativeEvent.changedTouches)
+  const touches = normalizeTouches(nativeEvent.touches)
+
+  const event = {
+    changedTouches,
+    domEvent: nativeEvent,
+    pageX: nativeEvent.pageX,
+    pageY: nativeEvent.pageY,
+    target: nativeEvent.target,
+    // normalize the timestamp
+    // https://stackoverflow.com/questions/26177087/ios-8-mobile-safari-wrong-timestamp-on-touch-events
+    timestamp: Date.now(),
+    touches
+  }
+
+  if (changedTouches[0]) {
+    event.identifier = changedTouches[0].identifier
+    event.pageX = changedTouches[0].pageX
+    event.pageY = changedTouches[0].pageY
+    event.locationX = changedTouches[0].locationX
+    event.locationY = changedTouches[0].locationY
+  }
+
+  return event
+}
+
+function normalizeMouseEvent(nativeEvent) {
+  const touches = [{
+    clientX: nativeEvent.clientX,
+    clientY: nativeEvent.clientY,
+    force: nativeEvent.force,
+    locationX: nativeEvent.clientX,
+    locationY: nativeEvent.clientY,
+    identifier: 0,
+    pageX: nativeEvent.pageX,
+    pageY: nativeEvent.pageY,
+    screenX: nativeEvent.screenX,
+    screenY: nativeEvent.screenY,
+    target: nativeEvent.target,
+    timestamp: nativeEvent.timestamp || Date.now()
+  }]
+  return {
+    changedTouches: touches,
+    domEvent: nativeEvent,
+    identifier: touches[0].identifier,
+    locationX: nativeEvent.offsetX,
+    locationY: nativeEvent.offsetY,
+    pageX: nativeEvent.pageX,
+    pageY: nativeEvent.pageY,
+    target: nativeEvent.target,
+    timestamp: touches[0].timestamp,
+    touches: (nativeEvent.type === 'mouseup') ? [] : touches
+  }
+}
+
+function normalizeNativeEvent(nativeEvent) {
+  const mouse = nativeEvent.type.indexOf('mouse') >= 0
+  return mouse ? normalizeMouseEvent(nativeEvent) : normalizeTouchEvent(nativeEvent)
+}
+
+module.exports = normalizeNativeEvent

src/apis/PixelRatio/index.js

@@ -11,7 +11,7 @@ import Dimensions from '../Dimensions'
 /**
  * PixelRatio gives access to the device pixel density.
  */
-export default class PixelRatio {
+class PixelRatio {
   /**
    * Returns the device pixel density.
    */
@@ -45,3 +45,5 @@ export default class PixelRatio {
     return Math.round(layoutSize * ratio) / ratio
   }
 }
+
+module.exports = PixelRatio

src/apis/Platform/index.js

@@ -1,8 +1,6 @@
-import { canUseDOM } from 'exenv'
-
 const Platform = {
   OS: 'web',
-  userAgent: canUseDOM ? window.navigator.userAgent : ''
+  select: (obj: Object) => obj.web
 }
 
-export default Platform
+module.exports = Platform

src/apis/StyleSheet/BorderPropTypes.js

@@ -22,4 +22,4 @@ const BorderPropTypes = {
   borderLeftStyle: BorderStylePropType
 }
 
-export default BorderPropTypes
+module.exports = BorderPropTypes

src/apis/StyleSheet/ColorPropType.js

@@ -1,5 +1,62 @@
+/* eslint-disable */
+ /**
+  * 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.
+  *
+  * @providesModule ColorPropType
+  */
+
 import { PropTypes } from 'react'
+import ReactPropTypeLocationNames from 'react/lib/ReactPropTypeLocationNames'
 
-const ColorPropType = PropTypes.string
+var normalizeColor = require('./normalizeColor');
 
-export default ColorPropType
+var colorPropType = function(isRequired, props, propName, componentName, location, propFullName) {
+  var color = props[propName];
+  if (color === undefined || color === null) {
+    if (isRequired) {
+      var locationName = ReactPropTypeLocationNames[location];
+      return new Error(
+        'Required ' + locationName + ' `' + (propFullName || propName) +
+        '` was not specified in `' + componentName + '`.'
+      );
+    }
+    return;
+  }
+
+  if (typeof color === 'number') {
+    // Developers should not use a number, but we are using the prop type
+    // both for user provided colors and for transformed ones. This isn't ideal
+    // and should be fixed but will do for now...
+    return;
+  }
+
+  if (normalizeColor(color) === null) {
+    var locationName = ReactPropTypeLocationNames[location];
+    return new Error(
+      'Invalid ' + locationName + ' `' + (propFullName || propName) +
+      '` supplied to `' + componentName + '`: ' + color + '\n' +
+`Valid color formats are
+  - '#f0f' (#rgb)
+  - '#f0fc' (#rgba)
+  - '#ff00ff' (#rrggbb)
+  - '#ff00ff00' (#rrggbbaa)
+  - 'rgb(255, 255, 255)'
+  - 'rgba(255, 255, 255, 1.0)'
+  - 'hsl(360, 100%, 100%)'
+  - 'hsla(360, 100%, 100%, 1.0)'
+  - 'transparent'
+  - 'red'
+  - 0xff00ff00 (0xrrggbbaa)
+`);
+  }
+};
+
+var ColorPropType = colorPropType.bind(null, false /* isRequired */);
+ColorPropType.isRequired = colorPropType.bind(null, true /* isRequired */);
+
+module.exports = ColorPropType

src/apis/StyleSheet/EdgeInsetsPropType.js

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/**
+ * 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.
+ *
+ * @providesModule EdgeInsetsPropType
+ * @flow
+ */
+'use strict';
+
+var PropTypes = require('react').PropTypes;
+
+var createStrictShapeTypeChecker = require('./createStrictShapeTypeChecker');
+
+var EdgeInsetsPropType = createStrictShapeTypeChecker({
+  top: PropTypes.number,
+  left: PropTypes.number,
+  bottom: PropTypes.number,
+  right: PropTypes.number,
+});
+
+module.exports = EdgeInsetsPropType;

src/apis/StyleSheet/LayoutPropTypes.js

@@ -51,4 +51,4 @@ const LayoutPropTypes = {
   top: numberOrString
 }
 
-export default LayoutPropTypes
+module.exports = LayoutPropTypes

src/apis/StyleSheet/PointPropType.js

@@ -0,0 +1,24 @@
+/* eslint-disable */
+/**
+ * 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.
+ *
+ * @providesModule PointPropType
+ * @flow
+ */
+'use strict';
+
+var PropTypes = require('react').PropTypes;
+
+var createStrictShapeTypeChecker = require('./createStrictShapeTypeChecker');
+
+var PointPropType = createStrictShapeTypeChecker({
+  x: PropTypes.number,
+  y: PropTypes.number,
+});
+
+module.exports = PointPropType;

src/apis/StyleSheet/Store.js

@@ -1,96 +0,0 @@
-import hyphenate from './hyphenate'
-import prefixer from './prefixer'
-
-export default class Store {
-  constructor(
-    initialState:Object = {},
-    options:Object = { obfuscateClassNames: false }
-  ) {
-    this._counter = 0
-    this._classNames = { ...initialState.classNames }
-    this._declarations = { ...initialState.declarations }
-    this._options = options
-  }
-
-  get(property, value) {
-    const key = this._getDeclarationKey(property, value)
-    return this._classNames[key]
-  }
-
-  set(property, value) {
-    if (value != null) {
-      const values = this._getPropertyValues(property) || []
-      if (values.indexOf(value) === -1) {
-        values.push(value)
-        this._setClassName(property, value)
-        this._setPropertyValues(property, values)
-      }
-    }
-  }
-
-  toString() {
-    const obfuscate = this._options.obfuscateClassNames
-
-    // sort the properties to ensure shorthands are first in the cascade
-    const properties = Object.keys(this._declarations).sort()
-
-    // transform the class name to a valid CSS selector
-    const getCssSelector = (property, value) => {
-      let className = this.get(property, value)
-      if (!obfuscate && className) {
-        className = className.replace(/[(),":?.%\\$#]/g, '\\$&')
-      }
-      return className
-    }
-
-    // transform the declarations into CSS rules with vendor-prefixes
-    const buildCSSRules = (property, values) => {
-      return values.reduce((cssRules, value) => {
-        const declarations = prefixer.prefix({ [property]: value })
-        const cssDeclarations = Object.keys(declarations).reduce((str, prop) => {
-          str += `${hyphenate(prop)}:${value};`
-          return str
-        }, '')
-        const selector = getCssSelector(property, value)
-
-        cssRules += `\n.${selector}{${cssDeclarations}}`
-
-        return cssRules
-      }, '')
-    }
-
-    const css = properties.reduce((css, property) => {
-      const values = this._declarations[property]
-      css += buildCSSRules(property, values)
-      return css
-    }, '')
-
-    return (`/* ${this._counter} unique declarations */${css}`)
-  }
-
-  _getDeclarationKey(property, value) {
-    return `${property}:${value}`
-  }
-
-  _getPropertyValues(property) {
-    return this._declarations[property]
-  }
-
-  _setPropertyValues(property, values) {
-    this._declarations[property] = values.map(value => value)
-  }
-
-  _setClassName(property, value) {
-    const key = this._getDeclarationKey(property, value)
-    const exists = !!this._classNames[key]
-    if (!exists) {
-      this._counter += 1
-      if (this._options.obfuscateClassNames) {
-        this._classNames[key] = `_s_${this._counter}`
-      } else {
-        const val = `${value}`.replace(/\s/g, '-')
-        this._classNames[key] = `${property}:${val}`
-      }
-    }
-  }
-}

src/apis/StyleSheet/StyleSheetPropType.js

@@ -8,7 +8,7 @@
 import createStrictShapeTypeChecker from './createStrictShapeTypeChecker'
 import flattenStyle from './flattenStyle'
 
-export default function StyleSheetPropType(shape) {
+module.exports = function StyleSheetPropType(shape) {
   const shapePropType = createStrictShapeTypeChecker(shape)
   return function (props, propName, componentName, location?) {
     let newProps = props

src/apis/StyleSheet/StyleSheetRegistry.js

@@ -6,41 +6,114 @@
  * @flow
  */
 
+import prefixAll from 'inline-style-prefix-all'
+import hyphenate from './hyphenate'
+import expandStyle from './expandStyle'
 import flattenStyle from './flattenStyle'
-import prefixer from './prefixer'
+import processTransform from './processTransform'
+import { predefinedClassNames } from './predefs'
 
-export default class StyleSheetRegistry {
-  static registerStyle(style: Object, store): number {
+let stylesCache = {}
+let uniqueID = 0
+
+const getCacheKey = (prop, value) => `${prop}:${value}`
+
+const normalizeStyle = (style) => {
+  return processTransform(expandStyle(flattenStyle(style)))
+}
+
+const createCssDeclarations = (style) => {
+  return Object.keys(style).map((prop) => {
+    const property = hyphenate(prop)
+    const value = style[prop]
+    if (Array.isArray(value)) {
+      return value.reduce((acc, curr) => {
+        acc += `${property}:${curr};`
+        return acc
+      }, '')
+    } else {
+      return `${property}:${value};`
+    }
+  }).sort().join('')
+}
+
+class StyleSheetRegistry {
+  /* for testing */
+  static _reset() {
+    stylesCache = {}
+    uniqueID = 0
+  }
+
+  static renderToString() {
+    let str = `/* ${uniqueID} unique declarations */`
+
+    return Object.keys(stylesCache).reduce((str, key) => {
+      const id = stylesCache[key].id
+      const style = stylesCache[key].style
+      const declarations = createCssDeclarations(style)
+      const rule = `\n.${id}{${declarations}}`
+      str += rule
+      return str
+    }, str)
+  }
+
+  static registerStyle(style: Object): number {
     if (process.env.NODE_ENV !== 'production') {
       Object.freeze(style)
     }
 
-    const normalizedStyle = flattenStyle(style)
+    const normalizedStyle = normalizeStyle(style)
+
     Object.keys(normalizedStyle).forEach((prop) => {
-      // add each declaration to the store
-      store.set(prop, normalizedStyle[prop])
+      const value = normalizedStyle[prop]
+      const cacheKey = getCacheKey(prop, value)
+      const exists = stylesCache[cacheKey] && stylesCache[cacheKey].id
+      if (!exists) {
+        const id = ++uniqueID
+        // add new declaration to the store
+        stylesCache[cacheKey] = {
+          id: `__style${id}`,
+          style: prefixAll({ [prop]: value })
+        }
+      }
     })
+
+    return style
   }
 
-  static getStyleAsNativeProps(style, store) {
-    let _className
-    let _style = {}
+  static getStyleAsNativeProps(styleSheetObject, canUseCSS = false) {
     const classList = []
-    const normalizedStyle = flattenStyle(style)
+    const normalizedStyle = normalizeStyle(styleSheetObject)
+    let style = {}
 
     for (const prop in normalizedStyle) {
-      let styleClass = store.get(prop, normalizedStyle[prop])
+      const value = normalizedStyle[prop]
+      const cacheKey = getCacheKey(prop, value)
+      let selector = stylesCache[cacheKey] && stylesCache[cacheKey].id || predefinedClassNames[cacheKey]
 
-      if (styleClass) {
-        classList.push(styleClass)
+      if (selector && canUseCSS) {
+        classList.push(selector)
       } else {
-        _style[prop] = normalizedStyle[prop]
+        style[prop] = normalizedStyle[prop]
       }
     }
 
-    _className = classList.join(' ')
-    _style = prefixer.prefix(_style)
+    /**
+     * React 15 removed undocumented support for fallback values in
+     * inline-styles. For now, pick the last value and regress browser support
+     * for CSS features like flexbox.
+     */
+    const finalStyle = Object.keys(prefixAll(style)).reduce((acc, prop) => {
+      const value = style[prop]
+      acc[prop] = Array.isArray(value) ? value[value.length - 1] : value
+      return acc
+    }, {})
 
-    return { className: _className, style: _style }
+    return {
+      className: classList.join(' '),
+      style: finalStyle
+    }
   }
 }
+
+module.exports = StyleSheetRegistry

src/apis/StyleSheet/StyleSheetValidation.js

@@ -10,9 +10,9 @@ import { PropTypes } from 'react'
 import ImageStylePropTypes from '../../components/Image/ImageStylePropTypes'
 import TextStylePropTypes from '../../components/Text/TextStylePropTypes'
 import ViewStylePropTypes from '../../components/View/ViewStylePropTypes'
-import invariant from 'invariant'
+import invariant from 'fbjs/lib/invariant'
 
-export default class StyleSheetValidation {
+class StyleSheetValidation {
   static validateStyleProp(prop, style, caller) {
     if (process.env.NODE_ENV !== 'production') {
       if (allStylePropTypes[prop] === undefined) {
@@ -63,6 +63,7 @@ StyleSheetValidation.addValidStylePropTypes({
   direction: PropTypes.string, /* @private */
   float: PropTypes.oneOf([ 'left', 'none', 'right' ]),
   font: PropTypes.string, /* @private */
-  listStyle: PropTypes.string,
-  verticalAlign: PropTypes.string
+  listStyle: PropTypes.string
 })
+
+module.exports = StyleSheetValidation

src/apis/StyleSheet/TransformPropTypes.js

@@ -38,10 +38,12 @@ const TransformPropTypes = {
       PropTypes.shape({ skewX: numberOrString }),
       PropTypes.shape({ skewY: numberOrString }),
       PropTypes.shape({ translateX: numberOrString }),
-      PropTypes.shape({ translateY: numberOrString })
+      PropTypes.shape({ translateY: numberOrString }),
+      PropTypes.shape({ translateZ: numberOrString }),
+      PropTypes.shape({ translate3d: PropTypes.string })
     ])
   ),
   transformMatrix: TransformMatrixPropType
 }
 
-export default TransformPropTypes
+module.exports = TransformPropTypes

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

@@ -1,116 +0,0 @@
-/* eslint-env mocha */
-
-import assert from 'assert'
-import Store from '../Store'
-
-suite('apis/StyleSheet/Store', () => {
-  suite('the constructor', () => {
-    test('initialState', () => {
-      const initialState = { classNames: { 'alignItems:center': '__classname__' } }
-      const store = new Store(initialState)
-      assert.deepEqual(store._classNames['alignItems:center'], '__classname__')
-    })
-  })
-
-  suite('#get', () => {
-    test('returns a declaration-specific className', () => {
-      const initialState = {
-        classNames: {
-          'alignItems:center': '__expected__',
-          'alignItems:flex-start': '__error__'
-        }
-      }
-      const store = new Store(initialState)
-      assert.deepEqual(store.get('alignItems', 'center'), '__expected__')
-    })
-  })
-
-  suite('#set', () => {
-    test('stores declarations', () => {
-      const store = new Store()
-      store.set('alignItems', 'center')
-      store.set('flexGrow', 0)
-      store.set('flexGrow', 1)
-      store.set('flexGrow', 2)
-      assert.deepEqual(store._declarations, {
-        alignItems: [ 'center' ],
-        flexGrow: [ 0, 1, 2 ]
-      })
-    })
-
-    test('human-readable classNames', () => {
-      const store = new Store()
-      store.set('alignItems', 'center')
-      store.set('flexGrow', 0)
-      store.set('flexGrow', 1)
-      store.set('flexGrow', 2)
-      assert.deepEqual(store._classNames, {
-        'alignItems:center': 'alignItems:center',
-        'flexGrow:0': 'flexGrow:0',
-        'flexGrow:1': 'flexGrow:1',
-        'flexGrow:2': 'flexGrow:2'
-      })
-    })
-
-    test('obfuscated classNames', () => {
-      const store = new Store({}, { obfuscateClassNames: true })
-      store.set('alignItems', 'center')
-      store.set('flexGrow', 0)
-      store.set('flexGrow', 1)
-      store.set('flexGrow', 2)
-      assert.deepEqual(store._classNames, {
-        'alignItems:center': '_s_1',
-        'flexGrow:0': '_s_2',
-        'flexGrow:1': '_s_3',
-        'flexGrow:2': '_s_4'
-      })
-    })
-
-    test('replaces space characters', () => {
-      const store = new Store()
-
-      store.set('margin', '0 auto')
-      assert.equal(store.get('margin', '0 auto'), 'margin\:0-auto')
-    })
-  })
-
-  suite('#toString', () => {
-    test('human-readable style sheet', () => {
-      const store = new Store()
-      store.set('alignItems', 'center')
-      store.set('backgroundColor', 'rgba(0,0,0,0)')
-      store.set('color', '#fff')
-      store.set('fontFamily', '"Helvetica Neue", Arial, sans-serif')
-      store.set('marginBottom', '0px')
-      store.set('width', '100%')
-
-      const expected = '/* 6 unique declarations */\n' +
-          '.alignItems\\:center{align-items:center;}\n' +
-          '.backgroundColor\\:rgba\\(0\\,0\\,0\\,0\\){background-color:rgba(0,0,0,0);}\n' +
-          '.color\\:\\#fff{color:#fff;}\n' +
-          '.fontFamily\\:\\"Helvetica-Neue\\"\\,-Arial\\,-sans-serif{font-family:"Helvetica Neue", Arial, sans-serif;}\n' +
-          '.marginBottom\\:0px{margin-bottom:0px;}\n' +
-          '.width\\:100\\%{width:100%;}'
-
-      assert.equal(store.toString(), expected)
-    })
-
-    test('obfuscated style sheet', () => {
-      const store = new Store({}, { obfuscateClassNames: true })
-      store.set('alignItems', 'center')
-      store.set('marginBottom', '0px')
-      store.set('margin', '1px')
-      store.set('margin', '2px')
-      store.set('margin', '3px')
-
-      const expected = '/* 5 unique declarations */\n' +
-          '._s_1{align-items:center;}\n' +
-          '._s_3{margin:1px;}\n' +
-          '._s_4{margin:2px;}\n' +
-          '._s_5{margin:3px;}\n' +
-          '._s_2{margin-bottom:0px;}'
-
-      assert.equal(store.toString(), expected)
-    })
-  })
-})

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

@@ -0,0 +1,55 @@
+/* eslint-env mocha */
+
+/**
+ * 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 assert from 'assert'
+import StyleSheetRegistry from '../StyleSheetRegistry'
+
+suite('apis/StyleSheet/StyleSheetRegistry', () => {
+  setup(() => {
+    StyleSheetRegistry._reset()
+  })
+
+  test('static renderToString', () => {
+    const style1 = { alignItems: 'center', opacity: 1 }
+    const style2 = { alignItems: 'center', opacity: 1 }
+    StyleSheetRegistry.registerStyle(style1)
+    StyleSheetRegistry.registerStyle(style2)
+
+    const actual = StyleSheetRegistry.renderToString()
+    const expected = `/* 2 unique declarations */
+.__style1{-ms-flex-align:center;-webkit-align-items:center;-webkit-box-align:center;align-items:center;}
+.__style2{opacity:1;}`
+
+    assert.equal(actual, expected)
+  })
+
+  test('static getStyleAsNativeProps', () => {
+    const style = { borderColorTop: 'white', opacity: 1 }
+    const style1 = { opacity: 1 }
+    StyleSheetRegistry.registerStyle(style1)
+
+    // canUseCSS = false
+    const actual1 = StyleSheetRegistry.getStyleAsNativeProps(style)
+    const expected1 = {
+      className: '',
+      style: { borderColorTop: 'white', opacity: 1 }
+    }
+    assert.deepEqual(actual1, expected1)
+
+    // canUseCSS = true
+    const actual2 = StyleSheetRegistry.getStyleAsNativeProps(style, true)
+    const expected2 = {
+      className: '__style1',
+      style: { borderColorTop: 'white' }
+    }
+    assert.deepEqual(actual2, expected2)
+  })
+})

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

@@ -12,7 +12,7 @@
 import assert from 'assert'
 import flattenStyle from '../flattenStyle'
 
-suite('flattenStyle', () => {
+suite('apis/StyleSheet/flattenStyle', () => {
   test('should merge style objects', () => {
     const style1 = {opacity: 1}
     const style2 = {order: 2}

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

@@ -4,7 +4,7 @@ import { resetCSS, predefinedCSS } from '../predefs'
 import assert from 'assert'
 import StyleSheet from '..'
 
-const styles = { root: { borderWidth: 1 } }
+const styles = { root: { opacity: 1 } }
 
 suite('apis/StyleSheet', () => {
   setup(() => {
@@ -12,55 +12,50 @@ suite('apis/StyleSheet', () => {
   })
 
   suite('create', () => {
-    const div = document.createElement('div')
-
-    setup(() => {
-      document.body.appendChild(div)
-      StyleSheet.create(styles)
-      div.innerHTML = `<style id='${StyleSheet.elementId}'>${StyleSheet._renderToString()}</style>`
-    })
-
-    teardown(() => {
-      document.body.removeChild(div)
-    })
-
     test('returns styles object', () => {
       assert.equal(StyleSheet.create(styles), styles)
     })
 
     test('updates already-rendered style sheet', () => {
-      StyleSheet.create({ root: { color: 'red' } })
+      // setup
+      const div = document.createElement('div')
+      document.body.appendChild(div)
+      StyleSheet.create(styles)
+      div.innerHTML = `<style id='${StyleSheet.elementId}'>${StyleSheet.renderToString()}</style>`
 
+      // test
+      StyleSheet.create({ root: { color: 'red' } })
       assert.equal(
         document.getElementById(StyleSheet.elementId).textContent,
         `${resetCSS}\n${predefinedCSS}\n` +
-        `/* 5 unique declarations */\n` +
-        `.borderBottomWidth\\:1px{border-bottom-width:1px;}\n` +
-        `.borderLeftWidth\\:1px{border-left-width:1px;}\n` +
-        `.borderRightWidth\\:1px{border-right-width:1px;}\n` +
-        `.borderTopWidth\\:1px{border-top-width:1px;}\n` +
-        `.color\\:red{color:red;}`
+        `/* 2 unique declarations */\n` +
+        `.__style1{opacity:1;}\n` +
+        '.__style2{color:red;}'
       )
+
+      // teardown
+      document.body.removeChild(div)
     })
   })
 
-  test('resolve', () => {
-    const props = { style: styles.root }
-    const expected = { className: 'borderTopWidth:1px borderRightWidth:1px borderBottomWidth:1px borderLeftWidth:1px', style: {} }
+  test('renderToString', () => {
     StyleSheet.create(styles)
-    assert.deepEqual(StyleSheet.resolve(props), expected)
+
+    assert.equal(
+      StyleSheet.renderToString(),
+      `${resetCSS}\n${predefinedCSS}\n` +
+      `/* 1 unique declarations */\n` +
+      '.__style1{opacity:1;}'
+    )
   })
 
-  test('_renderToString', () => {
-    StyleSheet.create(styles)
-    assert.equal(
-      StyleSheet._renderToString(),
-      `${resetCSS}\n${predefinedCSS}\n` +
-      `/* 4 unique declarations */\n` +
-      `.borderBottomWidth\\:1px{border-bottom-width:1px;}\n` +
-      `.borderLeftWidth\\:1px{border-left-width:1px;}\n` +
-      `.borderRightWidth\\:1px{border-right-width:1px;}\n` +
-      `.borderTopWidth\\:1px{border-top-width:1px;}`
+  test('resolve', () => {
+    assert.deepEqual(
+      StyleSheet.resolve({ className: 'test', style: styles.root }),
+      {
+        className: 'test',
+        style: { opacity: 1 }
+      }
     )
   })
 })

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

@@ -0,0 +1,31 @@
+/* eslint-env mocha */
+
+import assert from 'assert'
+import processTransform from '../processTransform'
+
+suite('apis/StyleSheet/processTransform', () => {
+  test('transform', () => {
+    const style = {
+      transform: [
+        { scaleX: 20 },
+        { rotate: '20deg' }
+      ]
+    }
+
+    assert.deepEqual(
+      processTransform(style),
+      { transform: 'scaleX(20) rotate(20deg)' }
+    )
+  })
+
+  test('transformMatrix', () => {
+    const style = {
+      transformMatrix: [ 1, 2, 3, 4, 5, 6 ]
+    }
+
+    assert.deepEqual(
+      processTransform(style),
+      { transform: 'matrix3d(1,2,3,4,5,6)' }
+    )
+  })
+})

src/apis/StyleSheet/createStrictShapeTypeChecker.js

@@ -9,10 +9,10 @@
  * @flow
  */
 
+import invariant from 'fbjs/lib/invariant'
 import ReactPropTypeLocationNames from 'react/lib/ReactPropTypeLocationNames'
-import invariant from 'invariant'
 
-export default function createStrictShapeTypeChecker(shapeTypes) {
+module.exports = function createStrictShapeTypeChecker(shapeTypes) {
   function checkType(isRequired, props, propName, componentName, location?) {
     if (!props[propName]) {
       if (isRequired) {

src/apis/StyleSheet/expandStyle.js

@@ -8,16 +8,19 @@ const styleShortHands = {
   margin: [ 'marginTop', 'marginRight', 'marginBottom', 'marginLeft' ],
   marginHorizontal: [ 'marginRight', 'marginLeft' ],
   marginVertical: [ 'marginTop', 'marginBottom' ],
+  overflow: [ 'overflowX', 'overflowY' ],
   padding: [ 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft' ],
   paddingHorizontal: [ 'paddingRight', 'paddingLeft' ],
   paddingVertical: [ 'paddingTop', 'paddingBottom' ],
+  textDecorationLine: [ 'textDecoration' ],
   writingDirection: [ 'direction' ]
 }
 
 /**
- * Alpha-sort properties, apart from shorthands which appear before the
- * properties they expand into. This ensures that more specific styles override
- * the shorthands, whatever the order in which they were originally declared.
+ * Alpha-sort properties, apart from shorthands – they must appear before the
+ * longhand properties that they expand into. This lets more specific styles
+ * override less specific styles, whatever the order in which they were
+ * originally declared.
  */
 const sortProps = (propsArray) => propsArray.sort((a, b) => {
   const expandedA = styleShortHands[a]
@@ -41,14 +44,17 @@ const expandStyle = (style) => {
     const expandedProps = styleShortHands[key]
     const value = normalizeValue(key, style[key])
 
-    if (expandedProps) {
-      expandedProps.forEach((prop, i) => {
-        resolvedStyle[expandedProps[i]] = value
-      })
-    } else if (key === 'flex') {
+    // React Native treats `flex:1` like `flex:1 1 auto`
+    if (key === 'flex') {
       resolvedStyle.flexGrow = value
       resolvedStyle.flexShrink = 1
       resolvedStyle.flexBasis = 'auto'
+    } else if (key === 'textAlignVertical') {
+      resolvedStyle.verticalAlign = (value === 'center' ? 'middle' : value)
+    } else if (expandedProps) {
+      expandedProps.forEach((prop, i) => {
+        resolvedStyle[expandedProps[i]] = value
+      })
     } else {
       resolvedStyle[key] = value
     }
@@ -56,4 +62,4 @@ const expandStyle = (style) => {
   }, {})
 }
 
-export default expandStyle
+module.exports = expandStyle

src/apis/StyleSheet/flattenStyle.js

@@ -5,10 +5,9 @@
  *
  * @flow
  */
-import invariant from 'invariant'
-import expandStyle from './expandStyle'
+import invariant from 'fbjs/lib/invariant'
 
-export default function flattenStyle(style): ?Object {
+module.exports = function flattenStyle(style): ?Object {
   if (!style) {
     return undefined
   }
@@ -16,9 +15,7 @@ export default function flattenStyle(style): ?Object {
   invariant(style !== true, 'style may be false but not true')
 
   if (!Array.isArray(style)) {
-    // we must expand styles during the flattening because expanded styles
-    // override shorthands
-    return expandStyle(style)
+    return style
   }
 
   const result = {}

src/apis/StyleSheet/hyphenate.js

@@ -1 +1 @@
-export default (string) => (string.replace(/([A-Z])/g, '-$1').toLowerCase()).replace(/^ms-/, '-ms-')
+module.exports = (string) => (string.replace(/([A-Z])/g, '-$1').toLowerCase()).replace(/^ms-/, '-ms-')

src/apis/StyleSheet/index.js

@@ -1,6 +1,5 @@
-import { resetCSS, predefinedCSS, predefinedClassNames } from './predefs'
+import { resetCSS, predefinedCSS } from './predefs'
 import flattenStyle from './flattenStyle'
-import Store from './Store'
 import StyleSheetRegistry from './StyleSheetRegistry'
 import StyleSheetValidation from './StyleSheetValidation'
 
@@ -12,64 +11,65 @@ let lastStyleSheet = ''
  * Initialize the store with pointer-event styles mapping to our custom pointer
  * event classes
  */
-const initialState = { classNames: predefinedClassNames }
-const options = { obfuscateClassNames: !(process.env.NODE_ENV !== 'production') }
-const createStore = () => new Store(initialState, options)
-let store = createStore()
 
 /**
  * Destroy existing styles
  */
 const _destroy = () => {
-  store = createStore()
   isRendered = false
-}
-
-/**
- * Render the styles as a CSS style sheet
- */
-const _renderToString = () => {
-  const css = store.toString()
-  isRendered = true
-  return `${resetCSS}\n${predefinedCSS}\n${css}`
+  StyleSheetRegistry._reset()
 }
 
 const create = (styles: Object): Object => {
   for (const key in styles) {
     StyleSheetValidation.validateStyle(key, styles)
-    StyleSheetRegistry.registerStyle(styles[key], store)
+    StyleSheetRegistry.registerStyle(styles[key])
   }
 
   // update the style sheet in place
   if (isRendered) {
     const stylesheet = document.getElementById(ELEMENT_ID)
     if (stylesheet) {
-      const newStyleSheet = _renderToString()
+      const newStyleSheet = renderToString()
       if (lastStyleSheet !== newStyleSheet) {
         stylesheet.textContent = newStyleSheet
         lastStyleSheet = newStyleSheet
       }
     } else if (process.env.NODE_ENV !== 'production') {
-      console.error('ReactNative: cannot find "react-stylesheet" element')
+      console.error(`ReactNative: cannot find "${ELEMENT_ID}" element`)
     }
   }
 
   return styles
 }
 
+/**
+ * Render the styles as a CSS style sheet
+ */
+const renderToString = () => {
+  const css = StyleSheetRegistry.renderToString()
+  isRendered = true
+  return `${resetCSS}\n${predefinedCSS}\n${css}`
+}
+
 /**
  * Accepts React props and converts inline styles to single purpose classes
  * where possible.
  */
-const resolve = ({ style = {} }) => {
-  return StyleSheetRegistry.getStyleAsNativeProps(style, store)
+const resolve = ({ className, style = {} }) => {
+  const props = StyleSheetRegistry.getStyleAsNativeProps(style, isRendered)
+  return {
+    ...props,
+    className: className ? `${props.className} ${className}`.trim() : props.className
+  }
 }
 
-export default {
+module.exports = {
   _destroy,
-  _renderToString,
   create,
   elementId: ELEMENT_ID,
+  hairlineWidth: 1,
   flatten: flattenStyle,
+  renderToString,
   resolve
 }

src/apis/StyleSheet/normalizeColor.js

@@ -0,0 +1,352 @@
+/* eslint-disable */
+/**
+ * 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.
+ *
+ * @providesModule normalizeColor
+ * @flow
+ */
+/* eslint no-bitwise: 0 */
+'use strict';
+
+function normalizeColor(color: string | number): ?number {
+  var match;
+
+  if (typeof color === 'number') {
+    if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) {
+      return color;
+    }
+    return null;
+  }
+
+  // Ordered based on occurrences on Facebook codebase
+  if ((match = matchers.hex6.exec(color))) {
+    return parseInt(match[1] + 'ff', 16) >>> 0;
+  }
+
+  if (names.hasOwnProperty(color)) {
+    return names[color];
+  }
+
+  if ((match = matchers.rgb.exec(color))) {
+    return (
+      parse255(match[1]) << 24 | // r
+      parse255(match[2]) << 16 | // g
+      parse255(match[3]) << 8 | // b
+      0x000000ff // a
+    ) >>> 0;
+  }
+
+  if ((match = matchers.rgba.exec(color))) {
+    return (
+      parse255(match[1]) << 24 | // r
+      parse255(match[2]) << 16 | // g
+      parse255(match[3]) << 8 | // b
+      parse1(match[4]) // a
+    ) >>> 0;
+  }
+
+  if ((match = matchers.hex3.exec(color))) {
+    return parseInt(
+      match[1] + match[1] + // r
+      match[2] + match[2] + // g
+      match[3] + match[3] + // b
+      'ff', // a
+      16
+    ) >>> 0;
+  }
+
+  // https://drafts.csswg.org/css-color-4/#hex-notation
+  if ((match = matchers.hex8.exec(color))) {
+    return parseInt(match[1], 16) >>> 0;
+  }
+
+  if ((match = matchers.hex4.exec(color))) {
+    return parseInt(
+      match[1] + match[1] + // r
+      match[2] + match[2] + // g
+      match[3] + match[3] + // b
+      match[4] + match[4], // a
+      16
+    ) >>> 0;
+  }
+
+  if ((match = matchers.hsl.exec(color))) {
+    return (
+      hslToRgb(
+        parse360(match[1]), // h
+        parsePercentage(match[2]), // s
+        parsePercentage(match[3]) // l
+      ) |
+      0x000000ff // a
+    ) >>> 0;
+  }
+
+  if ((match = matchers.hsla.exec(color))) {
+    return (
+      hslToRgb(
+        parse360(match[1]), // h
+        parsePercentage(match[2]), // s
+        parsePercentage(match[3]) // l
+      ) |
+      parse1(match[4]) // a
+    ) >>> 0;
+  }
+
+  return null;
+}
+
+function hue2rgb(p: number, q: number, t: number): number {
+  if (t < 0) {
+    t += 1;
+  }
+  if (t > 1) {
+    t -= 1;
+  }
+  if (t < 1 / 6) {
+    return p + (q - p) * 6 * t;
+  }
+  if (t < 1 / 2) {
+    return q;
+  }
+  if (t < 2 / 3) {
+    return p + (q - p) * (2 / 3 - t) * 6;
+  }
+  return p;
+}
+
+function hslToRgb(h: number, s: number, l: number): number {
+  var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  var p = 2 * l - q;
+  var r = hue2rgb(p, q, h + 1 / 3);
+  var g = hue2rgb(p, q, h);
+  var b = hue2rgb(p, q, h - 1 / 3);
+
+  return (
+    Math.round(r * 255) << 24 |
+    Math.round(g * 255) << 16 |
+    Math.round(b * 255) << 8
+  );
+}
+
+// var INTEGER = '[-+]?\\d+';
+var NUMBER = '[-+]?\\d*\\.?\\d+';
+var PERCENTAGE = NUMBER + '%';
+
+function call(...args) {
+  return '\\(\\s*(' + args.join(')\\s*,\\s*(') + ')\\s*\\)';
+}
+
+var matchers = {
+  rgb: new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER)),
+  rgba: new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER)),
+  hsl: new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE)),
+  hsla: new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER)),
+  hex3: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+  hex4: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+  hex6: /^#([0-9a-fA-F]{6})$/,
+  hex8: /^#([0-9a-fA-F]{8})$/,
+};
+
+function parse255(str: string): number {
+  var int = parseInt(str, 10);
+  if (int < 0) {
+    return 0;
+  }
+  if (int > 255) {
+    return 255;
+  }
+  return int;
+}
+
+function parse360(str: string): number {
+  var int = parseFloat(str);
+  return (((int % 360) + 360) % 360) / 360;
+}
+
+function parse1(str: string): number {
+  var num = parseFloat(str);
+  if (num < 0) {
+    return 0;
+  }
+  if (num > 1) {
+    return 255;
+  }
+  return Math.round(num * 255);
+}
+
+function parsePercentage(str: string): number {
+  // parseFloat conveniently ignores the final %
+  var int = parseFloat(str, 10);
+  if (int < 0) {
+    return 0;
+  }
+  if (int > 100) {
+    return 1;
+  }
+  return int / 100;
+}
+
+var names = {
+  /* @edit start */
+  inherit: 'inherit',
+  /* @edit end */
+  transparent: 0x00000000,
+
+  // http://www.w3.org/TR/css3-color/#svg-color
+  aliceblue: 0xf0f8ffff,
+  antiquewhite: 0xfaebd7ff,
+  aqua: 0x00ffffff,
+  aquamarine: 0x7fffd4ff,
+  azure: 0xf0ffffff,
+  beige: 0xf5f5dcff,
+  bisque: 0xffe4c4ff,
+  black: 0x000000ff,
+  blanchedalmond: 0xffebcdff,
+  blue: 0x0000ffff,
+  blueviolet: 0x8a2be2ff,
+  brown: 0xa52a2aff,
+  burlywood: 0xdeb887ff,
+  burntsienna: 0xea7e5dff,
+  cadetblue: 0x5f9ea0ff,
+  chartreuse: 0x7fff00ff,
+  chocolate: 0xd2691eff,
+  coral: 0xff7f50ff,
+  cornflowerblue: 0x6495edff,
+  cornsilk: 0xfff8dcff,
+  crimson: 0xdc143cff,
+  cyan: 0x00ffffff,
+  darkblue: 0x00008bff,
+  darkcyan: 0x008b8bff,
+  darkgoldenrod: 0xb8860bff,
+  darkgray: 0xa9a9a9ff,
+  darkgreen: 0x006400ff,
+  darkgrey: 0xa9a9a9ff,
+  darkkhaki: 0xbdb76bff,
+  darkmagenta: 0x8b008bff,
+  darkolivegreen: 0x556b2fff,
+  darkorange: 0xff8c00ff,
+  darkorchid: 0x9932ccff,
+  darkred: 0x8b0000ff,
+  darksalmon: 0xe9967aff,
+  darkseagreen: 0x8fbc8fff,
+  darkslateblue: 0x483d8bff,
+  darkslategray: 0x2f4f4fff,
+  darkslategrey: 0x2f4f4fff,
+  darkturquoise: 0x00ced1ff,
+  darkviolet: 0x9400d3ff,
+  deeppink: 0xff1493ff,
+  deepskyblue: 0x00bfffff,
+  dimgray: 0x696969ff,
+  dimgrey: 0x696969ff,
+  dodgerblue: 0x1e90ffff,
+  firebrick: 0xb22222ff,
+  floralwhite: 0xfffaf0ff,
+  forestgreen: 0x228b22ff,
+  fuchsia: 0xff00ffff,
+  gainsboro: 0xdcdcdcff,
+  ghostwhite: 0xf8f8ffff,
+  gold: 0xffd700ff,
+  goldenrod: 0xdaa520ff,
+  gray: 0x808080ff,
+  green: 0x008000ff,
+  greenyellow: 0xadff2fff,
+  grey: 0x808080ff,
+  honeydew: 0xf0fff0ff,
+  hotpink: 0xff69b4ff,
+  indianred: 0xcd5c5cff,
+  indigo: 0x4b0082ff,
+  ivory: 0xfffff0ff,
+  khaki: 0xf0e68cff,
+  lavender: 0xe6e6faff,
+  lavenderblush: 0xfff0f5ff,
+  lawngreen: 0x7cfc00ff,
+  lemonchiffon: 0xfffacdff,
+  lightblue: 0xadd8e6ff,
+  lightcoral: 0xf08080ff,
+  lightcyan: 0xe0ffffff,
+  lightgoldenrodyellow: 0xfafad2ff,
+  lightgray: 0xd3d3d3ff,
+  lightgreen: 0x90ee90ff,
+  lightgrey: 0xd3d3d3ff,
+  lightpink: 0xffb6c1ff,
+  lightsalmon: 0xffa07aff,
+  lightseagreen: 0x20b2aaff,
+  lightskyblue: 0x87cefaff,
+  lightslategray: 0x778899ff,
+  lightslategrey: 0x778899ff,
+  lightsteelblue: 0xb0c4deff,
+  lightyellow: 0xffffe0ff,
+  lime: 0x00ff00ff,
+  limegreen: 0x32cd32ff,
+  linen: 0xfaf0e6ff,
+  magenta: 0xff00ffff,
+  maroon: 0x800000ff,
+  mediumaquamarine: 0x66cdaaff,
+  mediumblue: 0x0000cdff,
+  mediumorchid: 0xba55d3ff,
+  mediumpurple: 0x9370dbff,
+  mediumseagreen: 0x3cb371ff,
+  mediumslateblue: 0x7b68eeff,
+  mediumspringgreen: 0x00fa9aff,
+  mediumturquoise: 0x48d1ccff,
+  mediumvioletred: 0xc71585ff,
+  midnightblue: 0x191970ff,
+  mintcream: 0xf5fffaff,
+  mistyrose: 0xffe4e1ff,
+  moccasin: 0xffe4b5ff,
+  navajowhite: 0xffdeadff,
+  navy: 0x000080ff,
+  oldlace: 0xfdf5e6ff,
+  olive: 0x808000ff,
+  olivedrab: 0x6b8e23ff,
+  orange: 0xffa500ff,
+  orangered: 0xff4500ff,
+  orchid: 0xda70d6ff,
+  palegoldenrod: 0xeee8aaff,
+  palegreen: 0x98fb98ff,
+  paleturquoise: 0xafeeeeff,
+  palevioletred: 0xdb7093ff,
+  papayawhip: 0xffefd5ff,
+  peachpuff: 0xffdab9ff,
+  peru: 0xcd853fff,
+  pink: 0xffc0cbff,
+  plum: 0xdda0ddff,
+  powderblue: 0xb0e0e6ff,
+  purple: 0x800080ff,
+  rebeccapurple: 0x663399ff,
+  red: 0xff0000ff,
+  rosybrown: 0xbc8f8fff,
+  royalblue: 0x4169e1ff,
+  saddlebrown: 0x8b4513ff,
+  salmon: 0xfa8072ff,
+  sandybrown: 0xf4a460ff,
+  seagreen: 0x2e8b57ff,
+  seashell: 0xfff5eeff,
+  sienna: 0xa0522dff,
+  silver: 0xc0c0c0ff,
+  skyblue: 0x87ceebff,
+  slateblue: 0x6a5acdff,
+  slategray: 0x708090ff,
+  slategrey: 0x708090ff,
+  snow: 0xfffafaff,
+  springgreen: 0x00ff7fff,
+  steelblue: 0x4682b4ff,
+  tan: 0xd2b48cff,
+  teal: 0x008080ff,
+  thistle: 0xd8bfd8ff,
+  tomato: 0xff6347ff,
+  turquoise: 0x40e0d0ff,
+  violet: 0xee82eeff,
+  wheat: 0xf5deb3ff,
+  white: 0xffffffff,
+  whitesmoke: 0xf5f5f5ff,
+  yellow: 0xffff00ff,
+  yellowgreen: 0x9acd32ff,
+};
+
+module.exports = normalizeColor;

src/apis/StyleSheet/normalizeValue.js

@@ -9,7 +9,6 @@ const unitlessNumbers = {
   flexNegative: true,
   fontWeight: true,
   lineClamp: true,
-  lineHeight: true,
   opacity: true,
   order: true,
   orphans: true,
@@ -30,4 +29,4 @@ const normalizeValue = (property, value) => {
   return value
 }
 
-export default normalizeValue
+module.exports = normalizeValue

src/apis/StyleSheet/predefs.js

@@ -2,24 +2,23 @@
  * Reset unwanted styles beyond the control of React inline styles
  */
 export const resetCSS =
-`/* React Native Web */
-html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
+`/* React Native for Web */
+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 {-webkit-appearance:none}
-ol,ul,li {list-style:none}`
+input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {display:none}`
 
 /**
  * Custom pointer event styles
  */
 export const predefinedCSS =
 `/* pointer-events */
-._s_pe-a, ._s_pe-bo, ._s_pe-bn * {pointer-events:auto}
-._s_pe-n, ._s_pe-bo *, ._s_pe-bn {pointer-events:none}`
+.__style_pea, .__style_pebo, .__style_pebn * {pointer-events:auto}
+.__style_pen, .__style_pebo *, .__style_pebn {pointer-events:none}`
 
 export const predefinedClassNames = {
-  'pointerEvents:auto': '_s_pe-a',
-  'pointerEvents:box-none': '_s_pe-bn',
-  'pointerEvents:box-only': '_s_pe-bo',
-  'pointerEvents:none': '_s_pe-n'
+  'pointerEvents:auto': '__style_pea',
+  'pointerEvents:box-none': '__style_pebn',
+  'pointerEvents:box-only': '__style_pebo',
+  'pointerEvents:none': '__style_pen'
 }

src/apis/StyleSheet/prefixer.js

@@ -1,3 +0,0 @@
-import Prefixer from 'inline-style-prefixer'
-const prefixer = new Prefixer()
-export default prefixer

src/apis/StyleSheet/processTransform.js

@@ -0,0 +1,25 @@
+// { scale: 2 } => 'scale(2)'
+const mapTransform = (transform) => {
+  var key = Object.keys(transform)[0]
+  return `${key}(${transform[key]})`
+}
+
+// [1,2,3,4,5,6] => 'matrix3d(1,2,3,4,5,6)'
+const convertTransformMatrix = (transformMatrix) => {
+  var matrix = transformMatrix.join(',')
+  return `matrix3d(${matrix})`
+}
+
+const processTransform = (style) => {
+  if (style) {
+    if (style.transform) {
+      style.transform = style.transform.map(mapTransform).join(' ')
+    } else if (style.transformMatrix) {
+      style.transform = convertTransformMatrix(style.transformMatrix)
+      delete style.transformMatrix
+    }
+  }
+  return style
+}
+
+module.exports = processTransform

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

@@ -73,23 +73,63 @@ suite('apis/UIManager', () => {
     })
   })
 
+  suite('measureInWindow', () => {
+    test('provides correct layout to callback', () => {
+      const node = createNode({ height: '10px', width: '10px' })
+      const middle = createNode({ padding: '20px' })
+      const context = createNode({ padding: '20px' })
+      middle.appendChild(node)
+      context.appendChild(middle)
+      document.body.appendChild(context)
+
+      UIManager.measureInWindow(node, (x, y, width, height) => {
+        assert.equal(x, 40)
+        assert.equal(y, 40)
+        assert.equal(width, 10)
+        assert.equal(height, 10)
+      })
+
+      document.body.removeChild(context)
+    })
+  })
+
   suite('updateView', () => {
-    test('adds new className to existing className', () => {
+    const componentStub = {
+      _reactInternalInstance: {
+        _currentElement: { _owner: {} },
+        _debugID: 1
+      }
+    }
+
+    test('add new className to existing className', () => {
       const node = createNode()
       node.className = 'existing'
       const props = { className: 'extra' }
-      UIManager.updateView(node, props)
+      UIManager.updateView(node, props, componentStub)
       assert.equal(node.getAttribute('class'), 'existing extra')
     })
 
     test('adds new style to existing style', () => {
       const node = createNode({ color: 'red' })
       const props = { style: { opacity: 0 } }
-      UIManager.updateView(node, props)
+      UIManager.updateView(node, props, componentStub)
       assert.equal(node.getAttribute('style'), 'color: red; opacity: 0;')
     })
 
-    test('sets attribute values', () => {
+    test('replaces input and textarea text', () => {
+      const node = createNode()
+      node.value = 'initial'
+      const textProp = { text: 'expected-text' }
+      const valueProp = { value: 'expected-value' }
+
+      UIManager.updateView(node, textProp)
+      assert.equal(node.value, 'expected-text')
+
+      UIManager.updateView(node, valueProp)
+      assert.equal(node.value, 'expected-value')
+    })
+
+    test('sets other attribute values', () => {
       const node = createNode()
       const props = { 'aria-level': '4', 'data-of-type': 'string' }
       UIManager.updateView(node, props)

src/apis/UIManager/index.js

@@ -1,35 +1,70 @@
 import CSSPropertyOperations from 'react/lib/CSSPropertyOperations'
+import flattenStyle from '../StyleSheet/flattenStyle'
+import processTransform from '../StyleSheet/processTransform'
 
-const measureAll = (node, callback, relativeToNativeNode) => {
-  const { height, left, top, width } = node.getBoundingClientRect()
+const _measureLayout = (node, relativeToNativeNode, callback) => {
   const relativeNode = relativeToNativeNode || node.parentNode
   const relativeRect = relativeNode.getBoundingClientRect()
+  const { height, left, top, width } = node.getBoundingClientRect()
   const x = left - relativeRect.left
   const y = top - relativeRect.top
   callback(x, y, width, height, left, top)
 }
 
 const UIManager = {
+  blur(node) {
+    try { node.blur() } catch (err) {}
+  },
+
+  focus(node) {
+    try { node.focus() } catch (err) {}
+  },
+
   measure(node, callback) {
-    measureAll(node, callback)
+    _measureLayout(node, null, callback)
+  },
+
+  measureInWindow(node, callback) {
+    const { height, left, top, width } = node.getBoundingClientRect()
+    callback(left, top, width, height)
   },
 
   measureLayout(node, relativeToNativeNode, onFail, onSuccess) {
-    measureAll(node, (x, y, width, height) => onSuccess(x, y, width, height), relativeToNativeNode)
+    const relativeTo = relativeToNativeNode || node.parentNode
+    _measureLayout(node, relativeTo, onSuccess)
   },
 
-  updateView(node, props) {
+  updateView(node, props, component /* only needed to surpress React errors in __DEV__ */) {
     for (const prop in props) {
+      let nativeProp
       const value = props[prop]
-      if (prop === 'style') {
-        CSSPropertyOperations.setValueForStyles(node, value)
-      } else if (prop === 'className') {
-        node.classList.add(value)
-      } else {
-        node.setAttribute(prop, value)
+
+      switch (prop) {
+        case 'style':
+          // convert styles to DOM-styles
+          CSSPropertyOperations.setValueForStyles(
+            node,
+            processTransform(flattenStyle(value)),
+            component._reactInternalInstance
+          )
+          break
+        case 'class':
+        case 'className':
+          nativeProp = 'class'
+          // prevent class names managed by React Native from being replaced
+          const className = node.getAttribute(nativeProp) + ' ' + value
+          node.setAttribute(nativeProp, className)
+          break
+        case 'text':
+        case 'value':
+          // native platforms use `text` prop to replace text input value
+          node.value = value
+          break
+        default:
+          node.setAttribute(prop, value)
       }
     }
   }
 }
 
-export default UIManager
+module.exports = UIManager

src/components/ActivityIndicator/index.js

@@ -1,3 +1,4 @@
+import NativeMethodsDecorator from '../../modules/NativeMethodsDecorator'
 import React, { Component, PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import StyleSheet from '../../apis/StyleSheet'
@@ -18,7 +19,8 @@ const keyframeEffects = [
   { transform: 'scale(0.95)', opacity: 0.5 }
 ]
 
-export default class ActivityIndicator extends Component {
+@NativeMethodsDecorator
+class ActivityIndicator extends Component {
   static propTypes = {
     animating: PropTypes.bool,
     color: PropTypes.string,
@@ -39,19 +41,11 @@ export default class ActivityIndicator extends Component {
     if (document.documentElement.animate) {
       this._player = ReactDOM.findDOMNode(this._indicatorRef).animate(keyframeEffects, animationEffectTimingProperties)
     }
-    if (this.props.animating) {
-      this._player.play()
-    } else {
-      this._player.cancel()
-    }
+    this._manageAnimation()
   }
 
   componentDidUpdate() {
-    if (this.props.animating) {
-      this._player.play()
-    } else {
-      this._player.cancel()
-    }
+    this._manageAnimation()
   }
 
   render() {
@@ -67,7 +61,7 @@ export default class ActivityIndicator extends Component {
     return (
       <View {...other} style={[ styles.container, style ]}>
         <View
-          ref={(c) => { this._indicatorRef = c }}
+          ref={this._createIndicatorRef}
           style={[
             indicatorStyles[size],
             hidesWhenStopped && !animating && styles.hidesWhenStopped,
@@ -77,6 +71,20 @@ export default class ActivityIndicator extends Component {
       </View>
     )
   }
+
+  _createIndicatorRef = (component) => {
+    this._indicatorRef = component
+  }
+
+  _manageAnimation() {
+    if (this._player) {
+      if (this.props.animating) {
+        this._player.play()
+      } else {
+        this._player.cancel()
+      }
+    }
+  }
 }
 
 const styles = StyleSheet.create({
@@ -103,3 +111,5 @@ const indicatorStyles = StyleSheet.create({
     height: 36
   }
 })
+
+module.exports = ActivityIndicator

src/components/CoreComponent/index.js

@@ -1,64 +0,0 @@
-import React, { Component, PropTypes } from 'react'
-import StyleSheet from '../../apis/StyleSheet'
-
-const roleComponents = {
-  article: 'article',
-  banner: 'header',
-  button: 'button',
-  complementary: 'aside',
-  contentinfo: 'footer',
-  form: 'form',
-  heading: 'h1',
-  link: 'a',
-  list: 'ul',
-  listitem: 'li',
-  main: 'main',
-  navigation: 'nav',
-  region: 'section'
-}
-
-export default class CoreComponent extends Component {
-  static propTypes = {
-    accessibilityLabel: PropTypes.string,
-    accessibilityLiveRegion: PropTypes.oneOf([ 'assertive', 'off', 'polite' ]),
-    accessibilityRole: PropTypes.string,
-    accessible: PropTypes.bool,
-    component: PropTypes.oneOfType([ PropTypes.func, PropTypes.string ]),
-    style: PropTypes.oneOfType([ PropTypes.array, PropTypes.object ]),
-    testID: PropTypes.string,
-    type: PropTypes.string
-  };
-
-  static defaultProps = {
-    accessible: true,
-    component: 'div'
-  };
-
-  render() {
-    const {
-      accessibilityLabel,
-      accessibilityLiveRegion,
-      accessibilityRole,
-      accessible,
-      component,
-      testID,
-      type,
-      ...other
-    } = this.props
-
-    const Component = roleComponents[accessibilityRole] || component
-
-    return (
-      <Component
-        {...other}
-        {...StyleSheet.resolve(other)}
-        aria-hidden={accessible ? null : true}
-        aria-label={accessibilityLabel}
-        aria-live={accessibilityLiveRegion}
-        data-testid={testID}
-        role={accessibilityRole}
-        type={accessibilityRole === 'button' ? 'button' : type}
-      />
-    )
-  }
-}

src/components/Image/ImageResizeMode.js

@@ -0,0 +1,10 @@
+import keyMirror from 'fbjs/lib/keyMirror'
+
+const ImageResizeMode = keyMirror({
+  contain: null,
+  cover: null,
+  none: null,
+  stretch: null
+})
+
+module.exports = ImageResizeMode

src/components/Image/ImageStylePropTypes.js

@@ -2,14 +2,16 @@ import { PropTypes } from 'react'
 import ColorPropType from '../../apis/StyleSheet/ColorPropType'
 import LayoutPropTypes from '../../apis/StyleSheet/LayoutPropTypes'
 import TransformPropTypes from '../../apis/StyleSheet/TransformPropTypes'
+import ImageResizeMode from './ImageResizeMode'
 
 const hiddenOrVisible = PropTypes.oneOf([ 'hidden', 'visible' ])
 
-export default {
+module.exports = {
   ...LayoutPropTypes,
   ...TransformPropTypes,
   backfaceVisibility: hiddenOrVisible,
   backgroundColor: ColorPropType,
+  resizeMode: PropTypes.oneOf(Object.keys(ImageResizeMode)),
   /**
    * @platform web
    */

src/components/Image/__tests__/index-test.js

@@ -1,44 +1,56 @@
 /* eslint-env mocha */
 
-import * as utils from '../../../modules/specHelpers'
+import { mount, shallow } from 'enzyme'
 import assert from 'assert'
 import React from 'react'
+import StyleSheet from '../../../apis/StyleSheet'
 
 import Image from '../'
 
 suite('components/Image', () => {
-  test('default accessibility', () => {
-    const dom = utils.renderToDOM(<Image />)
-    assert.equal(dom.getAttribute('role'), 'img')
+  test('sets correct accessibility role"', () => {
+    const image = shallow(<Image />)
+    assert.equal(image.prop('accessibilityRole'), 'img')
   })
 
   test('prop "accessibilityLabel"', () => {
     const accessibilityLabel = 'accessibilityLabel'
-    const result = utils.shallowRender(<Image accessibilityLabel={accessibilityLabel} />)
-    assert.equal(result.props.accessibilityLabel, accessibilityLabel)
+    const image = shallow(<Image accessibilityLabel={accessibilityLabel} />)
+    assert.equal(image.prop('accessibilityLabel'), accessibilityLabel)
   })
 
   test('prop "accessible"', () => {
     const accessible = false
-    const result = utils.shallowRender(<Image accessible={accessible} />)
-    assert.equal(result.props.accessible, accessible)
+    const image = shallow(<Image accessible={accessible} />)
+    assert.equal(image.prop('accessible'), accessible)
   })
 
-  test('prop "children"')
+  test('prop "children"', () => {
+    const children = <div className='unique' />
+    const wrapper = shallow(<Image>{children}</Image>)
+    assert.equal(wrapper.contains(children), true)
+  })
 
-  test('prop "defaultSource"', () => {
-    const defaultSource = { uri: 'https://google.com/favicon.ico' }
-    const dom = utils.renderToDOM(<Image defaultSource={defaultSource} />)
-    const backgroundImage = dom.style.backgroundImage
-    assert(backgroundImage.indexOf(defaultSource.uri) > -1)
+  suite('prop "defaultSource"', () => {
+    test('sets background image when value is an object', () => {
+      const defaultSource = { uri: 'https://google.com/favicon.ico' }
+      const image = shallow(<Image defaultSource={defaultSource} />)
+      const backgroundImage = StyleSheet.flatten(image.prop('style')).backgroundImage
+      assert(backgroundImage.indexOf(defaultSource.uri) > -1)
+    })
+
+    test('sets background image when value is a string', () => {
+      // emulate require-ed asset
+      const defaultSource = 'https://google.com/favicon.ico'
+      const image = shallow(<Image defaultSource={defaultSource} />)
+      const backgroundImage = StyleSheet.flatten(image.prop('style')).backgroundImage
+      assert(backgroundImage.indexOf(defaultSource) > -1)
+    })
   })
 
   test('prop "onError"', function (done) {
     this.timeout(5000)
-    utils.render(<Image
-      onError={onError}
-      source={{ uri: 'https://google.com/favicon.icox' }}
-    />)
+    mount(<Image onError={onError} source={{ uri: 'https://google.com/favicon.icox' }} />)
     function onError(e) {
       assert.equal(e.nativeEvent.type, 'error')
       done()
@@ -47,27 +59,104 @@ suite('components/Image', () => {
 
   test('prop "onLoad"', function (done) {
     this.timeout(5000)
-    utils.render(<Image
-      onLoad={onLoad}
-      source={{ uri: 'https://google.com/favicon.ico' }}
-    />)
+    const image = mount(<Image onLoad={onLoad} source={{ uri: 'https://google.com/favicon.ico' }} />)
     function onLoad(e) {
       assert.equal(e.nativeEvent.type, 'load')
+      const backgroundImage = StyleSheet.flatten(image.ref('root').prop('style')).backgroundImage
+      assert.notDeepEqual(backgroundImage, undefined)
       done()
     }
   })
 
-  test('prop "onLoadEnd"')
+  test('prop "onLoadEnd"', function (done) {
+    this.timeout(5000)
+    const image = mount(<Image onLoadEnd={onLoadEnd} source={{ uri: 'https://google.com/favicon.ico' }} />)
+    function onLoadEnd() {
+      assert.ok(true)
+      const backgroundImage = StyleSheet.flatten(image.ref('root').prop('style')).backgroundImage
+      assert.notDeepEqual(backgroundImage, undefined)
+      done()
+    }
+  })
 
-  test('prop "onLoadStart"')
+  test('prop "onLoadStart"', function (done) {
+    this.timeout(5000)
+    mount(<Image onLoadStart={onLoadStart} source={{ uri: 'https://google.com/favicon.ico' }} />)
+    function onLoadStart() {
+      assert.ok(true)
+      done()
+    }
+  })
 
-  test('prop "resizeMode"')
+  suite('prop "resizeMode"', () => {
+    const getBackgroundSize = (image) => StyleSheet.flatten(image.prop('style')).backgroundSize
 
-  test('prop "source"')
+    test('value "contain"', () => {
+      const image = shallow(<Image resizeMode={Image.resizeMode.contain} />)
+      assert.equal(getBackgroundSize(image), 'contain')
+    })
+
+    test('value "cover"', () => {
+      const image = shallow(<Image resizeMode={Image.resizeMode.cover} />)
+      assert.equal(getBackgroundSize(image), 'cover')
+    })
+
+    test('value "none"', () => {
+      const image = shallow(<Image resizeMode={Image.resizeMode.none} />)
+      assert.equal(getBackgroundSize(image), 'auto')
+    })
+
+    test('value "stretch"', () => {
+      const image = shallow(<Image resizeMode={Image.resizeMode.stretch} />)
+      assert.equal(getBackgroundSize(image), '100% 100%')
+    })
+
+    test('no value', () => {
+      const image = shallow(<Image />)
+      assert.equal(getBackgroundSize(image), 'cover')
+    })
+  })
+
+  suite('prop "source"', function () {
+    this.timeout(5000)
+
+    test('sets background image when value is an object', (done) => {
+      const source = { uri: 'https://google.com/favicon.ico' }
+      mount(<Image onLoad={onLoad} source={source} />)
+      function onLoad(e) {
+        const src = e.nativeEvent.target.src
+        assert.equal(src, source.uri)
+        done()
+      }
+    })
+
+    test('sets background image when value is a string', (done) => {
+      // emulate require-ed asset
+      const source = 'https://google.com/favicon.ico'
+      mount(<Image onLoad={onLoad} source={source} />)
+      function onLoad(e) {
+        const src = e.nativeEvent.target.src
+        assert.equal(src, source)
+        done()
+      }
+    })
+  })
+
+  suite('prop "style"', () => {
+    test('converts "resizeMode" property', () => {
+      const image = shallow(<Image style={{ resizeMode: Image.resizeMode.contain }} />)
+      assert.equal(StyleSheet.flatten(image.prop('style')).backgroundSize, 'contain')
+    })
+
+    test('removes "resizeMode" property', () => {
+      const image = shallow(<Image style={{ resizeMode: Image.resizeMode.contain }} />)
+      assert.equal(StyleSheet.flatten(image.prop('style')).resizeMode, undefined)
+    })
+  })
 
   test('prop "testID"', () => {
     const testID = 'testID'
-    const result = utils.shallowRender(<Image testID={testID} />)
-    assert.equal(result.props.testID, testID)
+    const image = shallow(<Image testID={testID} />)
+    assert.equal(image.prop('testID'), testID)
   })
 })

src/components/Image/index.js

@@ -1,8 +1,11 @@
 /* global window */
-import StyleSheet from '../../apis/StyleSheet'
-import CoreComponent from '../CoreComponent'
+import createNativeComponent from '../../modules/createNativeComponent'
+import ImageResizeMode from './ImageResizeMode'
 import ImageStylePropTypes from './ImageStylePropTypes'
+import NativeMethodsDecorator from '../../modules/NativeMethodsDecorator'
+import resolveAssetSource from './resolveAssetSource'
 import React, { Component, PropTypes } from 'react'
+import StyleSheet from '../../apis/StyleSheet'
 import StyleSheetPropType from '../../apis/StyleSheet/StyleSheetPropType'
 import View from '../View'
 
@@ -12,47 +15,124 @@ const STATUS_LOADING = 'LOADING'
 const STATUS_PENDING = 'PENDING'
 const STATUS_IDLE = 'IDLE'
 
-export default class Image extends Component {
-  constructor(props, context) {
-    super(props, context)
-    const { uri } = props.source
-    // state
-    this.state = { status: uri ? STATUS_PENDING : STATUS_IDLE }
-    // autobinding
-    this._onError = this._onError.bind(this)
-    this._onLoad = this._onLoad.bind(this)
-  }
+const ImageSourcePropType = PropTypes.oneOfType([
+  PropTypes.shape({
+    uri: PropTypes.string.isRequired
+  }),
+  PropTypes.string
+])
 
+@NativeMethodsDecorator
+class Image extends Component {
   static propTypes = {
-    accessibilityLabel: CoreComponent.propTypes.accessibilityLabel,
-    accessible: CoreComponent.propTypes.accessible,
+    accessibilityLabel: createNativeComponent.propTypes.accessibilityLabel,
+    accessible: createNativeComponent.propTypes.accessible,
     children: PropTypes.any,
-    defaultSource: PropTypes.object,
+    defaultSource: ImageSourcePropType,
     onError: PropTypes.func,
     onLoad: PropTypes.func,
     onLoadEnd: PropTypes.func,
     onLoadStart: PropTypes.func,
     resizeMode: PropTypes.oneOf(['contain', 'cover', 'none', 'stretch']),
-    source: PropTypes.object,
+    source: ImageSourcePropType,
     style: StyleSheetPropType(ImageStylePropTypes),
-    testID: CoreComponent.propTypes.testID
+    testID: createNativeComponent.propTypes.testID
   };
 
   static defaultProps = {
     accessible: true,
-    defaultSource: {},
-    resizeMode: 'cover',
-    source: {}
+    style: {}
   };
 
+  static resizeMode = ImageResizeMode;
+
+  constructor(props, context) {
+    super(props, context)
+    const uri = resolveAssetSource(props.source)
+    this.state = { status: uri ? STATUS_PENDING : STATUS_IDLE }
+  }
+
+  componentDidMount() {
+    if (this.state.status === STATUS_PENDING) {
+      this._createImageLoader()
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.state.status === STATUS_PENDING && !this.image) {
+      this._createImageLoader()
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const nextUri = resolveAssetSource(nextProps.source)
+    if (resolveAssetSource(this.props.source) !== nextUri) {
+      this.setState({
+        status: nextUri ? STATUS_PENDING : STATUS_IDLE
+      })
+    }
+  }
+
+  componentWillUnmount() {
+    this._destroyImageLoader()
+  }
+
+  render() {
+    const {
+      accessibilityLabel,
+      accessible,
+      children,
+      defaultSource,
+      source,
+      testID
+    } = this.props
+
+    const isLoaded = this.state.status === STATUS_LOADED
+    const displayImage = resolveAssetSource(!isLoaded ? defaultSource : source)
+    const backgroundImage = displayImage ? `url("${displayImage}")` : null
+    const style = StyleSheet.flatten(this.props.style)
+
+    const resizeMode = this.props.resizeMode || style.resizeMode || ImageResizeMode.cover
+    // remove resizeMode style, as it is not supported by View
+    delete style.resizeMode
+
+    /**
+     * Image is a non-stretching View. The image is displayed as a background
+     * image to support `resizeMode`. The HTML image is hidden but used to
+     * provide the correct responsive image dimensions, and to support the
+     * image context menu. Child content is rendered into an element absolutely
+     * positioned over the image.
+     */
+    return (
+      <View
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole='img'
+        accessible={accessible}
+        ref='root'
+        style={[
+          styles.initial,
+          style,
+          backgroundImage && { backgroundImage },
+          resizeModeStyles[resizeMode]
+        ]}
+        testID={testID}
+      >
+        {createNativeComponent({ component: 'img', src: displayImage, style: styles.img })}
+        {children ? (
+          <View children={children} pointerEvents='box-none' style={styles.children} />
+        ) : null}
+      </View>
+    )
+  }
+
   _createImageLoader() {
-    const { source } = this.props
+    const uri = resolveAssetSource(this.props.source)
 
     this._destroyImageLoader()
     this.image = new window.Image()
     this.image.onerror = this._onError
     this.image.onload = this._onLoad
-    this.image.src = source.uri
+    this.image.src = uri
     this._onLoadStart()
   }
 
@@ -64,7 +144,7 @@ export default class Image extends Component {
     }
   }
 
-  _onError(e) {
+  _onError = (e) => {
     const { onError } = this.props
     const event = { nativeEvent: e }
 
@@ -74,7 +154,7 @@ export default class Image extends Component {
     if (onError) onError(event)
   }
 
-  _onLoad(e) {
+  _onLoad = (e) => {
     const { onLoad } = this.props
     const event = { nativeEvent: e }
 
@@ -94,75 +174,6 @@ export default class Image extends Component {
     this.setState({ status: STATUS_LOADING })
     if (onLoadStart) onLoadStart()
   }
-
-  componentDidMount() {
-    if (this.state.status === STATUS_PENDING) {
-      this._createImageLoader()
-    }
-  }
-
-  componentDidUpdate() {
-    if (this.state.status === STATUS_PENDING && !this.image) {
-      this._createImageLoader()
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.source.uri !== nextProps.source.uri) {
-      this.setState({
-        status: nextProps.source.uri ? STATUS_PENDING : STATUS_IDLE
-      })
-    }
-  }
-
-  componentWillUnmount() {
-    this._destroyImageLoader()
-  }
-
-  render() {
-    const {
-      accessibilityLabel,
-      accessible,
-      children,
-      defaultSource,
-      resizeMode,
-      source,
-      style,
-      testID
-    } = this.props
-
-    const isLoaded = this.state.status === STATUS_LOADED
-    const defaultImage = defaultSource.uri || null
-    const displayImage = !isLoaded ? defaultImage : source.uri
-    const backgroundImage = displayImage ? `url("${displayImage}")` : null
-
-    /**
-     * Image is a non-stretching View. The image is displayed as a background
-     * image to support `resizeMode`. The HTML image is hidden but used to
-     * provide the correct responsive image dimensions, and to support the
-     * image context menu. Child content is rendered into an element absolutely
-     * positioned over the image.
-     */
-    return (
-      <View
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole='img'
-        accessible={accessible}
-        style={[
-          styles.initial,
-          style,
-          backgroundImage && { backgroundImage },
-          resizeModeStyles[resizeMode]
-        ]}
-        testID={testID}
-      >
-        <img src={displayImage} style={styles.img} />
-        {children ? (
-          <View children={children} pointerEvents='box-none' style={styles.children} />
-        ) : null}
-      </View>
-    )
-  }
 }
 
 const styles = StyleSheet.create({
@@ -203,3 +214,5 @@ const resizeModeStyles = StyleSheet.create({
     backgroundSize: '100% 100%'
   }
 })
+
+module.exports = Image

src/components/Image/resolveAssetSource.js

@@ -0,0 +1,5 @@
+function resolveAssetSource(source) {
+  return ((typeof source === 'object') ? source.uri : source) || null
+}
+
+module.exports = resolveAssetSource

src/components/ListView/ListViewDataSource.js

@@ -0,0 +1,408 @@
+/* eslint-disable */
+/**
+ * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
+ *
+ * Facebook, Inc. ("Facebook") owns all right, title and interest, including
+ * all intellectual property and other proprietary rights, in and to the React
+ * Native CustomComponents software (the "Software").  Subject to your
+ * compliance with these terms, you are hereby granted a non-exclusive,
+ * worldwide, royalty-free copyright license to (1) use and copy the Software;
+ * and (2) reproduce and distribute the Software as part of your own software
+ * ("Your Software").  Facebook reserves all rights not expressly granted to
+ * you in this license agreement.
+ *
+ * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
+ * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
+ * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
+ * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+ * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
+ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * @providesModule ListViewDataSource
+ * @typechecks
+ * @flow
+ */
+'use strict';
+
+var invariant = require('fbjs/lib/invariant');
+var isEmpty = require('fbjs/lib/isEmpty');
+var warning = require('fbjs/lib/warning');
+
+function defaultGetRowData(
+  dataBlob: any,
+  sectionID: number | string,
+  rowID: number | string
+): any {
+  return dataBlob[sectionID][rowID];
+}
+
+function defaultGetSectionHeaderData(
+  dataBlob: any,
+  sectionID: number | string
+): any {
+  return dataBlob[sectionID];
+}
+
+type differType = (data1: any, data2: any) => bool;
+
+type ParamType = {
+  rowHasChanged: differType;
+  getRowData: ?typeof defaultGetRowData;
+  sectionHeaderHasChanged: ?differType;
+  getSectionHeaderData: ?typeof defaultGetSectionHeaderData;
+}
+
+/**
+ * Provides efficient data processing and access to the
+ * `ListView` component.  A `ListViewDataSource` is created with functions for
+ * extracting data from the input blob, and comparing elements (with default
+ * implementations for convenience).  The input blob can be as simple as an
+ * array of strings, or an object with rows nested inside section objects.
+ *
+ * To update the data in the datasource, use `cloneWithRows` (or
+ * `cloneWithRowsAndSections` if you care about sections).  The data in the
+ * data source is immutable, so you can't modify it directly.  The clone methods
+ * suck in the new data and compute a diff for each row so ListView knows
+ * whether to re-render it or not.
+ *
+ * In this example, a component receives data in chunks, handled by
+ * `_onDataArrived`, which concats the new data onto the old data and updates the
+ * data source.  We use `concat` to create a new array - mutating `this._data`,
+ * e.g. with `this._data.push(newRowData)`, would be an error. `_rowHasChanged`
+ * understands the shape of the row data and knows how to efficiently compare
+ * it.
+ *
+ * ```
+ * getInitialState: function() {
+ *   var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
+ *   return {ds};
+ * },
+ * _onDataArrived(newData) {
+ *   this._data = this._data.concat(newData);
+ *   this.setState({
+ *     ds: this.state.ds.cloneWithRows(this._data)
+ *   });
+ * }
+ * ```
+ */
+
+class ListViewDataSource {
+
+  /**
+   * You can provide custom extraction and `hasChanged` functions for section
+   * headers and rows.  If absent, data will be extracted with the
+   * `defaultGetRowData` and `defaultGetSectionHeaderData` functions.
+   *
+   * The default extractor expects data of one of the following forms:
+   *
+   *      { sectionID_1: { rowID_1: <rowData1>, ... }, ... }
+   *
+   *    or
+   *
+   *      { sectionID_1: [ <rowData1>, <rowData2>, ... ], ... }
+   *
+   *    or
+   *
+   *      [ [ <rowData1>, <rowData2>, ... ], ... ]
+   *
+   * The constructor takes in a params argument that can contain any of the
+   * following:
+   *
+   * - getRowData(dataBlob, sectionID, rowID);
+   * - getSectionHeaderData(dataBlob, sectionID);
+   * - rowHasChanged(prevRowData, nextRowData);
+   * - sectionHeaderHasChanged(prevSectionData, nextSectionData);
+   */
+  constructor(params: ParamType) {
+    invariant(
+      params && typeof params.rowHasChanged === 'function',
+      'Must provide a rowHasChanged function.'
+    );
+    this._rowHasChanged = params.rowHasChanged;
+    this._getRowData = params.getRowData || defaultGetRowData;
+    this._sectionHeaderHasChanged = params.sectionHeaderHasChanged;
+    this._getSectionHeaderData =
+      params.getSectionHeaderData || defaultGetSectionHeaderData;
+
+    this._dataBlob = null;
+    this._dirtyRows = [];
+    this._dirtySections = [];
+    this._cachedRowCount = 0;
+
+    // These two private variables are accessed by outsiders because ListView
+    // uses them to iterate over the data in this class.
+    this.rowIdentities = [];
+    this.sectionIdentities = [];
+  }
+
+  /**
+   * Clones this `ListViewDataSource` with the specified `dataBlob` and
+   * `rowIdentities`. The `dataBlob` is just an arbitrary blob of data. At
+   * construction an extractor to get the interesting information was defined
+   * (or the default was used).
+   *
+   * The `rowIdentities` is is a 2D array of identifiers for rows.
+   * ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...].  If not provided, it's
+   * assumed that the keys of the section data are the row identities.
+   *
+   * Note: This function does NOT clone the data in this data source. It simply
+   * passes the functions defined at construction to a new data source with
+   * the data specified. If you wish to maintain the existing data you must
+   * handle merging of old and new data separately and then pass that into
+   * this function as the `dataBlob`.
+   */
+   cloneWithRows(
+       dataBlob: Array<any> | {[key: string]: any},
+       rowIdentities: ?Array<string>
+   ): ListViewDataSource {
+    var rowIds = rowIdentities ? [rowIdentities] : null;
+    if (!this._sectionHeaderHasChanged) {
+      this._sectionHeaderHasChanged = () => false;
+    }
+    return this.cloneWithRowsAndSections({s1: dataBlob}, ['s1'], rowIds);
+  }
+
+  /**
+   * This performs the same function as the `cloneWithRows` function but here
+   * you also specify what your `sectionIdentities` are. If you don't care
+   * about sections you should safely be able to use `cloneWithRows`.
+   *
+   * `sectionIdentities` is an array of identifiers for  sections.
+   * ie. ['s1', 's2', ...].  If not provided, it's assumed that the
+   * keys of dataBlob are the section identities.
+   *
+   * Note: this returns a new object!
+   */
+  cloneWithRowsAndSections(
+      dataBlob: any,
+      sectionIdentities: ?Array<string>,
+      rowIdentities: ?Array<Array<string>>
+  ): ListViewDataSource {
+    invariant(
+      typeof this._sectionHeaderHasChanged === 'function',
+      'Must provide a sectionHeaderHasChanged function with section data.'
+    );
+    var newSource = new ListViewDataSource({
+      getRowData: this._getRowData,
+      getSectionHeaderData: this._getSectionHeaderData,
+      rowHasChanged: this._rowHasChanged,
+      sectionHeaderHasChanged: this._sectionHeaderHasChanged,
+    });
+    newSource._dataBlob = dataBlob;
+    if (sectionIdentities) {
+      newSource.sectionIdentities = sectionIdentities;
+    } else {
+      newSource.sectionIdentities = Object.keys(dataBlob);
+    }
+    if (rowIdentities) {
+      newSource.rowIdentities = rowIdentities;
+    } else {
+      newSource.rowIdentities = [];
+      newSource.sectionIdentities.forEach((sectionID) => {
+        newSource.rowIdentities.push(Object.keys(dataBlob[sectionID]));
+      });
+    }
+    newSource._cachedRowCount = countRows(newSource.rowIdentities);
+
+    newSource._calculateDirtyArrays(
+      this._dataBlob,
+      this.sectionIdentities,
+      this.rowIdentities
+    );
+
+    return newSource;
+  }
+
+  getRowCount(): number {
+    return this._cachedRowCount;
+  }
+
+  /**
+   * Returns if the row is dirtied and needs to be rerendered
+   */
+  rowShouldUpdate(sectionIndex: number, rowIndex: number): bool {
+    var needsUpdate = this._dirtyRows[sectionIndex][rowIndex];
+    warning(needsUpdate !== undefined,
+      'missing dirtyBit for section, row: ' + sectionIndex + ', ' + rowIndex);
+    return needsUpdate;
+  }
+
+  /**
+   * Gets the data required to render the row.
+   */
+  getRowData(sectionIndex: number, rowIndex: number): any {
+    var sectionID = this.sectionIdentities[sectionIndex];
+    var rowID = this.rowIdentities[sectionIndex][rowIndex];
+    warning(
+      sectionID !== undefined && rowID !== undefined,
+      'rendering invalid section, row: ' + sectionIndex + ', ' + rowIndex
+    );
+    return this._getRowData(this._dataBlob, sectionID, rowID);
+  }
+
+  /**
+   * Gets the rowID at index provided if the dataSource arrays were flattened,
+   * or null of out of range indexes.
+   */
+  getRowIDForFlatIndex(index: number): ?string {
+    var accessIndex = index;
+    for (var ii = 0; ii < this.sectionIdentities.length; ii++) {
+      if (accessIndex >= this.rowIdentities[ii].length) {
+        accessIndex -= this.rowIdentities[ii].length;
+      } else {
+        return this.rowIdentities[ii][accessIndex];
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Gets the sectionID at index provided if the dataSource arrays were flattened,
+   * or null for out of range indexes.
+   */
+  getSectionIDForFlatIndex(index: number): ?string {
+    var accessIndex = index;
+    for (var ii = 0; ii < this.sectionIdentities.length; ii++) {
+      if (accessIndex >= this.rowIdentities[ii].length) {
+        accessIndex -= this.rowIdentities[ii].length;
+      } else {
+        return this.sectionIdentities[ii];
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Returns an array containing the number of rows in each section
+   */
+  getSectionLengths(): Array<number> {
+    var results = [];
+    for (var ii = 0; ii < this.sectionIdentities.length; ii++) {
+      results.push(this.rowIdentities[ii].length);
+    }
+    return results;
+  }
+
+  /**
+   * Returns if the section header is dirtied and needs to be rerendered
+   */
+  sectionHeaderShouldUpdate(sectionIndex: number): bool {
+    var needsUpdate = this._dirtySections[sectionIndex];
+    warning(needsUpdate !== undefined,
+      'missing dirtyBit for section: ' + sectionIndex);
+    return needsUpdate;
+  }
+
+  /**
+   * Gets the data required to render the section header
+   */
+  getSectionHeaderData(sectionIndex: number): any {
+    if (!this._getSectionHeaderData) {
+      return null;
+    }
+    var sectionID = this.sectionIdentities[sectionIndex];
+    warning(sectionID !== undefined,
+      'renderSection called on invalid section: ' + sectionIndex);
+    return this._getSectionHeaderData(this._dataBlob, sectionID);
+  }
+
+  /**
+   * Private members and methods.
+   */
+
+  _getRowData: typeof defaultGetRowData;
+  _getSectionHeaderData: typeof defaultGetSectionHeaderData;
+  _rowHasChanged: differType;
+  _sectionHeaderHasChanged: ?differType;
+
+  _dataBlob: any;
+  _dirtyRows: Array<Array<bool>>;
+  _dirtySections: Array<bool>;
+  _cachedRowCount: number;
+
+  // These two 'protected' variables are accessed by ListView to iterate over
+  // the data in this class.
+  rowIdentities: Array<Array<string>>;
+  sectionIdentities: Array<string>;
+
+  _calculateDirtyArrays(
+    prevDataBlob: any,
+    prevSectionIDs: Array<string>,
+    prevRowIDs: Array<Array<string>>
+  ): void {
+    // construct a hashmap of the existing (old) id arrays
+    var prevSectionsHash = keyedDictionaryFromArray(prevSectionIDs);
+    var prevRowsHash = {};
+    for (var ii = 0; ii < prevRowIDs.length; ii++) {
+      var sectionID = prevSectionIDs[ii];
+      warning(
+        !prevRowsHash[sectionID],
+        'SectionID appears more than once: ' + sectionID
+      );
+      prevRowsHash[sectionID] = keyedDictionaryFromArray(prevRowIDs[ii]);
+    }
+
+    // compare the 2 identity array and get the dirtied rows
+    this._dirtySections = [];
+    this._dirtyRows = [];
+
+    var dirty;
+    for (var sIndex = 0; sIndex < this.sectionIdentities.length; sIndex++) {
+      var sectionID = this.sectionIdentities[sIndex];
+      // dirty if the sectionHeader is new or _sectionHasChanged is true
+      dirty = !prevSectionsHash[sectionID];
+      var sectionHeaderHasChanged = this._sectionHeaderHasChanged;
+      if (!dirty && sectionHeaderHasChanged) {
+        dirty = sectionHeaderHasChanged(
+          this._getSectionHeaderData(prevDataBlob, sectionID),
+          this._getSectionHeaderData(this._dataBlob, sectionID)
+        );
+      }
+      this._dirtySections.push(!!dirty);
+
+      this._dirtyRows[sIndex] = [];
+      for (var rIndex = 0; rIndex < this.rowIdentities[sIndex].length; rIndex++) {
+        var rowID = this.rowIdentities[sIndex][rIndex];
+        // dirty if the section is new, row is new or _rowHasChanged is true
+        dirty =
+          !prevSectionsHash[sectionID] ||
+          !prevRowsHash[sectionID][rowID] ||
+          this._rowHasChanged(
+            this._getRowData(prevDataBlob, sectionID, rowID),
+            this._getRowData(this._dataBlob, sectionID, rowID)
+          );
+        this._dirtyRows[sIndex].push(!!dirty);
+      }
+    }
+  }
+}
+
+function countRows(allRowIDs) {
+  var totalRows = 0;
+  for (var sectionIdx = 0; sectionIdx < allRowIDs.length; sectionIdx++) {
+    var rowIDs = allRowIDs[sectionIdx];
+    totalRows += rowIDs.length;
+  }
+  return totalRows;
+}
+
+function keyedDictionaryFromArray(arr) {
+  if (isEmpty(arr)) {
+    return {};
+  }
+  var result = {};
+  for (var ii = 0; ii < arr.length; ii++) {
+    var key = arr[ii];
+    warning(!result[key], 'Value appears more than once in array: ' + key);
+    result[key] = true;
+  }
+  return result;
+}
+
+
+module.exports = ListViewDataSource;

src/components/ListView/ListViewPropTypes.js

@@ -0,0 +1,22 @@
+import { PropTypes } from 'react'
+import ScrollView from '../ScrollView'
+import ListViewDataSource from './ListViewDataSource'
+
+export default {
+  ...ScrollView.propTypes,
+  dataSource: PropTypes.instanceOf(ListViewDataSource).isRequired,
+  renderSeparator: PropTypes.func,
+  renderRow: PropTypes.func.isRequired,
+  initialListSize: PropTypes.number,
+  onEndReached: PropTypes.func,
+  onEndReachedThreshold: PropTypes.number,
+  pageSize: PropTypes.number,
+  renderFooter: PropTypes.func,
+  renderHeader: PropTypes.func,
+  renderSectionHeader: PropTypes.func,
+  renderScrollComponent: PropTypes.func.isRequired,
+  scrollRenderAheadDistance: PropTypes.number,
+  onChangeVisibleRows: PropTypes.func,
+  removeClippedSubviews: PropTypes.bool,
+  stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number)
+}

src/components/ListView/__tests__/index-test.js

@@ -1 +1,5 @@
 /* eslint-env mocha */
+
+suite('components/ListView', () => {
+  test('NO TEST COVERAGE')
+})

src/components/ListView/index.js

@@ -1,19 +1,103 @@
-import React, { Component, PropTypes } from 'react'
+import NativeMethodsDecorator from '../../modules/NativeMethodsDecorator'
+import React, { Component } from 'react'
 import ScrollView from '../ScrollView'
+import ListViewDataSource from './ListViewDataSource'
+import ListViewPropTypes from './ListViewPropTypes'
 
-export default class ListView extends Component {
-  static propTypes = {
-    children: PropTypes.any,
-    style: ScrollView.propTypes.style
-  };
+const SCROLLVIEW_REF = 'listviewscroll'
+
+@NativeMethodsDecorator
+class ListView extends Component {
+  static propTypes = ListViewPropTypes;
 
   static defaultProps = {
-    style: {}
+    initialListSize: 10,
+    pageSize: 1,
+    renderScrollComponent: (props) => <ScrollView {...props} />,
+    scrollRenderAheadDistance: 1000,
+    onEndReachedThreshold: 1000,
+    stickyHeaderIndices: []
   };
 
+  static DataSource = ListViewDataSource;
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      curRenderedRowsCount: this.props.initialListSize,
+      highlightedRow: {}
+    }
+    this.onRowHighlighted = (sectionId, rowId) => this._onRowHighlighted(sectionId, rowId)
+  }
+
+  getScrollResponder() {
+    return this.refs[SCROLLVIEW_REF] && this.refs[SCROLLVIEW_REF].getScrollResponder()
+  }
+
+  scrollTo(...args) {
+    return this.refs[SCROLLVIEW_REF] && this.refs[SCROLLVIEW_REF].scrollTo(...args)
+  }
+
+  setNativeProps(props) {
+    return this.refs[SCROLLVIEW_REF] && this.refs[SCROLLVIEW_REF].setNativeProps(props)
+  }
+
+  _onRowHighlighted(sectionId, rowId) {
+    this.setState({highlightedRow: {sectionId, rowId}})
+  }
+
   render() {
-    return (
-      <ScrollView {...this.props} />
-    )
+    const dataSource = this.props.dataSource
+    const header = this.props.renderHeader ? this.props.renderHeader() : undefined
+    const footer = this.props.renderFooter ? this.props.renderFooter() : undefined
+
+    // render sections and rows
+    const children = []
+    const sections = dataSource.rowIdentities
+    const renderRow = this.props.renderRow
+    const renderSectionHeader = this.props.renderSectionHeader
+    const renderSeparator = this.props.renderSeparator
+    for (let sectionIdx = 0, sectionCnt = sections.length; sectionIdx < sectionCnt; sectionIdx++) {
+      const rows = sections[sectionIdx]
+      const sectionId = dataSource.sectionIdentities[sectionIdx]
+
+      // render optional section header
+      if (renderSectionHeader) {
+        const section = dataSource.getSectionHeaderData(sectionIdx)
+        const key = 's_' + sectionId
+        const child = <div key={key}>{renderSectionHeader(section, sectionId)}</div>
+        children.push(child)
+      }
+
+      // render rows
+      for (let rowIdx = 0, rowCnt = rows.length; rowIdx < rowCnt; rowIdx++) {
+        const rowId = rows[rowIdx]
+        const row = dataSource.getRowData(sectionIdx, rowIdx)
+        const key = 'r_' + sectionId + '_' + rowId
+        const child = <div key={key}>{renderRow(row, sectionId, rowId, this.onRowHighlighted)}</div>
+        children.push(child)
+
+        // render optional separator
+        if (renderSeparator && ((rowIdx !== rows.length - 1) || (sectionIdx === sections.length - 1))) {
+          const adjacentRowHighlighted =
+            this.state.highlightedRow.sectionID === sectionId && (
+              this.state.highlightedRow.rowID === rowId ||
+              this.state.highlightedRow.rowID === rows[rowIdx + 1])
+          const separator = renderSeparator(sectionId, rowId, adjacentRowHighlighted)
+          children.push(separator)
+        }
+      }
+    }
+
+    const {
+      renderScrollComponent,
+      ...props
+    } = this.props
+
+    return React.cloneElement(renderScrollComponent(props), {
+      ref: SCROLLVIEW_REF
+    }, header, children, footer)
   }
 }
+
+module.exports = ListView

src/components/Portal/index.js

@@ -1,156 +0,0 @@
-/**
- * Copyright 2015-present, Nicolas Gallagher
- * Copyright 2004-present, Facebook Inc.
- * All Rights Reserved.
- *
- * @flow
- */
-
-import invariant from 'invariant'
-import Platform from '../../apis/Platform'
-import React, { Component, PropTypes } from 'react'
-import StyleSheet from '../../apis/StyleSheet'
-import View from '../View'
-
-let _portalRef: any
-// unique identifiers for modals
-let lastUsedTag = 0
-
-/**
- * A container that renders all the modals on top of everything else in the application.
- */
-export default class Portal extends Component {
-  static propTypes = {
-    onModalVisibilityChanged: PropTypes.func.isRequired
-  };
-
-  /**
-   * Create a new unique tag.
-   */
-  static allocateTag(): string {
-    return `__modal_${++lastUsedTag}`
-  }
-
-  /**
-   * Render a new modal.
-   */
-  static showModal(tag: string, component: any) {
-    if (!_portalRef) {
-      console.error('Calling showModal but no "Portal" has been rendered.')
-      return
-    }
-    _portalRef._showModal(tag, component)
-  }
-
-  /**
-   * Remove a modal from the collection of modals to be rendered.
-   */
-  static closeModal(tag: string) {
-    if (!_portalRef) {
-      console.error('Calling closeModal but no "Portal" has been rendered.')
-      return
-    }
-    _portalRef._closeModal(tag)
-  }
-
-  /**
-   * Get an array of all the open modals, as identified by their tag string.
-   */
-  static getOpenModals(): Array<string> {
-    if (!_portalRef) {
-      console.error('Calling getOpenModals but no "Portal" has been rendered.')
-      return []
-    }
-    return _portalRef._getOpenModals()
-  }
-
-  static notifyAccessibilityService() {
-    if (!_portalRef) {
-      console.error('Calling closeModal but no "Portal" has been rendered.')
-      return
-    }
-    _portalRef._notifyAccessibilityService()
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = { modals: {} }
-    this._closeModal = this._closeModal.bind(this)
-    this._getOpenModals = this._getOpenModals.bind(this)
-    this._showModal = this._showModal.bind(this)
-  }
-
-  render() {
-    invariant(
-      _portalRef === this || _portalRef === undefined,
-      'More than one Portal instance detected. Never use <Portal> in your code.'
-    )
-    _portalRef = this
-    if (!this.state.modals) { return null }
-    const modals = []
-    for (const tag in this.state.modals) {
-      modals.push(this.state.modals[tag])
-    }
-    if (modals.length === 0) { return null }
-
-    return (
-      <View style={styles.root}>
-        {modals}
-      </View>
-    )
-  }
-
-  _closeModal(tag: string) {
-    if (!this.state.modals.hasOwnProperty(tag)) {
-      return
-    }
-    // We are about to close last modal, so Portal will disappear.
-    // Let's enable accessibility for application view.
-    if (this._getOpenModals().length === 1) {
-      this.props.onModalVisibilityChanged(false)
-    }
-    // This way state is chained through multiple calls to
-    // _showModal, _closeModal correctly.
-    this.setState((state) => {
-      const modals = state.modals
-      delete modals[tag]
-      return { modals }
-    })
-  }
-
-  _getOpenModals(): Array<string> {
-    return Object.keys(this.state.modals)
-  }
-
-  _notifyAccessibilityService() {
-    if (Platform.OS === 'web') {
-      // We need to send accessibility event in a new batch, as otherwise
-      // TextViews have no text set at the moment of populating event.
-    }
-  }
-
-  _showModal(tag: string, component: any) {
-    // We are about to open first modal, so Portal will appear.
-    // Let's disable accessibility for background view on Android.
-    if (this._getOpenModals().length === 0) {
-      this.props.onModalVisibilityChanged(true)
-    }
-    // This way state is chained through multiple calls to
-    // _showModal, _closeModal correctly.
-    this.setState((state) => {
-      const modals = state.modals
-      modals[tag] = component
-      return { modals }
-    })
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0
-  }
-})

src/components/ScrollView/ScrollViewBase.js

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2016-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * @flow
+ */
+
+import debounce from 'lodash/debounce'
+import React, { Component, PropTypes } from 'react'
+import View from '../View'
+
+/**
+ * Encapsulates the Web-specific scroll throttling and disabling logic
+ */
+export default class ScrollViewBase extends Component {
+  static propTypes = {
+    ...View.propTypes,
+    onScroll: PropTypes.func,
+    onTouchMove: PropTypes.func,
+    onWheel: PropTypes.func,
+    scrollEnabled: PropTypes.bool,
+    scrollEventThrottle: PropTypes.number
+  };
+
+  static defaultProps = {
+    scrollEnabled: true
+  };
+
+  constructor(props) {
+    super(props)
+    this._debouncedOnScrollEnd = debounce(this._handleScrollEnd, 100)
+    this._handlePreventableScrollEvent = this._handlePreventableScrollEvent.bind(this)
+    this._handleScroll = this._handleScroll.bind(this)
+    this._state = { isScrolling: false }
+  }
+
+  _handlePreventableScrollEvent(handler) {
+    return (e) => {
+      if (!this.props.scrollEnabled) {
+        e.preventDefault()
+      } else {
+        if (handler) handler(e)
+      }
+    }
+  }
+
+  _handleScroll(e) {
+    const { scrollEventThrottle } = this.props
+    // A scroll happened, so the scroll bumps the debounce.
+    this._debouncedOnScrollEnd(e)
+    if (this._state.isScrolling) {
+      // Scroll last tick may have changed, check if we need to notify
+      if (this._shouldEmitScrollEvent(this._state.scrollLastTick, scrollEventThrottle)) {
+        this._handleScrollTick(e)
+      }
+    } else {
+      // Weren't scrolling, so we must have just started
+      this._handleScrollStart(e)
+    }
+  }
+
+  _handleScrollStart(e) {
+    this._state.isScrolling = true
+    this._state.scrollLastTick = Date.now()
+  }
+
+  _handleScrollTick(e) {
+    const { onScroll } = this.props
+    this._state.scrollLastTick = Date.now()
+    if (onScroll) onScroll(e)
+  }
+
+  _handleScrollEnd(e) {
+    const { onScroll } = this.props
+    this._state.isScrolling = false
+    if (onScroll) onScroll(e)
+  }
+
+  _shouldEmitScrollEvent(lastTick, eventThrottle) {
+    const timeSinceLastTick = Date.now() - lastTick
+    return (eventThrottle > 0 && timeSinceLastTick >= (1000 / eventThrottle))
+  }
+
+  render() {
+    return (
+      <View
+        {...this.props}
+        onScroll={this._handleScroll}
+        onTouchMove={this._handlePreventableScrollEvent(this.props.onTouchMove)}
+        onWheel={this._handlePreventableScrollEvent(this.props.onWheel)}
+      />
+    )
+  }
+}

src/components/ScrollView/index.js

@@ -1,129 +1,227 @@
-import debounce from 'lodash.debounce'
-import React, { Component, PropTypes } from 'react'
-import StyleSheet from '../../apis/StyleSheet'
-import View from '../View'
+/**
+ * Copyright (c) 2016-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * @flow
+ */
 
-export default class ScrollView extends Component {
-  static propTypes = {
-    children: PropTypes.any,
-    contentContainerStyle: View.propTypes.style,
+import dismissKeyboard from '../../modules/dismissKeyboard'
+import invariant from 'fbjs/lib/invariant'
+import React, { Component, PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import ScrollResponder from '../../modules/ScrollResponder'
+import ScrollViewBase from './ScrollViewBase'
+import StyleSheet from '../../apis/StyleSheet'
+import StyleSheetPropType from '../../apis/StyleSheet/StyleSheetPropType'
+import View from '../View'
+import ViewStylePropTypes from '../View/ViewStylePropTypes'
+
+const INNERVIEW = 'InnerScrollView'
+const SCROLLVIEW = 'ScrollView'
+
+const ScrollView = React.createClass({
+  propTypes: {
+    ...View.propTypes,
+    children: View.propTypes.children,
+    contentContainerStyle: StyleSheetPropType(ViewStylePropTypes),
     horizontal: PropTypes.bool,
+    keyboardDismissMode: PropTypes.oneOf([ 'none', 'interactive', 'on-drag' ]),
+    onContentSizeChange: PropTypes.func,
     onScroll: PropTypes.func,
+    refreshControl: PropTypes.element,
     scrollEnabled: PropTypes.bool,
     scrollEventThrottle: PropTypes.number,
-    style: View.propTypes.style
-  };
+    style: StyleSheetPropType(ViewStylePropTypes)
+  },
 
-  static defaultProps = {
-    contentContainerStyle: {},
-    horizontal: false,
-    scrollEnabled: true,
-    scrollEventThrottle: 0,
-    style: {}
-  };
+  mixins: [ScrollResponder.Mixin],
 
-  constructor(...args) {
-    super(...args)
-    this._debouncedOnScrollEnd = debounce(this._onScrollEnd, 100)
-    this.state = {
-      isScrolling: false
-    }
-  }
+  getInitialState() {
+    return this.scrollResponderMixinGetInitialState()
+  },
 
-  _onScroll(e) {
-    const { scrollEventThrottle } = this.props
-    const { isScrolling, scrollLastTick } = this.state
+  setNativeProps(props: Object) {
+    this.refs[SCROLLVIEW].setNativeProps(props)
+  },
 
-    // A scroll happened, so the scroll bumps the debounce.
-    this._debouncedOnScrollEnd(e)
+  /**
+   * Returns a reference to the underlying scroll responder, which supports
+   * operations like `scrollTo`. All ScrollView-like components should
+   * implement this method so that they can be composed while providing access
+   * to the underlying scroll responder's methods.
+   */
+  getScrollResponder(): Component {
+    return this
+  },
 
-    if (isScrolling) {
-      // Scroll last tick may have changed, check if we need to notify
-      if (this._shouldEmitScrollEvent(scrollLastTick, scrollEventThrottle)) {
-        this._onScrollTick(e)
-      }
+  getScrollableNode(): any {
+    return ReactDOM.findDOMNode(this.refs[SCROLLVIEW])
+  },
+
+  getInnerViewNode(): any {
+    return ReactDOM.findDOMNode(this.refs[INNERVIEW])
+  },
+
+  /**
+   * Scrolls to a given x, y offset, either immediately or with a smooth animation.
+   * Syntax:
+   *
+   * scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})
+   *
+   * Note: The weird argument signature is due to the fact that, for historical reasons,
+   * the function also accepts separate arguments as as alternative to the options object.
+   * This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.
+   */
+  scrollTo(
+    y?: number | { x?: number, y?: number, animated?: boolean },
+    x?: number,
+    animated?: boolean
+  ) {
+    if (typeof y === 'number') {
+      console.warn('`scrollTo(y, x, animated)` is deprecated. Use `scrollTo({x: 5, y: 5, animated: true})` instead.')
     } else {
-      // Weren't scrolling, so we must have just started
-      this._onScrollStart(e)
+      ({x, y, animated} = y || {})
     }
-  }
 
-  _onScrollStart() {
-    this.setState({
-      isScrolling: true,
-      scrollLastTick: Date.now()
-    })
-  }
+    this.getScrollResponder().scrollResponderScrollTo({x: x || 0, y: y || 0, animated: animated !== false})
+  },
 
-  _onScrollTick(e) {
-    const { onScroll } = this.props
-    this.setState({
-      scrollLastTick: Date.now()
-    })
-    if (onScroll) onScroll(e)
-  }
+  /**
+   * Deprecated, do not use.
+   */
+  scrollWithoutAnimationTo(y: number = 0, x: number = 0) {
+    console.warn('`scrollWithoutAnimationTo` is deprecated. Use `scrollTo` instead')
+    this.scrollTo({x, y, animated: false})
+  },
 
-  _onScrollEnd(e) {
-    const { onScroll } = this.props
-    this.setState({
-      isScrolling: false
-    })
-    if (onScroll) onScroll(e)
-  }
+  handleScroll(e: Object) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (this.props.onScroll && !this.props.scrollEventThrottle) {
+        console.log(
+          'You specified `onScroll` on a <ScrollView> but not ' +
+          '`scrollEventThrottle`. You will only receive one event. ' +
+          'Using `16` you get all the events but be aware that it may ' +
+          'cause frame drops, use a bigger number if you don\'t need as ' +
+          'much precision.'
+        )
+      }
+    }
 
-  _shouldEmitScrollEvent(lastTick, eventThrottle) {
-    const timeSinceLastTick = Date.now() - lastTick
-    return (eventThrottle > 0 && timeSinceLastTick >= (1000 / eventThrottle))
-  }
+    if (this.props.keyboardDismissMode === 'on-drag') {
+      dismissKeyboard()
+    }
 
-  _maybePreventScroll(e) {
-    const { scrollEnabled } = this.props
-    if (!scrollEnabled) e.preventDefault()
-  }
+    this.scrollResponderHandleScroll(e)
+  },
+
+  _handleContentOnLayout(e: Object) {
+    const { width, height } = e.nativeEvent.layout
+    this.props.onContentSizeChange && this.props.onContentSizeChange(width, height)
+  },
 
   render() {
-    const {
-      children,
-      contentContainerStyle,
-      horizontal,
-      style
-    } = this.props
+    const scrollViewStyle = [
+      styles.base,
+      this.props.horizontal && styles.baseHorizontal
+    ]
+
+    const contentContainerStyle = [
+      styles.contentContainer,
+      this.props.horizontal && styles.contentContainerHorizontal,
+      this.props.contentContainerStyle
+    ]
+
+    if (process.env.NODE_ENV !== 'production' && this.props.style) {
+      const style = StyleSheet.flatten(this.props.style)
+      const childLayoutProps = ['alignItems', 'justifyContent'].filter((prop) => style && style[prop] !== undefined)
+      invariant(
+        childLayoutProps.length === 0,
+        'ScrollView child layout (' + JSON.stringify(childLayoutProps) +
+          ') must be applied through the contentContainerStyle prop.'
+      )
+    }
+
+    let contentSizeChangeProps = {}
+    if (this.props.onContentSizeChange) {
+      contentSizeChangeProps = {
+        onLayout: this._handleContentOnLayout
+      }
+    }
+
+    const contentContainer = (
+      <View
+        {...contentSizeChangeProps}
+        children={this.props.children}
+        collapsable={false}
+        ref={INNERVIEW}
+        style={contentContainerStyle}
+      />
+    )
+
+    const props = {
+      ...this.props,
+      style: [scrollViewStyle, this.props.style],
+      onTouchStart: this.scrollResponderHandleTouchStart,
+      onTouchMove: this.scrollResponderHandleTouchMove,
+      onTouchEnd: this.scrollResponderHandleTouchEnd,
+      onScrollBeginDrag: this.scrollResponderHandleScrollBeginDrag,
+      onScrollEndDrag: this.scrollResponderHandleScrollEndDrag,
+      onMomentumScrollBegin: this.scrollResponderHandleMomentumScrollBegin,
+      onMomentumScrollEnd: this.scrollResponderHandleMomentumScrollEnd,
+      onStartShouldSetResponder: this.scrollResponderHandleStartShouldSetResponder,
+      onStartShouldSetResponderCapture: this.scrollResponderHandleStartShouldSetResponderCapture,
+      onScrollShouldSetResponder: this.scrollResponderHandleScrollShouldSetResponder,
+      onScroll: this.handleScroll,
+      onResponderGrant: this.scrollResponderHandleResponderGrant,
+      onResponderTerminationRequest: this.scrollResponderHandleTerminationRequest,
+      onResponderTerminate: this.scrollResponderHandleTerminate,
+      onResponderRelease: this.scrollResponderHandleResponderRelease,
+      onResponderReject: this.scrollResponderHandleResponderReject
+    }
+
+    const ScrollViewClass = ScrollViewBase
+
+    invariant(
+      ScrollViewClass !== undefined,
+      'ScrollViewClass must not be undefined'
+    )
+
+    var refreshControl = this.props.refreshControl
+    if (refreshControl) {
+      return React.cloneElement(
+        refreshControl,
+        { style: props.style },
+        <ScrollViewClass {...props} ref={SCROLLVIEW} style={styles.base}>
+          {contentContainer}
+        </ScrollViewClass>
+      )
+    }
 
     return (
-      <View
-        _className='ScrollView'
-        onScroll={(e) => this._onScroll(e)}
-        onTouchMove={(e) => this._maybePreventScroll(e)}
-        onWheel={(e) => this._maybePreventScroll(e)}
-        style={[
-          styles.initial,
-          style
-        ]}
-      >
-        {children ? (
-          <View
-            children={children}
-            style={[
-              styles.initialContentContainer,
-              contentContainerStyle,
-              horizontal && styles.row
-            ]}
-          />
-        ) : null}
-      </View>
+      <ScrollViewClass {...props} ref={SCROLLVIEW} style={props.style}>
+        {contentContainer}
+      </ScrollViewClass>
     )
   }
-}
+})
 
 const styles = StyleSheet.create({
-  initial: {
+  base: {
     flex: 1,
-    overflow: 'auto'
+    overflowX: 'hidden',
+    overflowY: 'auto'
   },
-  initialContentContainer: {
+  baseHorizontal: {
+    overflowX: 'auto',
+    overflowY: 'hidden'
+  },
+  contentContainer: {
     flex: 1
   },
-  row: {
+  contentContainerHorizontal: {
     flexDirection: 'row'
   }
 })
+
+module.exports = ScrollView

src/components/StaticContainer/index.js

@@ -23,7 +23,7 @@ import React, { Component, PropTypes } from 'react'
  * Typically, you will not need to use this component and should opt for normal
  * React reconciliation.
  */
-export default class StaticContainer extends Component {
+class StaticContainer extends Component {
   static propTypes = {
     children: PropTypes.any.isRequired,
     shouldUpdate: PropTypes.bool.isRequired
@@ -38,3 +38,5 @@ export default class StaticContainer extends Component {
     return (child === null || child === false) ? null : React.Children.only(child)
   }
 }
+
+module.exports = StaticContainer

src/components/StaticRenderer/index.js

@@ -22,7 +22,7 @@ import { Component, PropTypes } from 'react'
  * React reconciliation.
  */
 
-export default class StaticRenderer extends Component {
+class StaticRenderer extends Component {
   static propTypes = {
     render: PropTypes.func.isRequired,
     shouldUpdate: PropTypes.bool.isRequired
@@ -36,3 +36,5 @@ export default class StaticRenderer extends Component {
     return this.props.render()
   }
 }
+
+module.exports = StaticRenderer

src/components/Text/TextStylePropTypes.js

@@ -5,7 +5,7 @@ import ViewStylePropTypes from '../View/ViewStylePropTypes'
 const { number, oneOf, oneOfType, string } = PropTypes
 const numberOrString = oneOfType([ number, string ])
 
-export default {
+module.exports = {
   ...ViewStylePropTypes,
   color: ColorPropType,
   fontFamily: string,
@@ -15,14 +15,17 @@ export default {
   letterSpacing: numberOrString,
   lineHeight: numberOrString,
   textAlign: oneOf([ 'center', 'inherit', 'justify', 'justify-all', 'left', 'right' ]),
-  /**
-   * @platform web
-   */
-  textDecoration: string,
+  textAlignVertical: oneOf([ 'auto', 'bottom', 'center', 'top' ]),
+  textDecorationLine: string,
+  /* @platform web */
   textOverflow: string,
+  /* @platform web */
   textShadow: string,
+  /* @platform web */
   textTransform: oneOf([ 'capitalize', 'lowercase', 'none', 'uppercase' ]),
+  /* @platform web */
   whiteSpace: string,
+  /* @platform web */
   wordWrap: string,
-  writingDirection: string
+  writingDirection: oneOf([ 'auto', 'ltr', 'rtl' ])
 }

src/components/Text/__tests__/index-test.js

@@ -8,24 +8,6 @@ import ReactTestUtils from 'react-addons-test-utils'
 import Text from '../'
 
 suite('components/Text', () => {
-  test('prop "accessibilityLabel"', () => {
-    const accessibilityLabel = 'accessibilityLabel'
-    const result = utils.shallowRender(<Text accessibilityLabel={accessibilityLabel} />)
-    assert.equal(result.props.accessibilityLabel, accessibilityLabel)
-  })
-
-  test('prop "accessibilityRole"', () => {
-    const accessibilityRole = 'accessibilityRole'
-    const result = utils.shallowRender(<Text accessibilityRole={accessibilityRole} />)
-    assert.equal(result.props.accessibilityRole, accessibilityRole)
-  })
-
-  test('prop "accessible"', () => {
-    const accessible = false
-    const result = utils.shallowRender(<Text accessible={accessible} />)
-    assert.equal(result.props.accessible, accessible)
-  })
-
   test('prop "children"', () => {
     const children = 'children'
     const result = utils.shallowRender(<Text>{children}</Text>)
@@ -42,10 +24,4 @@ suite('components/Text', () => {
       done()
     }
   })
-
-  test('prop "testID"', () => {
-    const testID = 'testID'
-    const result = utils.shallowRender(<Text testID={testID} />)
-    assert.equal(result.props.testID, testID)
-  })
 })

src/components/Text/index.js

@@ -1,49 +1,51 @@
-import CoreComponent from '../CoreComponent'
-import React, { Component, PropTypes } from 'react'
+import createNativeComponent from '../../modules/createNativeComponent'
+import NativeMethodsDecorator from '../../modules/NativeMethodsDecorator'
+import { Component, PropTypes } from 'react'
 import StyleSheet from '../../apis/StyleSheet'
 import StyleSheetPropType from '../../apis/StyleSheet/StyleSheetPropType'
 import TextStylePropTypes from './TextStylePropTypes'
 
-export default class Text extends Component {
+@NativeMethodsDecorator
+class Text extends Component {
   static propTypes = {
-    accessibilityLabel: CoreComponent.propTypes.accessibilityLabel,
-    accessibilityRole: CoreComponent.propTypes.accessibilityRole,
-    accessible: CoreComponent.propTypes.accessible,
+    accessibilityLabel: createNativeComponent.propTypes.accessibilityLabel,
+    accessibilityRole: createNativeComponent.propTypes.accessibilityRole,
+    accessible: createNativeComponent.propTypes.accessible,
     children: PropTypes.any,
     numberOfLines: PropTypes.number,
     onPress: PropTypes.func,
     style: StyleSheetPropType(TextStylePropTypes),
-    testID: CoreComponent.propTypes.testID
+    testID: createNativeComponent.propTypes.testID
   };
 
   static defaultProps = {
     accessible: true
   };
 
-  _onPress(e) {
+  _onPress = (e) => {
     if (this.props.onPress) this.props.onPress(e)
   }
 
   render() {
     const {
       numberOfLines,
+      /* eslint-disable no-unused-vars */
       onPress,
+      /* eslint-enable no-unused-vars */
       style,
       ...other
     } = this.props
 
-    return (
-      <CoreComponent
-        {...other}
-        component='span'
-        onClick={this._onPress.bind(this)}
-        style={[
-          styles.initial,
-          style,
-          numberOfLines === 1 && styles.singleLineStyle
-        ]}
-      />
-    )
+    return createNativeComponent({
+      ...other,
+      component: 'span',
+      onClick: this._onPress,
+      style: [
+        styles.initial,
+        style,
+        numberOfLines === 1 && styles.singleLineStyle
+      ]
+    })
   }
 }
 
@@ -54,7 +56,7 @@ const styles = StyleSheet.create({
     font: 'inherit',
     margin: 0,
     padding: 0,
-    textDecoration: 'none',
+    textDecorationLine: 'none',
     wordWrap: 'break-word'
   },
   singleLineStyle: {
@@ -64,3 +66,5 @@ const styles = StyleSheet.create({
     whiteSpace: 'nowrap'
   }
 })
+
+module.exports = Text