0.0.75

Add support for web-specific props to improve accessibility, e.g., ARIA
properties (and declarative links).

Fix #65

.gitignore

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

docs/components/Text.md

@@ -63,27 +63,27 @@ Lets the user select the text.
 + ...[View#style](View.md)
 + `color`
 + `fontFamily`
++ `fontFeatureSettings` ‡
 + `fontSize`
 + `fontStyle`
 + `fontWeight`
 + `letterSpacing`
 + `lineHeight`
-+ `textAlign`‡
++ `textAlign`
 + `textAlignVertical`
 + `textDecorationLine`
-+ `textOverflow`
-+ `textRendering`
++ `textOverflow` ‡
++ `textRendering` ‡
 + `textShadowColor`
-+ `textShadowOffset`‡
++ `textShadowOffset`
 + `textShadowRadius`
-+ `textTransform`
-+ `unicodeBidi`
++ `textTransform` ‡
++ `unicodeBidi` ‡
 + `whiteSpace`
-+ `wordWrap`
-+ `writingDirection`‡
++ `wordWrap` ‡
++ `writingDirection`
 
-‡ This property can be suffixed with `$noI18n` to prevent automatic
-bidi-flipping in RTL mode. This is only supported if `Platform.OS === 'web'`.
+‡ web only.
 
 **testID**: string
 

docs/components/TextInput.md

@@ -144,7 +144,9 @@ If `true`, all text will automatically be selected on focus.
 **style**: style
 
 + ...[Text#style](./Text.md)
-+ `outline`
++ `resize` ‡
+
+‡ web only.
 
 **testID**: string
 

docs/components/View.md

@@ -99,47 +99,48 @@ from `style`.
 + `alignContent`
 + `alignItems`
 + `alignSelf`
-+ `animationDelay`
-+ `animationDirection`
-+ `animationDuration`
-+ `animationFillMode`
-+ `animationIterationCount`
-+ `animationName`
-+ `animationPlayState`
-+ `animationTimingFunction`
++ `animationDelay` ‡
++ `animationDirection` ‡
++ `animationDuration` ‡
++ `animationFillMode` ‡
++ `animationIterationCount` ‡
++ `animationName` ‡
++ `animationPlayState` ‡
++ `animationTimingFunction` ‡
 + `backfaceVisibility`
-+ `backgroundAttachment`
-+ `backgroundClip`
++ `backgroundAttachment` ‡
++ `backgroundClip` ‡
 + `backgroundColor`
-+ `backgroundImage`
-+ `backgroundOrigin`
-+ `backgroundPosition`
-+ `backgroundRepeat`
-+ `backgroundSize`
++ `backgroundImage` ‡
++ `backgroundOrigin` ‡
++ `backgroundPosition` ‡
++ `backgroundRepeat` ‡
++ `backgroundSize` ‡
 + `borderColor` (single value)
 + `borderTopColor`
 + `borderBottomColor`
-+ `borderRightColor`‡
-+ `borderLeftColor`‡
++ `borderRightColor`
++ `borderLeftColor`
 + `borderRadius` (single value)
-+ `borderTopLeftRadius`‡
-+ `borderTopRightRadius`‡
-+ `borderBottomLeftRadius`‡
-+ `borderBottomRightRadius`‡
++ `borderTopLeftRadius`
++ `borderTopRightRadius`
++ `borderBottomLeftRadius`
++ `borderBottomRightRadius`
 + `borderStyle` (single value)
 + `borderTopStyle`
-+ `borderRightStyle`‡
++ `borderRightStyle`
 + `borderBottomStyle`
-+ `borderLeftStyle`‡
++ `borderLeftStyle`
 + `borderWidth` (single value)
 + `borderBottomWidth`
-+ `borderLeftWidth`‡
-+ `borderRightWidth`‡
++ `borderLeftWidth`
++ `borderRightWidth`
 + `borderTopWidth`
 + `bottom`
 + `boxShadow`
 + `boxSizing`
-+ `cursor`
++ `cursor` ‡
++ `display` ‡
 + `flex` (number)
 + `flexBasis`
 + `flexDirection`
@@ -148,12 +149,12 @@ from `style`.
 + `flexWrap`
 + `height`
 + `justifyContent`
-+ `left`‡
++ `left`
 + `margin` (single value)
 + `marginBottom`
 + `marginHorizontal`
-+ `marginLeft`‡
-+ `marginRight`‡
++ `marginLeft`
++ `marginRight`
 + `marginTop`
 + `marginVertical`
 + `maxHeight`
@@ -162,34 +163,35 @@ from `style`.
 + `minWidth`
 + `opacity`
 + `order`
++ `outline` ‡
 + `overflow`
-+ `overflowX`
-+ `overflowY`
++ `overflowX` ‡
++ `overflowY` ‡
 + `padding` (single value)
 + `paddingBottom`
 + `paddingHorizontal`
-+ `paddingLeft`‡
-+ `paddingRight`‡
++ `paddingLeft`
++ `paddingRight`
 + `paddingTop`
 + `paddingVertical`
-+ `perspective`
-+ `perspectiveOrigin`
++ `perspective` ‡
++ `perspectiveOrigin` ‡
 + `position`
-+ `right`‡
++ `right`
 + `top`
 + `transform`
-+ `transformOrigin`
-+ `transitionDelay`
-+ `transitionDuration`
-+ `transitionProperty`
-+ `transitionTimingFunction`
-+ `userSelect`
-+ `visibility`
++ `transformOrigin` ‡
++ `transitionDelay` ‡
++ `transitionDuration` ‡
++ `transitionProperty` ‡
++ `transitionTimingFunction` ‡
++ `userSelect` ‡
++ `visibility` ‡
 + `width`
++ `willChange` ‡
 + `zIndex`
 
-‡ This property can be suffixed with `$noI18n` to prevent automatic
-bidi-flipping in RTL mode. This is only supported if `Platform.OS === 'web'`.
+‡ web only.
 
 Default:
 

docs/guides/internationalization.md

@@ -4,11 +4,6 @@ To support right-to-left languages, application layout can be automatically
 flipped from LTR to RTL. The `I18nManager` API can be used to help with more
 fine-grained control and testing of RTL layouts.
 
-React Native for Web provides an experimental feature to support "true left"
-and "true right" styles. For example, `left` will be flipped to `right` in RTL
-mode, but `left$noI18n` will not. More information is available in the `Text`
-and `View` documentation.
-
 ## Working with icons and images
 
 Icons and images that must match the LTR or RTL layout of the app need to be manually flipped.

docs/guides/react-native.md

@@ -86,7 +86,19 @@ if (Platform.OS === 'web') {
 ```
 
 More substantial Web-specific implementation code should be written in files
-with the extension `.web.js`, which webpack will automatically resolve.
+with the extension `.web.js`. Webpack@1 will automatically resolve these files.
+Webpack@2 requires additional configuration.
+
+```js
+// webpack.config.js
+
+module.exports = {
+  // ...
+  resolve: {
+    extensions: [ '.web.js', '.js' ]
+  }
+};
+```
 
 ## Optimizations
 

examples/apis/I18nManager/I18nManagerExample.js

@@ -14,14 +14,22 @@ class I18nManagerExample extends Component {
           LTR/RTL layout example!
         </Text>
         <Text style={styles.text}>
-          This is sample text. The writing direction can be changed by pressing the button below.
-        </Text>
-        <Text style={[ styles.text, styles.ltrText ]}>
-          This is text that will always display LTR.
+          The writing direction of text is automatically determined by the browser, independent of the global writing direction of the app.
         </Text>
         <Text style={[ styles.text, styles.rtlText ]}>
-          This is text that will always display RTL.
+          أحب اللغة العربية
         </Text>
+        <Text style={[ styles.text, styles.textAlign ]}>
+          textAlign toggles
+        </Text>
+        <View style={styles.horizontal}>
+          <View style={[ styles.box, { backgroundColor: 'lightblue' } ]}>
+            <Text>One</Text>
+          </View>
+          <View style={[ styles.box ]}>
+            <Text>Two</Text>
+          </View>
+        </View>
         <TouchableHighlight
           onPress={this._handleToggle}
           style={styles.toggle}
@@ -34,8 +42,8 @@ class I18nManagerExample extends Component {
   }
 
   _handleToggle = () => {
-    this._isRTL = !this._isRTL
-    I18nManager.setPreferredLanguageRTL(this._isRTL)
+    I18nManager.setPreferredLanguageRTL(!I18nManager.isRTL)
+    this.forceUpdate();
   }
 }
 
@@ -55,13 +63,16 @@ const styles = StyleSheet.create({
     fontSize: 18,
     marginBottom: 5
   },
-  ltrText: {
-    textAlign$noI18n: 'left',
-    writingDirection$noI18n: 'ltr'
+  textAlign: {
+    textAlign: 'left'
   },
-  rtlText: {
-    textAlign$noI18n: 'right',
-    writingDirection$noI18n: 'rtl'
+  horizontal: {
+    flexDirection: 'row',
+    marginVertical: 10
+  },
+  box: {
+    borderWidth: 1,
+    flex: 1
   },
   toggle: {
     alignSelf: 'center',

examples/apis/Linking/LinkingExample.js

@@ -2,11 +2,19 @@ import { Linking, StyleSheet, Text, View } from 'react-native'
 import React, { Component } from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 
+const url = 'https://mathiasbynens.github.io/rel-noopener/malicious.html';
+
 class LinkingExample extends Component {
+  handlePress() {
+    Linking.canOpenURL(url).then((supported) => {
+      return Linking.openURL(url);
+    });
+  }
+
   render() {
     return (
       <View>
-        <Text onPress={() => { Linking.openURL('https://mathiasbynens.github.io/rel-noopener/malicious.html'); }} style={styles.text}>
+        <Text onPress={this.handlePress} style={styles.text}>
           Linking.openURL (Expect: "The previous tab is safe and intact")
         </Text>
         <Text accessibilityRole='link' href='https://mathiasbynens.github.io/rel-noopener/malicious.html' style={styles.text} target='_blank'>

examples/components/Text/TextExample.js

@@ -271,7 +271,7 @@ const examples = [
         <Text>
           auto (default) - english LTR
         </Text>
-        <Text style={{ writingDirection$noI18n: 'rtl' }}>
+        <Text>
           أحب اللغة العربية auto (default) - arabic RTL
         </Text>
         <Text style={{textAlign: 'left'}}>

examples/components/Touchable/TouchableExample.js

@@ -318,7 +318,6 @@ var TouchableDisabled = React.createClass({
         <TouchableHighlight
           activeOpacity={1}
           disabled={true}
-          animationVelocity={0}
           underlayColor="rgb(210, 230, 255)"
           style={[styles.row, styles.block]}
           onPress={action('TouchableHighlight')}>
@@ -329,7 +328,6 @@ var TouchableDisabled = React.createClass({
 
         <TouchableHighlight
           activeOpacity={1}
-          animationVelocity={0}
           underlayColor="rgb(210, 230, 255)"
           style={[styles.row, styles.block]}
           onPress={action('TouchableHighlight')}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.0.67",
+  "version": "0.0.75",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [
@@ -11,25 +11,25 @@
   "scripts": {
     "build": "del ./dist && mkdir dist && babel src -d dist --ignore **/__tests__",
     "build:examples": "build-storybook -o dist-examples -c ./examples/.storybook",
-    "build:performance": "cd performance && webpack",
+    "build:performance": "cd performance && yarn && webpack",
     "build:umd": "webpack --config webpack.config.js --sort-assets-by --progress",
     "deploy:examples": "git checkout gh-pages && rm -rf ./storybook && mv dist-examples storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -",
     "examples": "start-storybook -p 9001 -c ./examples/.storybook --dont-track",
-    "lint": "eslint performance src",
+    "lint": "eslint performance src --ignore-path .gitignore",
     "prepublish": "npm run build && npm run build:umd",
     "test": "npm run lint && npm run test:jest",
     "test:jest": "jest",
     "test:watch": "npm run test:jest -- --watch"
   },
   "dependencies": {
-    "animated": "^0.1.5",
+    "animated": "^0.2.0",
     "array-find-index": "^1.0.2",
     "asap": "^2.0.5",
-    "babel-runtime": "^6.20.0",
+    "babel-runtime": "^6.23.0",
     "debounce": "^1.0.0",
     "deep-assign": "^2.0.0",
     "fbjs": "^0.8.8",
-    "inline-style-prefixer": "^2.0.5",
+    "inline-style-prefixer": "^3.0.0",
     "normalize-css-color": "^1.0.2",
     "react-dom": "~15.4.1",
     "react-textarea-autosize": "^4.0.4",
@@ -37,11 +37,11 @@
   },
   "devDependencies": {
     "@kadira/storybook": "^2.5.1",
-    "babel-cli": "^6.14.0",
-    "babel-core": "^6.21.0",
+    "babel-cli": "^6.23.0",
+    "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.10",
-    "babel-plugin-transform-react-remove-prop-types": "^0.2.11",
+    "babel-loader": "^6.3.2",
+    "babel-plugin-transform-react-remove-prop-types": "^0.3.2",
     "babel-preset-react-native": "^1.9.1",
     "del-cli": "^0.2.1",
     "enzyme": "^2.4.1",
@@ -51,14 +51,13 @@
     "eslint-plugin-react": "^6.1.2",
     "file-loader": "^0.9.0",
     "jest": "^16.0.2",
-    "marky": "^1.1.1",
     "node-libs-browser": "^0.5.3",
     "react": "~15.4.1",
     "react-addons-test-utils": "~15.4.1",
     "react-test-renderer": "~15.4.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
-    "webpack-bundle-analyzer": "^1.5.3"
+    "webpack-bundle-analyzer": "^2.2.1"
   },
   "peerDependencies": {
     "react": "~15.4.1"

performance/README.md

@@ -0,0 +1,36 @@
+# Performance
+
+To run these benchmarks:
+
+```
+npm run build:performance
+open ./performance/index.html
+```
+
+## Notes
+
+The components used in the render benchmarks are simple enough to be
+implemented by multiple styling libraries. The implementations are not
+equivalent but are useful for framing the relative performance of
+`react-native-web` against these tests.
+
+The implementations are not equivalent. For example, the `react-native-web`
+implementation of `View` does more than just styling. The
+`react-native-web/lite` variant implements a minimal `View` that allows for a
+more direct comparison with the `css-modules` baseline.
+
+## Benchmark results
+
+Typical render timings*: mean / two standard deviations
+
+Version: 0.0.73
+
+| Implementation        | Deep tree (ms)    | Wide tree (ms)    |
+| :--- | ---: | ---: |
+| css-modules           |  `80.47` `±18.04` | `166.91` `±19.90` |
+| react-native-web/lite |  `87.91` `±13.37` | `181.45` `±20.06` |
+| react-native-web      | `113.45` `±09.27` | `237.33` `±38.77` |
+| styled-components     | `170.86` `±15.67` | `378.83` `±36.11` |
+| glamor                | `275.41` `±19.56` | `474.76` `±29.02` |
+
+*MacBook Pro (13-inch, Early 2011); 2.7 GHz Intel Core i7; 16 GB 1600 MHz DDR3. Google Chrome 56.

performance/benchmark.js

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

performance/benchmarks/deepTree/createDeepTree.js

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

performance/benchmarks/deepTree/index.js

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

performance/implementations/css-modules/Box/index.js

@@ -0,0 +1,21 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import React from 'react';
+import View from '../View';
+import styles from './styles.css';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    className={classnames(
+      styles[`color${color}`],
+      {
+        [styles.fixed]: fixed,
+        [styles.outer]: outer,
+        [styles.row]: layout === 'row'
+      }
+    )}
+  />
+);
+
+module.exports = Box;

performance/implementations/css-modules/Box/styles.css

@@ -0,0 +1,36 @@
+.outer {
+  padding: 4px;
+}
+
+.row {
+  flex-direction: row;
+}
+
+.color0 {
+  background-color: #222;
+}
+
+.color1 {
+  background-color: #666;
+}
+
+.color2 {
+  background-color: #999;
+}
+
+.color3 {
+  background-color: blue;
+}
+
+.color4 {
+  background-color: orange;
+}
+
+.color5 {
+  background-color: red;
+}
+
+.fixed {
+  width: 20px;
+  height: 20px;
+}

performance/implementations/css-modules/View/index.js

@@ -0,0 +1,8 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import React from 'react';
+import styles from './styles.css';
+
+const View = (props) => <div {...props} className={classnames(styles.initial, props.className)} />;
+
+module.exports = View;

performance/implementations/css-modules/View/styles.css

@@ -0,0 +1,21 @@
+.initial {
+  align-items: stretch;
+  border-width: 0;
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  flex-basis: auto;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  text-decoration: none;
+  list-style: none;
+  min-height: 0;
+  min-width: 0;
+};

performance/implementations/css-modules/index.js

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

performance/implementations/glamor/Box/index.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import { css } from 'glamor';
+import React from 'react';
+import View from '../View';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = {
+  outer: css({
+    padding: 4
+  }),
+  row: css({
+    flexDirection: 'row'
+  }),
+  color0: css({
+    backgroundColor: '#222'
+  }),
+  color1: css({
+    backgroundColor: '#666'
+  }),
+  color2: css({
+    backgroundColor: '#999'
+  }),
+  color3: css({
+    backgroundColor: 'blue'
+  }),
+  color4: css({
+    backgroundColor: 'orange'
+  }),
+  color5: css({
+    backgroundColor: 'red'
+  }),
+  fixed: css({
+    width: 20,
+    height: 20
+  })
+};
+
+module.exports = Box;

performance/implementations/glamor/View/index.js

@@ -0,0 +1,32 @@
+/* eslint-disable react/prop-types */
+import { css } from 'glamor';
+import React from 'react';
+
+const View = (props) => <div {...props} className={css(viewStyle, props.style)} />;
+
+const viewStyle = {
+  alignItems: 'stretch',
+  borderWidth: 0,
+  borderStyle: 'solid',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexBasis: 'auto',
+  flexDirection: 'column',
+  flexShrink: 0,
+  margin: 0,
+  padding: 0,
+  position: 'relative',
+  // button and anchor reset
+  backgroundColor: 'transparent',
+  color: 'inherit',
+  font: 'inherit',
+  textAlign: 'inherit',
+  textDecorationLine: 'none',
+  // list reset
+  listStyle: 'none',
+  // fix flexbox bugs
+  minHeight: 0,
+  minWidth: 0
+};
+
+module.exports = View;

performance/implementations/glamor/index.js

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

performance/implementations/react-native-web/Box/index.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import StyleSheet from 'react-native/apis/StyleSheet';
+import View from '../View';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = StyleSheet.create({
+  outer: {
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#222'
+  },
+  color1: {
+    backgroundColor: '#666'
+  },
+  color2: {
+    backgroundColor: '#999'
+  },
+  color3: {
+    backgroundColor: 'blue'
+  },
+  color4: {
+    backgroundColor: 'orange'
+  },
+  color5: {
+    backgroundColor: 'red'
+  },
+  fixed: {
+    width: 20,
+    height: 20
+  }
+});
+
+module.exports = Box;

performance/implementations/react-native-web/Box/lite.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import StyleSheet from 'react-native/apis/StyleSheet';
+import View from '../View/lite';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = StyleSheet.create({
+  outer: {
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#222'
+  },
+  color1: {
+    backgroundColor: '#666'
+  },
+  color2: {
+    backgroundColor: '#999'
+  },
+  color3: {
+    backgroundColor: 'blue'
+  },
+  color4: {
+    backgroundColor: 'orange'
+  },
+  color5: {
+    backgroundColor: 'red'
+  },
+  fixed: {
+    width: 20,
+    height: 20
+  }
+});
+
+module.exports = Box;

performance/implementations/react-native-web/View/index.js

@@ -0,0 +1,2 @@
+import View from 'react-native/components/View';
+export default View;

performance/implementations/react-native-web/View/lite.js

@@ -0,0 +1,32 @@
+import createDOMElement from 'react-native/modules/createDOMElement';
+import StyleSheet from 'react-native/apis/StyleSheet';
+
+const View = (props) => createDOMElement('div', { ...props, style: [ styles.initial, props.style ] });
+
+const styles = StyleSheet.create({
+  initial: {
+    alignItems: 'stretch',
+    borderWidth: 0,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    margin: 0,
+    padding: 0,
+    position: 'relative',
+    // button and anchor reset
+    backgroundColor: 'transparent',
+    color: 'inherit',
+    font: 'inherit',
+    textAlign: 'inherit',
+    textDecorationLine: 'none',
+    // list reset
+    listStyle: 'none',
+    // fix flexbox bugs
+    minHeight: 0,
+    minWidth: 0
+  }
+});
+
+module.exports = View;

performance/implementations/react-native-web/index.js

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

performance/implementations/react-native-web/lite.js

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

performance/implementations/styled-components/Box/index.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import View from '../View';
+
+const getColor = (color) => {
+  switch (color) {
+    case 0:
+      return '#222';
+    case 1:
+      return '#666';
+    case 2:
+      return '#999';
+    case 3:
+      return 'blue';
+    case 4:
+      return 'orange';
+    case 5:
+      return 'red';
+    default:
+      return 'transparent';
+  }
+};
+
+const Box = styled(View)`
+  flex-direction: ${(props) => props.layout === 'column' ? 'column' : 'row'};
+  padding: ${(props) => props.outer ? '4px' : '0'};
+  height: ${(props) => props.fixed ? '20px' : 'auto'};
+  width: ${(props) => props.fixed ? '20px' : 'auto'};
+  background-color: ${(props) => getColor(props.color)};
+`;
+
+module.exports = Box;

performance/implementations/styled-components/View/index.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const View = styled.div`
+  align-items: stretch;
+  border-width: 0;
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  flex-basis: auto;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  text-decoration: none;
+  list-style: none;
+  min-height: 0;
+  min-width: 0;
+`;
+
+module.exports = View;

performance/implementations/styled-components/index.js

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

performance/index.html

@@ -6,6 +6,6 @@
 </head>
 <body>
   <div class="root"></div>
-  <script src="../dist-performance/performance.bundle.js"></script>
+  <script src="dist/performance.bundle.js"></script>
 </body>
 </html>

performance/index.js

@@ -1,16 +1,28 @@
-import createDeepTree from './benchmarks/deepTree/createDeepTree';
-import deepTree from './benchmarks/deepTree';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactNative from 'react-native';
+import cssModules from './implementations/css-modules';
+import glamor from './implementations/glamor';
+import reactNative from './implementations/react-native-web';
+import reactNativeLite from './implementations/react-native-web/lite';
+import styledComponents from './implementations/styled-components';
 
-const node = document.querySelector('.root');
-const DeepTree = createDeepTree(ReactNative);
+import renderDeepTree from './tests/renderDeepTree';
+import renderWideTree from './tests/renderWideTree';
 
-Promise.resolve()
-  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10, registerStyles: false }, node))
-  .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 20, registerStyles: false }, node))
-  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10 }, node))
-  .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 20 }, node))
-  .then(() => ReactDOM.render(<DeepTree breadth={3} depth={5} id={0} wrap={1} />, node));
+const tests = [
+  // deep tree
+  () => renderDeepTree('css-modules', cssModules),
+  () => renderDeepTree('react-native-web/lite', reactNativeLite),
+  () => renderDeepTree('react-native-web', reactNative),
+  () => renderDeepTree('styled-components', styledComponents),
+  () => renderDeepTree('glamor', glamor),
+  // wide tree
+  () => renderWideTree('css-modules', cssModules),
+  () => renderWideTree('react-native-web/lite', reactNativeLite),
+  () => renderWideTree('react-native-web', reactNative),
+  () => renderWideTree('styled-components', styledComponents),
+  () => renderWideTree('glamor', glamor)
+];
 
+// run benchmarks
+tests.reduce((promise, test) => {
+  return promise.then(test());
+}, Promise.resolve());

performance/modules/NestedTree.js

@@ -0,0 +1,49 @@
+import React, { Component, PropTypes } from 'react';
+
+class DeepTree extends Component {
+  static propTypes = {
+    breadth: PropTypes.number.isRequired,
+    components: PropTypes.object,
+    depth: PropTypes.number.isRequired,
+    id: PropTypes.number.isRequired,
+    wrap: PropTypes.number.isRequired
+  };
+
+  render() {
+    const { breadth, components, depth, id, wrap } = this.props;
+    const { Box } = components;
+
+    let result = (
+      <Box
+        color={id % 3}
+        components={components}
+        layout={depth % 2 === 0 ? 'column' : 'row'}
+        outer
+      >
+        {depth === 0 && (
+          <Box
+            color={(id % 3) + 3}
+            components={components}
+            fixed
+          />
+        )}
+        {depth !== 0 && Array.from({ length: breadth }).map((el, i) => (
+          <DeepTree
+            breadth={breadth}
+            components={components}
+            depth={depth - 1}
+            id={i}
+            key={i}
+            wrap={wrap}
+          />
+        ))}
+      </Box>
+    );
+    for (let i = 0; i < wrap; i++) {
+      result = <Box components={components}>{result}</Box>;
+    }
+    return result;
+  }
+}
+
+module.exports = DeepTree;

performance/modules/benchmark.js

@@ -0,0 +1,93 @@
+import * as marky from 'marky';
+
+const fmt = (time) => `${Math.round(time * 100) / 100}ms`;
+
+const measure = (name, fn) => {
+  marky.mark(name);
+  fn();
+  const performanceMeasure = marky.stop(name);
+  return performanceMeasure.duration;
+};
+
+const mean = (values) => {
+  const sum = values.reduce((sum, value) => sum + value, 0);
+  return sum / values.length;
+};
+
+const median = (values) => {
+  if (!Array.isArray(values)) { return 0; }
+  if (values.length === 1) { return values[0]; }
+
+  const numbers = [ ...values ].sort((a, b) => a - b);
+  return (numbers[(numbers.length - 1) >> 1] + numbers[numbers.length >> 1]) / 2;
+};
+
+const standardDeviation = (values) => {
+  const avg = mean(values);
+
+  const squareDiffs = values.map((value) => {
+    const diff = value - avg;
+    return diff * diff;
+  });
+
+  const meanSquareDiff = mean(squareDiffs);
+  return Math.sqrt(meanSquareDiff);
+};
+
+const benchmark = ({ name, description, setup, teardown, task, runs }) => {
+  return new Promise((resolve) => {
+    const durations = [];
+    let i = 0;
+
+    setup();
+    const first = measure('first', task);
+    teardown();
+
+    const done = () => {
+      const stdDev = standardDeviation(durations);
+      const formattedFirst = fmt(first);
+      const formattedMean = fmt(mean(durations));
+      const formattedMedian = fmt(median(durations));
+      const formattedStdDev = fmt(stdDev);
+
+      console.groupCollapsed(`${name}\n${formattedMean} ±${fmt(2 * stdDev)}`);
+      description && console.log(description);
+      console.log(`First: ${formattedFirst}`);
+      console.log(`Median: ${formattedMedian}`);
+      console.log(`Mean: ${formattedMean}`);
+      console.log(`Standard deviation: ${formattedStdDev}`);
+      console.log(durations);
+      console.groupEnd();
+      resolve();
+    };
+
+    const a = () => {
+      setup();
+      window.requestAnimationFrame(b);
+    };
+
+    const b = () => {
+      const duration = measure('mean', task);
+      durations.push(duration);
+      window.requestAnimationFrame(c);
+    };
+
+    const c = () => {
+      teardown();
+      window.requestAnimationFrame(d);
+    };
+
+    const d = () => {
+      i += 1;
+      if (i < runs) {
+        window.requestAnimationFrame(a);
+      } else {
+        window.requestAnimationFrame(done);
+      }
+    };
+
+    window.requestAnimationFrame(a);
+  });
+};
+
+export default benchmark;

performance/modules/createRenderBenchmark.js

@@ -0,0 +1,20 @@
+import benchmark from './benchmark';
+import ReactDOM from 'react-dom';
+
+const node = document.querySelector('.root');
+
+const createRenderBenchmark = ({ description, getElement, name, runs }) => () => {
+  const setup = () => {};
+  const teardown = () => ReactDOM.unmountComponentAtNode(node);
+
+  return benchmark({
+    name,
+    description,
+    runs,
+    setup,
+    teardown,
+    task: () => ReactDOM.render(getElement(), node)
+  });
+};
+
+export default createRenderBenchmark;

performance/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "performance",
+  "private": true,
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "glamor": "^2.20.24",
+    "marky": "^1.1.3",
+    "styled-components": "^1.4.3"
+  },
+  "devDependencies": {
+    "css-loader": "^0.26.2",
+    "style-loader": "^0.13.2"
+  }
+}

performance/tests/renderDeepTree.js

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

performance/tests/renderWideTree.js

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

performance/webpack.config.js

@@ -1,17 +1,20 @@
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const path = require('path');
 const webpack = require('webpack');
-// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {
-  entry: {
-    performance: './index'
-  },
+  context: __dirname,
+  entry: './index',
   output: {
-    path: path.resolve(__dirname, '../dist-performance'),
+    path: path.resolve(__dirname, 'dist'),
     filename: 'performance.bundle.js'
   },
   module: {
     loaders: [
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader?module&localIdentName=[hash:base64:8]'
+      },
       {
         test: /\.js$/,
         exclude: /node_modules/,
@@ -21,13 +24,12 @@ module.exports = {
     ]
   },
   plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false
+    }),
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
     new webpack.optimize.DedupePlugin(),
-    // https://github.com/animatedjs/animated/issues/40
-    new webpack.NormalModuleReplacementPlugin(
-      /es6-set/,
-      path.join(__dirname, '../src/modules/polyfills/Set.js')
-    ),
     new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.optimize.UglifyJsPlugin({
       compress: {

performance/yarn.lock

@@ -0,0 +1,970 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+argparse@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+asap@~2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
+
+autoprefixer@^6.3.1:
+  version "6.7.5"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.5.tgz#50848f39dc08730091d9495023487e7cc21f518d"
+  dependencies:
+    browserslist "^1.7.5"
+    caniuse-db "^1.0.30000624"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.15"
+    postcss-value-parser "^3.2.3"
+
+babel-code-frame@^6.11.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
+  dependencies:
+    chalk "^1.1.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+babel-runtime@^6.18.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+balanced-match@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+
+base64-js@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
+
+big.js@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
+
+bowser@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.6.0.tgz#37fc387b616cb6aef370dab4d6bd402b74c5c54d"
+
+browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.5:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.5.tgz#eca4713897b51e444283241facf3985de49a9e2b"
+  dependencies:
+    caniuse-db "^1.0.30000624"
+    electron-to-chromium "^1.2.3"
+
+buffer@^5.0.2:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.5.tgz#35c9393244a90aff83581063d16f0882cecc9418"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+
+caniuse-api@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.3.tgz#5018e674b51c393e4d50614275dc017e27c4a2a2"
+  dependencies:
+    browserslist "^1.0.1"
+    caniuse-db "^1.0.30000346"
+    lodash.memoize "^4.1.0"
+    lodash.uniq "^4.3.0"
+
+caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000624:
+  version "1.0.30000628"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000628.tgz#3d010e2a8e2537a8d135792e90e4f2ce0eb838cc"
+
+chalk@^1.1.0, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+clap@^1.0.9:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.2.tgz#316545bf22229225a2cecaa6824cd2f56a9709ed"
+  dependencies:
+    chalk "^1.1.3"
+
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+coa@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
+  dependencies:
+    q "^1.1.2"
+
+color-convert@^1.3.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.0.0, color-name@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
+
+color-string@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+  dependencies:
+    color-name "^1.0.0"
+
+color@^0.11.0:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@0.5.x:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"
+
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
+core-js@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
+
+css-color-list@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/css-color-list/-/css-color-list-0.0.1.tgz#8718e8695ae7a2cc8787be8715f1c008a7f28b15"
+  dependencies:
+    css-color-names "0.0.1"
+
+css-color-names@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.1.tgz#5d0548fa256456ede4a9a0c2ac7ab19d3eb1ad81"
+
+css-color-names@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+
+css-loader@^0.26.2:
+  version "0.26.2"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.2.tgz#a9cd4c2b1a559b45d8efc04fc311ab5d2aaccb9d"
+  dependencies:
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano ">=2.6.1 <4"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    source-list-map "^0.1.7"
+
+css-selector-tokenizer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-selector-tokenizer@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-to-react-native@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-1.0.6.tgz#728c7e774e56536558a0ecaa990d9507c43a4ac4"
+  dependencies:
+    css-color-list "0.0.1"
+    fbjs "^0.8.5"
+    nearley "^2.7.7"
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+
+"cssnano@>=2.6.1 <4":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.1.tgz#4f8d91a156f2f1c2aebb40b8fb1b5eb83d94d3b9"
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+decamelize@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+discontinuous-range@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
+
+electron-to-chromium@^1.2.3:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.2.4.tgz#9751cbea89fa120bf88c226ba41eb8d0b6f1b597"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+esprima@^2.6.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+fastparse@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+
+fbjs@^0.8.5, fbjs@^0.8.7, fbjs@^0.8.8:
+  version "0.8.9"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+
+function-bind@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
+
+glamor@^2.20.12, glamor@^2.20.24:
+  version "2.20.24"
+  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.24.tgz#a299af2eec687322634ba38e4a0854d8743d2041"
+  dependencies:
+    babel-runtime "^6.18.0"
+    fbjs "^0.8.8"
+    object-assign "^4.1.0"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+html-comment-regex@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
+
+hyphenate-style-name@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
+
+iconv-lite@~0.4.13:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+
+icss-replace-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+
+inline-style-prefixer@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7"
+  dependencies:
+    bowser "^1.0.0"
+    hyphenate-style-name "^1.0.1"
+
+is-absolute-url@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
+
+is-function@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
+
+is-plain-obj@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+
+is-plain-object@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.1.tgz#4d7ca539bc9db9b737b8acb612f2318ef92f294f"
+  dependencies:
+    isobject "^1.0.0"
+
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-svg@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
+  dependencies:
+    html-comment-regex "^1.1.0"
+
+isobject@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-1.0.2.tgz#f0f9b8ce92dd540fa0740882e3835a2e022ec78a"
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+js-base64@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
+
+js-tokens@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
+
+js-yaml@~3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+loader-utils@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.0.2.tgz#a9f923c865a974623391a8602d031137fad74830"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+
+lodash.memoize@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+
+lodash.uniq@^4.3.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+
+loose-envify@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+macaddress@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
+
+marky@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/marky/-/marky-1.1.3.tgz#b5b914c661f73355862a77acf21aadfc60745e37"
+
+math-expression-evaluator@^1.2.14:
+  version "1.2.16"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+mkdirp@~0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+nearley@^2.7.7:
+  version "2.7.13"
+  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.7.13.tgz#ae19927cc821a4b517de91962db9ed0e90d991fa"
+  dependencies:
+    nomnom "~1.6.2"
+    railroad-diagrams "^1.0.0"
+    randexp "^0.4.2"
+
+node-fetch@^1.0.1:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+nomnom@~1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.6.2.tgz#84a66a260174408fc5b77a18f888eccc44fb6971"
+  dependencies:
+    colors "0.5.x"
+    underscore "~1.4.4"
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+
+normalize-url@^1.4.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.0.tgz#c2bb50035edee62cd81edb2d45da68dc25e3423e"
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.0"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+postcss-calc@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
+  dependencies:
+    postcss "^5.0.2"
+    postcss-message-helpers "^2.0.0"
+    reduce-css-calc "^1.2.6"
+
+postcss-colormin@^2.1.8:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d"
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.0.2.tgz#02be520e91571ffb10738766a981d5770989bb32"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  dependencies:
+    postcss "^5.0.4"
+    uniqid "^4.0.0"
+
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz#23d90cd127b0a77994915332739034a1a4f3d658"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
+  dependencies:
+    browserslist "^1.5.2"
+    caniuse-api "^1.5.2"
+    postcss "^5.0.4"
+    postcss-selector-parser "^2.2.2"
+    vendors "^1.0.0"
+
+postcss-message-helpers@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
+
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
+  dependencies:
+    alphanum-sort "^1.0.2"
+    has "^1.0.1"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
+postcss-modules-extract-imports@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-modules-local-by-default@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-scope@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-values@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1"
+  dependencies:
+    icss-replace-symbols "^1.0.2"
+    postcss "^5.0.14"
+
+postcss-normalize-charset@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
+postcss-reduce-idents@^2.2.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^2.1.1:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
+postcss-zindex@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.15:
+  version "5.2.15"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.15.tgz#a9e8685e50e06cc5b3fdea5297273246c26f5b30"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
+prepend-http@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+promise@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
+  dependencies:
+    asap "~2.0.3"
+
+q@^1.1.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+query-string@^4.1.0:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.2.tgz#ec0fd765f58a50031a3968c2431386f8947a5cdd"
+  dependencies:
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
+railroad-diagrams@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
+
+randexp@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.4.tgz#ba68265f4a9f9e85f5814d34e160291f939f168e"
+  dependencies:
+    discontinuous-range "1.0.0"
+    ret "~0.1.10"
+
+reduce-css-calc@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
+  dependencies:
+    balanced-match "^0.4.2"
+    math-expression-evaluator "^1.2.14"
+    reduce-function-call "^1.0.1"
+
+reduce-function-call@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
+  dependencies:
+    balanced-match "^0.4.2"
+
+regenerate@^1.2.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
+
+regenerator-runtime@^0.10.0:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  dependencies:
+    jsesc "~0.5.0"
+
+ret@~0.1.10:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.13.tgz#38c2702ece654978941edd8b7dfac6aeeef4067d"
+
+sax@~1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
+
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+source-list-map@^0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
+source-map@^0.5.3, source-map@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+
+strip-ansi@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+style-loader@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.2.tgz#74533384cf698c7104c7951150b49717adc2f3bb"
+  dependencies:
+    loader-utils "^1.0.2"
+
+styled-components@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-1.4.3.tgz#83fa44e553882aaa3ddc4363ccc435814d690706"
+  dependencies:
+    buffer "^5.0.2"
+    css-to-react-native "^1.0.6"
+    fbjs "^0.8.7"
+    glamor "^2.20.12"
+    inline-style-prefixer "^2.0.5"
+    is-function "^1.0.1"
+    is-plain-object "^2.0.1"
+    supports-color "^3.1.2"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+supports-color@^3.1.2, supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+svgo@^0.7.0:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.3.1"
+    js-yaml "~3.7.0"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+ua-parser-js@^0.7.9:
+  version "0.7.12"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
+
+underscore@~1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+
+uniqid@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.1.tgz#89220ddf6b751ae52b5f72484863528596bb84c1"
+  dependencies:
+    macaddress "^0.2.8"
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+
+vendors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+
+whatwg-fetch@>=0.10.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e"
+
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"

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

@@ -1,48 +1,54 @@
 exports[`apis/AppRegistry/renderApplication getApplication 1`] = `
-"<style id=\"react-native-stylesheet\">
-/* React Native StyleSheet*/
-html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}
-body{margin:0}
-button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
-input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}
-@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform: rotate(0deg); transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg); transform: rotate(360deg);}}
-@keyframes rn-ProgressBar-animation{0%{-webkit-transform: translateX(-100%); transform: translateX(-100%);}100%{-webkit-transform: translateX(400%); transform: translateX(400%);}}
-.rn-pointerEvents\\:auto,.rn_pointerEvents\\:box-only,.rn-pointerEvents\\:box-none *{pointer-events:auto}.rn-pointerEvents\\:none,.rn_pointerEvents\\:box-only *,.rn-pointerEvents\\:box-none{pointer-events:none}
-.rn-bottom\\:0px{bottom:0px}
-.rn-left\\:0px{left:0px}
-.rn-position\\:absolute{position:absolute}
-.rn-right\\:0px{right:0px}
-.rn-top\\:0px{top:0px}
-.rn-alignItems\\:stretch{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
-.rn-backgroundColor\\:transparent{background-color:transparent}
-.rn-borderTopStyle\\:solid{border-top-style:solid}
-.rn-borderRightStyle\\:solid{border-right-style:solid}
-.rn-borderBottomStyle\\:solid{border-bottom-style:solid}
-.rn-borderLeftStyle\\:solid{border-left-style:solid}
-.rn-borderTopWidth\\:0px{border-top-width:0px}
-.rn-borderRightWidth\\:0px{border-right-width:0px}
-.rn-borderBottomWidth\\:0px{border-bottom-width:0px}
-.rn-borderLeftWidth\\:0px{border-left-width:0px}
-.rn-boxSizing\\:border-box{-moz-box-sizing:border-box;box-sizing:border-box}
-.rn-color\\:inherit{color:inherit}
-.rn-display\\:flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
-.rn-flexBasis\\:auto{-ms-preferred-size:auto;-webkit-flex-basis:auto;flex-basis:auto}
-.rn-flexDirection\\:column{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
-.rn-font\\:inherit{font:inherit}
-.rn-listStyle\\:none{list-style:none}
-.rn-marginTop\\:0px{margin-top:0px}
-.rn-marginRight\\:0px{margin-right:0px}
-.rn-marginBottom\\:0px{margin-bottom:0px}
-.rn-marginLeft\\:0px{margin-left:0px}
-.rn-minHeight\\:0px{min-height:0px}
-.rn-minWidth\\:0px{min-width:0px}
-.rn-paddingTop\\:0px{padding-top:0px}
-.rn-paddingRight\\:0px{padding-right:0px}
-.rn-paddingBottom\\:0px{padding-bottom:0px}
-.rn-paddingLeft\\:0px{padding-left:0px}
-.rn-position\\:relative{position:relative}
-.rn-textAlign\\:inherit{text-align:inherit}
-.rn-textDecoration\\:none{text-decoration:none}
-.rn-flexShrink\\:0{-ms-flex-negative:0px;-webkit-flex-shrink:0px;flex-shrink:0}
+"<style id=\"react-native-stylesheet-static\">
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)};100%{-webkit-transform:translateX(400%);transform:translateX(400%)};}
+.rn-pointerEvents-105ug2t{pointer-events:auto;}
+.rn-pointerEvents-12vffkv{pointer-events:none;}
+.rn-pointerEvents-12vffkv *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
+.rn-pointerEvents-633pao{pointer-events:none;}
+</style>
+<style id=\"react-native-stylesheet\">
+.rn-bottom-1p0dtai{bottom:0px}
+.rn-left-1d2f490{left:0px}
+.rn-position-u8s1d{position:absolute}
+.rn-position-bnwqim{position:relative}
+.rn-right-zchlnj{right:0px}
+.rn-top-ipm5af{top:0px}
+.rn-alignItems-1oszu61{-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
+.rn-backgroundColor-wib322{background-color:transparent}
+.rn-borderTopStyle-1efd50x{border-top-style:solid}
+.rn-borderRightStyle-14skgim{border-right-style:solid}
+.rn-borderBottomStyle-rull8r{border-bottom-style:solid}
+.rn-borderLeftStyle-mm0ijv{border-left-style:solid}
+.rn-borderTopWidth-13yce4e{border-top-width:0px}
+.rn-borderRightWidth-fnigne{border-right-width:0px}
+.rn-borderBottomWidth-ndvcnb{border-bottom-width:0px}
+.rn-borderLeftWidth-gxnn5r{border-left-width:0px}
+.rn-boxSizing-deolkf{box-sizing:border-box}
+.rn-color-homxoj{color:inherit}
+.rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
+.rn-flexShrink-1qe8dj5{-webkit-flex-shrink:0;flex-shrink:0}
+.rn-flexBasis-1mlwlqe{-webkit-flex-basis:auto;flex-basis:auto}
+.rn-flexDirection-eqz5dr{-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
+.rn-font-1lw9tu2{font:inherit}
+.rn-listStyle-1ebb2ja{list-style:none}
+.rn-marginTop-1mnahxq{margin-top:0px}
+.rn-marginRight-61z16t{margin-right:0px}
+.rn-marginBottom-p1pxzi{margin-bottom:0px}
+.rn-marginLeft-11wrixw{margin-left:0px}
+.rn-minHeight-ifefl9{min-height:0px}
+.rn-minWidth-bcqeeo{min-width:0px}
+.rn-paddingTop-wk8lta{padding-top:0px}
+.rn-paddingRight-9aemit{padding-right:0px}
+.rn-paddingBottom-1mdbw0j{padding-bottom:0px}
+.rn-paddingLeft-gy4na3{padding-left:0px}
+.rn-textAlign-1ttztb7{text-align:inherit}
+.rn-textDecoration-bauka4{text-decoration:none}
 </style>"
 `;

src/apis/AppRegistry/index.js

@@ -8,7 +8,7 @@
 
 import { Component } from 'react';
 import invariant from 'fbjs/lib/invariant';
-import { unmountComponentAtNode } from 'react-dom/lib/ReactMount';
+import { unmountComponentAtNode } from 'react-dom';
 import renderApplication, { getApplication } from './renderApplication';
 
 const emptyObject = {};

src/apis/Linking/index.js

@@ -1,10 +1,19 @@
 const Linking = {
   addEventListener() {},
   removeEventListener() {},
-  canOpenUrl() { return true; },
-  getInitialUrl() { return ''; },
+  canOpenURL() {
+    return Promise.resolve(true);
+  },
+  getInitialURL() {
+    return Promise.resolve('');
+  },
   openURL(url) {
-    iframeOpen(url);
+    try {
+      iframeOpen(url);
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
   }
 };
 

src/apis/StyleSheet/StyleManager.js

@@ -0,0 +1,127 @@
+import asap from 'asap';
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import generateCss from './generateCss';
+import hash from './hash';
+import staticCss from './staticCss';
+
+const emptyObject = {};
+const STYLE_ELEMENT_ID = 'react-native-stylesheet';
+
+const createClassName = (prop, value) => {
+  const hashed = hash(prop + value);
+  return process.env.NODE_ENV !== 'production' ? `rn-${prop}-${hashed}` : `rn-${hashed}`;
+};
+
+const createCssRule = (className, prop, value) => {
+  const css = generateCss({ [prop]: value });
+  const selector = `.${className}`;
+  return `${selector}{${css}}`;
+};
+
+const pointerEvents = {
+  auto: createClassName('pointerEvents', 'auto'),
+  boxNone: createClassName('pointerEvents', 'box-none'),
+  boxOnly: createClassName('pointerEvents', 'box-only'),
+  none: createClassName('pointerEvents', 'none')
+};
+
+const pointerEventsCss =
+  `.${pointerEvents.auto}{pointer-events:auto;}\n` +
+  `.${pointerEvents.boxNone}{pointer-events:none;}\n` +
+  `.${pointerEvents.boxNone} *{pointer-events:auto;}\n` +
+  `.${pointerEvents.boxOnly}{pointer-events:auto;}\n` +
+  `.${pointerEvents.boxOnly} *{pointer-events:none;}\n` +
+  `.${pointerEvents.none}{pointer-events:none;}`;
+
+class StyleManager {
+  constructor() {
+    // custom pointer event values are implemented using descendent selectors,
+    // so we manually create the CSS and pre-register the declarations
+    const pointerEventsPropName = 'pointerEvents';
+    this.cache = {
+      byClassName: {
+        [pointerEvents.auto]: { prop: pointerEventsPropName, value: 'auto' },
+        [pointerEvents.boxNone]: { prop: pointerEventsPropName, value: 'box-none' },
+        [pointerEvents.boxOnly]: { prop: pointerEventsPropName, value: 'box-only' },
+        [pointerEvents.none]: { prop: pointerEventsPropName, value: 'none' }
+      },
+      byProp: {
+        pointerEvents: {
+          'auto': pointerEvents.auto,
+          'box-none': pointerEvents.boxNone,
+          'box-only': pointerEvents.boxOnly,
+          'none': pointerEvents.none
+        }
+      }
+    };
+
+    // on the client we check for an existing style sheet before injecting style sheets
+    if (canUseDOM) {
+      const prerenderedStyleSheet = document.getElementById(STYLE_ELEMENT_ID);
+      if (prerenderedStyleSheet) {
+        this.mainSheet = prerenderedStyleSheet;
+      } else {
+        document.head.insertAdjacentHTML('afterbegin', this.getStyleSheetHtml());
+        this.mainSheet = document.getElementById(STYLE_ELEMENT_ID);
+      }
+    }
+  }
+
+  getClassName(prop, value) {
+    const cache = this.cache.byProp;
+    return cache[prop] && cache[prop].hasOwnProperty(value) && cache[prop][value];
+  }
+
+  getDeclaration(className) {
+    const cache = this.cache.byClassName;
+    return cache[className] || emptyObject;
+  }
+
+  getStyleSheetHtml() {
+    const cache = this.cache.byProp;
+
+    const mainSheetTextContext = Object.keys(cache).reduce((rules, prop) => {
+      if (prop !== 'pointerEvents') {
+        Object.keys(cache[prop]).forEach((value) => {
+          const className = this.getClassName(prop, value);
+          rules.push(createCssRule(className, prop, value));
+        });
+      }
+      return rules;
+    }, []).join('\n');
+
+    const staticSheet = `<style id="react-native-stylesheet-static">\n${staticCss}\n${pointerEventsCss}\n</style>`;
+    const mainSheet = `<style id="${STYLE_ELEMENT_ID}">\n${mainSheetTextContext}\n</style>`;
+    return `${staticSheet}\n${mainSheet}`;
+  }
+
+  setDeclaration(prop, value) {
+    let className = this.getClassName(prop, value);
+    if (!className) {
+      className = createClassName(prop, value);
+      this._addToCache(className, prop, value);
+      if (canUseDOM) {
+        asap(() => {
+          const sheet = this.mainSheet.sheet;
+          // avoid injecting if the rule already exists (e.g., server rendered, hot reload)
+          if (this.mainSheet.textContent.indexOf(className) === -1) {
+            const rule = createCssRule(className, prop, value);
+            sheet.insertRule(rule, sheet.cssRules.length);
+          }
+        });
+      }
+    }
+    return className;
+  }
+
+  _addToCache(className, prop, value) {
+    const cache = this.cache;
+    if (!cache.byProp[prop]) {
+      cache.byProp[prop] = {};
+    }
+    cache.byProp[prop][value] = className;
+    cache.byClassName[className] = { prop, value };
+  }
+}
+
+module.exports = StyleManager;

src/apis/StyleSheet/StyleRegistry.js

@@ -0,0 +1,158 @@
+/**
+ * WARNING: changes to this file in particular can cause significant changes to
+ * the results of render performance benchmarks.
+ */
+import createReactDOMStyle from './createReactDOMStyle';
+import flattenArray from '../../modules/flattenArray';
+import flattenStyle from './flattenStyle';
+import I18nManager from '../I18nManager';
+import mapKeyValue from '../../modules/mapKeyValue';
+import prefixInlineStyles from './prefixInlineStyles';
+import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry';
+import StyleManager from './StyleManager';
+
+const createCacheKey = (id) => {
+  const prefix = I18nManager.isRTL ? 'rtl' : 'ltr';
+  return `${prefix}-${id}`;
+};
+
+const classListToString = (list) => list.join(' ').trim();
+
+class StyleRegistry {
+  constructor() {
+    this.cache = {};
+    this.styleManager = new StyleManager();
+  }
+
+  getStyleSheetHtml() {
+    return this.styleManager.getStyleSheetHtml();
+  }
+
+  /**
+   * Registers and precaches a React Native style object to HTML class names
+   */
+  register(flatStyle) {
+    const id = ReactNativePropRegistry.register(flatStyle);
+    const key = createCacheKey(id);
+    const style = createReactDOMStyle(flatStyle);
+    const classList = mapKeyValue(style, (prop, value) => {
+      if (value != null) {
+        return this.styleManager.setDeclaration(prop, value);
+      }
+    });
+    const className = classList.join(' ').trim();
+    this.cache[key] = { classList, className };
+    return id;
+  }
+
+  /**
+   * Resolves a React Native style object to DOM attributes
+   */
+  resolve(reactNativeStyle) {
+    if (!reactNativeStyle) {
+      return undefined;
+    }
+
+    // fast and cachable
+    if (typeof reactNativeStyle === 'number') {
+      const key = createCacheKey(reactNativeStyle);
+      return this._resolveStyleIfNeeded(key, reactNativeStyle);
+    }
+
+    // resolve a plain RN style object
+    if (!Array.isArray(reactNativeStyle)) {
+      return this._resolveStyle(reactNativeStyle);
+    }
+
+    // flatten the style array
+    // cache resolved props when all styles are registered
+    // otherwise fallback to resolving
+    const flatArray = flattenArray(reactNativeStyle);
+    let isArrayOfNumbers = true;
+    for (let i = 0; i < flatArray.length; i++) {
+      if (typeof flatArray[i] !== 'number') {
+        isArrayOfNumbers = false;
+        break;
+      }
+    }
+    const key = isArrayOfNumbers ? createCacheKey(flatArray.join('-')) : null;
+    return this._resolveStyleIfNeeded(key, flatArray);
+  }
+
+  /**
+   * Resolves a React Native style object to DOM attributes, accounting for
+   * the existing styles applied to the DOM node
+   */
+  resolveStateful(reactNativeStyle, domClassList) {
+    const previousReactNativeStyle = {};
+    const preservedClassNames = [];
+
+    // Convert the existing classList to a React Native style and preserve any
+    // unrecognized classNames.
+    domClassList.forEach((className) => {
+      const { prop, value } = this.styleManager.getDeclaration(className);
+      if (prop) {
+        previousReactNativeStyle[prop] = value;
+      } else {
+        preservedClassNames.push(className);
+      }
+    });
+
+    // Resolve the two React Native styles.
+    const { classList, style = {} } = this.resolve([ previousReactNativeStyle, reactNativeStyle ]);
+
+    // Because this is used in stateful operations we need to remove any
+    // existing inline styles that would override the classNames.
+    classList.forEach((className) => {
+      const { prop } = this.styleManager.getDeclaration(className);
+      style[prop] = null;
+    });
+
+    classList.push(preservedClassNames);
+
+    const className = classListToString(classList);
+    return { className, style };
+  }
+
+  /**
+   * Resolves a React Native style object
+   */
+  _resolveStyle(reactNativeStyle) {
+    const domStyle = createReactDOMStyle(flattenStyle(reactNativeStyle));
+
+    const props = Object.keys(domStyle).reduce((props, styleProp) => {
+      const value = domStyle[styleProp];
+      if (value != null) {
+        const className = this.styleManager.getClassName(styleProp, value);
+        if (className) {
+          props.classList.push(className);
+        } else {
+          // 4x slower render
+          props.style[styleProp] = value;
+        }
+      }
+      return props;
+    }, { classList: [], style: {} });
+
+    const style = prefixInlineStyles(props.style);
+    props.className = classListToString(props.classList);
+    props.style = style;
+    return props;
+  }
+
+  /**
+  * Caching layer over 'resolveStyle'
+   */
+  _resolveStyleIfNeeded(key, style) {
+    if (key) {
+      if (!this.cache[key]) {
+        // slow: convert style object to props and cache
+        this.cache[key] = this._resolveStyle(style);
+      }
+      return this.cache[key];
+    }
+    return this._resolveStyle(style);
+  }
+}
+
+module.exports = StyleRegistry;

src/apis/StyleSheet/StyleSheetValidation.js

@@ -11,6 +11,7 @@ import { PropTypes } from 'react'
 import ImageStylePropTypes from '../../components/Image/ImageStylePropTypes'
 import ReactPropTypeLocations from 'react-dom/lib/ReactPropTypeLocations'
 import ReactPropTypesSecret from 'react-dom/lib/ReactPropTypesSecret'
+import TextInputStylePropTypes from '../../components/TextInput/TextInputStylePropTypes'
 import TextStylePropTypes from '../../components/Text/TextStylePropTypes'
 import ViewStylePropTypes from '../../components/View/ViewStylePropTypes'
 import warning from 'fbjs/lib/warning'
@@ -66,16 +67,16 @@ var allStylePropTypes = {};
 
 StyleSheetValidation.addValidStylePropTypes(ImageStylePropTypes)
 StyleSheetValidation.addValidStylePropTypes(TextStylePropTypes)
+StyleSheetValidation.addValidStylePropTypes(TextInputStylePropTypes)
 StyleSheetValidation.addValidStylePropTypes(ViewStylePropTypes)
 StyleSheetValidation.addValidStylePropTypes({
   appearance: PropTypes.string,
   clear: PropTypes.string,
   cursor: PropTypes.string,
-  display: PropTypes.string,
   float: PropTypes.oneOf([ 'left', 'none', 'right' ]),
   font: PropTypes.string, /* @private */
   listStyle: PropTypes.string,
-  WebkitOverflowScrolling: PropTypes.string /* @private */
+  pointerEvents: PropTypes.string
 })
 
 module.exports = StyleSheetValidation

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

@@ -0,0 +1,28 @@
+/* eslint-env jasmine, jest */
+
+import StyleManager from '../StyleManager';
+
+let styleManager;
+
+describe('apis/StyleSheet/StyleManager', () => {
+  beforeEach(() => {
+    styleManager = new StyleManager();
+  });
+
+  test('getClassName', () => {
+    expect(styleManager.getClassName('pointerEvents', 'box-only')).toMatchSnapshot();
+    const className = styleManager.setDeclaration('width', '100px');
+    expect(styleManager.getClassName('width', '100px')).toEqual(className);
+  });
+
+  test('getDeclaration', () => {
+    const className = styleManager.setDeclaration('width', '100px');
+    expect(styleManager.getDeclaration(className)).toEqual({ prop: 'width', value: '100px' });
+  });
+
+  test('getStyleSheetHtml', () => {
+    expect(styleManager.getStyleSheetHtml()).toMatchSnapshot();
+    styleManager.setDeclaration('width', '100px');
+    expect(styleManager.getStyleSheetHtml()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,68 @@
+/* eslint-env jasmine, jest */
+
+import StyleRegistry from '../StyleRegistry';
+
+let styleRegistry;
+
+describe('apis/StyleSheet/StyleRegistry', () => {
+  beforeEach(() => {
+    styleRegistry = new StyleRegistry();
+  });
+
+  test('register', () => {
+    const style = { opacity: 0 };
+    const id = styleRegistry.register(style);
+    expect(typeof id === 'number').toBe(true);
+  });
+
+  describe('resolve', () => {
+    const styleA = { borderWidth: 0, borderColor: 'red', width: 100 };
+    const styleB = { position: 'absolute', left: 50, pointerEvents: 'box-only' };
+    const styleC = { width: 200 };
+
+    const testResolve = (a, b, c) => {
+      // no common properties, different resolving order, same result
+      const resolve1 = styleRegistry.resolve([ a, b ]);
+      expect(resolve1).toMatchSnapshot();
+      const resolve2 = styleRegistry.resolve([ b, a ]);
+      expect(resolve1).toEqual(resolve2);
+
+      // common properties, different resolving order, different result
+      const resolve3 = styleRegistry.resolve([ a, b, c ]);
+      expect(resolve3).toMatchSnapshot();
+      const resolve4 = styleRegistry.resolve([ c, a, b ]);
+      expect(resolve4).toMatchSnapshot();
+      expect(resolve3).not.toEqual(resolve4);
+    };
+
+    test('with register, resolves to className', () => {
+      const a = styleRegistry.register(styleA);
+      const b = styleRegistry.register(styleB);
+      const c = styleRegistry.register(styleC);
+      testResolve(a, b, c);
+    });
+
+    test('with register, resolves to mixed', () => {
+      const a = styleA;
+      const b = styleRegistry.register(styleB);
+      const c = styleRegistry.register(styleC);
+      testResolve(a, b, c);
+    });
+
+    test('without register, resolves to inline styles', () => {
+      testResolve(styleA, styleB, styleC);
+    });
+  });
+
+  test('resolveStateful', () => {
+    // generate a classList to act as pre-existing DOM state
+    const mockStyle = styleRegistry.register({ borderWidth: 0, borderColor: 'red', width: 100 });
+    const { classList: domClassList } = styleRegistry.resolve(mockStyle);
+    domClassList.unshift('external-className');
+    expect(domClassList).toMatchSnapshot();
+
+    // test result
+    const result = styleRegistry.resolveStateful({ borderWidth: 1, opacity: 1 }, domClassList);
+    expect(result).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,41 @@
+exports[`apis/StyleSheet/StyleManager getClassName 1`] = `"rn-pointerEvents-ah5dr5"`;
+
+exports[`apis/StyleSheet/StyleManager getStyleSheetHtml 1`] = `
+"<style id=\"react-native-stylesheet-static\">
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)};100%{-webkit-transform:translateX(400%);transform:translateX(400%)};}
+.rn-pointerEvents-105ug2t{pointer-events:auto;}
+.rn-pointerEvents-12vffkv{pointer-events:none;}
+.rn-pointerEvents-12vffkv *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
+.rn-pointerEvents-633pao{pointer-events:none;}
+</style>
+<style id=\"react-native-stylesheet\">
+
+</style>"
+`;
+
+exports[`apis/StyleSheet/StyleManager getStyleSheetHtml 2`] = `
+"<style id=\"react-native-stylesheet-static\">
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)};100%{-webkit-transform:translateX(400%);transform:translateX(400%)};}
+.rn-pointerEvents-105ug2t{pointer-events:auto;}
+.rn-pointerEvents-12vffkv{pointer-events:none;}
+.rn-pointerEvents-12vffkv *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
+.rn-pointerEvents-633pao{pointer-events:none;}
+</style>
+<style id=\"react-native-stylesheet\">
+.rn-width-b8lwoo{width:100px}
+</style>"
+`;

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

@@ -0,0 +1,227 @@
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to className 1`] = `
+Object {
+  "classList": Array [
+    "rn-borderTopColor-1gxhl28",
+    "rn-borderRightColor-knoah9",
+    "rn-borderBottomColor-1ani3fp",
+    "rn-borderLeftColor-ribj9x",
+    "rn-borderTopWidth-13yce4e",
+    "rn-borderRightWidth-fnigne",
+    "rn-borderBottomWidth-ndvcnb",
+    "rn-borderLeftWidth-gxnn5r",
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+    "rn-width-b8lwoo",
+  ],
+  "className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-b8lwoo",
+  "style": Object {},
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to className 2`] = `
+Object {
+  "classList": Array [
+    "rn-borderTopColor-1gxhl28",
+    "rn-borderRightColor-knoah9",
+    "rn-borderBottomColor-1ani3fp",
+    "rn-borderLeftColor-ribj9x",
+    "rn-borderTopWidth-13yce4e",
+    "rn-borderRightWidth-fnigne",
+    "rn-borderBottomWidth-ndvcnb",
+    "rn-borderLeftWidth-gxnn5r",
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+    "rn-width-l0gwng",
+  ],
+  "className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-l0gwng",
+  "style": Object {},
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to className 3`] = `
+Object {
+  "classList": Array [
+    "rn-borderTopColor-1gxhl28",
+    "rn-borderRightColor-knoah9",
+    "rn-borderBottomColor-1ani3fp",
+    "rn-borderLeftColor-ribj9x",
+    "rn-borderTopWidth-13yce4e",
+    "rn-borderRightWidth-fnigne",
+    "rn-borderBottomWidth-ndvcnb",
+    "rn-borderLeftWidth-gxnn5r",
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+    "rn-width-b8lwoo",
+  ],
+  "className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-b8lwoo",
+  "style": Object {},
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to mixed 1`] = `
+Object {
+  "classList": Array [
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+  ],
+  "className": "rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "width": "100px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to mixed 2`] = `
+Object {
+  "classList": Array [
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+    "rn-width-l0gwng",
+  ],
+  "className": "rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-l0gwng",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to mixed 3`] = `
+Object {
+  "classList": Array [
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+  ],
+  "className": "rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "width": "100px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve without register, resolves to inline styles 1`] = `
+Object {
+  "classList": Array [
+    "rn-pointerEvents-ah5dr5",
+  ],
+  "className": "rn-pointerEvents-ah5dr5",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "left": "50px",
+    "position": "absolute",
+    "width": "100px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve without register, resolves to inline styles 2`] = `
+Object {
+  "classList": Array [
+    "rn-pointerEvents-ah5dr5",
+  ],
+  "className": "rn-pointerEvents-ah5dr5",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "left": "50px",
+    "position": "absolute",
+    "width": "200px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve without register, resolves to inline styles 3`] = `
+Object {
+  "classList": Array [
+    "rn-pointerEvents-ah5dr5",
+  ],
+  "className": "rn-pointerEvents-ah5dr5",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "left": "50px",
+    "position": "absolute",
+    "width": "100px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolveStateful 1`] = `
+Array [
+  "external-className",
+  "rn-borderTopColor-1gxhl28",
+  "rn-borderRightColor-knoah9",
+  "rn-borderBottomColor-1ani3fp",
+  "rn-borderLeftColor-ribj9x",
+  "rn-borderTopWidth-13yce4e",
+  "rn-borderRightWidth-fnigne",
+  "rn-borderBottomWidth-ndvcnb",
+  "rn-borderLeftWidth-gxnn5r",
+  "rn-width-b8lwoo",
+]
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolveStateful 2`] = `
+Object {
+  "className": "rn-borderBottomColor-1ani3fp rn-borderBottomWidth-ndvcnb rn-borderLeftColor-ribj9x rn-borderLeftWidth-gxnn5r rn-borderRightColor-knoah9 rn-borderRightWidth-fnigne rn-borderTopColor-1gxhl28 rn-borderTopWidth-13yce4e rn-width-b8lwoo external-className",
+  "style": Object {
+    "borderBottomColor": null,
+    "borderBottomWidth": null,
+    "borderLeftColor": null,
+    "borderLeftWidth": null,
+    "borderRightColor": null,
+    "borderRightWidth": null,
+    "borderTopColor": null,
+    "borderTopWidth": null,
+    "opacity": 1,
+    "width": null,
+  },
+}
+`;

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

@@ -8,6 +8,7 @@ Object {
   "borderWidthRight": "3px",
   "boxShadow": "1px 1px 1px 1px #000, 1px 2px 0px rgba(255,0,0,1)",
   "display": "flex",
+  "flexShrink": 0,
   "marginBottom": "0px",
   "marginTop": "0px",
   "opacity": 0,

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

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

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

@@ -1,14 +1,23 @@
 exports[`apis/StyleSheet renderToString 1`] = `
-"<style id=\"react-native-stylesheet\">
-.rn-borderTopColor\\:red{border-top-color:red}
-.rn-borderRightColor\\:red{border-right-color:red}
-.rn-borderBottomColor\\:red{border-bottom-color:red}
-.rn-borderLeftColor\\:red{border-left-color:red}
-.rn-borderTopWidth\\:0px{border-top-width:0px}
-.rn-borderRightWidth\\:0px{border-right-width:0px}
-.rn-borderBottomWidth\\:0px{border-bottom-width:0px}
-.rn-borderLeftWidth\\:0px{border-left-width:0px}
-.rn-left\\:50px{left:50px}
-.rn-position\\:absolute{position:absolute}
+"<style id=\"react-native-stylesheet-static\">
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)};100%{-webkit-transform:translateX(400%);transform:translateX(400%)};}
+.rn-pointerEvents-105ug2t{pointer-events:auto;}
+.rn-pointerEvents-12vffkv{pointer-events:none;}
+.rn-pointerEvents-12vffkv *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
+.rn-pointerEvents-633pao{pointer-events:none;}
+</style>
+<style id=\"react-native-stylesheet\">
+.rn-bottom-1p0dtai{bottom:0px}
+.rn-left-1d2f490{left:0px}
+.rn-position-u8s1d{position:absolute}
+.rn-right-zchlnj{right:0px}
+.rn-top-ipm5af{top:0px}
 </style>"
 `;

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

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

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

@@ -45,4 +45,21 @@ describe('apis/StyleSheet/expandStyle', () => {
 
     expect(expandStyle(initial)).toEqual(expected);
   });
+
+  test('flex', () => {
+    expect(expandStyle({ display: 'flex' }))
+      .toEqual({ display: 'flex', flexShrink: 0 });
+
+    expect(expandStyle({ display: 'flex', flex: 1 }))
+      .toEqual({ display: 'flex', flexGrow: 1, flexShrink: 1, flexBasis: 'auto' });
+
+    expect(expandStyle({ display: 'flex', flex: 10 }))
+      .toEqual({ display: 'flex', flexGrow: 10, flexShrink: 1, flexBasis: 'auto' });
+
+    expect(expandStyle({ display: 'flex', flexShrink: 1 }))
+      .toEqual({ display: 'flex', flexShrink: 1 });
+
+    expect(expandStyle({ display: 'flex', flex: 1, flexShrink: 2 }))
+      .toEqual({ display: 'flex', flexGrow: 1, flexShrink: 2, flexBasis: 'auto' });
+  });
 });

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

@@ -21,16 +21,9 @@ const style = {
   paddingRight: 10,
   right: 2,
   textAlign: 'left',
-  textShadowOffset: { width: '1rem', height: 10 },
-  writingDirection: 'ltr'
+  textShadowOffset: { width: '1rem', height: 10 }
 };
 
-const styleNoI18n = Object.keys(style).reduce((acc, prop) => {
-  const newProp = `${prop}$noI18n`;
-  acc[newProp] = style[prop];
-  return acc;
-}, {});
-
 describe('apis/StyleSheet/i18nStyle', () => {
   describe('LTR mode', () => {
     beforeEach(() => {
@@ -44,9 +37,6 @@ describe('apis/StyleSheet/i18nStyle', () => {
     test('does not auto-flip', () => {
       expect(i18nStyle(style)).toMatchSnapshot();
     });
-    test('normalizes properties', () => {
-      expect(i18nStyle(styleNoI18n)).toMatchSnapshot();
-    });
   });
 
   describe('RTL mode', () => {
@@ -61,8 +51,5 @@ describe('apis/StyleSheet/i18nStyle', () => {
     test('does auto-flip', () => {
       expect(i18nStyle(style)).toMatchSnapshot();
     });
-    test('normalizes properties', () => {
-      expect(i18nStyle(styleNoI18n)).toMatchSnapshot();
-    });
   });
 });

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

@@ -1,7 +1,6 @@
 /* eslint-env jasmine, jest */
 
 import StyleSheet from '..';
-import StyleRegistry from '../registry';
 
 const isPlainObject = (x) => {
   const toString = Object.prototype.toString;
@@ -15,10 +14,6 @@ const isPlainObject = (x) => {
 };
 
 describe('apis/StyleSheet', () => {
-  beforeEach(() => {
-    StyleRegistry.reset();
-  });
-
   test('absoluteFill', () => {
     expect(Number.isInteger(StyleSheet.absoluteFill) === true).toBeTruthy();
   });
@@ -29,7 +24,7 @@ describe('apis/StyleSheet', () => {
 
   describe('create', () => {
     test('replaces styles with numbers', () => {
-      const style = StyleSheet.create({ root: { opacity: 1 } });
+      const style = StyleSheet.create({ root: { position: 'absolute' } });
       expect(Number.isInteger(style.root) === true).toBeTruthy();
     });
   });
@@ -43,16 +38,6 @@ describe('apis/StyleSheet', () => {
   });
 
   test('renderToString', () => {
-    StyleSheet.create({
-      a: {
-        borderWidth: 0,
-        borderColor: 'red'
-      },
-      b: {
-        position: 'absolute',
-        left: 50
-      }
-    });
     expect(StyleSheet.renderToString()).toMatchSnapshot();
   });
 });

src/apis/StyleSheet/__tests__/injector.js

@@ -1,22 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import injector from '../injector';
-
-describe('apis/StyleSheet/injector', () => {
-  beforeEach(() => {
-    document.head.insertAdjacentHTML('afterbegin', `
-      <style id="react-native-stylesheet">
-        .rn-alignItems\\:stretch{align-items:stretch;}
-        .rn-position\\:top{position:top;}
-      </style>
-    `);
-  });
-
-  test('hydrates from SSR', () => {
-    const classList = injector.getClassNames();
-    expect(classList).toEqual({
-      'rn-alignItems\\:stretch': true,
-      'rn-position\\:top': true
-    });
-  });
-});

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

@@ -1,54 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import StyleRegistry from '../registry';
-
-describe('apis/StyleSheet/registry', () => {
-  beforeEach(() => {
-    StyleRegistry.reset();
-  });
-
-  test('register', () => {
-    const style = { opacity: 0 };
-    const id = StyleRegistry.register(style);
-    expect(typeof id === 'number').toBe(true);
-  });
-
-  describe('resolve', () => {
-    const styleA = { borderWidth: 0, borderColor: 'red', width: 100 };
-    const styleB = { position: 'absolute', left: 50, pointerEvents: 'box-only' };
-    const styleC = { width: 200 };
-
-    const testResolve = (a, b, c) => {
-      // no common properties, different resolving order, same result
-      const resolve1 = StyleRegistry.resolve([ a, b ]);
-      expect(resolve1).toMatchSnapshot();
-      const resolve2 = StyleRegistry.resolve([ b, a ]);
-      expect(resolve1).toEqual(resolve2);
-
-      // common properties, different resolving order, different result
-      const resolve3 = StyleRegistry.resolve([ a, b, c ]);
-      expect(resolve3).toMatchSnapshot();
-      const resolve4 = StyleRegistry.resolve([ c, a, b ]);
-      expect(resolve4).toMatchSnapshot();
-      expect(resolve3).not.toEqual(resolve4);
-    };
-
-    test('with register, resolves to className', () => {
-      const a = StyleRegistry.register(styleA);
-      const b = StyleRegistry.register(styleB);
-      const c = StyleRegistry.register(styleC);
-      testResolve(a, b, c);
-    });
-
-    test('with register, resolves to mixed', () => {
-      const a = styleA;
-      const b = StyleRegistry.register(styleB);
-      const c = StyleRegistry.register(styleC);
-      testResolve(a, b, c);
-    });
-
-    test('without register, resolves to inline styles', () => {
-      testResolve(styleA, styleB, styleC);
-    });
-  });
-});

src/apis/StyleSheet/expandStyle.js

@@ -37,21 +37,32 @@ const alphaSortProps = (propsArray) => propsArray.sort((a, b) => {
   return 0;
 });
 
-const expandStyle = (style) => {
-  if (!style) { return emptyObject; }
-  const styleProps = Object.keys(style);
-  const sortedStyleProps = alphaSortProps(styleProps);
+const createReducer = (style, styleProps) => {
   let hasResolvedBoxShadow = false;
   let hasResolvedTextShadow = false;
 
-  const reducer = (resolvedStyle, prop) => {
+  return (resolvedStyle, prop) => {
     const value = normalizeValue(prop, style[prop]);
     if (value == null) { return resolvedStyle; }
 
     switch (prop) {
+      case 'display': {
+        resolvedStyle.display = value;
+        // default of 'flexShrink:0' has lowest precedence
+        if (
+          style.display === 'flex' &&
+          style.flex == null &&
+          style.flexShrink == null
+        ) {
+          resolvedStyle.flexShrink = 0;
+        }
+        break;
+      }
       // ignore React Native styles
       case 'elevation':
-      case 'resizeMode': {
+      case 'overlayColor':
+      case 'resizeMode':
+      case 'tintColor': {
         break;
       }
       case 'flex': {
@@ -105,7 +116,13 @@ const expandStyle = (style) => {
 
     return resolvedStyle;
   };
+};
 
+const expandStyle = (style) => {
+  if (!style) { return emptyObject; }
+  const styleProps = Object.keys(style);
+  const sortedStyleProps = alphaSortProps(styleProps);
+  const reducer = createReducer(style, styleProps);
   const resolvedStyle = sortedStyleProps.reduce(reducer, {});
   return resolvedStyle;
 };

src/apis/StyleSheet/flattenStyle.js

@@ -24,7 +24,7 @@ function flattenStyle(style) {
     return undefined;
   }
 
-  if (process.env.NODE !== 'production') {
+  if (process.env.NODE_ENV !== 'production') {
     invariant(style !== true, 'style may be false but not true');
   }
 

src/apis/StyleSheet/hash.js

@@ -0,0 +1,53 @@
+/* eslint-disable */
+/**
+ * JS Implementation of MurmurHash2
+ *
+ * @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
+ * @see http://github.com/garycourt/murmurhash-js
+ * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
+ * @see http://sites.google.com/site/murmurhash/
+ *
+ * @param {string} str ASCII only
+ * @param {number} seed Positive integer only
+ * @return {number} 32-bit positive integer hash
+ */
+
+function murmurhash2_32_gc(str, seed) {
+  var
+    l = str.length,
+    h = seed ^ l,
+    i = 0,
+    k;
+
+  while (l >= 4) {
+    k =
+      ((str.charCodeAt(i) & 0xff)) |
+      ((str.charCodeAt(++i) & 0xff) << 8) |
+      ((str.charCodeAt(++i) & 0xff) << 16) |
+      ((str.charCodeAt(++i) & 0xff) << 24);
+
+    k = (((k & 0xffff) * 0x5bd1e995) + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16));
+    k ^= k >>> 24;
+    k = (((k & 0xffff) * 0x5bd1e995) + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16));
+
+  h = (((h & 0xffff) * 0x5bd1e995) + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^ k;
+
+    l -= 4;
+    ++i;
+  }
+
+  switch (l) {
+  case 3: h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+  case 2: h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+  case 1: h ^= (str.charCodeAt(i) & 0xff);
+          h = (((h & 0xffff) * 0x5bd1e995) + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16));
+  }
+
+  h ^= h >>> 13;
+  h = (((h & 0xffff) * 0x5bd1e995) + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16));
+  h ^= h >>> 15;
+
+  return h >>> 0;
+}
+
+module.exports = (str) => murmurhash2_32_gc(str, 1).toString(36);

src/apis/StyleSheet/hyphenate.js

@@ -1,3 +1,12 @@
-const RE_1 = /([A-Z])/g;
-const RE_2 = /^ms-/;
-module.exports = (s) => s.replace(RE_1, '-$1').toLowerCase().replace(RE_2, '-ms-');
+const cache = {};
+const MS_REGEXP = /^ms-/;
+const UPPERCASE_REGEXP = /([A-Z])/g;
+
+const hyphenateStyleProp = (prop) => {
+  if (!cache.hasOwnProperty(prop)) {
+    cache[prop] = prop.replace(UPPERCASE_REGEXP, '-$&').toLowerCase().replace(MS_REGEXP, '-ms-');
+  }
+  return cache[prop];
+};
+
+module.exports = hyphenateStyleProp;

src/apis/StyleSheet/i18nStyle.js

@@ -31,10 +31,6 @@ const PROPERTIES_SWAP_LEFT_RIGHT = {
   'textAlign': true
 };
 
-const PROPERTIES_SWAP_LTR_RTL = {
-  'writingDirection': true
-};
-
 /**
  * Invert the sign of a numeric-like value
  */
@@ -43,7 +39,7 @@ const additiveInverse = (value: String | Number) => multiplyStyleLengthValue(val
 /**
  * BiDi flip the given property.
  */
-const flipProperty = (prop:String): String => {
+const flipProperty = (prop: String): String => {
   return PROPERTIES_TO_SWAP.hasOwnProperty(prop) ? PROPERTIES_TO_SWAP[prop] : prop;
 };
 
@@ -62,49 +58,35 @@ const swapLeftRight = (value:String): String => {
   return value === 'left' ? 'right' : value === 'right' ? 'left' : value;
 };
 
-const swapLtrRtl = (value:String): String => {
-  return value === 'ltr' ? 'rtl' : value === 'rtl' ? 'ltr' : value;
-};
+const i18nStyle = (originalStyle) => {
+  if (!I18nManager.isRTL) {
+    return originalStyle;
+  }
+
+  const style = originalStyle || emptyObject;
+  const nextStyle = {};
 
-const i18nStyle = (style = emptyObject) => {
-  const newStyle = {};
   for (const prop in style) {
     if (!Object.prototype.hasOwnProperty.call(style, prop)) {
       continue;
     }
 
-    const indexOfNoFlip = prop.indexOf('$noI18n');
-
-    if (I18nManager.isRTL) {
-      if (PROPERTIES_TO_SWAP[prop]) {
-        const newProp = flipProperty(prop);
-        newStyle[newProp] = style[prop];
-      } else if (PROPERTIES_SWAP_LEFT_RIGHT[prop]) {
-        newStyle[prop] = swapLeftRight(style[prop]);
-      } else if (PROPERTIES_SWAP_LTR_RTL[prop]) {
-        newStyle[prop] = swapLtrRtl(style[prop]);
-      } else if (prop === 'textShadowOffset') {
-        newStyle[prop] = style[prop];
-        newStyle[prop].width = additiveInverse(style[prop].width);
-      } else if (prop === 'transform') {
-        newStyle[prop] = style[prop].map(flipTransform);
-      } else if (indexOfNoFlip > -1) {
-        const newProp = prop.substring(0, indexOfNoFlip);
-        newStyle[newProp] = style[prop];
-      } else {
-        newStyle[prop] = style[prop];
-      }
+    if (PROPERTIES_TO_SWAP[prop]) {
+      const newProp = flipProperty(prop);
+      nextStyle[newProp] = style[prop];
+    } else if (PROPERTIES_SWAP_LEFT_RIGHT[prop]) {
+      nextStyle[prop] = swapLeftRight(style[prop]);
+    } else if (prop === 'textShadowOffset') {
+      nextStyle[prop] = style[prop];
+      nextStyle[prop].width = additiveInverse(style[prop].width);
+    } else if (prop === 'transform') {
+      nextStyle[prop] = style[prop].map(flipTransform);
     } else {
-      if (indexOfNoFlip > -1) {
-        const newProp = prop.substring(0, indexOfNoFlip);
-        newStyle[newProp] = style[prop];
-      } else {
-        newStyle[prop] = style[prop];
-      }
+      nextStyle[prop] = style[prop];
     }
   }
 
-  return newStyle;
+  return nextStyle;
 };
 
 module.exports = i18nStyle;

src/apis/StyleSheet/index.js

@@ -1,14 +1,11 @@
 import flattenStyle from './flattenStyle';
-import initialize from './initialize';
-import injector from './injector';
 import StyleRegistry from './registry';
 
-initialize();
-
 const absoluteFillObject = { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 };
+const absoluteFill = StyleRegistry.register(absoluteFillObject);
 
 module.exports = {
-  absoluteFill: StyleRegistry.register(absoluteFillObject),
+  absoluteFill,
   absoluteFillObject,
   create(styles) {
     const result = {};
@@ -22,5 +19,7 @@ module.exports = {
   },
   hairlineWidth: 1,
   flatten: flattenStyle,
-  renderToString: injector.getStyleSheetHtml
+  renderToString() {
+    return StyleRegistry.getStyleSheetHtml();
+  }
 };

src/apis/StyleSheet/initialize.js

@@ -1,39 +0,0 @@
-import injector from './injector';
-import StyleRegistry from './registry';
-
-const initialize = () => {
-  injector.addRule(
-    'reset',
-    '/* React Native StyleSheet*/\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::-webkit-inner-spin-button,input::-webkit-outer-spin-button,' +
-    'input::-webkit-search-cancel-button,input::-webkit-search-decoration,' +
-    'input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}'
-  );
-  injector.addRule(
-    'keyframes',
-    '@keyframes rn-ActivityIndicator-animation{' +
-      '0%{-webkit-transform: rotate(0deg); transform: rotate(0deg);}' +
-      '100%{-webkit-transform: rotate(360deg); transform: rotate(360deg);}' +
-    '}\n' +
-    '@keyframes rn-ProgressBar-animation{' +
-      '0%{-webkit-transform: translateX(-100%); transform: translateX(-100%);}' +
-      '100%{-webkit-transform: translateX(400%); transform: translateX(400%);}' +
-    '}'
-  );
-  injector.addRule(
-    'pointer-events',
-    '.rn-pointerEvents\\:auto,.rn_pointerEvents\\:box-only,.rn-pointerEvents\\:box-none *{pointer-events:auto}' +
-    '.rn-pointerEvents\\:none,.rn_pointerEvents\\:box-only *,.rn-pointerEvents\\:box-none{pointer-events:none}'
-  );
-
-  const classNames = injector.getClassNames();
-  StyleRegistry.initialize(classNames);
-};
-
-export default initialize;

src/apis/StyleSheet/injector.js

@@ -1,106 +0,0 @@
-/**
- * Based on
- * https://github.com/lelandrichardson/react-primitives/blob/master/src/StyleSheet/injector.js
- */
-
-import asap from 'asap';
-
-const emptyObject = {};
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
-const CLASSNAME_REXEP = /\.rn-([^{;\s]+)/g;
-const STYLE_ELEMENT_ID = 'react-native-stylesheet';
-
-let registry = {};
-let isDirty = false;
-
-/**
- * Registers a rule and requests an update to the style sheet
- */
-const addRule = (key, rule) => {
-  if (!registry[key]) {
-    registry[key] = rule;
-    isDirty = true;
-    if (global.document) {
-      asap(frame);
-    }
-  }
-};
-
-/**
- * Returns a string of the registered rules
- */
-const getStyleText = () => {
-  /* eslint prefer-template:0 */
-  let result = '\n';
-  for (const key in registry) {
-    if (hasOwnProperty.call(registry, key)) {
-      result += registry[key] + '\n';
-    }
-  }
-  return result;
-};
-
-/**
- * Returns an HTML string for server rendering
- */
-const getStyleSheetHtml = () => `<style id="${STYLE_ELEMENT_ID}">${getStyleText()}</style>`;
-
-const reset = () => { registry = {}; };
-
-/**
- * Finds or injects the style sheet when in a browser environment
- */
-let styleNode = null;
-const getStyleNode = () => {
-  if (global.document) {
-    if (!styleNode) {
-      // look for existing style sheet (could also be server-rendered)
-      styleNode = document.getElementById(STYLE_ELEMENT_ID);
-      if (!styleNode) {
-        // if there is no existing stylesheet, inject it style sheet
-        document.head.insertAdjacentHTML('afterbegin', getStyleSheetHtml());
-        styleNode = document.getElementById(STYLE_ELEMENT_ID);
-      }
-    }
-    return styleNode;
-  }
-};
-
-/**
- * Determines which classes are available in the existing document. Doesn't
- * rely on the registry so it can be used to read class names from a SSR style
- * sheet.
- */
-const getClassNames = () => {
-  const styleNode = getStyleNode();
-  if (styleNode) {
-    const text = styleNode.textContent;
-    const matches = text.match(CLASSNAME_REXEP);
-    if (matches) {
-      return matches.map((name) => name.slice(1)).reduce((classMap, className) => {
-        classMap[className] = true;
-        return classMap;
-      }, {});
-    }
-  }
-  return emptyObject;
-};
-
-const frame = () => {
-  if (!isDirty || !global.document) { return; }
-  isDirty = false;
-
-  const styleNode = getStyleNode();
-  if (styleNode) {
-    const css = getStyleText();
-    styleNode.textContent = css;
-  }
-};
-
-module.exports = {
-  addRule,
-  getClassNames,
-  getStyleSheetHtml,
-  reset
-};

src/apis/StyleSheet/registry.js

@@ -1,219 +1,3 @@
-/**
- * WARNING: changes to this file in particular can cause significant changes to
- * the results of render performance benchmarks.
- */
-
-import createReactDOMStyle from './createReactDOMStyle';
-import flattenArray from '../../modules/flattenArray';
-import flattenStyle from './flattenStyle';
-import generateCss from './generateCss';
-import injector from './injector';
-import mapKeyValue from '../../modules/mapKeyValue';
-import prefixInlineStyles from './prefixInlineStyles';
-import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry';
-
-const prefix = 'r';
-const SPACE_REGEXP = /\s/g;
-const ESCAPE_SELECTOR_CHARS_REGEXP = /[(),":?.%\\$#*]/g;
-
-/**
- * Creates an HTML class name for use on elements
- */
-const createClassName = (prop, value) => {
-  const val = `${value}`.replace(SPACE_REGEXP, '-');
-  return `rn-${prop}:${val}`;
-};
-
-/**
- * Formatting improves debugging in devtools and snapshot
- */
-const mapDeclarationsToClassName = (style, fn) => {
-  const result = mapKeyValue(style, fn).join('\n').trim();
-  return `\n${result}`;
-};
-
-/**
- * Inject a CSS rule for a given declaration and record the availability of the
- * resulting class name.
- */
-let injectedClassNames = {};
-const injectClassNameIfNeeded = (prop, value) => {
-  const className = createClassName(prop, value);
-  if (!injectedClassNames[className]) {
-    // create a valid CSS selector for a given HTML class name
-    const selector = className.replace(ESCAPE_SELECTOR_CHARS_REGEXP, '\\$&');
-    const body = generateCss({ [prop]: value });
-    const css = `.${selector}{${body}}`;
-    // this adds the rule to the buffer to be injected into the document
-    injector.addRule(className, css);
-    injectedClassNames[className] = true;
-  }
-
-  return className;
-};
-
-/**
- * Converts a React Native style object to HTML class names
- */
-let resolvedPropsCache = {};
-const registerStyle = (id, flatStyle) => {
-  const style = createReactDOMStyle(flatStyle);
-  const className = mapDeclarationsToClassName(style, (prop, value) => {
-    if (value != null) {
-      return injectClassNameIfNeeded(prop, value);
-    }
-  });
-
-  const key = `${prefix}-${id}`;
-  resolvedPropsCache[key] = { className };
-
-  return id;
-};
-
-/**
- * Resolves a React Native style object to DOM props
- */
-const resolveProps = (reactNativeStyle) => {
-  const flatStyle = flattenStyle(reactNativeStyle);
-  const domStyle = createReactDOMStyle(flatStyle);
-  const style = {};
-
-  const className = mapDeclarationsToClassName(domStyle, (prop, value) => {
-    if (value != null) {
-      const singleClassName = createClassName(prop, value);
-      if (injectedClassNames[singleClassName]) {
-        return singleClassName;
-      } else {
-        // 4x slower render
-        style[prop] = value;
-      }
-    }
-  });
-
-  const props = {
-    className,
-    style: prefixInlineStyles(style)
-  };
-
-  /*
-  if (process.env.__REACT_NATIVE_DEBUG_ENABLED__) {
-    console.groupCollapsed('[StyleSheet] resolving uncached styles');
-    console.log(
-      'Slow operation. Resolving style objects (uncached result). ' +
-      'Occurs on first render and when using styles not registered with "StyleSheet.create"'
-    );
-    console.log('source => \n', reactNativeStyle);
-    console.log('flatten => \n', flatStyle);
-    console.log('resolve => \n', props);
-    console.groupEnd();
-  }
-  */
-
-  return props;
-};
-
-/**
- * Caching layer over 'resolveProps'
- */
-const resolvePropsIfNeeded = (key, style) => {
-  if (key) {
-    if (!resolvedPropsCache[key]) {
-      // slow: convert style object to props and cache
-      resolvedPropsCache[key] = resolveProps(style);
-    }
-    return resolvedPropsCache[key];
-  }
-  return resolveProps(style);
-};
-
-/**
- * Web style registry
- */
-const StyleRegistry = {
-  initialize(classNames) {
-    injectedClassNames = classNames;
-
-    /*
-    if (process.env.__REACT_NATIVE_DEBUG_ENABLED__) {
-      if (global.__REACT_NATIVE_DEBUG_ENABLED__styleRegistryTimer) {
-        clearInterval(global.__REACT_NATIVE_DEBUG_ENABLED__styleRegistryTimer);
-      }
-      global.__REACT_NATIVE_DEBUG_ENABLED__styleRegistryTimer = setInterval(() => {
-        const entryCount = Object.keys(resolvedPropsCache).length;
-        console.groupCollapsed('[StyleSheet] resolved props cache snapshot:', entryCount, 'entries');
-        console.log(resolvedPropsCache);
-        console.groupEnd();
-      }, 30000);
-    }
-    */
-  },
-
-  reset() {
-    injectedClassNames = {};
-    resolvedPropsCache = {};
-    injector.reset();
-  },
-
-  register(style) {
-    const id = ReactNativePropRegistry.register(style);
-    return registerStyle(id, style);
-  },
-
-  resolve(reactNativeStyle) {
-    if (!reactNativeStyle) {
-      return undefined;
-    }
-
-    // fast and cachable
-    if (typeof reactNativeStyle === 'number') {
-      const key = `${prefix}${reactNativeStyle}`;
-      return resolvePropsIfNeeded(key, reactNativeStyle);
-    }
-
-    // convert a RN style object to DOM props
-    if (!Array.isArray(reactNativeStyle)) {
-      return resolveProps(reactNativeStyle);
-    }
-
-    // flatten the array
-    // [ 1, [ 2, 3 ], { prop: value }, 4, 5 ] => [ 1, 2, 3, { prop: value }, 4, 5 ];
-    const flatArray = flattenArray(reactNativeStyle);
-
-    let isArrayOfNumbers = true;
-    for (let i = 0; i < flatArray.length; i++) {
-      if (typeof flatArray[i] !== 'number') {
-        isArrayOfNumbers = false;
-        break;
-      }
-    }
-
-    // TODO: determine when/if to cache unregistered styles. This produces 2x
-    // faster benchmark results for unregistered styles. However, the cache
-    // could be filled with props that are never used again.
-    //
-    // let hasValidKey = true;
-    // let key = flatArray.reduce((keyParts, element) => {
-    //   if (typeof element === 'number') {
-    //     keyParts.push(element);
-    //   } else {
-    //     if (element.transform) {
-    //       hasValidKey = false;
-    //     } else {
-    //       const objectAsKey = Object.keys(element).map((prop) => `${prop}:${element[prop]}`).join(';');
-    //       if (objectAsKey !== '') {
-    //         keyParts.push(objectAsKey);
-    //       }
-    //     }
-    //   }
-    //   return keyParts;
-    // }, [ prefix ]).join('-');
-    // if (!hasValidKey) { key = null; }
-
-    // cache resolved props when all styles are registered
-    const key = isArrayOfNumbers ? `${prefix}-${flatArray.join('-')}` : null;
-
-    return resolvePropsIfNeeded(key, flatArray);
-  }
-};
-
-module.exports = StyleRegistry;
+import StyleRegistry from './StyleRegistry';
+const registry = new StyleRegistry();
+module.exports = registry;

src/apis/StyleSheet/staticCss.js

@@ -0,0 +1,21 @@
+module.exports =
+  // css reset
+  '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::-webkit-inner-spin-button,input::-webkit-outer-spin-button,' +
+  'input::-webkit-search-cancel-button,input::-webkit-search-decoration,' +
+  'input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}\n' +
+
+  '@keyframes rn-ActivityIndicator-animation{' +
+    '0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}' +
+    '100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}' +
+  '}\n' +
+
+  '@keyframes rn-ProgressBar-animation{' +
+    '0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)};' +
+    '100%{-webkit-transform:translateX(400%);transform:translateX(400%)};' +
+  '}';

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

@@ -10,114 +10,7 @@ const createNode = (style = {}) => {
   return root;
 };
 
-let defaultBodyMargin;
-
 describe('apis/UIManager', () => {
-  beforeEach(() => {
-    // remove default body margin so we can predict the measured offsets
-    defaultBodyMargin = document.body.style.margin;
-    document.body.style.margin = 0;
-  });
-
-  afterEach(() => {
-    document.body.style.margin = defaultBodyMargin;
-  });
-
-  describe('measure', () => {
-    test('provides correct layout to callback', (done) => {
-      const node = createNode({ height: '5000px', left: '100px', position: 'relative', top: '100px', width: '5000px' });
-      document.body.appendChild(node);
-
-      node.getBoundingClientRect = jest.fn(() => ({ width: 5000, height: 5000, top: 100, left: 100 }));
-
-      UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
-        expect(x).toEqual(100);
-        expect(y).toEqual(100);
-        expect(width).toEqual(5000);
-        expect(height).toEqual(5000);
-        expect(pageX).toEqual(100);
-        expect(pageY).toEqual(100);
-        done();
-        document.body.removeChild(node);
-      });
-    });
-
-    test('provides correct layout to callback', (done) => {
-      const node = createNode({ height: '5000px', left: '100px', position: 'relative', top: '100px', width: '5000px' });
-      document.body.appendChild(node);
-
-      // test values account for scroll position
-      window.scrollTo(200, 200);
-      node.getBoundingClientRect = jest.fn(() => ({ width: 5000, height: 5000, top: -100, left: -100 }));
-      node.parentNode.getBoundingClientRect = jest.fn(() => ({ top: -200, left: -200 }));
-
-      UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
-        expect(x).toEqual(100);
-        expect(y).toEqual(100);
-        expect(width).toEqual(5000);
-        expect(height).toEqual(5000);
-        expect(pageX).toEqual(-100);
-        expect(pageY).toEqual(-100);
-        done();
-        document.body.removeChild(node);
-      });
-    });
-  });
-
-  describe('measureLayout', () => {
-    test('provides correct layout to onSuccess callback', (done) => {
-      const node = createNode({ height: '10px', width: '10px' });
-      const middle = createNode({ padding: '20px' });
-      const context = createNode({ padding: '20px' });
-      middle.appendChild(node);
-      context.appendChild(middle);
-      document.body.appendChild(context);
-
-      node.getBoundingClientRect = jest.fn(() => ({
-        width: 10,
-        height: 10,
-        top: 40,
-        left: 40
-      }));
-
-      UIManager.measureLayout(node, context, () => {}, (x, y, width, height) => {
-        expect(x).toEqual(40);
-        expect(y).toEqual(40);
-        expect(width).toEqual(10);
-        expect(height).toEqual(10);
-        done();
-        document.body.removeChild(context);
-      });
-    });
-  });
-
-  describe('measureInWindow', () => {
-    test('provides correct layout to callback', (done) => {
-      const node = createNode({ height: '10px', width: '10px' });
-      const middle = createNode({ padding: '20px' });
-      const context = createNode({ padding: '20px' });
-      middle.appendChild(node);
-      context.appendChild(middle);
-      document.body.appendChild(context);
-
-      node.getBoundingClientRect = jest.fn(() => ({
-        width: 10,
-        height: 10,
-        top: 40,
-        left: 40
-      }));
-
-      UIManager.measureInWindow(node, (x, y, width, height) => {
-        expect(x).toEqual(40);
-        expect(y).toEqual(40);
-        expect(width).toEqual(10);
-        expect(height).toEqual(10);
-        done();
-        document.body.removeChild(context);
-      });
-    });
-  });
-
   describe('updateView', () => {
     const componentStub = {
       _reactInternalInstance: {

src/apis/UIManager/index.js

@@ -1,11 +1,24 @@
 import asap from 'asap';
 import CSSPropertyOperations from 'react-dom/lib/CSSPropertyOperations';
 
-const _measureLayout = (node, relativeToNativeNode, callback) => {
+const getRect = (node) => {
+  const height = node.offsetHeight;
+  const width = node.offsetWidth;
+  let left = 0;
+  let top = 0;
+  while (node && node.nodeType === 1 /* Node.ELEMENT_NODE */) {
+    left += node.offsetLeft;
+    top += node.offsetTop;
+    node = node.offsetParent;
+  }
+  return { height, left, top, width };
+};
+
+const measureLayout = (node, relativeToNativeNode, callback) => {
   asap(() => {
     const relativeNode = relativeToNativeNode || node.parentNode;
-    const relativeRect = relativeNode.getBoundingClientRect();
-    const { height, left, top, width } = node.getBoundingClientRect();
+    const relativeRect = getRect(relativeNode);
+    const { height, left, top, width } = getRect(node);
     const x = left - relativeRect.left;
     const y = top - relativeRect.top;
     callback(x, y, width, height, left, top);
@@ -22,17 +35,17 @@ const UIManager = {
   },
 
   measure(node, callback) {
-    _measureLayout(node, null, callback);
+    measureLayout(node, null, callback);
   },
 
   measureInWindow(node, callback) {
-    const { height, left, top, width } = node.getBoundingClientRect();
+    const { height, left, top, width } = getRect(node);
     callback(left, top, width, height);
   },
 
   measureLayout(node, relativeToNativeNode, onFail, onSuccess) {
     const relativeTo = relativeToNativeNode || node.parentNode;
-    _measureLayout(node, relativeTo, onSuccess);
+    measureLayout(node, relativeTo, onSuccess);
   },
 
   updateView(node, props, component /* only needed to surpress React errors in development */) {

src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap

@@ -2,80 +2,11 @@ exports[`components/ActivityIndicator default render 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  className="
-rn-alignItems:center
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-justifyContent:center
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
+  className="rn-alignItems-1awozwy rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-justifyContent-1777fci rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4"
   role="progressbar"
   style={Object {}}>
   <div
-    className="
-  rn-alignItems:stretch
-  rn-animationDuration:0.75s
-  rn-animationIterationCount:infinite
-  rn-animationName:rn-ActivityIndicator-animation
-  rn-animationTimingFunction:linear
-  rn-backgroundColor:transparent
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  rn-height:20px
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-width:20px"
+    className="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-z80fyv rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-width-19wmn03"
     style={Object {}}>
     <svg
       height="100%"
@@ -115,81 +46,11 @@ exports[`components/ActivityIndicator other render 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  className="
-rn-alignItems:center
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-justifyContent:center
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
+  className="rn-alignItems-1awozwy rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-justifyContent-1777fci rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4"
   role="progressbar"
   style={Object {}}>
   <div
-    className="
-  rn-alignItems:stretch
-  rn-animationDuration:0.75s
-  rn-animationIterationCount:infinite
-  rn-animationName:rn-ActivityIndicator-animation
-  rn-animationPlayState:paused
-  rn-animationTimingFunction:linear
-  rn-backgroundColor:transparent
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  rn-height:36px
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-width:36px"
+    className="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-1r8g8re rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-width-1acpoxo"
     style={Object {}}>
     <svg
       height="100%"

src/components/ActivityIndicator/index.js

@@ -1,13 +1,14 @@
 import applyNativeMethods from '../../modules/applyNativeMethods';
 import StyleSheet from '../../apis/StyleSheet';
 import View from '../View';
+import ViewPropTypes from '../View/ViewPropTypes';
 import React, { Component, PropTypes } from 'react';
 
 class ActivityIndicator extends Component {
   static displayName = 'ActivityIndicator';
 
   static propTypes = {
-    ...View.propTypes,
+    ...ViewPropTypes,
     animating: PropTypes.bool,
     color: PropTypes.string,
     hidesWhenStopped: PropTypes.bool,

src/components/Image/ImageStylePropTypes.js

@@ -3,25 +3,30 @@ import ColorPropType from '../../propTypes/ColorPropType';
 import ImageResizeMode from './ImageResizeMode';
 import LayoutPropTypes from '../../propTypes/LayoutPropTypes';
 import { PropTypes } from 'react';
+import ShadowPropTypes from '../../propTypes/ShadowPropTypes';
 import TransformPropTypes from '../../propTypes/TransformPropTypes';
 
-const hiddenOrVisible = PropTypes.oneOf([ 'hidden', 'visible' ]);
+const { number, oneOf, string } = PropTypes;
+const hiddenOrVisible = oneOf([ 'hidden', 'visible' ]);
 
-module.exports = process.env.NODE_ENV !== 'production' ? {
+module.exports = {
   ...BorderPropTypes,
   ...LayoutPropTypes,
+  ...ShadowPropTypes,
   ...TransformPropTypes,
   backfaceVisibility: hiddenOrVisible,
   backgroundColor: ColorPropType,
-  resizeMode: PropTypes.oneOf(Object.keys(ImageResizeMode)),
-  /**
-   * @platform web
-   */
-  boxShadow: PropTypes.string,
-  opacity: PropTypes.number,
+  opacity: number,
   overflow: hiddenOrVisible,
+  resizeMode: oneOf(Object.keys(ImageResizeMode)),
+  /**
+   * @platform unsupported
+   */
+  overlayColor: string,
+  tintColor: ColorPropType,
   /**
    * @platform web
    */
+  boxShadow: string,
   visibility: hiddenOrVisible
-} : {};
+};

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

@@ -1,167 +1,27 @@
 exports[`components/Image passes other props through to underlying View 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   onResponderGrant={[Function]}
-  role="img"
   style={Object {}} />
 `;
 
 exports[`components/Image prop "accessibilityLabel" 1`] = `
 <div
   aria-label="accessibilityLabel"
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={Object {}} />
 `;
 
 exports[`components/Image prop "accessible" 1`] = `
 <div
   aria-hidden={true}
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={Object {}} />
 `;
 
 exports[`components/Image prop "children" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={Object {}}>
   <div
     className="unique" />
@@ -170,519 +30,113 @@ rn-textDecoration:none"
 
 exports[`components/Image prop "defaultSource" does not override "height" and "width" styles 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={
     Object {
       "backgroundImage": "url(\"https://google.com/favicon.ico\")",
       "height": "20px",
       "width": "40px",
     }
-  } />
+  }>
+  <img
+    className="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
+    src="https://google.com/favicon.ico"
+    style={Object {}} />
+</div>
 `;
 
 exports[`components/Image prop "defaultSource" sets "height" and "width" styles if missing 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={
     Object {
       "backgroundImage": "url(\"https://google.com/favicon.ico\")",
       "height": "10px",
       "width": "20px",
     }
-  } />
+  }>
+  <img
+    className="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
+    src="https://google.com/favicon.ico"
+    style={Object {}} />
+</div>
 `;
 
 exports[`components/Image prop "defaultSource" sets background image when value is a string 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={
     Object {
       "backgroundImage": "url(\"https://google.com/favicon.ico\")",
     }
-  } />
+  }>
+  <img
+    className="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
+    src="https://google.com/favicon.ico"
+    style={Object {}} />
+</div>
 `;
 
 exports[`components/Image prop "defaultSource" sets background image when value is an object 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={
     Object {
       "backgroundImage": "url(\"https://google.com/favicon.ico\")",
     }
-  } />
+  }>
+  <img
+    className="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
+    src="https://google.com/favicon.ico"
+    style={Object {}} />
+</div>
 `;
 
 exports[`components/Image prop "resizeMode" value "contain" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:contain
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-ehq7j7 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={Object {}} />
 `;
 
 exports[`components/Image prop "resizeMode" value "cover" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={Object {}} />
 `;
 
 exports[`components/Image prop "resizeMode" value "none" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:auto
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-1sxrcry rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={Object {}} />
 `;
 
 exports[`components/Image prop "resizeMode" value "stretch" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:100%-100%
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-x3cy2q rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={Object {}} />
 `;
 
 exports[`components/Image prop "resizeMode" value "undefined" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={Object {}} />
 `;
 
 exports[`components/Image prop "style" correctly supports "resizeMode" property 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:contain
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-ehq7j7 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={Object {}} />
 `;
 
 exports[`components/Image prop "testID" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   data-testid="testID"
-  role="img"
   style={Object {}} />
 `;
 
 exports[`components/Image sets correct accessibility role" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  role="img"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
   style={Object {}} />
 `;

src/components/Image/index.js

@@ -1,12 +1,14 @@
 /* global window */
 import applyNativeMethods from '../../modules/applyNativeMethods';
+import createDOMElement from '../../modules/createDOMElement';
 import ImageResizeMode from './ImageResizeMode';
 import ImageLoader from '../../modules/ImageLoader';
 import ImageStylePropTypes from './ImageStylePropTypes';
-import requestAnimationFrame from 'fbjs/lib/requestAnimationFrame';
+import requestIdleCallback, { cancelIdleCallback } from '../../modules/requestIdleCallback';
 import StyleSheet from '../../apis/StyleSheet';
 import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
 import View from '../View';
+import ViewPropTypes from '../View/ViewPropTypes';
 import React, { Component, PropTypes } from 'react';
 
 const emptyObject = {};
@@ -41,7 +43,7 @@ class Image extends Component {
   static displayName = 'Image';
 
   static propTypes = {
-    ...View.propTypes,
+    ...ViewPropTypes,
     children: PropTypes.any,
     defaultSource: ImageSourcePropType,
     onError: PropTypes.func,
@@ -137,28 +139,42 @@ class Image extends Component {
     // View doesn't support 'resizeMode' as a style
     delete style.resizeMode;
 
+    // Allows users to trigger the browser's image context menu
+    const hiddenImage = displayImage ? createDOMElement('img', {
+      src: displayImage,
+      style: [ StyleSheet.absoluteFill, styles.img ]
+    }) : null;
+
     return (
       <View
         {...other}
         accessibilityLabel={accessibilityLabel}
-        accessibilityRole='img'
         accessible={accessible}
-        children={children}
         onLayout={onLayout}
         style={style}
         testID={testID}
-      />
+      >
+        {hiddenImage}
+        {children}
+      </View>
     );
   }
 
   _createImageLoader() {
-    this._destroyImageLoader();
-    const uri = resolveAssetSource(this.props.source);
-    this._imageRequestId = ImageLoader.load(uri, this._onLoad, this._onError);
-    this._onLoadStart();
+    this._loadRequest = requestIdleCallback(() => {
+      this._destroyImageLoader();
+      const uri = resolveAssetSource(this.props.source);
+      this._imageRequestId = ImageLoader.load(uri, this._onLoad, this._onError);
+      this._onLoadStart();
+    });
   }
 
   _destroyImageLoader() {
+    if (this._loadRequest) {
+      cancelIdleCallback(this._loadRequest);
+      this._loadRequest = null;
+    }
+
     if (this._imageRequestId) {
       ImageLoader.abort(this._imageRequestId);
       this._imageRequestId = null;
@@ -203,11 +219,9 @@ class Image extends Component {
     const shouldDisplaySource = this._imageState === STATUS_LOADED || this._imageState === STATUS_LOADING;
     // only triggers a re-render when the image is loading (to support PJEG), loaded, or failed
     if (shouldDisplaySource !== this.state.shouldDisplaySource) {
-      requestAnimationFrame(() => {
-        if (this._isMounted) {
-          this.setState({ shouldDisplaySource });
-        }
-      });
+      if (this._isMounted) {
+        this.setState(() => ({ shouldDisplaySource }));
+      }
     }
   }
 }
@@ -217,7 +231,14 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
-    backgroundSize: 'cover'
+    backgroundSize: 'cover',
+    zIndex: 0
+  },
+  img: {
+    height: '100%',
+    opacity: 0,
+    width: '100%',
+    zIndex: -1
   }
 });
 

src/components/ListView/index.js

@@ -107,20 +107,42 @@ class ListView extends Component {
   render() {
     const children = [];
 
-    const dataSource = this.props.dataSource;
+    const {
+      dataSource,
+      enableEmptySections,
+      renderFooter,
+      renderHeader,
+      renderScrollComponent,
+      renderSectionHeader,
+      renderSeparator,
+      /* eslint-disable */
+      initialListSize,
+      onEndReachedThreshold,
+      onKeyboardDidHide,
+      onKeyboardDidShow,
+      onKeyboardWillHide,
+      onKeyboardWillShow,
+      pageSize,
+      renderRow,
+      scrollRenderAheadDistance,
+      stickyHeaderIndices,
+      /* eslint-enable */
+      ...scrollProps
+    } = this.props;
+
     const allRowIDs = dataSource.rowIdentities;
     let rowCount = 0;
     const sectionHeaderIndices = [];
 
-    const header = this.props.renderHeader && this.props.renderHeader();
-    const footer = this.props.renderFooter && this.props.renderFooter();
+    const header = renderHeader && renderHeader();
+    const footer = renderFooter && renderFooter();
     let totalIndex = header ? 1 : 0;
 
     for (let sectionIdx = 0; sectionIdx < allRowIDs.length; sectionIdx++) {
       const sectionID = dataSource.sectionIdentities[sectionIdx];
       const rowIDs = allRowIDs[sectionIdx];
       if (rowIDs.length === 0) {
-        if (this.props.enableEmptySections === undefined) {
+        if (enableEmptySections === undefined) {
           const warning = require('fbjs/lib/warning');
           warning(false, 'In next release empty section headers will be rendered.' +
                   ' In this release you can use \'enableEmptySections\' flag to render empty section headers.');
@@ -128,7 +150,7 @@ class ListView extends Component {
         } else {
           const invariant = require('fbjs/lib/invariant');
           invariant(
-            this.props.enableEmptySections,
+            enableEmptySections,
             'In next release \'enableEmptySections\' flag will be deprecated,' +
             ' empty section headers will always be rendered. If empty section headers' +
             ' are not desirable their indices should be excluded from sectionIDs object.' +
@@ -137,7 +159,7 @@ class ListView extends Component {
         }
       }
 
-      if (this.props.renderSectionHeader) {
+      if (renderSectionHeader) {
         const shouldUpdateHeader = rowCount >= this._prevRenderedRowsCount &&
           dataSource.sectionHeaderShouldUpdate(sectionIdx);
         children.push(
@@ -171,14 +193,14 @@ class ListView extends Component {
         children.push(row);
         totalIndex++;
 
-        if (this.props.renderSeparator &&
+        if (renderSeparator &&
             (rowIdx !== rowIDs.length - 1 || sectionIdx === allRowIDs.length - 1)) {
           const adjacentRowHighlighted =
             this.state.highlightedRow.sectionID === sectionID && (
               this.state.highlightedRow.rowID === rowID ||
               this.state.highlightedRow.rowID === rowIDs[rowIdx + 1]
             );
-          const separator = this.props.renderSeparator(
+          const separator = renderSeparator(
             sectionID,
             rowID,
             adjacentRowHighlighted
@@ -196,24 +218,9 @@ class ListView extends Component {
         break;
       }
     }
+    scrollProps.onScroll = this._onScroll;
 
-    const {
-      renderScrollComponent,
-      ...props
-    } = this.props;
-    Object.assign(props, {
-      onScroll: this._onScroll,
-      stickyHeaderIndices: this.props.stickyHeaderIndices.concat(sectionHeaderIndices),
-
-      // Do not pass these events downstream to ScrollView since they will be
-      // registered in ListView's own ScrollResponder.Mixin
-      onKeyboardWillShow: undefined,
-      onKeyboardWillHide: undefined,
-      onKeyboardDidShow: undefined,
-      onKeyboardDidHide: undefined
-    });
-
-    return React.cloneElement(renderScrollComponent(props), {
+    return React.cloneElement(renderScrollComponent(scrollProps), {
       ref: this._setScrollViewRef,
       onContentSizeChange: this._onContentSizeChange,
       onLayout: this._onLayout

src/components/ProgressBar/index.js

@@ -2,13 +2,14 @@ import applyNativeMethods from '../../modules/applyNativeMethods';
 import ColorPropType from '../../propTypes/ColorPropType';
 import StyleSheet from '../../apis/StyleSheet';
 import View from '../View';
+import ViewPropTypes from '../View/ViewPropTypes';
 import React, { Component, PropTypes } from 'react';
 
 class ProgressBar extends Component {
   static displayName = 'ProgressBar';
 
   static propTypes = {
-    ...View.propTypes,
+    ...ViewPropTypes,
     color: ColorPropType,
     indeterminate: PropTypes.bool,
     progress: PropTypes.number,

src/components/ScrollView/ScrollViewBase.js

@@ -8,6 +8,7 @@
 
 import debounce from 'debounce';
 import View from '../View';
+import ViewPropTypes from '../View/ViewPropTypes';
 import React, { Component, PropTypes } from 'react';
 
 const normalizeScrollEvent = (e) => ({
@@ -36,7 +37,8 @@ const normalizeScrollEvent = (e) => ({
         return e.target.offsetWidth;
       }
     }
-  }
+  },
+  timeStamp: Date.now()
 });
 
 /**
@@ -44,7 +46,7 @@ const normalizeScrollEvent = (e) => ({
  */
 export default class ScrollViewBase extends Component {
   static propTypes = {
-    ...View.propTypes,
+    ...ViewPropTypes,
     onMomentumScrollBegin: PropTypes.func,
     onMomentumScrollEnd: PropTypes.func,
     onScroll: PropTypes.func,

src/components/ScrollView/index.js

@@ -14,6 +14,7 @@ import ScrollViewBase from './ScrollViewBase';
 import StyleSheet from '../../apis/StyleSheet';
 import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
 import View from '../View';
+import ViewPropTypes from '../View/ViewPropTypes';
 import ViewStylePropTypes from '../View/ViewStylePropTypes';
 import React, { Component, PropTypes } from 'react';
 
@@ -22,7 +23,7 @@ const emptyObject = {};
 /* eslint-disable react/prefer-es6-class */
 const ScrollView = React.createClass({
   propTypes: {
-    ...View.propTypes,
+    ...ViewPropTypes,
     contentContainerStyle: StyleSheetPropType(ViewStylePropTypes),
     horizontal: PropTypes.bool,
     keyboardDismissMode: PropTypes.oneOf([ 'none', 'interactive', 'on-drag' ]),

src/components/Switch/__tests__/__snapshots__/index-test.js.snap

@@ -1,40 +1,6 @@
 exports[`components/Switch disabled when "false" a default checkbox is rendered 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-cursor:pointer
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-userSelect:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-1loqt21 rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-userSelect-lrvibr"
   style={
     Object {
       "height": "20px",
@@ -42,49 +8,7 @@ rn-userSelect:none"
     }
   }>
   <div
-    className="
-  rn-alignItems:stretch
-  
-  
-  
-  
-  
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-bottom:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  rn-height:70%
-  rn-left:0px
-  rn-listStyle:none
-  rn-marginTop:auto
-  rn-marginRight:auto
-  rn-marginBottom:auto
-  rn-marginLeft:auto
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-top:0px
-  rn-transitionDuration:0.1s
-  rn-width:90%"
+    className="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-1dernwh rn-left-1d2f490 rn-listStyle-1ebb2ja rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
     style={
       Object {
         "backgroundColor": "#939393",
@@ -95,48 +19,7 @@ rn-userSelect:none"
       }
     } />
   <div
-    className="
-  rn-alignItems:stretch
-  rn-alignSelf:flex-start
-  
-  rn-borderTopLeftRadius:100%
-  rn-borderTopRightRadius:100%
-  rn-borderBottomRightRadius:100%
-  rn-borderBottomLeftRadius:100%
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5)
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  
-  rn-left:0%
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-transform:translateZ(0px)
-  rn-transitionDuration:0.1s"
+    className="rn-alignItems-1oszu61 rn-alignSelf-k200y rn-borderTopLeftRadius-jt3ufn rn-borderTopRightRadius-1e868j9 rn-borderBottomRightRadius-ujv9e3 rn-borderBottomLeftRadius-1hakmuk rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxShadow-1ewcgjf rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-left-1fe0xdi rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-transform-emqnss rn-transitionDuration-13tjlyg"
     style={
       Object {
         "backgroundColor": "#FAFAFA",
@@ -146,24 +29,7 @@ rn-userSelect:none"
     } />
   <input
     checked={false}
-    className="
-  rn-bottom:0px
-  rn-cursor:inherit
-  rn-height:100%
-  rn-left:0px
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-opacity:0
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%"
+    className="rn-bottom-1p0dtai rn-cursor-1ei5mc7 rn-height-1pi2tsx rn-left-1d2f490 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-opacity-1272l3b rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu"
     disabled={false}
     onBlur={[Function]}
     onChange={[Function]}
@@ -175,41 +41,7 @@ rn-userSelect:none"
 
 exports[`components/Switch disabled when "true" a disabled checkbox is rendered 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-cursor:default
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-userSelect:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-7q8q6z rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-userSelect-lrvibr"
   style={
     Object {
       "height": "20px",
@@ -217,49 +49,7 @@ rn-userSelect:none"
     }
   }>
   <div
-    className="
-  rn-alignItems:stretch
-  rn-backgroundColor:#D5D5D5
-  
-  
-  
-  
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-bottom:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  rn-height:70%
-  rn-left:0px
-  rn-listStyle:none
-  rn-marginTop:auto
-  rn-marginRight:auto
-  rn-marginBottom:auto
-  rn-marginLeft:auto
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-top:0px
-  rn-transitionDuration:0.1s
-  rn-width:90%"
+    className="rn-alignItems-1oszu61 rn-backgroundColor-1i8mn1y rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-1dernwh rn-left-1d2f490 rn-listStyle-1ebb2ja rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
     style={
       Object {
         "borderBottomLeftRadius": "10px",
@@ -269,48 +59,7 @@ rn-userSelect:none"
       }
     } />
   <div
-    className="
-  rn-alignItems:stretch
-  rn-alignSelf:flex-start
-  rn-backgroundColor:#BDBDBD
-  rn-borderTopLeftRadius:100%
-  rn-borderTopRightRadius:100%
-  rn-borderBottomRightRadius:100%
-  rn-borderBottomLeftRadius:100%
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5)
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  
-  rn-left:0%
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-transform:translateZ(0px)
-  rn-transitionDuration:0.1s"
+    className="rn-alignItems-1oszu61 rn-alignSelf-k200y rn-backgroundColor-1jvdyr1 rn-borderTopLeftRadius-jt3ufn rn-borderTopRightRadius-1e868j9 rn-borderBottomRightRadius-ujv9e3 rn-borderBottomLeftRadius-1hakmuk rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxShadow-1ewcgjf rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-left-1fe0xdi rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-transform-emqnss rn-transitionDuration-13tjlyg"
     style={
       Object {
         "height": "20px",
@@ -319,24 +68,7 @@ rn-userSelect:none"
     } />
   <input
     checked={false}
-    className="
-  rn-bottom:0px
-  rn-cursor:inherit
-  rn-height:100%
-  rn-left:0px
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-opacity:0
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%"
+    className="rn-bottom-1p0dtai rn-cursor-1ei5mc7 rn-height-1pi2tsx rn-left-1d2f490 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-opacity-1272l3b rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu"
     disabled={true}
     onBlur={[Function]}
     onChange={[Function]}
@@ -348,41 +80,7 @@ rn-userSelect:none"
 
 exports[`components/Switch value when "false" an unchecked checkbox is rendered 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-cursor:pointer
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-userSelect:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-1loqt21 rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-userSelect-lrvibr"
   style={
     Object {
       "height": "20px",
@@ -390,49 +88,7 @@ rn-userSelect:none"
     }
   }>
   <div
-    className="
-  rn-alignItems:stretch
-  
-  
-  
-  
-  
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-bottom:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  rn-height:70%
-  rn-left:0px
-  rn-listStyle:none
-  rn-marginTop:auto
-  rn-marginRight:auto
-  rn-marginBottom:auto
-  rn-marginLeft:auto
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-top:0px
-  rn-transitionDuration:0.1s
-  rn-width:90%"
+    className="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-1dernwh rn-left-1d2f490 rn-listStyle-1ebb2ja rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
     style={
       Object {
         "backgroundColor": "#939393",
@@ -443,48 +99,7 @@ rn-userSelect:none"
       }
     } />
   <div
-    className="
-  rn-alignItems:stretch
-  rn-alignSelf:flex-start
-  
-  rn-borderTopLeftRadius:100%
-  rn-borderTopRightRadius:100%
-  rn-borderBottomRightRadius:100%
-  rn-borderBottomLeftRadius:100%
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5)
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  
-  rn-left:0%
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-transform:translateZ(0px)
-  rn-transitionDuration:0.1s"
+    className="rn-alignItems-1oszu61 rn-alignSelf-k200y rn-borderTopLeftRadius-jt3ufn rn-borderTopRightRadius-1e868j9 rn-borderBottomRightRadius-ujv9e3 rn-borderBottomLeftRadius-1hakmuk rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxShadow-1ewcgjf rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-left-1fe0xdi rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-transform-emqnss rn-transitionDuration-13tjlyg"
     style={
       Object {
         "backgroundColor": "#FAFAFA",
@@ -494,24 +109,7 @@ rn-userSelect:none"
     } />
   <input
     checked={false}
-    className="
-  rn-bottom:0px
-  rn-cursor:inherit
-  rn-height:100%
-  rn-left:0px
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-opacity:0
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%"
+    className="rn-bottom-1p0dtai rn-cursor-1ei5mc7 rn-height-1pi2tsx rn-left-1d2f490 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-opacity-1272l3b rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu"
     disabled={false}
     onBlur={[Function]}
     onChange={[Function]}
@@ -523,41 +121,7 @@ rn-userSelect:none"
 
 exports[`components/Switch value when "true" a checked checkbox is rendered 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-cursor:pointer
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-userSelect:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-1loqt21 rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-userSelect-lrvibr"
   style={
     Object {
       "height": "20px",
@@ -565,49 +129,7 @@ rn-userSelect:none"
     }
   }>
   <div
-    className="
-  rn-alignItems:stretch
-  
-  
-  
-  
-  
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-bottom:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  rn-height:70%
-  rn-left:0px
-  rn-listStyle:none
-  rn-marginTop:auto
-  rn-marginRight:auto
-  rn-marginBottom:auto
-  rn-marginLeft:auto
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-top:0px
-  rn-transitionDuration:0.1s
-  rn-width:90%"
+    className="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-1dernwh rn-left-1d2f490 rn-listStyle-1ebb2ja rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
     style={
       Object {
         "backgroundColor": "#A3D3CF",
@@ -618,48 +140,7 @@ rn-userSelect:none"
       }
     } />
   <div
-    className="
-  rn-alignItems:stretch
-  rn-alignSelf:flex-start
-  
-  rn-borderTopLeftRadius:100%
-  rn-borderTopRightRadius:100%
-  rn-borderBottomRightRadius:100%
-  rn-borderBottomLeftRadius:100%
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5)
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  
-  rn-left:100%
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-transform:translateZ(0px)
-  rn-transitionDuration:0.1s"
+    className="rn-alignItems-1oszu61 rn-alignSelf-k200y rn-borderTopLeftRadius-jt3ufn rn-borderTopRightRadius-1e868j9 rn-borderBottomRightRadius-ujv9e3 rn-borderBottomLeftRadius-1hakmuk rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxShadow-1ewcgjf rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-left-7b7h2f rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-transform-emqnss rn-transitionDuration-13tjlyg"
     style={
       Object {
         "backgroundColor": "#009688",
@@ -670,24 +151,7 @@ rn-userSelect:none"
     } />
   <input
     checked={true}
-    className="
-  rn-bottom:0px
-  rn-cursor:inherit
-  rn-height:100%
-  rn-left:0px
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-opacity:0
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%"
+    className="rn-bottom-1p0dtai rn-cursor-1ei5mc7 rn-height-1pi2tsx rn-left-1d2f490 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-opacity-1272l3b rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu"
     disabled={false}
     onBlur={[Function]}
     onChange={[Function]}

src/components/Switch/index.js

@@ -5,6 +5,7 @@ import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue';
 import StyleSheet from '../../apis/StyleSheet';
 import UIManager from '../../apis/UIManager';
 import View from '../View';
+import ViewPropTypes from '../View/ViewPropTypes';
 import React, { Component, PropTypes } from 'react';
 
 const emptyObject = {};
@@ -15,7 +16,7 @@ class Switch extends Component {
   static displayName = 'Switch';
 
   static propTypes = {
-    ...View.propTypes,
+    ...ViewPropTypes,
     activeThumbColor: ColorPropType,
     activeTrackColor: ColorPropType,
     disabled: PropTypes.bool,

src/components/Text/TextStylePropTypes.js

@@ -1,7 +1,42 @@
-import TextPropTypes from '../../propTypes/TextPropTypes';
+import ColorPropType from '../../propTypes/ColorPropType';
+import { PropTypes } from 'react';
 import ViewStylePropTypes from '../View/ViewStylePropTypes';
 
-module.exports = process.env.NODE_ENV !== 'production' ? {
+const { number, oneOf, oneOfType, shape, string } = PropTypes;
+const numberOrString = oneOfType([ number, string ]);
+
+const ShadowOffsetPropType = shape({ width: number, height: number });
+const TextAlignPropType = oneOf([ 'center', 'inherit', 'justify', 'justify-all', 'left', 'right' ]);
+const WritingDirectionPropType = oneOf([ 'auto', 'ltr', 'rtl' ]);
+
+const TextOnlyStylePropTypes = {
+  color: ColorPropType,
+  fontFamily: string,
+  fontFeatureSettings: string,
+  fontSize: numberOrString,
+  fontStyle: string,
+  fontWeight: string,
+  letterSpacing: numberOrString,
+  lineHeight: numberOrString,
+  textAlign: TextAlignPropType,
+  textAlignVertical: oneOf([ 'auto', 'bottom', 'center', 'top' ]),
+  textDecorationLine: string,
+  textShadowColor: ColorPropType,
+  textShadowOffset: ShadowOffsetPropType,
+  textShadowRadius: number,
+  writingDirection: WritingDirectionPropType,
+  /* @platform web */
+  textOverflow: string,
+  textRendering: oneOf([ 'auto', 'geometricPrecision', 'optimizeLegibility', 'optimizeSpeed' ]),
+  textTransform: oneOf([ 'capitalize', 'lowercase', 'none', 'uppercase' ]),
+  unicodeBidi: oneOf([ 'normal', 'bidi-override', 'embed', 'isolate', 'isolate-override', 'plaintext' ]),
+  whiteSpace: string,
+  wordWrap: string,
+  MozOsxFontSmoothing: string,
+  WebkitFontSmoothing: string
+};
+
+module.exports = {
   ...ViewStylePropTypes,
-  ...TextPropTypes
-} : {};
+  ...TextOnlyStylePropTypes
+};

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

@@ -1,24 +1,6 @@
 exports[`components/Text prop "children" 1`] = `
 <span
-  className="
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-color:inherit
-rn-display:inline
-rn-font:inherit
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-textDecoration:none
-rn-whiteSpace:pre-wrap
-rn-wordWrap:break-word"
+  className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
   dir="auto">
   children
 </span>
@@ -26,26 +8,7 @@ rn-wordWrap:break-word"
 
 exports[`components/Text prop "onPress" 1`] = `
 <span
-  className="
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-color:inherit
-rn-cursor:pointer
-rn-display:inline
-rn-font:inherit
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-textDecoration:none
-rn-whiteSpace:pre-wrap
-rn-wordWrap:break-word"
+  className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-color-homxoj rn-cursor-1loqt21 rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
   dir="auto"
   onClick={[Function]}
   onKeyDown={[Function]}
@@ -55,50 +18,13 @@ rn-wordWrap:break-word"
 
 exports[`components/Text prop "selectable" 1`] = `
 <span
-  className="
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-color:inherit
-rn-display:inline
-rn-font:inherit
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-textDecoration:none
-rn-whiteSpace:pre-wrap
-rn-wordWrap:break-word"
+  className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
   dir="auto" />
 `;
 
 exports[`components/Text prop "selectable" 2`] = `
 <span
-  className="
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-color:inherit
-rn-display:inline
-rn-font:inherit
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-textDecoration:none
-rn-userSelect:none
-rn-whiteSpace:pre-wrap
-rn-wordWrap:break-word"
+  className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-userSelect-lrvibr rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
   dir="auto"
   style={Object {}} />
 `;

src/components/TextInput/TextInputStylePropTypes.js

@@ -0,0 +1,14 @@
+import TextStylePropTypes from '../Text/TextStylePropTypes';
+import { PropTypes } from 'react';
+
+const { oneOf } = PropTypes;
+
+const TextInputOnlyStylePropTypes = {
+  /* @platform web */
+  resize: oneOf([ 'none', 'vertical', 'horizontal', 'both' ])
+};
+
+module.exports = {
+  ...TextStylePropTypes,
+  ...TextInputOnlyStylePropTypes
+};

src/components/TextInput/index.js

@@ -1,13 +1,14 @@
 import applyLayout from '../../modules/applyLayout';
 import applyNativeMethods from '../../modules/applyNativeMethods';
+import NativeMethodsMixin from '../../modules/NativeMethodsMixin';
 import createDOMElement from '../../modules/createDOMElement';
 import findNodeHandle from '../../modules/findNodeHandle';
 import StyleSheet from '../../apis/StyleSheet';
-import Text from '../Text';
+import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
+import TextInputStylePropTypes from './TextInputStylePropTypes';
 import TextareaAutosize from 'react-textarea-autosize';
 import TextInputState from './TextInputState';
-import UIManager from '../../apis/UIManager';
-import View from '../View';
+import ViewPropTypes from '../View/ViewPropTypes';
 import { Component, PropTypes } from 'react';
 
 const emptyObject = {};
@@ -52,7 +53,7 @@ class TextInput extends Component {
   static displayName = 'TextInput';
 
   static propTypes = {
-    ...View.propTypes,
+    ...ViewPropTypes,
     autoCapitalize: PropTypes.oneOf([ 'characters', 'none', 'sentences', 'words' ]),
     autoComplete: PropTypes.string,
     autoCorrect: PropTypes.bool,
@@ -83,7 +84,7 @@ class TextInput extends Component {
       start: PropTypes.number.isRequired,
       end: PropTypes.number
     }),
-    style: Text.propTypes.style,
+    style: StyleSheetPropType(TextInputStylePropTypes),
     value: PropTypes.string
   };
 
@@ -99,6 +100,8 @@ class TextInput extends Component {
     style: emptyObject
   };
 
+  static State = TextInputState;
+
   blur() {
     TextInputState.blurTextInput(this._node);
   }
@@ -116,7 +119,7 @@ class TextInput extends Component {
   }
 
   setNativeProps(props) {
-    UIManager.updateView(this._node, props, this);
+    NativeMethodsMixin.setNativeProps.call(this, props);
   }
 
   componentDidMount() {
@@ -274,7 +277,8 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box',
     color: 'inherit',
     font: 'inherit',
-    padding: 0
+    padding: 0,
+    resize: 'none'
   }
 });
 

src/components/Touchable/TouchableHighlight.js

@@ -225,23 +225,36 @@ var TouchableHighlight = React.createClass({
 
   _onKeyEnter(e, callback) {
     var ENTER = 13
-    if (e.keyCode === ENTER) {
+    if ((e.type === 'keypress' ? e.charCode : e.keyCode) === ENTER) {
       callback && callback(e)
     }
   },
 
   render: function() {
+    const {
+      /* eslint-disable */
+      activeOpacity,
+      onHideUnderlay,
+      onShowUnderlay,
+      underlayColor,
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      pressRetentionOffset,
+      /* eslint-enable */
+      ...other
+    } = this.props;
+
     return (
       <View
-        accessible={true}
-        accessibilityLabel={this.props.accessibilityLabel}
-        accessibilityRole={this.props.accessibilityRole}
-        disabled={this.props.disabled}
-        hitSlop={this.props.hitSlop}
+        {...other}
         onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }}
         onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }}
         onKeyUp={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressOut) }}
-        onLayout={this.props.onLayout}
         onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
         onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
         onResponderGrant={this.touchableHandleResponderGrant}
@@ -255,7 +268,7 @@ var TouchableHighlight = React.createClass({
           this.state.underlayStyle
         ]}
         tabIndex={this.props.disabled ? null : '0'}
-        testID={this.props.testID}>
+      >
         {React.cloneElement(
           React.Children.only(this.props.children),
           {

src/components/Touchable/TouchableOpacity.js

@@ -157,26 +157,36 @@ var TouchableOpacity = React.createClass({
 
   _onKeyEnter(e, callback) {
     var ENTER = 13
-    if (e.keyCode === ENTER) {
+    if ((e.type === 'keypress' ? e.charCode : e.keyCode) === ENTER) {
       callback && callback(e)
     }
   },
 
   render: function() {
+    const {
+      /* eslint-disable */
+      activeOpacity,
+      focusedOpacity,
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      pressRetentionOffset,
+      /* eslint-enable */
+      ...other
+    } = this.props;
+
     return (
       <View
-        accessible={this.props.accessible !== false}
-        accessibilityLabel={this.props.accessibilityLabel}
-        accessibilityRole={this.props.accessibilityRole}
-        disabled={this.props.disabled}
+        {...other}
         style={[
           styles.root,
           this.props.disabled && styles.disabled,
           this.props.style
         ]}
-        testID={this.props.testID}
-        onLayout={this.props.onLayout}
-        hitSlop={this.props.hitSlop}
         onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }}
         onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }}
         onKeyUp={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressOut) }}
@@ -187,9 +197,7 @@ var TouchableOpacity = React.createClass({
         onResponderRelease={this.touchableHandleResponderRelease}
         onResponderTerminate={this.touchableHandleResponderTerminate}
         tabIndex={this.props.disabled ? null : '0'}
-      >
-        {this.props.children}
-      </View>
+      />
     );
   },
 });

src/components/Touchable/TouchableWithoutFeedback.js

@@ -145,6 +145,21 @@ const TouchableWithoutFeedback = React.createClass({
   },
 
   render: function(): React.Element<any> {
+    const {
+      /* eslint-disable */
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      pressRetentionOffset,
+      /* eslint-enable */
+      ...other
+    } = this.props;
+
+
     // Note(avik): remove dynamic typecast once Flow has been upgraded
     const child = React.Children.only(this.props.children);
     let children = child.props.children;
@@ -166,13 +181,7 @@ const TouchableWithoutFeedback = React.createClass({
         child.props.style
       ];
     return (React: any).cloneElement(child, {
-      accessible: this.props.accessible !== false,
-      accessibilityLabel: this.props.accessibilityLabel,
-      accessibilityRole: this.props.accessibilityRole,
-      disabled: this.props.disabled,
-      testID: this.props.testID,
-      onLayout: this.props.onLayout,
-      hitSlop: this.props.hitSlop,
+      ...other,
       onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
       onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
       onResponderGrant: this.touchableHandleResponderGrant,

src/components/View/ViewPropTypes.js

@@ -0,0 +1,37 @@
+import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes';
+import EdgeInsetsPropType from '../../propTypes/EdgeInsetsPropType';
+import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
+import ViewStylePropTypes from './ViewStylePropTypes';
+import { PropTypes } from 'react';
+
+const ViewPropTypes = {
+  ...BaseComponentPropTypes,
+  children: PropTypes.any,
+  collapsable: PropTypes.bool,
+  hitSlop: EdgeInsetsPropType,
+  onClick: PropTypes.func,
+  onClickCapture: PropTypes.func,
+  onLayout: PropTypes.func,
+  onMoveShouldSetResponder: PropTypes.func,
+  onMoveShouldSetResponderCapture: PropTypes.func,
+  onResponderGrant: PropTypes.func,
+  onResponderMove: PropTypes.func,
+  onResponderReject: PropTypes.func,
+  onResponderRelease: PropTypes.func,
+  onResponderTerminate: PropTypes.func,
+  onResponderTerminationRequest: PropTypes.func,
+  onStartShouldSetResponder: PropTypes.func,
+  onStartShouldSetResponderCapture: PropTypes.func,
+  onTouchCancel: PropTypes.func,
+  onTouchCancelCapture: PropTypes.func,
+  onTouchEnd: PropTypes.func,
+  onTouchEndCapture: PropTypes.func,
+  onTouchMove: PropTypes.func,
+  onTouchMoveCapture: PropTypes.func,
+  onTouchStart: PropTypes.func,
+  onTouchStartCapture: PropTypes.func,
+  pointerEvents: PropTypes.oneOf([ 'auto', 'box-none', 'box-only', 'none' ]),
+  style: StyleSheetPropType(ViewStylePropTypes)
+};
+
+module.exports = ViewPropTypes;

src/components/View/ViewStylePropTypes.js

@@ -10,7 +10,7 @@ const { number, oneOf, string } = PropTypes;
 const autoOrHiddenOrVisible = oneOf([ 'auto', 'hidden', 'visible' ]);
 const hiddenOrVisible = oneOf([ 'hidden', 'visible' ]);
 
-module.exports = process.env.NODE_ENV !== 'production' ? {
+module.exports = {
   ...AnimationPropTypes,
   ...BorderPropTypes,
   ...LayoutPropTypes,
@@ -21,6 +21,10 @@ module.exports = process.env.NODE_ENV !== 'production' ? {
   opacity: number,
   overflow: autoOrHiddenOrVisible,
   zIndex: number,
+  /**
+   * @platform unsupported
+   */
+  elevation: number,
   /*
    * @platform web
    */
@@ -33,7 +37,6 @@ module.exports = process.env.NODE_ENV !== 'production' ? {
   backgroundSize: string,
   boxShadow: string,
   cursor: string,
-  display: string,
   outline: string,
   overflowX: autoOrHiddenOrVisible,
   overflowY: autoOrHiddenOrVisible,
@@ -45,5 +48,6 @@ module.exports = process.env.NODE_ENV !== 'production' ? {
   transitionTimingFunction: string,
   userSelect: string,
   visibility: hiddenOrVisible,
+  willChange: string,
   WebkitOverflowScrolling: oneOf([ 'auto', 'touch' ])
-} : {};
+};

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

@@ -1,399 +1,29 @@
 exports[`components/View prop "children" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  style={Object {}}>
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4">
   <div
-    className="
-  rn-alignItems:stretch
-  rn-backgroundColor:transparent
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none"
-    data-testid="1"
-    style={Object {}} />
+    className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4"
+    data-testid="1" />
 </div>
 `;
 
 exports[`components/View prop "pointerEvents" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  style={
-    Object {
-      "pointerEvents": "box-only",
-    }
-  } />
-`;
-
-exports[`components/View prop "style" 1`] = `
-<div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-pointerEvents-ah5dr5 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4"
   style={Object {}} />
 `;
 
-exports[`components/View prop "style" 2`] = `
-<div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-
-
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  style={
-    Object {
-      "WebkitFlexGrow": 1,
-      "WebkitFlexShrink": 1,
-      "flexGrow": 1,
-      "flexShrink": 1,
-      "msFlexNegative": 1,
-      "msFlexPositive": 1,
-    }
-  } />
-`;
-
-exports[`components/View prop "style" 3`] = `
-<div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  style={
-    Object {
-      "WebkitFlexShrink": 1,
-      "flexShrink": 1,
-      "msFlexNegative": 1,
-    }
-  } />
-`;
-
-exports[`components/View prop "style" 4`] = `
-<div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-
-
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  style={
-    Object {
-      "WebkitFlexGrow": 1,
-      "WebkitFlexShrink": 2,
-      "flexGrow": 1,
-      "flexShrink": 2,
-      "msFlexNegative": 2,
-      "msFlexPositive": 1,
-    }
-  } />
-`;
-
 exports[`components/View rendered element is a "div" by default 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
-  style={Object {}} />
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4" />
 `;
 
 exports[`components/View rendered element is a "span" when inside <View accessibilityRole="button" /> 1`] = `
 <button
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-flexShrink:0
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4"
   role="button"
-  style={Object {}}
   type="button">
   <span
-    className="
-  rn-alignItems:stretch
-  rn-backgroundColor:transparent
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-flexShrink:0
-  rn-font:inherit
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none"
-    style={Object {}} />
+    className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4" />
 </button>
 `;

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

@@ -29,18 +29,4 @@ describe('components/View', () => {
     const component = renderer.create(<View pointerEvents='box-only' />);
     expect(component.toJSON()).toMatchSnapshot();
   });
-
-  test('prop "style"', () => {
-    let component = renderer.create(<View />);
-    expect(component.toJSON()).toMatchSnapshot();
-
-    component = renderer.create(<View style={{ flex: 1 }} />);
-    expect(component.toJSON()).toMatchSnapshot();
-
-    component = renderer.create(<View style={{ flexShrink: 1 }} />);
-    expect(component.toJSON()).toMatchSnapshot();
-
-    component = renderer.create(<View style={{ flex: 1, flexShrink: 2 }} />);
-    expect(component.toJSON()).toMatchSnapshot();
-  });
 });

src/components/View/index.js

@@ -2,13 +2,10 @@ import '../../modules/injectResponderEventPlugin';
 
 import applyLayout from '../../modules/applyLayout';
 import applyNativeMethods from '../../modules/applyNativeMethods';
-import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes';
 import createDOMElement from '../../modules/createDOMElement';
-import EdgeInsetsPropType from '../../propTypes/EdgeInsetsPropType';
 import normalizeNativeEvent from '../../modules/normalizeNativeEvent';
 import StyleSheet from '../../apis/StyleSheet';
-import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
-import ViewStylePropTypes from './ViewStylePropTypes';
+import ViewPropTypes from './ViewPropTypes';
 import { Component, PropTypes } from 'react';
 
 const eventHandlerNames = [
@@ -34,38 +31,24 @@ const eventHandlerNames = [
   'onTouchStartCapture'
 ];
 
+const _normalizeEventForHandler = (handler) => (e) => {
+  e.nativeEvent = normalizeNativeEvent(e.nativeEvent);
+  return handler(e);
+};
+
+const normalizeEventHandlers = (props) => {
+  eventHandlerNames.forEach((handlerName) => {
+    const handler = props[handlerName];
+    if (typeof handler === 'function') {
+      props[handlerName] = _normalizeEventForHandler(handler);
+    }
+  });
+};
+
 class View extends Component {
   static displayName = 'View';
 
-  static propTypes = {
-    ...BaseComponentPropTypes,
-    children: PropTypes.any,
-    collapsable: PropTypes.bool,
-    hitSlop: EdgeInsetsPropType,
-    onClick: PropTypes.func,
-    onClickCapture: PropTypes.func,
-    onLayout: PropTypes.func,
-    onMoveShouldSetResponder: PropTypes.func,
-    onMoveShouldSetResponderCapture: PropTypes.func,
-    onResponderGrant: PropTypes.func,
-    onResponderMove: PropTypes.func,
-    onResponderReject: PropTypes.func,
-    onResponderRelease: PropTypes.func,
-    onResponderTerminate: PropTypes.func,
-    onResponderTerminationRequest: PropTypes.func,
-    onStartShouldSetResponder: PropTypes.func,
-    onStartShouldSetResponderCapture: PropTypes.func,
-    onTouchCancel: PropTypes.func,
-    onTouchCancelCapture: PropTypes.func,
-    onTouchEnd: PropTypes.func,
-    onTouchEndCapture: PropTypes.func,
-    onTouchMove: PropTypes.func,
-    onTouchMoveCapture: PropTypes.func,
-    onTouchStart: PropTypes.func,
-    onTouchStartCapture: PropTypes.func,
-    pointerEvents: PropTypes.oneOf([ 'auto', 'box-none', 'box-only', 'none' ]),
-    style: StyleSheetPropType(ViewStylePropTypes)
-  };
+  static propTypes = ViewPropTypes;
 
   static defaultProps = {
     accessible: true
@@ -102,37 +85,19 @@ class View extends Component {
       ...otherProps
     } = this.props;
 
-    const flattenedStyle = StyleSheet.flatten(style);
-    const pointerEventsStyle = pointerEvents && { pointerEvents };
-    // 'View' needs to set 'flexShrink:0' only when there is no 'flex' or 'flexShrink' style provided
-    const needsFlexReset = !flattenedStyle || (flattenedStyle.flex == null && flattenedStyle.flexShrink == null);
-
     const component = this.context.isInAButtonView ? 'span' : 'div';
 
-    eventHandlerNames.reduce((props, handlerName) => {
-      const handler = this.props[handlerName];
-      if (typeof handler === 'function') {
-        props[handlerName] = this._normalizeEventForHandler(handler);
-      }
-      return props;
-    }, otherProps);
+    // DOM events need to be normalized to expect RN format
+    normalizeEventHandlers(otherProps);
 
     otherProps.style = [
       styles.initial,
       style,
-      needsFlexReset && styles.flexReset,
-      pointerEventsStyle
+      pointerEvents && pointerEventStyles[pointerEvents]
     ];
 
     return createDOMElement(component, otherProps);
   }
-
-  _normalizeEventForHandler(handler) {
-    return (e) => {
-      e.nativeEvent = normalizeNativeEvent(e.nativeEvent);
-      return handler(e);
-    };
-  }
 }
 
 const styles = StyleSheet.create({
@@ -159,9 +124,21 @@ const styles = StyleSheet.create({
     // fix flexbox bugs
     minHeight: 0,
     minWidth: 0
+  }
+});
+
+const pointerEventStyles = StyleSheet.create({
+  'auto': {
+    pointerEvents: 'auto'
   },
-  flexReset: {
-    flexShrink: 0
+  'box-none': {
+    pointerEvents: 'box-none'
+  },
+  'box-only': {
+    pointerEvents: 'box-only'
+  },
+  'none': {
+    pointerEvents: 'none'
   }
 });
 

src/core.js

@@ -1,8 +1,5 @@
 import findNodeHandle from './modules/findNodeHandle';
-import ReactDefaultInjection from 'react-dom/lib/ReactDefaultInjection';
-import { render, unmountComponentAtNode } from 'react-dom/lib/ReactMount';
-
-ReactDefaultInjection.inject();
+import { render, unmountComponentAtNode } from 'react-dom';
 
 // APIs
 import I18nManager from './apis/I18nManager';
@@ -21,6 +18,9 @@ import View from './components/View';
 
 // modules
 import createDOMElement from './modules/createDOMElement';
+import modality from './modules/modality';
+
+modality();
 
 const ReactNativeCore = {
   createDOMElement,

src/index.js

@@ -1,8 +1,5 @@
 import findNodeHandle from './modules/findNodeHandle';
-import ReactDefaultInjection from 'react-dom/lib/ReactDefaultInjection';
-import { render, unmountComponentAtNode } from 'react-dom/lib/ReactMount';
-
-ReactDefaultInjection.inject();
+import { render, unmountComponentAtNode } from 'react-dom';
 
 // APIs
 import Animated from './apis/Animated';
@@ -42,6 +39,7 @@ import View from './components/View';
 
 // modules
 import createDOMElement from './modules/createDOMElement';
+import modality from './modules/modality';
 import NativeModules from './modules/NativeModules';
 
 // propTypes
@@ -49,6 +47,8 @@ import ColorPropType from './propTypes/ColorPropType';
 import EdgeInsetsPropType from './propTypes/EdgeInsetsPropType';
 import PointPropType from './propTypes/PointPropType';
 
+modality();
+
 const ReactNative = {
   // top-level API
   findNodeHandle,

src/modules/NativeMethodsMixin/index.js

@@ -10,18 +10,6 @@ import findNodeHandle from '../findNodeHandle';
 import StyleRegistry from '../../apis/StyleSheet/registry';
 import UIManager from '../../apis/UIManager';
 
-const REGEX_CLASSNAME_SPLIT = /\s+/;
-const REGEX_STYLE_PROP = /rn-(.*):.*/;
-
-const classNameFilter = (className) => { return className !== ''; };
-const classNameToList = (className = '') => className.split(REGEX_CLASSNAME_SPLIT).filter(classNameFilter);
-const getStyleProp = (className) => {
-  const match = className.match(REGEX_STYLE_PROP);
-  if (match) {
-    return match[1];
-  }
-};
-
 const NativeMethodsMixin = {
   /**
    * Removes focus from an input or view. This is the opposite of `focus()`.
@@ -80,40 +68,10 @@ const NativeMethodsMixin = {
   setNativeProps(nativeProps: Object) {
     // DOM state
     const node = findNodeHandle(this);
-    const domClassList = [ ...node.classList ];
+    const classList = [ ...node.classList ];
 
-    // Resolved state
-    const resolvedProps = StyleRegistry.resolve(nativeProps.style);
-    const resolvedClassList = classNameToList(resolvedProps.className);
-
-    // Merged state
-    const classList = [];
-    const style = { ...resolvedProps.style };
-
-    // The node has class names that we need to override.
-    // Only pass on a class name when the style is unchanged.
-    domClassList.forEach((c) => {
-      const prop = getStyleProp(c);
-      if (resolvedProps.className.indexOf(prop) === -1) {
-        classList.push(c);
-      }
-    });
-
-    // The node has styles that we need to override.
-    // Remove any inline style that may collide with a new class name.
-    resolvedClassList.forEach((c) => {
-      const prop = getStyleProp(c);
-      classList.push(c);
-      style[prop] = null;
-    });
-
-    const className = `\n${classList.sort().join('\n')}`;
-
-    const props = {
-      ...nativeProps,
-      className,
-      style
-    };
+    const { className, style } = StyleRegistry.resolveStateful(nativeProps.style, classList);
+    const props = { ...nativeProps, className, style };
 
     UIManager.updateView(node, props, this);
   }

src/modules/applyLayout/index.js

@@ -33,7 +33,7 @@ const applyLayout = (Component) => {
         if (layout.x !== x || layout.y !== y || layout.width !== width || layout.height !== height) {
           const nextLayout = { x, y, width, height };
           const nativeEvent = { layout: nextLayout };
-          onLayout({ nativeEvent });
+          onLayout({ nativeEvent, timeStamp: Date.now() });
           this._layoutState = nextLayout;
         }
       });