0.0.40

Scrolling is broken by the patch that adds ResponderEvent support for
multi-input devices: 6a9212df40

By calling 'preventDefault' on every touch event, scroll events were
cancelled. This patch shifts the responsibility for calling
'preventDefault' to the 'View' event handler normalizer, and only on
touch events within the Responder system.

Fix #175

.gitignore

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

README.md

@@ -2,7 +2,7 @@
 
 [![Build Status][travis-image]][travis-url]
 [![npm version][npm-image]][npm-url]
-![gzipped size](https://img.shields.io/badge/gzipped-~41.0k-blue.svg)
+![gzipped size](https://img.shields.io/badge/gzipped-~48.6k-blue.svg)
 
 [React Native][react-native-url] components and APIs for the Web.
 
@@ -121,6 +121,7 @@ Exported modules:
   * [`PixelRatio`](docs/apis/PixelRatio.md)
   * [`Platform`](docs/apis/Platform.md)
   * [`StyleSheet`](docs/apis/StyleSheet.md)
+  * [`Vibration`](docs/apis/Vibration.md)
 
 ## License
 

docs/apis/Platform.md

@@ -20,7 +20,7 @@ const styles = StyleSheet.create({
 
 ## Methods
 
-**select**: any
+**select**(object): any
 
 `Platform.select` takes an object containing `Platform.OS` as keys and returns
 the value for the platform you are currently running on.

docs/apis/Vibration.md

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

docs/components/Image.md

@@ -46,7 +46,7 @@ Invoked when load either succeeds or fails,
 
 Invoked on load start.
 
-**resizeMode**: oneOf('contain', 'cover', 'none', 'stretch') = 'stretch'
+**resizeMode**: oneOf('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'stretch'
 
 Determines how to resize the image when the frame doesn't match the raw image
 dimensions.

docs/components/Text.md

@@ -32,7 +32,7 @@ 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.
 
-(web) **accessible**: bool = true
+**accessible**: bool = true
 
 When `false`, the text is hidden from assistive technologies. (This is
 implemented using `aria-hidden`.)
@@ -54,6 +54,10 @@ height } } }`, where `x` and `y` are the offsets from the parent node.
 
 This function is called on press.
 
+**selectable**: bool = true
+
+Lets the user select the text.
+
 **style**: style
 
 + ...[View#style](View.md)

examples/.storybook/config.js

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

examples/.storybook/decorator-centered.js

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

examples/.storybook/webpack.config.js

@@ -1,15 +1,7 @@
 const path = require('path')
 const webpack = require('webpack')
 
-const EXAMPLES_DIRECTORY = __dirname
-
 module.exports = {
-  devServer: {
-    contentBase: EXAMPLES_DIRECTORY
-  },
-  entry: {
-    example: EXAMPLES_DIRECTORY
-  },
   module: {
     loaders: [
       {
@@ -17,27 +9,28 @@ module.exports = {
         exclude: /node_modules/,
         loader: 'babel-loader',
         query: { cacheDirectory: true }
+      },
+      {
+        test: /\.(gif|jpe?g|png|svg)$/,
+        loader: 'url-loader',
+        query: { name: '[name].[ext]' }
       }
     ]
   },
-  output: {
-    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')
+      path.join(__dirname, '../../src/modules/polyfills/Set.js')
     ),
     new webpack.optimize.OccurenceOrderPlugin()
   ],
   resolve: {
     alias: {
-      'react-native': path.join(__dirname, '../src')
+      'react-native': path.join(__dirname, '../../src')
     }
   }
 }

examples/ActivityIndicator/ActivityIndicatorExample.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
+import TimerMixin from 'react-timer-mixin';
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+
+const ToggleAnimatingActivityIndicator = React.createClass({
+  mixins: [TimerMixin],
+
+  getInitialState() {
+    return {
+      animating: true,
+    };
+  },
+
+  setToggleTimeout() {
+    this.setTimeout(() => {
+      this.setState({animating: !this.state.animating});
+      this.setToggleTimeout();
+    }, 2000);
+  },
+
+  componentDidMount() {
+    this.setToggleTimeout();
+  },
+
+  render() {
+    return (
+      <ActivityIndicator
+        animating={this.state.animating}
+        style={[styles.centering, {height: 80}]}
+        size="large"
+      />
+    );
+  }
+});
+
+const examples = [
+  {
+    title: 'Default (small, white)',
+    render() {
+      return (
+        <ActivityIndicator
+          style={[styles.centering, styles.gray]}
+          color="white"
+        />
+      );
+    }
+  },
+  {
+    title: 'Gray',
+    render() {
+      return (
+        <View>
+          <ActivityIndicator
+            style={[styles.centering]}
+          />
+          <ActivityIndicator
+            style={[styles.centering, {backgroundColor: '#eeeeee'}]}
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Custom colors',
+    render() {
+      return (
+        <View style={styles.horizontal}>
+          <ActivityIndicator color="#0000ff" />
+          <ActivityIndicator color="#aa00aa" />
+          <ActivityIndicator color="#aa3300" />
+          <ActivityIndicator color="#00aa00" />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Large',
+    render() {
+      return (
+        <ActivityIndicator
+          style={[styles.centering, styles.gray]}
+          color="white"
+          size="large"
+        />
+      );
+    }
+  },
+  {
+    title: 'Large, custom colors',
+    render() {
+      return (
+        <View style={styles.horizontal}>
+          <ActivityIndicator
+            size="large"
+            color="#0000ff"
+          />
+          <ActivityIndicator
+            size="large"
+            color="#aa00aa"
+          />
+          <ActivityIndicator
+            size="large"
+            color="#aa3300"
+          />
+          <ActivityIndicator
+            size="large"
+            color="#00aa00"
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Start/stop',
+    render() {
+      return <ToggleAnimatingActivityIndicator />;
+    }
+  },
+  {
+    title: 'Custom size',
+    render() {
+      return (
+        <ActivityIndicator
+          style={[styles.centering, {transform: [{scale: 1.5}]}]}
+          size="large"
+        />
+      );
+    }
+  },
+];
+
+const styles = StyleSheet.create({
+  centering: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+  },
+  gray: {
+    backgroundColor: '#cccccc',
+  },
+  horizontal: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 8,
+  },
+});
+
+examples.forEach((example) => {
+  storiesOf('<ActivityIndicator>', module)
+    .add(example.title, () => example.render())
+})

examples/Game2048/Game2048Example.js

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

examples/Image/ImageExample.js

@@ -0,0 +1,655 @@
+import React from 'react';
+import { storiesOf, action, addDecorator } from '@kadira/storybook';
+import { ActivityIndicator, Image, Platform, StyleSheet, Text, View } from 'react-native'
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+
+var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
+
+//var ImageCapInsetsExample = require('./ImageCapInsetsExample');
+//const IMAGE_PREFETCH_URL = 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now();
+//var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
+
+/*
+var NetworkImageCallbackExample = React.createClass({
+  getInitialState: function() {
+    return {
+      events: [],
+      startLoadPrefetched: false,
+      mountTime: new Date(),
+    };
+  },
+
+  componentWillMount() {
+    this.setState({mountTime: new Date()});
+  },
+
+  render: function() {
+    var { mountTime } = this.state;
+
+    return (
+      <View>
+        <Image
+          source={this.props.source}
+          style={[styles.base, {overflow: 'visible'}]}
+          onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
+          onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
+          onLoadEnd={() => {
+            this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
+            this.setState({startLoadPrefetched: true}, () => {
+              prefetchTask.then(() => {
+                this._loadEventFired(`✔ Prefetch OK (+${new Date() - mountTime}ms)`);
+              }, error => {
+                this._loadEventFired(`✘ Prefetch failed (+${new Date() - mountTime}ms)`);
+              });
+            });
+          }}
+        />
+        {this.state.startLoadPrefetched ?
+          <Image
+            source={this.props.prefetchedSource}
+            style={[styles.base, {overflow: 'visible'}]}
+            onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
+            onLoad={() => this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
+            onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
+          />
+          : null}
+        <Text style={{marginTop: 20}}>
+          {this.state.events.join('\n')}
+        </Text>
+      </View>
+    );
+  },
+
+  _loadEventFired(event) {
+    this.setState((state) => {
+      return state.events = [...state.events, event];
+    });
+  }
+});
+*/
+
+var NetworkImageExample = React.createClass({
+  getInitialState: function() {
+    return {
+      error: false,
+      loading: false,
+      progress: 0
+    };
+  },
+  render: function() {
+    var loader = this.state.loading ?
+      <View style={styles.progress}>
+        <Text>{this.state.progress}%</Text>
+        <ActivityIndicator style={{marginLeft:5}} />
+      </View> : null;
+    return this.state.error ?
+      <Text>{this.state.error}</Text> :
+      <Image
+        source={this.props.source}
+        style={[styles.base, {overflow: 'visible'}]}
+        onLoadStart={(e) => this.setState({loading: true})}
+        onError={(e) => this.setState({error: e.nativeEvent.error, loading: false})}
+        onProgress={(e) => this.setState({progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)})}
+        onLoad={() => this.setState({loading: false, error: false})}>
+        {loader}
+      </Image>;
+  }
+});
+
+/*
+var ImageSizeExample = React.createClass({
+  getInitialState: function() {
+    return {
+      width: 0,
+      height: 0,
+    };
+  },
+  componentDidMount: function() {
+    Image.getSize(this.props.source.uri, (width, height) => {
+      this.setState({width, height});
+    });
+  },
+  render: function() {
+    return (
+      <View style={{flexDirection: 'row'}}>
+        <Image
+          style={{
+            width: 60,
+            height: 60,
+            backgroundColor: 'transparent',
+            marginRight: 10,
+          }}
+          source={this.props.source} />
+        <Text>
+          Actual dimensions:{'\n'}
+          Width: {this.state.width}, Height: {this.state.height}
+        </Text>
+      </View>
+    );
+  },
+});
+*/
+/*
+var MultipleSourcesExample = React.createClass({
+  getInitialState: function() {
+    return {
+      width: 30,
+      height: 30,
+    };
+  },
+  render: function() {
+    return (
+      <View style={styles.container}>
+        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <Text
+            style={styles.touchableText}
+            onPress={this.decreaseImageSize} >
+            Decrease image size
+          </Text>
+          <Text
+            style={styles.touchableText}
+            onPress={this.increaseImageSize} >
+            Increase image size
+          </Text>
+        </View>
+        <Text>Container image size: {this.state.width}x{this.state.height} </Text>
+        <View
+          style={[styles.imageContainer, {height: this.state.height, width: this.state.width}]} >
+          <Image
+            style={{flex: 1}}
+            source={[
+              {uri: 'http://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
+              {uri: 'http://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},
+              {uri: 'http://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}
+            ]}
+          />
+        </View>
+      </View>
+    );
+  },
+  increaseImageSize: function() {
+    if (this.state.width >= 100) {
+      return;
+    }
+    this.setState({
+      width: this.state.width + 10,
+      height: this.state.height + 10,
+    });
+  },
+  decreaseImageSize: function() {
+    if (this.state.width <= 10) {
+      return;
+    }
+    this.setState({
+      width: this.state.width - 10,
+      height: this.state.height - 10,
+    });
+  },
+});
+*/
+
+const examples = [
+  {
+    title: 'Plain Network Image',
+    description: 'If the `source` prop `uri` property is prefixed with ' +
+    '"http", then it will be downloaded from the network.',
+    render: function() {
+      return (
+        <Image
+          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
+          style={styles.base}
+        />
+      );
+    },
+  },
+  {
+    title: 'Plain Static Image',
+    description: 'Static assets should be placed in the source code tree, and ' +
+    'required in the same way as JavaScript modules.',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image source={require('./uie_thumb_normal@2x.png')} style={styles.icon} />
+          <Image source={require('./uie_thumb_selected@2x.png')} style={styles.icon} />
+          {/*<Image source={require('./uie_comment_normal.png')} style={styles.icon} />*/}
+          {/*<Image source={require('./uie_comment_highlighted.png')} style={styles.icon} />*/}
+        </View>
+      );
+    },
+  },
+  /*
+  {
+    title: 'Image Loading Events',
+    render: function() {
+      return (
+        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now()}}
+          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/>
+      );
+    },
+  },
+  */
+  {
+    title: 'Error Handler',
+    render: function() {
+      return (
+        <NetworkImageExample source={{uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
+      );
+    },
+    platform: 'ios',
+  },
+  {
+    title: 'Image Download Progress',
+    render: function() {
+      return (
+        <NetworkImageExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
+      );
+    },
+    platform: 'ios',
+  },
+  {
+    title: 'defaultSource',
+    description: 'Show a placeholder image when a network image is loading',
+    render: function() {
+      return (
+        <Image
+          defaultSource={require('./bunny.png')}
+          source={{uri: 'http://facebook.github.io/origami/public/images/birds.jpg'}}
+          style={styles.base}
+        />
+      );
+    },
+    platform: 'ios',
+  },
+  {
+    title: 'Border Color',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image
+            source={smallImage}
+            style={[
+              styles.base,
+              styles.background,
+              {borderWidth: 3, borderColor: '#f099f0'}
+            ]}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Border Width',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image
+            source={smallImage}
+            style={[
+              styles.base,
+              styles.background,
+              {borderWidth: 5, borderColor: '#f099f0'}
+            ]}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Border Radius',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image
+            style={[styles.base, {borderRadius: 5}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {borderRadius: 19}]}
+            source={fullImage}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Background Color',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image source={smallImage} style={styles.base} />
+          <Image
+            style={[
+              styles.base,
+              styles.leftMargin,
+              {backgroundColor: 'rgba(0, 0, 100, 0.25)'}
+            ]}
+            source={smallImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {backgroundColor: 'red'}]}
+            source={smallImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {backgroundColor: 'black'}]}
+            source={smallImage}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Opacity',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image
+            style={[styles.base, {opacity: 1}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.8}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.6}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.4}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.2}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0}]}
+            source={fullImage}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Nesting',
+    render: function() {
+      return (
+        <Image
+          style={{width: 60, height: 60, backgroundColor: 'transparent'}}
+          source={fullImage}>
+          <Text style={styles.nestedText}>
+            React
+          </Text>
+        </Image>
+      );
+    },
+  },
+  {
+    title: 'Tint Color',
+    description: 'The `tintColor` style prop changes all the non-alpha ' +
+      'pixels to the tint color.',
+    render: function() {
+      return (
+        <View>
+          <View style={styles.horizontal}>
+            <Image
+              source={require('./uie_thumb_normal@2x.png')}
+              style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa' }]}
+            />
+            <Image
+              source={require('./uie_thumb_normal@2x.png')}
+              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
+            />
+            <Image
+              source={require('./uie_thumb_normal@2x.png')}
+              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
+            />
+            <Image
+              source={require('./uie_thumb_normal@2x.png')}
+              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
+            />
+          </View>
+          <Text style={styles.sectionText}>
+            It also works with downloaded images:
+          </Text>
+          <View style={styles.horizontal}>
+            <Image
+              source={smallImage}
+              style={[styles.base, {borderRadius: 5, tintColor: '#5ac8fa' }]}
+            />
+            <Image
+              source={smallImage}
+              style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
+            />
+            <Image
+              source={smallImage}
+              style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
+            />
+            <Image
+              source={smallImage}
+              style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
+            />
+          </View>
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Resize Mode',
+    description: 'The `resizeMode` style prop controls how the image is ' +
+      'rendered within the frame.',
+    render: function() {
+      return (
+        <View>
+          {[smallImage, fullImage].map((image, index) => {
+            return (
+            <View key={index}>
+              <View style={styles.horizontal}>
+                <View>
+                  <Text style={[styles.resizeModeText]}>
+                    Contain
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.contain}
+                    source={image}
+                  />
+                </View>
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Cover
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.cover}
+                    source={image}
+                  />
+                </View>
+              </View>
+              <View style={styles.horizontal}>
+                <View>
+                  <Text style={[styles.resizeModeText]}>
+                    Stretch
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.stretch}
+                    source={image}
+                  />
+                </View>
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Repeat
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={'repeat'}
+                    source={image}
+                  />
+                </View>
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Center
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={'center'}
+                    source={image}
+                  />
+                </View>
+              </View>
+            </View>
+          );
+        })}
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Animated GIF',
+    render: function() {
+      return (
+        <Image
+          style={styles.gif}
+          source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
+        />
+      );
+    },
+    platform: 'ios',
+  },
+  {
+    title: 'Base64 image',
+    render: function() {
+      return (
+        <Image
+          style={styles.base64}
+          source={{uri: base64Icon, scale: 3}}
+        />
+      );
+    },
+    platform: 'ios',
+  },
+  /*
+  {
+    title: 'Cap Insets',
+    description:
+      'When the image is resized, the corners of the size specified ' +
+      'by capInsets will stay a fixed size, but the center content and ' +
+      'borders of the image will be stretched. This is useful for creating ' +
+      'resizable rounded buttons, shadows, and other resizable assets.',
+    render: function() {
+      return <ImageCapInsetsExample />;
+    },
+    platform: 'ios',
+  },
+  */
+  /*
+  {
+    title: 'Image Size',
+    render: function() {
+      return <ImageSizeExample source={fullImage} />;
+    },
+  },
+  */
+  /*
+  {
+    title: 'MultipleSourcesExample',
+    description:
+      'The `source` prop allows passing in an array of uris, so that native to choose which image ' +
+      'to diplay based on the size of the of the target image',
+    render: function() {
+      return <MultipleSourcesExample />;
+    },
+    platform: 'android',
+  },
+  */
+];
+
+var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
+var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small_2x.png'};
+
+var styles = StyleSheet.create({
+  base: {
+    width: 38,
+    height: 38,
+  },
+  progress: {
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    width: 100
+  },
+  leftMargin: {
+    marginLeft: 10,
+  },
+  background: {
+    backgroundColor: '#222222'
+  },
+  sectionText: {
+    marginVertical: 6,
+  },
+  nestedText: {
+    marginLeft: 12,
+    marginTop: 20,
+    backgroundColor: 'transparent',
+    color: 'white'
+  },
+  resizeMode: {
+    width: 90,
+    height: 60,
+    borderWidth: 0.5,
+    borderColor: 'black'
+  },
+  resizeModeText: {
+    fontSize: 11,
+    marginBottom: 3,
+  },
+  icon: {
+    width: 15,
+    height: 15,
+  },
+  horizontal: {
+    flexDirection: 'row',
+  },
+  gif: {
+    flex: 1,
+    height: 200,
+  },
+  base64: {
+    flex: 1,
+    height: 50,
+    resizeMode: 'contain',
+  },
+  touchableText: {
+    fontWeight: '500',
+    color: 'blue',
+  },
+});
+
+examples.forEach((example) => {
+  storiesOf('<Image>', module)
+    .addDecorator((renderStory) => <View>{renderStory()}</View>)
+    .add(example.title, () => example.render())
+})

examples/ListView/ListViewExample.js

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

examples/PanResponder/PanResponderExample.js

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

examples/ScrollView/ScrollViewExample.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+
+storiesOf('<ScrollView>', module)
+  .add('vertical', () => (
+    <View style={styles.scrollViewContainer}>
+      <ScrollView
+        contentContainerStyle={styles.scrollViewContentContainerStyle}
+        onScroll={e => console.log('ScrollView.onScroll', e)}
+        scrollEventThrottle={1} // 1 event per second
+        style={styles.scrollViewStyle}
+      >
+        {Array.from({ length: 50 }).map((item, i) => (
+          <View key={i} style={styles.box}>
+            <Text>{i}</Text>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  ))
+  .add('horizontal', () => (
+    <View style={styles.scrollViewContainer}>
+      <ScrollView
+        contentContainerStyle={styles.scrollViewContentContainerStyle}
+        horizontal
+        onScroll={e => console.log('ScrollView.onScroll', e)}
+        scrollEventThrottle={1} // 1 event per second
+        style={styles.scrollViewStyle}
+      >
+        {Array.from({ length: 50 }).map((item, i) => (
+          <View key={i} style={[ styles.box, styles.horizontalBox ]}>
+            <Text>{i}</Text>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  ))
+
+const styles = StyleSheet.create({
+  box: {
+    alignItems: 'center',
+    flexGrow: 1,
+    justifyContent: 'center',
+    borderWidth: 1
+  },
+  scrollViewContainer: {
+    height: '200px',
+    width: 300
+  },
+  scrollViewStyle: {
+    borderWidth: '1px'
+  },
+  scrollViewContentContainerStyle: {
+    padding: '10px'
+  }
+})

examples/Text/TextExample.js

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

examples/TextInput/TextInputExample.js

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

examples/TicTacToe/TicTacToeExample.js

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

examples/Touchable/TouchableExample.js

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

examples/View/ViewExample.js

@@ -0,0 +1,250 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+
+var styles = StyleSheet.create({
+  box: {
+    backgroundColor: '#527FE4',
+    borderColor: '#000033',
+    borderWidth: 1,
+  },
+  zIndex: {
+    justifyContent: 'space-around',
+    width: 100,
+    height: 50,
+    marginTop: -10,
+  },
+});
+
+var ViewBorderStyleExample = React.createClass({
+  getInitialState() {
+    return {
+      showBorder: true
+    };
+  },
+
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View>
+          <View style={{
+            borderWidth: 1,
+            borderStyle: this.state.showBorder ? 'dashed' : null,
+            padding: 5
+          }}>
+            <Text style={{fontSize: 11}}>
+              Dashed border style
+            </Text>
+          </View>
+          <View style={{
+            marginTop: 5,
+            borderWidth: 1,
+            borderRadius: 5,
+            borderStyle: this.state.showBorder ? 'dotted' : null,
+            padding: 5
+          }}>
+            <Text style={{fontSize: 11}}>
+              Dotted border style
+            </Text>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  },
+
+  _handlePress() {
+    this.setState({showBorder: !this.state.showBorder});
+  }
+});
+
+var ZIndexExample = React.createClass({
+  getInitialState() {
+    return {
+      flipped: false
+    };
+  },
+
+  render() {
+    const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View>
+          <Text style={{paddingBottom: 10}}>Tap to flip sorting order</Text>
+          <View style={[
+            styles.zIndex,
+            {marginTop: 0, backgroundColor: '#E57373', zIndex: indices[0]}
+          ]}>
+            <Text>ZIndex {indices[0]}</Text>
+          </View>
+          <View style={[
+            styles.zIndex,
+            {marginLeft: 50, backgroundColor: '#FFF176', zIndex: indices[1]}
+          ]}>
+            <Text>ZIndex {indices[1]}</Text>
+          </View>
+          <View style={[
+            styles.zIndex,
+            {marginLeft: 100, backgroundColor: '#81C784', zIndex: indices[2]}
+          ]}>
+            <Text>ZIndex {indices[2]}</Text>
+          </View>
+          <View style={[
+            styles.zIndex,
+            {marginLeft: 150, backgroundColor: '#64B5F6', zIndex: indices[3]}
+          ]}>
+            <Text>ZIndex {indices[3]}</Text>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  },
+
+  _handlePress() {
+    this.setState({flipped: !this.state.flipped});
+  }
+});
+
+const examples = [
+  {
+    title: 'Background Color',
+    render: function() {
+      return (
+        <View style={{backgroundColor: '#527FE4', padding: 5}}>
+          <Text style={{fontSize: 11}}>
+            Blue background
+          </Text>
+        </View>
+      );
+    },
+  }, {
+    title: 'Border',
+    render: function() {
+      return (
+        <View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
+          <Text style={{fontSize: 11}}>5px blue border</Text>
+        </View>
+      );
+    },
+  }, {
+    title: 'Padding/Margin',
+    render: function() {
+      return (
+        <View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
+          <View style={[styles.box, {padding: 5}]}>
+            <Text style={{fontSize: 11}}>5px padding</Text>
+          </View>
+          <View style={[styles.box, {margin: 5}]}>
+            <Text style={{fontSize: 11}}>5px margin</Text>
+          </View>
+          <View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
+            <Text style={{fontSize: 11}}>
+              5px margin and padding,
+            </Text>
+            <Text style={{fontSize: 11}}>
+              widthAutonomous=true
+            </Text>
+          </View>
+        </View>
+      );
+    },
+  }, {
+    title: 'Border Radius',
+    render: function() {
+      return (
+        <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
+          <Text style={{fontSize: 11}}>
+            Too much use of `borderRadius` (especially large radii) on
+            anything which is scrolling may result in dropped frames.
+            Use sparingly.
+          </Text>
+        </View>
+      );
+    },
+  }, {
+    title: 'Border Style',
+    render: function() {
+      return <ViewBorderStyleExample />;
+    },
+  }, {
+    title: 'Circle with Border Radius',
+    render: function() {
+      return (
+        <View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
+      );
+    },
+  }, {
+    title: 'Overflow',
+    render: function() {
+      return (
+        <View style={{flexDirection: 'row'}}>
+          <View
+            style={{
+              width: 95,
+              height: 10,
+              marginRight: 10,
+              marginBottom: 5,
+              overflow: 'hidden',
+              borderWidth: 0.5,
+            }}>
+            <View style={{width: 200, height: 20}}>
+              <Text>Overflow hidden</Text>
+            </View>
+          </View>
+          <View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
+            <View style={{width: 200, height: 20}}>
+              <Text>Overflow visible</Text>
+            </View>
+          </View>
+        </View>
+      );
+    },
+  }, {
+    title: 'Opacity',
+    render: function() {
+      return (
+        <View>
+          <View style={{opacity: 0}}><Text>Opacity 0</Text></View>
+          <View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
+          <View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
+          <View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
+          <View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
+          <View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
+          <View style={{opacity: 1}}><Text>Opacity 1</Text></View>
+        </View>
+      );
+    },
+  }, {
+    title: 'ZIndex',
+    render: function() {
+      return <ZIndexExample />;
+    },
+  },
+];
+
+examples.forEach((example) => {
+  storiesOf('<View>', module)
+    .add(example.title, () => example.render())
+})

examples/View/ViewTransformsExample.js

@@ -0,0 +1,286 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { Animated, StyleSheet, Text, View } from 'react-native'
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * @flow
+ */
+
+var Flip = React.createClass({
+  getInitialState() {
+    return {
+      theta: new Animated.Value(45),
+    };
+  },
+
+  componentDidMount() {
+    this._animate();
+  },
+
+  _animate() {
+    this.state.theta.setValue(0);
+    Animated.timing(this.state.theta, {
+      toValue: 360,
+      duration: 5000,
+    }).start(this._animate);
+  },
+
+  render() {
+    return (
+      <View style={styles.flipCardContainer}>
+        <Animated.View style={[
+          styles.flipCard,
+          {transform: [
+            {perspective: 850},
+            {rotateX: this.state.theta.interpolate({
+              inputRange: [0, 180],
+              outputRange: ['0deg', '180deg']
+            })},
+          ]}]}>
+          <Text style={styles.flipText}>
+            This text is flipping great.
+          </Text>
+        </Animated.View>
+        <Animated.View style={[styles.flipCard, {
+          position: 'absolute',
+          top: 0,
+          backgroundColor: 'red',
+          transform: [
+            {perspective: 850},
+            {rotateX: this.state.theta.interpolate({
+              inputRange: [0, 180],
+              outputRange: ['180deg', '360deg']
+            })},
+          ]}]}>
+          <Text style={styles.flipText}>
+            On the flip side...
+          </Text>
+        </Animated.View>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  box1: {
+    left: 0,
+    backgroundColor: 'green',
+    height: 50,
+    top: 0,
+    transform: [
+      {translateX: 100},
+      {translateY: 50},
+      {rotate: '30deg'},
+      {scaleX: 2},
+      {scaleY: 2},
+    ],
+    width: 50,
+  },
+  box2: {
+    left: 0,
+    backgroundColor: 'purple',
+    height: 50,
+    top: 0,
+    transform: [
+      {scaleX: 2},
+      {scaleY: 2},
+      {translateX: 100},
+      {translateY: 50},
+      {rotate: '30deg'},
+    ],
+    width: 50,
+  },
+  box3step1: {
+    left: 0,
+    backgroundColor: 'lightpink',
+    height: 50,
+    top: 0,
+    transform: [
+      {rotate: '30deg'},
+    ],
+    width: 50,
+  },
+  box3step2: {
+    left: 0,
+    backgroundColor: 'hotpink',
+    height: 50,
+    opacity: 0.5,
+    top: 0,
+    transform: [
+      {rotate: '30deg'},
+      {scaleX: 2},
+      {scaleY: 2},
+    ],
+    width: 50,
+  },
+  box3step3: {
+    left: 0,
+    backgroundColor: 'deeppink',
+    height: 50,
+    opacity: 0.5,
+    top: 0,
+    transform: [
+      {rotate: '30deg'},
+      {scaleX: 2},
+      {scaleY: 2},
+      {translateX: 10},
+      {translateY: 50},
+    ],
+    width: 50,
+  },
+  box4: {
+    left: 0,
+    backgroundColor: 'darkorange',
+    height: 50,
+    top: 0,
+    transform: [
+      {translateX: 20},
+      {translateY: 35},
+      {scale: 2.5},
+      {rotate: '-0.2rad'},
+    ],
+    width: 100,
+  },
+  box5: {
+    backgroundColor: 'maroon',
+    height: 50,
+    right: 0,
+    top: 0,
+    width: 50,
+  },
+  box5Transform: {
+    transform: [
+      {translateX: -50},
+      {translateY: 35},
+      {rotate: '50deg'},
+      {scale: 2},
+    ],
+  },
+  flipCardContainer: {
+    marginVertical: 40,
+    flex: 1,
+    alignSelf: 'center',
+  },
+  flipCard: {
+    width: 200,
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'blue',
+    backfaceVisibility: 'hidden',
+  },
+  flipText: {
+    width: 90,
+    fontSize: 20,
+    color: 'white',
+    fontWeight: 'bold',
+  }
+});
+
+const examples = [
+  {
+    title: 'Perspective',
+    description: 'perspective: 850, rotateX: Animated.timing(0 -> 360)',
+    render(): ReactElement<any> { return <Flip />; }
+  },
+  {
+    title: 'Translate, Rotate, Scale',
+    description: "translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: 2",
+    render() {
+      return (
+
+          <View style={styles.box1} />
+
+      );
+    }
+  },
+  {
+    title: 'Scale, Translate, Rotate, ',
+    description: "scaleX: 2, scaleY: 2, translateX: 100, translateY: 50, rotate: '30deg'",
+    render() {
+      return (
+
+          <View style={styles.box2} />
+
+      );
+    }
+  },
+  {
+    title: 'Rotate',
+    description: "rotate: '30deg'",
+    render() {
+      return (
+
+          <View style={styles.box3step1} />
+
+      );
+    }
+  },
+  {
+    title: 'Rotate, Scale',
+    description: "rotate: '30deg', scaleX: 2, scaleY: 2",
+    render() {
+      return (
+
+          <View style={styles.box3step2} />
+
+      );
+    }
+  },
+  {
+    title: 'Rotate, Scale, Translate ',
+    description: "rotate: '30deg', scaleX: 2, scaleY: 2, translateX: 100, translateY: 50",
+    render() {
+      return (
+
+          <View style={styles.box3step3} />
+
+      );
+    }
+  },
+  {
+    title: 'Translate, Scale, Rotate',
+    description: "translate: [200, 350], scale: 2.5, rotate: '-0.2rad'",
+    render() {
+      return (
+
+          <View style={styles.box4} />
+
+      );
+    }
+  },
+  {
+    title: 'Translate, Rotate, Scale',
+    description: "translate: [-50, 35], rotate: '50deg', scale: 2",
+    render() {
+      return (
+
+          <View style={[styles.box5, styles.box5Transform]} />
+
+      );
+    }
+  }
+];
+
+examples.forEach((example) => {
+  storiesOf('<View> transforms', module)
+    .add(example.title, () => example.render())
+})

examples/components/App.js

@@ -1,266 +0,0 @@
-import GridView from './GridView'
-import Heading from './Heading'
-import React from 'react'
-import { Image, StyleSheet, ScrollView, Text, TextInput, TouchableHighlight, View } from 'react-native'
-
-export default class App extends React.Component {
-  static propTypes = {
-    style: View.propTypes.style
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      scrollEnabled: true
-    }
-  }
-
-  render() {
-    const finalRootStyles = [
-      rootStyles.common
-    ]
-
-    return (
-      <ScrollView accessibilityRole='main'>
-        <View style={finalRootStyles}>
-        <Heading size='xlarge'>React Native for Web</Heading>
-        <Text>React Native Web takes the core components from <Text
-        accessibilityRole='link' href='https://facebook.github.io/react-native/'>React
-        Native</Text> and brings them to the web. These components provide
-        simple building blocks – touch handling, flexbox layout,
-        scroll views – from which more complex components and apps can be
-        constructed.</Text>
-
-        <Heading size='large'>Image</Heading>
-        <Image
-        onLayout={(e) => { console.log(e.nativeEvent.layout) }}
-          accessibilityLabel='accessible image'
-          children={<Text>Inner content</Text>}
-          defaultSource={{
-            uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAIAAAAP3aGbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wkGESkdPWMDggAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAD5UlEQVR42u3UMQ0AAAgEMcC/x7eCCgaSVsIN10kK4IORADAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAswLAkAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAALi04UQW9HF910gAAAABJRU5ErkJggg=='
-          }}
-          onError={(e) => { console.log('Image.onError', e) }}
-          onLoad={(e) => { console.log('Image.onLoad', e) }}
-          onLoadEnd={() => { console.log('Image.onLoadEnd') }}
-          onLoadStart={() => { console.log('Image.onLoadStart') }}
-          resizeMode={'contain'}
-          source={{
-            height: 400,
-            uri: 'http://facebook.github.io/react/img/logo_og.png',
-            width: 400
-          }}
-          style={{
-            borderWidth: '5px'
-          }}
-          testID='Example.image'
-        />
-
-        <Heading size='large'>Text</Heading>
-        <Text
-          onPress={(e) => { console.log('Text.onPress', e) }}
-          onLayout={(e) => { console.log(e.nativeEvent.layout) }}
-          testID={'Example.text'}
-        >
-          PRESS ME.
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel
-          lectus urna. Aliquam vitae justo porttitor, aliquam erat nec,
-          venenatis diam. Vivamus facilisis augue non urna mattis ultricies.
-            Suspendisse et vulputate enim, a maximus nulla. Vivamus imperdiet
-          hendrerit consequat. Aliquam lorem quam, elementum eget ex nec,
-          ultrices porttitor nibh. Nulla pellentesque urna leo, a aliquet elit
-          rhoncus a. Aenean ultricies, nunc a interdum dictum, dui odio
-          scelerisque mauris, a fringilla elit ligula vel sem. Sed vel aliquet
-          ipsum, sed rhoncus velit. Vivamus commodo pretium libero id placerat.
-        </Text>
-        <Text numberOfLines={1}>
-          TRUNCATED after 1 line.
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel
-          lectus urna. Aliquam vitae justo porttitor, aliquam erat nec,
-          venenatis diam. Vivamus facilisis augue non urna mattis ultricies.
-          Suspendisse et vulputate enim, a maximus nulla. Vivamus imperdiet
-          hendrerit consequat.
-        </Text>
-
-        <Heading size='large'>TextInput</Heading>
-        <TextInput
-          keyboardType='default'
-          onBlur={(e) => { console.log('TextInput.onBlur', e) }}
-          onChange={(e) => { console.log('TextInput.onChange', e) }}
-          onChangeText={(e) => { console.log('TextInput.onChangeText', e) }}
-          onFocus={(e) => { console.log('TextInput.onFocus', e) }}
-          onSelectionChange={(e) => { console.log('TextInput.onSelectionChange', e) }}
-        />
-        <TextInput secureTextEntry />
-        <TextInput defaultValue='read only' editable={false} />
-        <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 />
-        <TextInput
-          defaultValue='default value'
-          maxNumberOfLines={10}
-          multiline
-          numberOfLines={5}
-        />
-
-        <Heading size='large'>Touchable</Heading>
-        <TouchableHighlight
-          accessibilityLabel={'Touchable element'}
-          activeHighlight='lightblue'
-          activeOpacity={0.8}
-          onLongPress={(e) => { console.log('Touchable.onLongPress', e) }}
-          onPress={(e) => { console.log('Touchable.onPress', e) }}
-          onPressIn={(e) => { console.log('Touchable.onPressIn', e) }}
-          onPressOut={(e) => { console.log('Touchable.onPressOut', e) }}
-        >
-          <View style={styles.touchableArea}>
-            <Text>Touchable area (press, long press)</Text>
-          </View>
-        </TouchableHighlight>
-
-        <Heading size='large'>View</Heading>
-        <Heading>Default layout</Heading>
-        <View>
-          {[ 1, 2, 3, 4, 5, 6 ].map((item, i) => {
-            return (
-              <View key={i} style={styles.box}>
-                <Text>{item}</Text>
-              </View>
-            )
-          })}
-        </View>
-
-        <Heading>Row layout</Heading>
-        <View style={styles.row}>
-          {[ 1, 2, 3, 4, 5, 6 ].map((item, i) => {
-            return (
-              <View key={i} style={styles.box}>
-                <Text>{item}</Text>
-              </View>
-            )
-          })}
-        </View>
-
-        <Heading>pointerEvents</Heading>
-        <GridView alley='10px'>
-          {['box-none', 'box-only', 'none'].map((value, i) => {
-            return (
-              <View
-                accessibilityRole='link'
-                children={value}
-                href='https://google.com'
-                key={i}
-                pointerEvents={value}
-                style={styles.pointerEventsBox}
-              />
-            )
-          })}
-        </GridView>
-
-        <Heading size='large'>ScrollView</Heading>
-        <label>
-          <input
-            checked={this.state.scrollEnabled}
-            onChange={() => this.setState({
-              scrollEnabled: !this.state.scrollEnabled
-            })}
-            type='checkbox'
-          /> Enable scroll
-        </label>
-
-        <Heading>Default layout</Heading>
-        <View style={styles.scrollViewContainer}>
-          <ScrollView
-            contentContainerStyle={styles.scrollViewContentContainerStyle}
-            onScroll={e => console.log('ScrollView.onScroll', e)}
-            scrollEnabled={this.state.scrollEnabled}
-            scrollEventThrottle={1} // 1 event per second
-            style={styles.scrollViewStyle}
-          >
-            {Array.from({ length: 50 }).map((item, i) => (
-              <View key={i} style={styles.box}>
-                <Text>{i}</Text>
-              </View>
-            ))}
-          </ScrollView>
-        </View>
-
-        <Heading>Horizontal layout</Heading>
-        <View style={styles.scrollViewContainer}>
-          <ScrollView
-            contentContainerStyle={styles.scrollViewContentContainerStyle}
-            horizontal
-            onScroll={e => console.log('ScrollView.onScroll', e)}
-            scrollEnabled={this.state.scrollEnabled}
-            scrollEventThrottle={1} // 1 event per second
-            style={styles.scrollViewStyle}
-          >
-            {Array.from({ length: 50 }).map((item, i) => (
-              <View key={i} style={[ styles.box, styles.horizontalBox ]}>
-                <Text>{i}</Text>
-              </View>
-            ))}
-          </ScrollView>
-        </View>
-        </View>
-      </ScrollView>
-    )
-  }
-}
-
-const rootStyles = StyleSheet.create({
-  common: {
-    marginVertical: 0,
-    marginHorizontal: 'auto'
-  },
-  mqSmall: {
-    maxWidth: '400px'
-  },
-  mqLarge: {
-    maxWidth: '600px'
-  }
-})
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap'
-  },
-  box: {
-    alignItems: 'center',
-    flexGrow: 1,
-    justifyContent: 'center',
-    borderWidth: 1
-  },
-  horizontalBox: {
-    width: '50px'
-  },
-  boxFull: {
-    width: '100%'
-  },
-  pointerEventsBox: {
-    alignItems: 'center',
-    borderWidth: '1px',
-    flexGrow: 1,
-    height: '100px',
-    justifyContent: 'center'
-  },
-  touchableArea: {
-    alignItems: 'center',
-    borderWidth: 1,
-    height: '200px',
-    justifyContent: 'center'
-  },
-  scrollViewContainer: {
-    height: '200px'
-  },
-  scrollViewStyle: {
-    borderWidth: '1px'
-  },
-  scrollViewContentContainerStyle: {
-    padding: '10px'
-  }
-})

examples/components/GridView.js

@@ -1,66 +0,0 @@
-import React, { Component, PropTypes } from 'react'
-import { StyleSheet, View } from 'react-native'
-
-export default class GridView extends Component {
-  static propTypes = {
-    alley: PropTypes.string,
-    children: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.arrayOf(PropTypes.element)
-    ]),
-    gutter: PropTypes.string,
-    style: PropTypes.object
-  }
-
-  static defaultProps = {
-    alley: '0px',
-    gutter: '0px'
-  }
-
-  render() {
-    const { alley, children, gutter, style, ...other } = this.props
-
-    const rootStyle = [
-      style,
-      styles.root
-    ]
-
-    const contentContainerStyle = [
-      styles.contentContainer,
-      { marginHorizontal: `calc(-0.5 * ${alley})` },
-      { paddingHorizontal: `${gutter}` }
-    ]
-
-    const newChildren = React.Children.map(children, (child) => {
-      return child && React.cloneElement(child, {
-        style: [
-          child.props.style,
-          styles.column,
-          { marginHorizontal: `calc(0.5 * ${alley})` }
-        ]
-      })
-    })
-
-    return (
-      <View className='GridView' {...other} style={rootStyle}>
-        <View style={contentContainerStyle}>
-          {newChildren}
-        </View>
-      </View>
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    overflow: 'hidden'
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    flexGrow: 1
-  },
-  // distribute all space (rather than extra space)
-  column: {
-    flexBasis: '0%'
-  }
-})

examples/components/Heading.js

@@ -1,35 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text } from 'react-native'
-
-const Heading = ({ children, size = 'normal' }) => (
-  <Text
-    accessibilityRole='heading'
-    children={children}
-    style={[ styles.root, sizeStyles[size] ]}
-  />
-)
-
-const sizeStyles = StyleSheet.create({
-  xlarge: {
-    fontSize: '2rem',
-    marginBottom: '1em'
-  },
-  large: {
-    fontSize: '1.5rem',
-    marginBottom: '1em',
-    marginTop: '1em'
-  },
-  normal: {
-    fontSize: '1.25rem',
-    marginBottom: '0.5em',
-    marginTop: '0.5em'
-  }
-})
-
-const styles = StyleSheet.create({
-  root: {
-    fontFamily: '"Helvetica Neue", arial, sans-serif'
-  }
-})
-
-export default Heading

examples/index.html

@@ -1,6 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>React Native for Web</title>
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<div id="react-root"></div>
-<script src="/bundle.js"></script>

examples/index.js

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactNative, { AppRegistry } from 'react-native'
-import App from './components/App'
-import Game2048 from './2048/Game2048'
-import TicTacToeApp from './TicTacToe/TicTacToe'
-
-const rootTag = document.getElementById('react-root')
-AppRegistry.registerComponent('App', () => App)
-AppRegistry.runApplication('App', { rootTag })
-// ReactNative.render(<App />, rootTag)

karma.config.js

@@ -1,6 +1,6 @@
 const webpack = require('webpack')
 
-const testEntry = 'tests.webpack.js'
+const testEntry = 'src/tests.webpack.js'
 
 module.exports = function (config) {
   config.set({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.0.33",
+  "version": "0.0.40",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [
@@ -8,8 +8,10 @@
   ],
   "scripts": {
     "build": "del ./dist && mkdir dist && babel src -d dist --ignore **/__tests__",
+    "build:examples": "build-storybook -o dist-examples -c ./examples/.storybook",
     "build:umd": "webpack --config webpack.config.js --sort-assets-by --progress",
-    "examples": "webpack-dev-server --config examples/webpack.config.js --inline --hot --colors --quiet",
+    "deploy:examples": "git checkout gh-pages && rm -rf ./storybook && mv dist-examples storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -",
+    "examples": "start-storybook -p 9001 -c ./examples/.storybook",
     "lint": "eslint src",
     "prepublish": "npm run build && npm run build:umd",
     "test": "karma start karma.config.js",
@@ -26,6 +28,7 @@
     "react-timer-mixin": "^0.13.3"
   },
   "devDependencies": {
+    "@kadira/storybook": "^1.38.0",
     "babel-cli": "^6.10.1",
     "babel-core": "^6.10.4",
     "babel-eslint": "^6.1.0",
@@ -39,6 +42,7 @@
     "eslint-plugin-promise": "^1.3.2",
     "eslint-plugin-react": "^5.1.1",
     "eslint-plugin-standard": "^1.3.2",
+    "file-loader": "^0.9.0",
     "karma": "^0.13.22",
     "karma-browserstack-launcher": "^1.0.1",
     "karma-chrome-launcher": "^1.0.1",
@@ -51,8 +55,8 @@
     "node-libs-browser": "^0.5.3",
     "react": "^15.2.0",
     "react-addons-test-utils": "^15.2.0",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1"
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.1"
   },
   "peerDependencies": {
     "react": "^15.1.0"

src/apis/PanResponder/TouchHistoryMath.js

@@ -1,124 +0,0 @@
-/* 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

@@ -6,8 +6,7 @@
 
 "use strict";
 
-import normalizeNativeEvent from '../../modules/normalizeNativeEvent';
-var TouchHistoryMath = require('./TouchHistoryMath');
+var TouchHistoryMath = require('react/lib/TouchHistoryMath');
 
 var currentCentroidXOfTouchesChangedAfter =
   TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;
@@ -288,11 +287,11 @@ var PanResponder = {
     var panHandlers = {
       onStartShouldSetResponder: function(e) {
         return config.onStartShouldSetPanResponder === undefined ? false :
-          config.onStartShouldSetPanResponder(normalizeEvent(e), gestureState);
+          config.onStartShouldSetPanResponder(e, gestureState);
       },
       onMoveShouldSetResponder: function(e) {
         return config.onMoveShouldSetPanResponder === undefined ? false :
-          config.onMoveShouldSetPanResponder(normalizeEvent(e), gestureState);
+          config.onMoveShouldSetPanResponder(e, gestureState);
       },
       onStartShouldSetResponderCapture: function(e) {
         // TODO: Actually, we should reinitialize the state any time
@@ -302,12 +301,12 @@ var PanResponder = {
             PanResponder._initializeGestureState(gestureState);
           }
         }
-        else if (e.nativeEvent.type === 'mousedown') {
+        else if (e.nativeEvent.originalEvent && e.nativeEvent.originalEvent.type === 'mousedown') {
           PanResponder._initializeGestureState(gestureState);
         }
         gestureState.numberActiveTouches = e.touchHistory.numberActiveTouches;
         return config.onStartShouldSetPanResponderCapture !== undefined ?
-          config.onStartShouldSetPanResponderCapture(normalizeEvent(e), gestureState) : false;
+          config.onStartShouldSetPanResponderCapture(e, gestureState) : false;
       },
 
       onMoveShouldSetResponderCapture: function(e) {
@@ -320,7 +319,7 @@ var PanResponder = {
         }
         PanResponder._updateGestureStateOnMove(gestureState, touchHistory);
         return config.onMoveShouldSetPanResponderCapture ?
-          config.onMoveShouldSetPanResponderCapture(normalizeEvent(e), gestureState) : false;
+          config.onMoveShouldSetPanResponderCapture(e, gestureState) : false;
       },
 
       onResponderGrant: function(e) {
@@ -328,25 +327,25 @@ var PanResponder = {
         gestureState.y0 = currentCentroidY(e.touchHistory);
         gestureState.dx = 0;
         gestureState.dy = 0;
-        config.onPanResponderGrant && config.onPanResponderGrant(normalizeEvent(e), gestureState);
+        config.onPanResponderGrant && config.onPanResponderGrant(e, gestureState);
         // TODO: t7467124 investigate if this can be removed
         return config.onShouldBlockNativeResponder === undefined ? true :
           config.onShouldBlockNativeResponder();
       },
 
       onResponderReject: function(e) {
-        config.onPanResponderReject && config.onPanResponderReject(normalizeEvent(e), gestureState);
+        config.onPanResponderReject && config.onPanResponderReject(e, gestureState);
       },
 
       onResponderRelease: function(e) {
-        config.onPanResponderRelease && config.onPanResponderRelease(normalizeEvent(e), gestureState);
+        config.onPanResponderRelease && config.onPanResponderRelease(e, gestureState);
         PanResponder._initializeGestureState(gestureState);
       },
 
       onResponderStart: function(e) {
         var touchHistory = e.touchHistory;
         gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
-        config.onPanResponderStart && config.onPanResponderStart(normalizeEvent(e), gestureState);
+        config.onPanResponderStart && config.onPanResponderStart(e, gestureState);
       },
 
       onResponderMove: function(e) {
@@ -359,13 +358,13 @@ var PanResponder = {
         // 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);
+        config.onPanResponderMove && config.onPanResponderMove(e, gestureState);
       },
 
       onResponderEnd: function(e) {
         var touchHistory = e.touchHistory;
         gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
-        config.onPanResponderEnd && config.onPanResponderEnd(normalizeEvent(e), gestureState);
+        config.onPanResponderEnd && config.onPanResponderEnd(e, gestureState);
       },
 
       onResponderTerminate: function(e) {
@@ -376,17 +375,11 @@ var PanResponder = {
 
       onResponderTerminationRequest: function(e) {
         return config.onPanResponderTerminationRequest === undefined ? true :
-          config.onPanResponderTerminationRequest(normalizeEvent(e), gestureState);
+          config.onPanResponderTerminationRequest(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/StyleSheet/StyleSheetValidation.js

@@ -10,19 +10,22 @@ 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 'fbjs/lib/invariant'
+import warning from 'fbjs/lib/warning'
+
+const allStylePropTypes = {}
 
 class StyleSheetValidation {
   static validateStyleProp(prop, style, caller) {
     if (process.env.NODE_ENV !== 'production') {
       if (allStylePropTypes[prop] === undefined) {
-        const message1 = `"${prop}" is not a valid style property.`
+        const message1 = `"${prop}" is not a valid style property on Web.`
         const message2 = '\nValid style props: ' + JSON.stringify(Object.keys(allStylePropTypes).sort(), null, '  ')
         styleError(message1, style, caller, message2)
-      }
-      const error = allStylePropTypes[prop](style, prop, caller, 'prop')
-      if (error) {
-        styleError(error.message, style, caller)
+      } else {
+        const error = allStylePropTypes[prop](style, prop, caller, 'prop')
+        if (error) {
+          styleError(error.message, style, caller)
+        }
       }
     }
   }
@@ -43,15 +46,13 @@ class StyleSheetValidation {
 }
 
 const styleError = (message1, style, caller, message2) => {
-  invariant(
+  warning(
     false,
     message1 + '\n' + (caller || '<<unknown>>') + ': ' +
     JSON.stringify(style, null, '  ') + (message2 || '')
   )
 }
 
-const allStylePropTypes = {}
-
 StyleSheetValidation.addValidStylePropTypes(ImageStylePropTypes)
 StyleSheetValidation.addValidStylePropTypes(TextStylePropTypes)
 StyleSheetValidation.addValidStylePropTypes(ViewStylePropTypes)

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

@@ -1,7 +1,7 @@
 /* eslint-env mocha */
 
 import assert from 'assert'
-import { defaultStyles } from '../predefs'
+import { getDefaultStyleSheet } from '../css'
 import isPlainObject from 'lodash/isPlainObject'
 import StyleSheet from '..'
 
@@ -28,7 +28,7 @@ suite('apis/StyleSheet', () => {
       StyleSheet.create({ root: { color: 'red' } })
       assert.equal(
         document.getElementById('__react-native-style').textContent,
-        defaultStyles
+        getDefaultStyleSheet()
       )
     })
   })
@@ -44,7 +44,7 @@ suite('apis/StyleSheet', () => {
   test('render', () => {
     assert.equal(
       StyleSheet.render().props.dangerouslySetInnerHTML.__html,
-      defaultStyles
+      getDefaultStyleSheet()
     )
   })
 
@@ -61,9 +61,9 @@ suite('apis/StyleSheet', () => {
       {
         className: 'test __style_df __style_pebn',
         style: {
-          display: 'flex',
+          display: null,
           opacity: 1,
-          pointerEvents: 'box-none'
+          pointerEvents: null
         }
       }
     )

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

@@ -0,0 +1,24 @@
+/* eslint-env mocha */
+
+import assert from 'assert'
+import processTextShadow from '../processTextShadow'
+
+suite('apis/StyleSheet/processTextShadow', () => {
+  test('textShadowOffset', () => {
+    const style = {
+      textShadowColor: 'red',
+      textShadowOffset: { width: 2, height: 2 },
+      textShadowRadius: 5
+    }
+
+    assert.deepEqual(
+      processTextShadow(style),
+      {
+        textShadow: '2px 2px 5px red',
+        textShadowColor: null,
+        textShadowOffset: null,
+        textShadowRadius: null
+      }
+    )
+  })
+})

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

@@ -26,7 +26,10 @@ suite('apis/StyleSheet/processTransform', () => {
 
     assert.deepEqual(
       processTransform(style),
-      { transform: 'matrix3d(1,2,3,4,5,6)' }
+      {
+        transform: 'matrix3d(1,2,3,4,5,6)',
+        transformMatrix: null
+      }
     )
   })
 })

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

@@ -0,0 +1,17 @@
+/* eslint-env mocha */
+
+import assert from 'assert'
+import processVendorPrefixes from '../processVendorPrefixes'
+
+suite('apis/StyleSheet/processVendorPrefixes', () => {
+  test('handles array values', () => {
+    const style = {
+      display: [ '-webkit-flex', 'flex' ]
+    }
+
+    assert.deepEqual(
+      processVendorPrefixes(style),
+      { display: 'flex' }
+    )
+  })
+})

src/apis/StyleSheet/createReactStyleObject.js

@@ -1,22 +1,17 @@
 import expandStyle from './expandStyle'
 import flattenStyle from '../../modules/flattenStyle'
-import prefixAll from 'inline-style-prefixer/static'
+import processTextShadow from './processTextShadow'
 import processTransform from './processTransform'
+import processVendorPrefixes from './processVendorPrefixes'
 
-const addVendorPrefixes = (style) => {
-  let prefixedStyles = prefixAll(style)
-  // React@15 removed undocumented support for fallback values in
-  // inline-styles. Revert array values to the standard CSS value
-  for (const prop in prefixedStyles) {
-    const value = prefixedStyles[prop]
-    if (Array.isArray(value)) {
-      prefixedStyles[prop] = value[value.length - 1]
-    }
-  }
-  return prefixedStyles
-}
+const plugins = [
+  processTextShadow,
+  processTransform,
+  processVendorPrefixes
+]
 
-const _createReactDOMStyleObject = (reactNativeStyle) => processTransform(expandStyle(flattenStyle(reactNativeStyle)))
-const createReactDOMStyleObject = (reactNativeStyle) => addVendorPrefixes(_createReactDOMStyleObject(reactNativeStyle))
+const applyPlugins = (style) => plugins.reduce((style, plugin) => plugin(style), style)
+
+const createReactDOMStyleObject = (reactNativeStyle) => applyPlugins(expandStyle(flattenStyle(reactNativeStyle)))
 
 module.exports = createReactDOMStyleObject

src/apis/StyleSheet/css.js

@@ -4,6 +4,21 @@ const POINTER_EVENTS_BOX_NONE_CLASSNAME = '__style_pebn'
 const POINTER_EVENTS_BOX_ONLY_CLASSNAME = '__style_pebo'
 const POINTER_EVENTS_NONE_CLASSNAME = '__style_pen'
 
+const CSS_RESET =
+// reset unwanted styles
+'/* React Native */\n' +
+'html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}\n' +
+'body {margin:0}\n' +
+'button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0}\n' +
+'input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {display:none}'
+
+const CSS_HELPERS =
+// vendor prefix 'display:flex' until React supports fallback values for inline styles
+`.${DISPLAY_FLEX_CLASSNAME} {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}\n` +
+// implement React Native's pointer event values
+`.${POINTER_EVENTS_AUTO_CLASSNAME}, .${POINTER_EVENTS_BOX_ONLY_CLASSNAME}, .${POINTER_EVENTS_BOX_NONE_CLASSNAME} * {pointer-events:auto}\n` +
+`.${POINTER_EVENTS_NONE_CLASSNAME}, .${POINTER_EVENTS_BOX_ONLY_CLASSNAME} *, .${POINTER_EVENTS_NONE_CLASSNAME} {pointer-events:none}`
+
 const styleAsClassName = {
   display: {
     'flex': DISPLAY_FLEX_CLASSNAME
@@ -16,23 +31,8 @@ const styleAsClassName = {
   }
 }
 
-export const mapStyleToClassName = (prop, value) => {
+export const getDefaultStyleSheet = () => `${CSS_RESET}\n${CSS_HELPERS}`
+
+export const getStyleAsHelperClassName = (prop, value) => {
   return styleAsClassName[prop] && styleAsClassName[prop][value]
 }
-
-// reset unwanted styles beyond the control of React inline styles
-const resetCSS =
-'/* React Native */\n' +
-'html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}\n' +
-'body {margin:0}\n' +
-'button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0}\n' +
-'input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {display:none}'
-
-const helperCSS =
-// vendor prefix 'display:flex' until React supports fallback values for inline styles
-`.${DISPLAY_FLEX_CLASSNAME} {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}\n` +
-// implement React Native's pointer event values
-`.${POINTER_EVENTS_AUTO_CLASSNAME}, .${POINTER_EVENTS_BOX_ONLY_CLASSNAME}, .${POINTER_EVENTS_BOX_NONE_CLASSNAME} * {pointer-events:auto}\n` +
-`.${POINTER_EVENTS_NONE_CLASSNAME}, .${POINTER_EVENTS_BOX_ONLY_CLASSNAME} *, .${POINTER_EVENTS_NONE_CLASSNAME} {pointer-events:none}`
-
-export const defaultStyles = `${resetCSS}\n${helperCSS}`

src/apis/StyleSheet/index.js

@@ -1,76 +1,88 @@
+import * as css from './css'
 import createReactStyleObject from './createReactStyleObject'
 import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
 import flattenStyle from '../../modules/flattenStyle'
 import React from 'react'
 import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry'
 import StyleSheetValidation from './StyleSheetValidation'
-import { defaultStyles, mapStyleToClassName } from './predefs'
 
-let isRendered = false
 let styleElement
+let shouldInsertStyleSheet = ExecutionEnvironment.canUseDOM
+
 const STYLE_SHEET_ID = '__react-native-style'
 
-const _injectStyleSheet = () => {
+const absoluteFillObject = { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }
+
+const defaultStyleSheet = css.getDefaultStyleSheet()
+
+const insertStyleSheet = () => {
   // check if the server rendered the style sheet
   styleElement = document.getElementById(STYLE_SHEET_ID)
   // if not, inject the style sheet
-  if (!styleElement) { document.head.insertAdjacentHTML('afterbegin', renderToString()) }
-  isRendered = true
-}
-
-const _reset = () => {
-  if (styleElement) { document.head.removeChild(styleElement) }
-  styleElement = null
-  isRendered = false
-}
-
-const absoluteFillObject = { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }
-const absoluteFill = ReactNativePropRegistry.register(absoluteFillObject)
-
-const create = (styles: Object): Object => {
-  if (!isRendered && ExecutionEnvironment.canUseDOM) {
-    _injectStyleSheet()
+  if (!styleElement) {
+    document.head.insertAdjacentHTML(
+      'afterbegin',
+      `<style id="${STYLE_SHEET_ID}">${defaultStyleSheet}</style>`
+    )
+    shouldInsertStyleSheet = false
   }
-
-  const result = {}
-  for (let key in styles) {
-    StyleSheetValidation.validateStyle(key, styles)
-    result[key] = ReactNativePropRegistry.register(styles[key])
-  }
-  return result
-}
-
-const render = () => <style dangerouslySetInnerHTML={{ __html: defaultStyles }} id={STYLE_SHEET_ID} />
-
-const renderToString = () => `<style id="${STYLE_SHEET_ID}">${defaultStyles}</style>`
-
-/**
- * Accepts React props and converts style declarations to classNames when necessary
- */
-const resolve = (props) => {
-  let className = props.className || ''
-  let style = createReactStyleObject(props.style)
-  for (const prop in style) {
-    const value = style[prop]
-    const replacementClassName = mapStyleToClassName(prop, value)
-    if (replacementClassName) {
-      className += ` ${replacementClassName}`
-      // delete style[prop]
-    }
-  }
-
-  return { className, style }
 }
 
 module.exports = {
-  _reset,
-  absoluteFill,
+  /**
+   * For testing
+   * @private
+   */
+  _reset() {
+    if (styleElement) {
+      document.head.removeChild(styleElement)
+      styleElement = null
+      shouldInsertStyleSheet = true
+    }
+  },
+
+  absoluteFill: ReactNativePropRegistry.register(absoluteFillObject),
+
   absoluteFillObject,
-  create,
+
+  create(styles) {
+    if (shouldInsertStyleSheet) {
+      insertStyleSheet()
+    }
+
+    const result = {}
+    for (const key in styles) {
+      StyleSheetValidation.validateStyle(key, styles)
+      result[key] = ReactNativePropRegistry.register(styles[key])
+    }
+    return result
+  },
+
   hairlineWidth: 1,
+
   flatten: flattenStyle,
+
   /* @platform web */
-  render,
-  /* @platform web */
-  resolve
+  render() {
+    return <style dangerouslySetInnerHTML={{ __html: defaultStyleSheet }} id={STYLE_SHEET_ID} />
+  },
+
+  /**
+   * Accepts React props and converts style declarations to classNames when necessary
+   * @platform web
+   */
+  resolve(props) {
+    let className = props.className || ''
+    let style = createReactStyleObject(props.style)
+    for (const prop in style) {
+      const value = style[prop]
+      const replacementClassName = css.getStyleAsHelperClassName(prop, value)
+      if (replacementClassName) {
+        className += ` ${replacementClassName}`
+        style[prop] = null
+      }
+    }
+
+    return { className, style }
+  }
 }

src/apis/StyleSheet/processTextShadow.js

@@ -0,0 +1,19 @@
+import normalizeValue from './normalizeValue'
+
+const processTextShadow = (style) => {
+  if (style && style.textShadowOffset) {
+    const { height, width } = style.textShadowOffset
+    const offsetX = normalizeValue(null, height || 0)
+    const offsetY = normalizeValue(null, width || 0)
+    const blurRadius = normalizeValue(null, style.textShadowRadius || 0)
+    const color = style.textShadowColor || 'currentcolor'
+
+    style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`
+    style.textShadowColor = null
+    style.textShadowOffset = null
+    style.textShadowRadius = null
+  }
+  return style
+}
+
+module.exports = processTextShadow

src/apis/StyleSheet/processTransform.js

@@ -20,7 +20,7 @@ const processTransform = (style) => {
       style.transform = style.transform.map(mapTransform).join(' ')
     } else if (style.transformMatrix) {
       style.transform = convertTransformMatrix(style.transformMatrix)
-      delete style.transformMatrix
+      style.transformMatrix = null
     }
   }
   return style

src/apis/StyleSheet/processVendorPrefixes.js

@@ -0,0 +1,16 @@
+import prefixAll from 'inline-style-prefixer/static'
+
+const processVendorPrefixes = (style) => {
+  let prefixedStyles = prefixAll(style)
+  // React@15 removed undocumented support for fallback values in
+  // inline-styles. Revert array values to the standard CSS value
+  for (const prop in prefixedStyles) {
+    const value = prefixedStyles[prop]
+    if (Array.isArray(value)) {
+      prefixedStyles[prop] = value[value.length - 1]
+    }
+  }
+  return prefixedStyles
+}
+
+module.exports = processVendorPrefixes

src/apis/Vibration/index.js

@@ -0,0 +1,20 @@
+const vibrate = (pattern) => {
+  if ('vibrate' in window.navigator) {
+    if (typeof pattern === 'number' || Array.isArray(pattern)) {
+      window.navigator.vibrate(pattern)
+    } else {
+      throw new Error('Vibration pattern should be a number or array')
+    }
+  }
+}
+
+const Vibration = {
+  cancel() {
+    vibrate(0)
+  },
+  vibrate(pattern) {
+    vibrate(pattern)
+  }
+}
+
+module.exports = Vibration

src/components/Image/ImageResizeMode.js

@@ -1,9 +1,11 @@
 import keyMirror from 'fbjs/lib/keyMirror'
 
 const ImageResizeMode = keyMirror({
+  center: null,
   contain: null,
   cover: null,
   none: null,
+  repeat: null,
   stretch: null
 })
 

src/components/Image/index.js

@@ -35,7 +35,7 @@ class Image extends Component {
     onLoad: PropTypes.func,
     onLoadEnd: PropTypes.func,
     onLoadStart: PropTypes.func,
-    resizeMode: PropTypes.oneOf(['contain', 'cover', 'none', 'stretch']),
+    resizeMode: PropTypes.oneOf(['center', 'contain', 'cover', 'none', 'repeat', 'stretch']),
     source: ImageSourcePropType,
     style: StyleSheetPropType(ImageStylePropTypes),
     testID: createReactDOMComponent.propTypes.testID
@@ -207,6 +207,10 @@ const styles = StyleSheet.create({
 })
 
 const resizeModeStyles = StyleSheet.create({
+  center: {
+    backgroundSize: 'auto',
+    backgroundPosition: 'center'
+  },
   contain: {
     backgroundSize: 'contain'
   },
@@ -216,6 +220,10 @@ const resizeModeStyles = StyleSheet.create({
   none: {
     backgroundSize: 'auto'
   },
+  repeat: {
+    backgroundSize: 'auto',
+    backgroundRepeat: 'repeat'
+  },
   stretch: {
     backgroundSize: '100% 100%'
   }

src/components/ListView/index.js

@@ -3,6 +3,8 @@ import React, { Component } from 'react'
 import ScrollView from '../ScrollView'
 import ListViewDataSource from './ListViewDataSource'
 import ListViewPropTypes from './ListViewPropTypes'
+import View from '../View'
+import pick from 'lodash/pick'
 
 const SCROLLVIEW_REF = 'listviewscroll'
 
@@ -64,7 +66,7 @@ class ListView extends Component {
       if (renderSectionHeader) {
         const section = dataSource.getSectionHeaderData(sectionIdx)
         const key = 's_' + sectionId
-        const child = <div key={key}>{renderSectionHeader(section, sectionId)}</div>
+        const child = <View key={key}>{renderSectionHeader(section, sectionId)}</View>
         children.push(child)
       }
 
@@ -73,7 +75,7 @@ class ListView extends Component {
         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>
+        const child = <View key={key}>{renderRow(row, sectionId, rowId, this.onRowHighlighted)}</View>
         children.push(child)
 
         // render optional separator
@@ -88,12 +90,9 @@ class ListView extends Component {
       }
     }
 
-    const {
-      renderScrollComponent,
-      ...props
-    } = this.props
+    const props = pick(ScrollView.propTypes, this.props)
 
-    return React.cloneElement(renderScrollComponent(props), {
+    return React.cloneElement(this.props.renderScrollComponent(props), {
       ref: SCROLLVIEW_REF
     }, header, children, footer)
   }

src/components/ScrollView/index.js

@@ -117,7 +117,7 @@ const ScrollView = React.createClass({
 
   _handleContentOnLayout(e: Object) {
     const { width, height } = e.nativeEvent.layout
-    this.props.onContentSizeChange && this.props.onContentSizeChange(width, height)
+    this.props.onContentSizeChange(width, height)
   },
 
   render() {

src/components/Text/TextStylePropTypes.js

@@ -2,7 +2,7 @@ import { PropTypes } from 'react'
 import ColorPropType from '../../propTypes/ColorPropType'
 import ViewStylePropTypes from '../View/ViewStylePropTypes'
 
-const { number, oneOf, oneOfType, string } = PropTypes
+const { number, oneOf, oneOfType, shape, string } = PropTypes
 const numberOrString = oneOfType([ number, string ])
 
 module.exports = {
@@ -19,8 +19,9 @@ module.exports = {
   textDecorationLine: string,
   /* @platform web */
   textOverflow: string,
-  /* @platform web */
-  textShadow: string,
+  textShadowColor: ColorPropType,
+  textShadowOffset: shape({ width: number, height: number }),
+  textShadowRadius: number,
   /* @platform web */
   textTransform: oneOf([ 'capitalize', 'lowercase', 'none', 'uppercase' ]),
   /* @platform web */

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

@@ -31,4 +31,11 @@ suite('components/Text', () => {
       done()
     }
   })
+
+  test('prop "selectable"', () => {
+    let text = shallow(<Text />)
+    assert.equal(text.prop('style').userSelect, undefined)
+    text = shallow(<Text selectable={false} />)
+    assert.equal(text.prop('style').userSelect, 'none')
+  })
 })

src/components/Text/index.js

@@ -11,18 +11,20 @@ class Text extends Component {
 
   static propTypes = {
     accessibilityLabel: createReactDOMComponent.propTypes.accessibilityLabel,
-    accessibilityRole: createReactDOMComponent.propTypes.accessibilityRole,
+    accessibilityRole: PropTypes.oneOf([ 'heading', 'link' ]),
     accessible: createReactDOMComponent.propTypes.accessible,
     children: PropTypes.any,
     numberOfLines: PropTypes.number,
     onLayout: PropTypes.func,
     onPress: PropTypes.func,
+    selectable: PropTypes.bool,
     style: StyleSheetPropType(TextStylePropTypes),
     testID: createReactDOMComponent.propTypes.testID
   };
 
   static defaultProps = {
-    accessible: true
+    accessible: true,
+    selectable: true
   };
 
   render() {
@@ -30,6 +32,7 @@ class Text extends Component {
       numberOfLines,
       onLayout, // eslint-disable-line
       onPress, // eslint-disable-line
+      selectable,
       style,
       ...other
     } = this.props
@@ -41,6 +44,7 @@ class Text extends Component {
       style: [
         styles.initial,
         style,
+        !selectable && styles.notSelectable,
         numberOfLines === 1 && styles.singleLineStyle
       ]
     })
@@ -63,6 +67,9 @@ const styles = StyleSheet.create({
     textDecorationLine: 'none',
     wordWrap: 'break-word'
   },
+  notSelectable: {
+    userSelect: 'none'
+  },
   singleLineStyle: {
     maxWidth: '100%',
     overflow: 'hidden',

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

@@ -223,6 +223,19 @@ suite('components/TextInput', () => {
     // assert.equal(input.node.selectionStart, 0)
   })
 
+  test('prop "style"', () => {
+    const styles = StyleSheet.create({
+      root: {
+        borderWidth: 1,
+        textAlign: 'center'
+      }
+    })
+    const textInput = shallow(<TextInput style={styles.root} />)
+    const input = findNativeInput(textInput)
+    assert.equal(StyleSheet.flatten(textInput.prop('style')).borderWidth, 1, 'expected View styles to be applied to the "View"')
+    assert.equal(input.prop('style').textAlign, 'center', 'expected Text styles to be applied to the "input"')
+  })
+
   test('prop "value"', () => {
     const value = 'value'
     const input = findNativeInput(shallow(<TextInput value={value} />))

src/components/TextInput/index.js

@@ -121,8 +121,9 @@ class TextInput extends Component {
     // In order to support 'Text' styles on 'TextInput', we split the 'Text'
     // and 'View' styles and apply them to the 'Text' and 'View' components
     // used in the implementation
-    const rootStyles = pick(style, viewStyleProps)
-    const textStyles = omit(style, viewStyleProps)
+    const flattenedStyle = StyleSheet.flatten(style)
+    const rootStyles = pick(flattenedStyle, viewStyleProps)
+    const textStyles = omit(flattenedStyle, viewStyleProps)
 
     const propsCommon = {
       autoComplete: autoComplete && 'on',
@@ -236,8 +237,7 @@ applyNativeMethods(TextInput)
 
 const styles = StyleSheet.create({
   initial: {
-    borderColor: 'black',
-    borderWidth: 1
+    borderColor: 'black'
   },
   wrapper: {
     flex: 1

src/components/Touchable/TouchableHighlight.js

@@ -247,7 +247,7 @@ var TouchableHighlight = React.createClass({
         onResponderRelease={this.touchableHandleResponderRelease}
         onResponderTerminate={this.touchableHandleResponderTerminate}
         ref={UNDERLAY_REF}
-        style={this.state.underlayStyle}
+        style={[ styles.root, this.state.underlayStyle ]}
         tabIndex='0'
         testID={this.props.testID}>
         {React.cloneElement(

src/components/Touchable/TouchableWithoutFeedback.js

@@ -19,6 +19,7 @@ var Touchable = require('./Touchable');
 var View = require('../View');
 var ensurePositiveDelayProps = require('./ensurePositiveDelayProps');
 var warning = require('fbjs/lib/warning');
+var StyleSheet = require('../../apis/StyleSheet');
 
 type Event = Object;
 
@@ -38,7 +39,7 @@ const TouchableWithoutFeedback = React.createClass({
 
   propTypes: {
     accessible: View.propTypes.accessible,
-    aaccessibilityLabel: View.propTypes.accessibilityLabel,
+    accessibilityLabel: View.propTypes.accessibilityLabel,
     accessibilityRole: View.propTypes.accessibilityRole,
     /**
      * If true, disable all interactions for this component.
@@ -160,8 +161,8 @@ const TouchableWithoutFeedback = React.createClass({
       children.push(Touchable.renderDebugView({color: 'red', hitSlop: this.props.hitSlop}));
     }
     const style = (Touchable.TOUCH_TARGET_DEBUG && child.type && child.type.displayName === 'Text') ?
-      [child.props.style, {color: 'red'}] :
-      child.props.style;
+      [styles.root, child.props.style, {color: 'red'}] :
+      [styles.root, child.props.style];
     return (React: any).cloneElement(child, {
       accessible: this.props.accessible !== false,
       accessibilityLabel: this.props.accessibilityLabel,
@@ -182,4 +183,10 @@ const TouchableWithoutFeedback = React.createClass({
   }
 });
 
+var styles = StyleSheet.create({
+  root: {
+    cursor: 'pointer'
+  }
+});
+
 module.exports = TouchableWithoutFeedback;

src/components/View/ViewStylePropTypes.js

@@ -31,6 +31,7 @@ module.exports = {
   outline: string,
   overflowX: autoOrHiddenOrVisible,
   overflowY: autoOrHiddenOrVisible,
+  transition: string,
   userSelect: string,
   visibility: hiddenOrVisible,
   zIndex: number

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

@@ -7,8 +7,20 @@ import View from '../'
 import { mount, shallow } from 'enzyme'
 
 suite('components/View', () => {
+  suite('rendered element', () => {
+    test('is a "div" by default', () => {
+      const view = shallow(<View />)
+      assert.equal(view.is('div'), true)
+    })
+
+    test('is a "span" when inside <View accessibilityRole="button" />', () => {
+      const view = mount(<View accessibilityRole='button'><View /></View>)
+      assert.equal(view.find('span').length, 1)
+    })
+  })
+
   test('prop "children"', () => {
-    const children = 'children'
+    const children = <View testID='1' />
     const view = shallow(<View>{children}</View>)
     assert.equal(view.prop('children'), children)
   })

src/components/View/index.js

@@ -8,6 +8,29 @@ import StyleSheet from '../../apis/StyleSheet'
 import StyleSheetPropType from '../../propTypes/StyleSheetPropType'
 import ViewStylePropTypes from './ViewStylePropTypes'
 
+const eventHandlerNames = [
+  'onClick',
+  'onClickCapture',
+  'onMoveShouldSetResponder',
+  'onMoveShouldSetResponderCapture',
+  'onResponderGrant',
+  'onResponderMove',
+  'onResponderReject',
+  'onResponderRelease',
+  'onResponderTerminate',
+  'onResponderTerminationRequest',
+  'onStartShouldSetResponder',
+  'onStartShouldSetResponderCapture',
+  'onTouchCancel',
+  'onTouchCancelCapture',
+  'onTouchEnd',
+  'onTouchEndCapture',
+  'onTouchMove',
+  'onTouchMoveCapture',
+  'onTouchStart',
+  'onTouchStartCapture'
+]
+
 class View extends Component {
   static displayName = 'View'
 
@@ -50,9 +73,18 @@ class View extends Component {
     style: {}
   };
 
-  constructor(props, context) {
-    super(props, context)
-    this._normalizeEventForHandler = this._normalizeEventForHandler.bind(this)
+  static childContextTypes = {
+    isInAButtonView: PropTypes.bool
+  };
+
+  static contextTypes = {
+    isInAButtonView: PropTypes.bool
+  };
+
+  getChildContext() {
+    return {
+      isInAButtonView: this.props.accessibilityRole === 'button'
+    }
   }
 
   render() {
@@ -70,18 +102,18 @@ class View extends Component {
     // 'View' needs to set 'flexShrink:0' only when there is no 'flex' or 'flexShrink' style provided
     const needsFlexReset = flattenedStyle.flex == null && flattenedStyle.flexShrink == null
 
+    const normalizedEventHandlers = eventHandlerNames.reduce((handlerProps, handlerName) => {
+      const handler = this.props[handlerName]
+      if (typeof handler === 'function') {
+        handlerProps[handlerName] = this._normalizeEventForHandler(handler, handlerName)
+      }
+      return handlerProps
+    }, {})
+
     const props = {
       ...other,
-      onClick: this._normalizeEventForHandler(this.props.onClick),
-      onClickCapture: this._normalizeEventForHandler(this.props.onClickCapture),
-      onTouchCancel: this._normalizeEventForHandler(this.props.onTouchCancel),
-      onTouchCancelCapture: this._normalizeEventForHandler(this.props.onTouchCancelCapture),
-      onTouchEnd: this._normalizeEventForHandler(this.props.onTouchEnd),
-      onTouchEndCapture: this._normalizeEventForHandler(this.props.onTouchEndCapture),
-      onTouchMove: this._normalizeEventForHandler(this.props.onTouchMove),
-      onTouchMoveCapture: this._normalizeEventForHandler(this.props.onTouchMoveCapture),
-      onTouchStart: this._normalizeEventForHandler(this.props.onTouchStart),
-      onTouchStartCapture: this._normalizeEventForHandler(this.props.onTouchStartCapture),
+      ...normalizedEventHandlers,
+      component: this.context.isInAButtonView ? 'span' : 'div',
       style: [
         styles.initial,
         style,
@@ -93,23 +125,24 @@ class View extends Component {
     return createReactDOMComponent(props)
   }
 
-  /**
-   * React Native expects `pageX` and `pageY` to be on the `nativeEvent`, but
-   * React doesn't include them for touch events.
-   */
-  _normalizeEventForHandler(handler) {
+  _normalizeEventForHandler(handler, handlerName) {
+    // Browsers fire mouse events after touch events. This causes the
+    // ResponderEvents and their handlers to fire twice for Touchables.
+    // Auto-fix this issue by calling 'preventDefault' to cancel the mouse
+    // events.
+    const shouldCancelEvent = handlerName.indexOf('onResponder') === 0
+
     return (e) => {
-      const { pageX } = e.nativeEvent
-      if (pageX === undefined) {
-        e.nativeEvent = normalizeNativeEvent(e.nativeEvent)
+      e.nativeEvent = normalizeNativeEvent(e.nativeEvent)
+      const returnValue = handler(e)
+      if (shouldCancelEvent && e.cancelable) {
+        e.preventDefault()
       }
-      handler && handler(e)
+      return returnValue
     }
   }
 }
 
-applyLayout(applyNativeMethods(View))
-
 const styles = StyleSheet.create({
   // https://github.com/facebook/css-layout#default-values
   initial: {
@@ -132,7 +165,6 @@ const styles = StyleSheet.create({
     // list reset
     listStyle: 'none',
     // fix flexbox bugs
-    maxWidth: '100%',
     minHeight: 0,
     minWidth: 0
   },
@@ -141,4 +173,4 @@ const styles = StyleSheet.create({
   }
 })
 
-module.exports = View
+module.exports = applyLayout(applyNativeMethods(View))

src/index.js

@@ -18,6 +18,7 @@ import PixelRatio from './apis/PixelRatio'
 import Platform from './apis/Platform'
 import StyleSheet from './apis/StyleSheet'
 import UIManager from './apis/UIManager'
+import Vibration from './apis/Vibration'
 
 // components
 import ActivityIndicator from './components/ActivityIndicator'
@@ -65,6 +66,7 @@ const ReactNative = {
   Platform,
   StyleSheet,
   UIManager,
+  Vibration,
 
   // components
   ActivityIndicator,

src/modules/createReactDOMComponent/__tests__/index-test.js

@@ -43,7 +43,9 @@ suite('modules/createReactDOMComponent', () => {
 
   test('prop "component"', () => {
     const component = 'main'
-    const element = shallow(createReactDOMComponent({ component }))
+    let element = shallow(createReactDOMComponent({}))
+    assert.equal(element.is('span'), true, 'Default element must be a "span"')
+    element = shallow(createReactDOMComponent({ component }))
     assert.equal(element.is('main'), true)
   })
 

src/modules/createReactDOMComponent/index.js

@@ -22,7 +22,7 @@ const createReactDOMComponent = ({
   accessibilityLiveRegion,
   accessibilityRole,
   accessible = true,
-  component = 'div',
+  component = 'span',
   testID,
   type,
   ...other

src/modules/injectResponderEventPlugin.js

@@ -2,7 +2,6 @@
 
 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'
@@ -19,14 +18,9 @@ const {
   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 ]
+const endDependencies = [ topTouchCancel, topTouchEnd, topMouseUp ]
+const moveDependencies = [ topTouchMove, topMouseMove ]
+const startDependencies = [ topTouchStart, topMouseDown ]
 
 /**
  * Setup ResponderEventPlugin dependencies
@@ -51,7 +45,9 @@ ResponderTouchHistoryStore.recordTouchTrack = (topLevelType, nativeEvent) => {
   if ((topLevelType === topMouseMove) && !ResponderTouchHistoryStore.touchHistory.touchBank.length) {
     return
   }
-  originalRecordTouchTrack.call(ResponderTouchHistoryStore, topLevelType, normalizeNativeEvent(nativeEvent))
+
+  const normalizedEvent = normalizeNativeEvent(nativeEvent)
+  originalRecordTouchTrack.call(ResponderTouchHistoryStore, topLevelType, normalizedEvent)
 }
 
 EventPluginRegistry.injectEventPluginsByName({

src/modules/normalizeColor/index.js

@@ -193,6 +193,7 @@ function parsePercentage(str: string): number {
 
 var names = {
   /* @edit start */
+  currentcolor: 'currentcolor',
   inherit: 'inherit',
   /* @edit end */
   transparent: 0x00000000,

src/modules/normalizeNativeEvent.js

@@ -7,6 +7,7 @@ const normalizeTouches = (touches = []) => Array.prototype.slice.call(touches).m
   const locationY = touch.pageY - rect.top
 
   return {
+    _normalized: true,
     clientX: touch.clientX,
     clientY: touch.clientY,
     force: touch.force,
@@ -32,10 +33,13 @@ function normalizeTouchEvent(nativeEvent) {
   const touches = normalizeTouches(nativeEvent.touches)
 
   const event = {
+    _normalized: true,
     changedTouches,
-    domEvent: nativeEvent,
     pageX: nativeEvent.pageX,
     pageY: nativeEvent.pageY,
+    preventDefault: nativeEvent.preventDefault.bind(nativeEvent),
+    stopImmediatePropagation: nativeEvent.stopImmediatePropagation.bind(nativeEvent),
+    stopPropagation: nativeEvent.stopPropagation.bind(nativeEvent),
     target: nativeEvent.target,
     // normalize the timestamp
     // https://stackoverflow.com/questions/26177087/ios-8-mobile-safari-wrong-timestamp-on-touch-events
@@ -56,6 +60,7 @@ function normalizeTouchEvent(nativeEvent) {
 
 function normalizeMouseEvent(nativeEvent) {
   const touches = [{
+    _normalized: true,
     clientX: nativeEvent.clientX,
     clientY: nativeEvent.clientY,
     force: nativeEvent.force,
@@ -67,16 +72,19 @@ function normalizeMouseEvent(nativeEvent) {
     screenX: nativeEvent.screenX,
     screenY: nativeEvent.screenY,
     target: nativeEvent.target,
-    timestamp: nativeEvent.timestamp || Date.now()
+    timestamp: Date.now()
   }]
   return {
+    _normalized: true,
     changedTouches: touches,
-    domEvent: nativeEvent,
     identifier: touches[0].identifier,
     locationX: nativeEvent.offsetX,
     locationY: nativeEvent.offsetY,
     pageX: nativeEvent.pageX,
     pageY: nativeEvent.pageY,
+    preventDefault: nativeEvent.preventDefault.bind(nativeEvent),
+    stopImmediatePropagation: nativeEvent.stopImmediatePropagation.bind(nativeEvent),
+    stopPropagation: nativeEvent.stopPropagation.bind(nativeEvent),
     target: nativeEvent.target,
     timestamp: touches[0].timestamp,
     touches: (nativeEvent.type === 'mouseup') ? [] : touches
@@ -84,7 +92,9 @@ function normalizeMouseEvent(nativeEvent) {
 }
 
 function normalizeNativeEvent(nativeEvent) {
-  const mouse = nativeEvent.type.indexOf('mouse') >= 0
+  if (nativeEvent._normalized) { return nativeEvent }
+  const eventType = nativeEvent.type || ''
+  const mouse = eventType.indexOf('mouse') >= 0
   return mouse ? normalizeMouseEvent(nativeEvent) : normalizeTouchEvent(nativeEvent)
 }
 

src/tests.webpack.js

@@ -4,5 +4,5 @@
  *
  * See: https://github.com/webpack/docs/wiki/context
  */
-var context = require.context('./src', true, /-test\.js$/)
+var context = require.context('.', true, /-test\.js$/)
 context.keys().forEach(context)