0.0.76

[fix] ProgressBar animation styles
Fix #384
2026-03-30 23:23:35 +08:00 · 2017-03-06 12:31:41 -08:00 · 2017-03-06 12:30:34 -08:00 · 2017-03-05 09:21:10 -08:00 · 2017-03-02 19:10:05 -08:00 · 2017-03-02 18:59:33 -08:00
145 changed files with 3888 additions and 3538 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -9,6 +9,10 @@
    },
    "sourceType": "module"
  },
+  "extends": [
+    "prettier",
+    "prettier/react"
+  ],
  "plugins": [
    "jsx-a11y",
    "promise",
@@ -24,31 +28,12 @@
    "window": false
  },
  "rules": {
-    "accessor-pairs": 2,
-    "array-bracket-spacing": ["error", "always"],
-    "arrow-parens": [2, "always"],
-    "arrow-spacing": [2, { "before": true, "after": true }],
-    "block-spacing": [2, "always"],
-    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
    "camelcase": 0,
-    "comma-dangle": [2, "never"],
-    "comma-spacing": [2, { "before": false, "after": true }],
-    "comma-style": [2, "last"],
-    "computed-property-spacing": ["error", "never"],
    "constructor-super": 2,
-    "curly": [2, "all"],
    "default-case": [2, { commentPattern: '^no default$' }],
-    "dot-location": [2, "property"],
-    "eol-last": 2,
    "eqeqeq": [2, "allow-null"],
-    "generator-star-spacing": [2, { "before": true, "after": true }],
    "handle-callback-err": [2, "^(err|error)$" ],
-    "indent": [2, 2, { "SwitchCase": 1 }],
-    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
-    "keyword-spacing": [2, { "before": true, "after": true }],
-    "max-len": [2, 120, 4],
    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
-    "new-parens": 2,
    "no-alert": 1,
    "no-array-constructor": 2,
    "no-caller": 2,
@@ -71,8 +56,6 @@
    "no-extend-native": 2,
    "no-extra-bind": 2,
    "no-extra-boolean-cast": 2,
-    "no-extra-parens": [2, "functions"],
-    "no-extra-semi": 2,
    "no-fallthrough": 2,
    "no-floating-decimal": 2,
    "no-func-assign": 2,
@@ -85,10 +68,7 @@
    "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
    "no-lone-blocks": 2,
    "no-loop-func": 2,
-    "no-mixed-spaces-and-tabs": 2,
-    "no-multi-spaces": 2,
    "no-multi-str": 2,
-    "no-multiple-empty-lines": [2, { "max": 1 }],
    "no-native-reassign": 2,
    "no-negated-in-lhs": 2,
    "no-new": 2,
@@ -110,11 +90,9 @@
    "no-self-compare": 2,
    "no-sequences": 2,
    "no-shadow-restricted-names": 2,
-    "no-spaced-func": 2,
    "no-sparse-arrays": 2,
    "no-this-before-super": 2,
    "no-throw-literal": 2,
-    "no-trailing-spaces": 2,
    "no-undef": 2,
    "no-undef-init": 2,
    "no-unexpected-multiline": 2,
@@ -129,30 +107,13 @@
    "no-useless-constructor": 2,
    "no-useless-escape": 2,
    "no-var": 2,
-    "no-whitespace-before-property": 2,
    "no-with": 2,
-    "object-curly-spacing": ["error", "always"],
-    "operator-linebreak": [2, "after"],
-    "padded-blocks": [2, "never"],
    "prefer-const": 2,
    "prefer-rest-params": 2,
-    "prefer-template": 2,
    "quotes": [2, "single", "avoid-escape"],
    "radix": 2,
-    "rest-spread-spacing": ["error"],
-    "semi": [2, "always"],
-    "semi-spacing": [2, { "before": false, "after": true }],
-    "space-before-blocks": [2, "always"],
-    "space-before-function-paren": [2, { "anonymous": "always", "named": "never" }],
-    "space-in-parens": [2, "never"],
-    "space-infix-ops": 2,
-    "space-unary-ops": [2, { "words": true, "nonwords": false }],
-    "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] }],
-    "template-curly-spacing": [2, "never"],
    "use-isnan": 2,
    "valid-typeof": 2,
-    "wrap-iife": [2, "outside"],
-    "yield-star-spacing": [2, "both"],
    "yoda": [2, "never"],

    // promise
@@ -181,14 +142,10 @@
    "jsx-a11y/tabindex-no-positive": 2,

    // react
-    "jsx-quotes": [2, "prefer-single"],
    "react/display-name": 0,
-    "react/jsx-boolean-value": 2,
    "react/jsx-handler-names": [2, {
      "eventHandlerPrefix": "_handle"
    }],
-    "react/jsx-indent": [2, 2],
-    "react/jsx-indent-props": [2, 2],
    "react/jsx-no-bind": 2,
    "react/jsx-no-duplicate-props": 2,
    "react/jsx-no-undef": 2,
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,3 @@
-/dist
-/dist-examples
-/dist-performance
-/node_modules
+node_modules
+dist
+dist-examples
--- a/docs/components/Text.md
+++ b/docs/components/Text.md
@@ -63,6 +63,7 @@ Lets the user select the text.
 + ...[View#style](View.md)
 + `color`
 + `fontFamily`
+ `fontFeatureSettings` ‡
 + `fontSize`
 + `fontStyle`
 + `fontWeight`
@@ -71,17 +72,19 @@ Lets the user select the text.
 + `textAlign`
 + `textAlignVertical`
 + `textDecorationLine`
-+ `textOverflow`
-+ `textRendering`
+ `textOverflow` ‡
+ `textRendering` ‡
 + `textShadowColor`
 + `textShadowOffset`
 + `textShadowRadius`
-+ `textTransform`
-+ `unicodeBidi`
+ `textTransform` ‡
+ `unicodeBidi` ‡
 + `whiteSpace`
-+ `wordWrap`
+ `wordWrap` ‡
 + `writingDirection`

+‡ web only.
+
 **testID**: string

 Used to locate this view in end-to-end tests.
--- a/docs/components/TextInput.md
+++ b/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

--- a/docs/components/View.md
+++ b/docs/components/View.md
@@ -99,23 +99,23 @@ 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`
@@ -139,7 +139,8 @@ from `style`.
 + `bottom`
 + `boxShadow`
 + `boxSizing`
-+ `cursor`
+ `cursor` ‡
+ `display` ‡
 + `flex` (number)
 + `flexBasis`
 + `flexDirection`
@@ -162,9 +163,10 @@ from `style`.
 + `minWidth`
 + `opacity`
 + `order`
+ `outline` ‡
 + `overflow`
-+ `overflowX`
-+ `overflowY`
+ `overflowX` ‡
+ `overflowY` ‡
 + `padding` (single value)
 + `paddingBottom`
 + `paddingHorizontal`
@@ -172,22 +174,25 @@ from `style`.
 + `paddingRight`
 + `paddingTop`
 + `paddingVertical`
-+ `perspective`
-+ `perspectiveOrigin`
+ `perspective` ‡
+ `perspectiveOrigin` ‡
 + `position`
 + `right`
 + `top`
 + `transform`
-+ `transformOrigin`
-+ `transitionDelay`
-+ `transitionDuration`
-+ `transitionProperty`
-+ `transitionTimingFunction`
-+ `userSelect`
-+ `visibility`
+ `transformOrigin` ‡
+ `transitionDelay` ‡
+ `transitionDuration` ‡
+ `transitionProperty` ‡
+ `transitionTimingFunction` ‡
+ `userSelect` ‡
+ `visibility` ‡
 + `width`
+ `willChange` ‡
 + `zIndex`

+‡ web only.
+
 Default:

 ```js
--- a/examples/components/Touchable/TouchableExample.js
+++ b/examples/components/Touchable/TouchableExample.js
@@ -57,7 +57,6 @@ const examples = [
          <TouchableHighlight
            style={styles.wrapper}
            activeOpacity={1}
-            animationVelocity={0}
            underlayColor="rgb(210, 230, 255)"
            onPress={() => console.log('custom THW text - highlight')}>
            <View style={styles.wrapperCustom}>
@@ -318,7 +317,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 +327,6 @@ var TouchableDisabled = React.createClass({

        <TouchableHighlight
          activeOpacity={1}
-          animationVelocity={0}
          underlayColor="rgb(210, 230, 255)"
          style={[styles.row, styles.block]}
          onPress={action('TouchableHighlight')}>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-native-web",
-  "version": "0.0.72",
+  "version": "0.0.76",
  "description": "React Native for Web",
  "main": "dist/index.js",
  "files": [
@@ -11,11 +11,12 @@
  "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",
+    "fmt": "find performance src -name '*.js' | grep -v -E '(node_modules|dist)' | xargs prettier --print-width=100 --single-quote --write",
+    "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",
@@ -29,6 +30,7 @@
    "debounce": "^1.0.0",
    "deep-assign": "^2.0.0",
    "fbjs": "^0.8.8",
+    "hyphenate-style-name": "^1.0.2",
    "inline-style-prefixer": "^3.0.0",
    "normalize-css-color": "^1.0.2",
    "react-dom": "~15.4.1",
@@ -46,13 +48,14 @@
    "del-cli": "^0.2.1",
    "enzyme": "^2.4.1",
    "eslint": "^3.4.0",
+    "eslint-config-prettier": "^1.4.0",
    "eslint-plugin-jsx-a11y": "^2.2.0",
    "eslint-plugin-promise": "^2.0.1",
    "eslint-plugin-react": "^6.1.2",
    "file-loader": "^0.9.0",
    "jest": "^16.0.2",
-    "marky": "^1.1.1",
    "node-libs-browser": "^0.5.3",
+    "prettier": "^0.19.0",
    "react": "~15.4.1",
    "react-addons-test-utils": "~15.4.1",
    "react-test-renderer": "~15.4.1",
--- a/performance/README.md
+++ b/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.
--- a/performance/benchmark.js
+++ b/performance/benchmark.js
@@ -1,67 +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.duration;
-};
-
-const benchmark = ({ name, description, setup, teardown, task, runs }) => {
-  return new Promise((resolve) => {
-    const durations = [];
-    let i = 0;
-
-    console.group(`[benchmark] ${name}`);
-    console.log(description);
-
-    setup();
-    const first = measure('first', task);
-    teardown();
-
-    const done = () => {
-      const mean = durations.reduce((sum, duration) => {
-        return sum + duration;
-      }, 0) / runs;
-
-      const firstDuration = fmt(first);
-      const meanDuration = fmt(mean);
-
-      console.log(`First: ${firstDuration}`);
-      console.log(`Mean: ${meanDuration}`);
-      console.groupEnd();
-      resolve(mean);
-    };
-
-    const a = () => {
-      setup();
-      window.requestAnimationFrame(b);
-    };
-
-    const b = () => {
-      const duration = measure('mean', task);
-      durations.push(duration);
-      c();
-    };
-
-    const c = () => {
-      teardown();
-      window.requestAnimationFrame(d);
-    };
-
-    const d = () => {
-      i += 1;
-      if (i < runs) {
-        window.requestAnimationFrame(a);
-      } else {
-        window.requestAnimationFrame(done);
-      }
-    };
-
-    window.requestAnimationFrame(a);
-  });
-};
-
-module.exports = benchmark;
--- a/performance/benchmarks/deepTree/createDeepTree.js
+++ b/performance/benchmarks/deepTree/createDeepTree.js
@@ -1,96 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-
-/* eslint-disable */
-const base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
-/* eslint-enable */
-
-const createDeepTree = (implementation, options = {}) => {
-  const { Image, StyleSheet, View } = implementation;
-  const TerminalComponent = options.leafComponent ? implementation[options.leafComponent] : View;
-
-  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 && (
-            <TerminalComponent
-              source={TerminalComponent === Image && { uri: base64Icon }}
-              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;
--- a/performance/benchmarks/deepTree/index.js
+++ b/performance/benchmarks/deepTree/index.js
@@ -1,31 +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 = (config, node) => () => {
-  const { breadth, depth, leafComponent = 'View', registerStyles = true, runs, wrap } = config;
-
-  // React Native for Web implementation of the tree
-  const DeepTree = createDeepTree(ReactNative, { registerStyles });
-
-  const setup = () => {};
-  const teardown = () => ReactDOM.unmountComponentAtNode(node);
-
-  let name = `DeepTree: ${leafComponent}`;
-  if (!registerStyles) {
-    name += ' (unregistered styles)';
-  }
-
-  return benchmark({
-    name,
-    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;
--- a/performance/implementations/css-modules/Box/index.js
+++ b/performance/implementations/css-modules/Box/index.js
@@ -0,0 +1,18 @@
+/* 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;
--- a/performance/implementations/css-modules/Box/styles.css
+++ b/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;
+}
--- a/performance/implementations/css-modules/View/index.js
+++ b/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;
--- a/performance/implementations/css-modules/View/styles.css
+++ b/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;
+};
--- a/performance/implementations/css-modules/index.js
+++ b/performance/implementations/css-modules/index.js
@@ -0,0 +1,7 @@
+import Box from './Box';
+import View from './View';
+
+export default {
+  Box,
+  View
+};
--- a/performance/implementations/glamor/Box/index.js
+++ b/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;
--- a/performance/implementations/glamor/View/index.js
+++ b/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;
--- a/performance/implementations/glamor/index.js
+++ b/performance/implementations/glamor/index.js
@@ -0,0 +1,7 @@
+import Box from './Box';
+import View from './View';
+
+export default {
+  Box,
+  View
+};
--- a/performance/implementations/react-native-web/Box/index.js
+++ b/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;
--- a/performance/implementations/react-native-web/Box/lite.js
+++ b/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;
--- a/performance/implementations/react-native-web/View/index.js
+++ b/performance/implementations/react-native-web/View/index.js
@@ -0,0 +1,2 @@
+import View from 'react-native/components/View';
+export default View;
--- a/performance/implementations/react-native-web/View/lite.js
+++ b/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;
--- a/performance/implementations/react-native-web/index.js
+++ b/performance/implementations/react-native-web/index.js
@@ -0,0 +1,7 @@
+import Box from './Box';
+import View from './View';
+
+export default {
+  Box,
+  View
+};
--- a/performance/implementations/react-native-web/lite.js
+++ b/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
+};
--- a/performance/implementations/styled-components/Box/index.js
+++ b/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;
--- a/performance/implementations/styled-components/View/index.js
+++ b/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;
--- a/performance/implementations/styled-components/index.js
+++ b/performance/implementations/styled-components/index.js
@@ -0,0 +1,7 @@
+import Box from './Box';
+import View from './View';
+
+export default {
+  Box,
+  View
+};
--- a/performance/index.html
+++ b/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>
--- a/performance/index.js
+++ b/performance/index.js
@@ -1,16 +1,26 @@
-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: 5, registerStyles: false }, node))
-  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 5 }, node))
-  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 5, leafComponent: 'Image' }, node))
-  .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 10 }, 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) => promise.then(test()), Promise.resolve());
--- a/performance/modules/NestedTree.js
+++ b/performance/modules/NestedTree.js
@@ -0,0 +1,40 @@
+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;
--- a/performance/modules/benchmark.js
+++ b/performance/modules/benchmark.js
@@ -0,0 +1,97 @@
+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;
--- a/performance/modules/createRenderBenchmark.js
+++ b/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;
--- a/performance/package.json
+++ b/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": "2.0.0-5"
+  },
+  "devDependencies": {
+    "css-loader": "^0.26.2",
+    "style-loader": "^0.13.2"
+  }
+}
--- a/performance/tests/renderDeepTree.js
+++ b/performance/tests/renderDeepTree.js
@@ -0,0 +1,13 @@
+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;
--- a/performance/tests/renderWideTree.js
+++ b/performance/tests/renderWideTree.js
@@ -0,0 +1,13 @@
+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;
--- a/performance/webpack.config.js
+++ b/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,14 @@ module.exports = {
    ]
  },
  plugins: [
-    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
+    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: {
--- a/performance/yarn.lock
+++ b/performance/yarn.lock
@@ -0,0 +1,975 @@
+# 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.3:
+  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.8, fbjs@^0.8.9:
+  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.22, 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@2.0.0-5:
+  version "2.0.0-5"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.0.0-5.tgz#df802d110cfb1a08a37e7746ecff11c765075e34"
+  dependencies:
+    buffer "^5.0.3"
+    css-to-react-native "^1.0.6"
+    fbjs "^0.8.9"
+    glamor "^2.20.22"
+    inline-style-prefixer "^2.0.5"
+    is-function "^1.0.1"
+    is-plain-object "^2.0.1"
+    stylis "^1.1.13"
+    supports-color "^3.2.3"
+
+stylis@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-1.1.13.tgz#e15095d0027f49683f7556e31df184c1eafe1d6d"
+
+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.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"
--- a/src/apis/AppRegistry/tests/snapshots/renderApplication-test.js.snap
+++ b/src/apis/AppRegistry/tests/snapshots/renderApplication-test.js.snap
@@ -1,52 +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{-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{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-flexShrink\\:0{-webkit-flex-shrink:0px;flex-shrink:0}
-.rn-flexBasis\\:auto{-webkit-flex-basis:auto;flex-basis:auto}
-.rn-flexDirection\\: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-pointerEvents\\:auto{pointer-events:auto}
-.rn-pointerEvents\\:box-none{pointer-events:box-none}
-.rn-pointerEvents\\:box-only{pointer-events:box-only}
-.rn-pointerEvents\\:none{pointer-events:none}
+"<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>"
 `;
--- a/src/apis/AppRegistry/index.js
+++ b/src/apis/AppRegistry/index.js
@@ -14,12 +14,12 @@ import renderApplication, { getApplication } from './renderApplication';
 const emptyObject = {};
 const runnables = {};

-type ComponentProvider = () => Component<any, any, any>
+type ComponentProvider = () => Component<any, any, any>;

 type AppConfig = {
-  appKey: string;
-  component?: ComponentProvider;
-  run?: Function;
+  appKey: string,
+  component?: ComponentProvider,
+  run?: Function
 };

 /**
@@ -34,7 +34,7 @@ class AppRegistry {
    invariant(
      runnables[appKey] && runnables[appKey].getApplication,
      `Application ${appKey} has not been registered. ` +
-      'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
+        'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
    );

    return runnables[appKey].getApplication(appParameters);
@@ -42,8 +42,10 @@ class AppRegistry {

  static registerComponent(appKey: string, getComponentFunc: ComponentProvider): string {
    runnables[appKey] = {
-      getApplication: ({ initialProps } = emptyObject) => getApplication(getComponentFunc(), initialProps),
-      run: ({ initialProps = emptyObject, rootTag }) => renderApplication(getComponentFunc(), initialProps, rootTag)
+      getApplication: ({ initialProps } = emptyObject) =>
+        getApplication(getComponentFunc(), initialProps),
+      run: ({ initialProps = emptyObject, rootTag }) =>
+        renderApplication(getComponentFunc(), initialProps, rootTag)
    };
    return appKey;
  }
@@ -72,14 +74,14 @@ class AppRegistry {

    console.log(
      `Running application "${appKey}" with appParams: ${JSON.stringify(params)}. ` +
-      `development-level warnings are ${isDevelopment ? 'ON' : 'OFF'}, ` +
-      `performance optimizations are ${isDevelopment ? 'OFF' : 'ON'}`
+        `development-level warnings are ${isDevelopment ? 'ON' : 'OFF'}, ` +
+        `performance optimizations are ${isDevelopment ? 'OFF' : 'ON'}`
    );

    invariant(
      runnables[appKey] && runnables[appKey].run,
      `Application "${appKey}" has not been registered. ` +
-      'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
+        'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
    );

    runnables[appKey].run(appParameters);
--- a/src/apis/AppRegistry/renderApplication.js
+++ b/src/apis/AppRegistry/renderApplication.js
@@ -12,26 +12,21 @@ import ReactNativeApp from './ReactNativeApp';
 import StyleSheet from '../../apis/StyleSheet';
 import React, { Component } from 'react';

-export default function renderApplication(RootComponent: Component, initialProps: Object, rootTag: any) {
+export default function renderApplication(
+  RootComponent: Component,
+  initialProps: Object,
+  rootTag: any
+) {
  invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);

  const component = (
-    <ReactNativeApp
-      initialProps={initialProps}
-      rootComponent={RootComponent}
-      rootTag={rootTag}
-    />
+    <ReactNativeApp initialProps={initialProps} rootComponent={RootComponent} rootTag={rootTag} />
  );
  render(component, rootTag);
 }

 export function getApplication(RootComponent: Component, initialProps: Object): Object {
-  const element = (
-    <ReactNativeApp
-      initialProps={initialProps}
-      rootComponent={RootComponent}
-    />
-  );
+  const element = <ReactNativeApp initialProps={initialProps} rootComponent={RootComponent} />;
  const stylesheet = StyleSheet.renderToString();
  return { element, stylesheet };
 }
--- a/src/apis/AppState/tests/index-test.js
+++ b/src/apis/AppState/tests/index-test.js
@@ -6,7 +6,9 @@ describe('apis/AppState', () => {
  const handler = () => {};

  afterEach(() => {
-    try { AppState.removeEventListener('change', handler); } catch (e) {}
+    try {
+      AppState.removeEventListener('change', handler);
+    } catch (e) {}
  });

  describe('addEventListener', () => {
--- a/src/apis/AppState/index.js
+++ b/src/apis/AppState/index.js
@@ -2,7 +2,7 @@ import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 import findIndex from 'array-find-index';
 import invariant from 'fbjs/lib/invariant';

-const EVENT_TYPES = [ 'change' ];
+const EVENT_TYPES = ['change'];
 const VISIBILITY_CHANGE_EVENT = 'visibilitychange';

 const AppStates = {
@@ -13,7 +13,7 @@ const AppStates = {
 const listeners = [];

 class AppState {
-  static isSupported = ExecutionEnvironment.canUseDOM && document.visibilityState
+  static isSupported = ExecutionEnvironment.canUseDOM && document.visibilityState;

  static get currentState() {
    if (!AppState.isSupported) {
@@ -32,18 +32,29 @@ class AppState {

  static addEventListener(type: string, handler: Function) {
    if (AppState.isSupported) {
-      invariant(EVENT_TYPES.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+      invariant(
+        EVENT_TYPES.indexOf(type) !== -1,
+        'Trying to subscribe to unknown event: "%s"',
+        type
+      );
      const callback = () => handler(AppState.currentState);
-      listeners.push([ handler, callback ]);
+      listeners.push([handler, callback]);
      document.addEventListener(VISIBILITY_CHANGE_EVENT, callback, false);
    }
  }

  static removeEventListener(type: string, handler: Function) {
    if (AppState.isSupported) {
-      invariant(EVENT_TYPES.indexOf(type) !== -1, 'Trying to remove listener for unknown event: "%s"', type);
-      const listenerIndex = findIndex(listeners, (pair) => pair[0] === handler);
-      invariant(listenerIndex !== -1, 'Trying to remove AppState listener for unregistered handler');
+      invariant(
+        EVENT_TYPES.indexOf(type) !== -1,
+        'Trying to remove listener for unknown event: "%s"',
+        type
+      );
+      const listenerIndex = findIndex(listeners, pair => pair[0] === handler);
+      invariant(
+        listenerIndex !== -1,
+        'Trying to remove AppState listener for unregistered handler'
+      );
      const callback = listeners[listenerIndex][1];
      document.removeEventListener(VISIBILITY_CHANGE_EVENT, callback, false);
      listeners.splice(listenerIndex, 1);
--- a/src/apis/AsyncStorage/tests/index-test.js
+++ b/src/apis/AsyncStorage/tests/index-test.js
@@ -32,7 +32,7 @@ const originalLocalStorage = window.localStorage;

 describe('apis/AsyncStorage', () => {
  describe('mergeLocalStorageItem', () => {
-    test('should have same behavior as react-native', (done) => {
+    test('should have same behavior as react-native', done => {
      window.localStorage = mockLocalStorage;
      // https://facebook.github.io/react-native/docs/asyncstorage.html
      const UID123_object = {
@@ -45,30 +45,33 @@ describe('apis/AsyncStorage', () => {
        traits: { eyes: 'blue', shoe_size: 10 }
      };

-      waterfall([
-        (cb) => {
-          AsyncStorage.setItem('UID123', JSON.stringify(UID123_object))
-            .then(() => cb(null))
-            .catch(cb);
-        },
-        (cb) => {
-          AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta))
-            .then(() => cb(null))
-            .catch(cb);
-        },
-        (cb) => {
-          AsyncStorage.getItem('UID123')
-            .then((result) => {
-              cb(null, JSON.parse(result));
-            })
-            .catch(cb);
+      waterfall(
+        [
+          cb => {
+            AsyncStorage.setItem('UID123', JSON.stringify(UID123_object))
+              .then(() => cb(null))
+              .catch(cb);
+          },
+          cb => {
+            AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta))
+              .then(() => cb(null))
+              .catch(cb);
+          },
+          cb => {
+            AsyncStorage.getItem('UID123')
+              .then(result => {
+                cb(null, JSON.parse(result));
+              })
+              .catch(cb);
+          }
+        ],
+        (err, result) => {
+          expect(err).toEqual(null);
+          expect(result).toMatchSnapshot();
+          window.localStorage = originalLocalStorage;
+          done();
        }
-      ], (err, result) => {
-        expect(err).toEqual(null);
-        expect(result).toMatchSnapshot();
-        window.localStorage = originalLocalStorage;
-        done();
-      });
+      );
    });
  });
 });
--- a/src/apis/AsyncStorage/index.js
+++ b/src/apis/AsyncStorage/index.js
@@ -82,12 +82,13 @@ class AsyncStorage {
   *   multiGet(['k1', 'k2']) -> [['k1', 'val1'], ['k2', 'val2']]
   */
  static multiGet(keys: Array<string>) {
-    const promises = keys.map((key) => AsyncStorage.getItem(key));
+    const promises = keys.map(key => AsyncStorage.getItem(key));

-    return Promise.all(promises).then(
-      (result) => Promise.resolve(result.map((value, i) => [ keys[i], value ])),
-      (error) => Promise.reject(error)
-    );
+    return Promise.all(promises)
+      .then(
+        result => Promise.resolve(result.map((value, i) => [keys[i], value])),
+        error => Promise.reject(error)
+      );
  }

  /**
@@ -97,24 +98,18 @@ class AsyncStorage {
   *   multiMerge([['k1', 'val1'], ['k2', 'val2']])
   */
  static multiMerge(keyValuePairs: Array<Array<string>>) {
-    const promises = keyValuePairs.map((item) => AsyncStorage.mergeItem(item[0], item[1]));
+    const promises = keyValuePairs.map(item => AsyncStorage.mergeItem(item[0], item[1]));

-    return Promise.all(promises).then(
-      () => Promise.resolve(null),
-      (error) => Promise.reject(error)
-    );
+    return Promise.all(promises).then(() => Promise.resolve(null), error => Promise.reject(error));
  }

  /**
   * Delete all the keys in the `keys` array.
   */
  static multiRemove(keys: Array<string>) {
-    const promises = keys.map((key) => AsyncStorage.removeItem(key));
+    const promises = keys.map(key => AsyncStorage.removeItem(key));

-    return Promise.all(promises).then(
-      () => Promise.resolve(null),
-      (error) => Promise.reject(error)
-    );
+    return Promise.all(promises).then(() => Promise.resolve(null), error => Promise.reject(error));
  }

  /**
@@ -122,12 +117,9 @@ class AsyncStorage {
   *   multiSet([['k1', 'val1'], ['k2', 'val2']])
   */
  static multiSet(keyValuePairs: Array<Array<string>>) {
-    const promises = keyValuePairs.map((item) => AsyncStorage.setItem(item[0], item[1]));
+    const promises = keyValuePairs.map(item => AsyncStorage.setItem(item[0], item[1]));

-    return Promise.all(promises).then(
-      () => Promise.resolve(null),
-      (error) => Promise.reject(error)
-    );
+    return Promise.all(promises).then(() => Promise.resolve(null), error => Promise.reject(error));
  }

  /**
--- a/src/apis/I18nManager/index.js
+++ b/src/apis/I18nManager/index.js
@@ -5,7 +5,7 @@ type I18nManagerStatus = {
  forceRTL: (forceRTL: boolean) => {},
  setRTL: (setRTL: boolean) => {},
  isRTL: boolean
-}
+};

 let isPreferredLanguageRTL = false;
 let isRTLAllowed = true;
--- a/src/apis/InteractionManager/index.js
+++ b/src/apis/InteractionManager/index.js
@@ -17,10 +17,7 @@ const InteractionManager = {
   * Schedule a function to run after all interactions have completed.
   */
  runAfterInteractions(callback: Function) {
-    invariant(
-      typeof callback === 'function',
-      'Must specify a function to schedule.'
-    );
+    invariant(typeof callback === 'function', 'Must specify a function to schedule.');
    callback();
  },

@@ -35,10 +32,7 @@ const InteractionManager = {
   * Notify manager that an interaction has completed.
   */
  clearInteractionHandle(handle) {
-    invariant(
-      !!handle,
-      'Must provide a handle to clear.'
-    );
+    invariant(!!handle, 'Must provide a handle to clear.');
  },

  addListener: () => {}
--- a/src/apis/Linking/index.js
+++ b/src/apis/Linking/index.js
@@ -27,7 +27,7 @@ const Linking = {
 *
 * https://mathiasbynens.github.io/rel-noopener/
 */
-const iframeOpen = (url) => {
+const iframeOpen = url => {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
--- a/src/apis/NetInfo/tests/index-test.js
+++ b/src/apis/NetInfo/tests/index-test.js
@@ -7,7 +7,9 @@ describe('apis/NetInfo', () => {
    const handler = () => {};

    afterEach(() => {
-      try { NetInfo.isConnected.removeEventListener('change', handler); } catch (e) {}
+      try {
+        NetInfo.isConnected.removeEventListener('change', handler);
+      } catch (e) {}
    });

    describe('addEventListener', () => {
--- a/src/apis/NetInfo/index.js
+++ b/src/apis/NetInfo/index.js
@@ -10,13 +10,12 @@ import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 import findIndex from 'array-find-index';
 import invariant from 'fbjs/lib/invariant';

-const connection = ExecutionEnvironment.canUseDOM && (
-  window.navigator.connection ||
-  window.navigator.mozConnection ||
-  window.navigator.webkitConnection
-);
+const connection = ExecutionEnvironment.canUseDOM &&
+  (window.navigator.connection ||
+    window.navigator.mozConnection ||
+    window.navigator.webkitConnection);

-const eventTypes = [ 'change' ];
+const eventTypes = ['change'];

 const connectionListeners = [];

@@ -28,7 +27,9 @@ const NetInfo = {
  addEventListener(type: string, handler: Function): { remove: () => void } {
    invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
    if (!connection) {
-      console.error('Network Connection API is not supported. Not listening for connection type changes.');
+      console.error(
+        'Network Connection API is not supported. Not listening for connection type changes.'
+      );
      return {
        remove: () => {}
      };
@@ -42,7 +43,9 @@ const NetInfo = {

  removeEventListener(type: string, handler: Function): void {
    invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
-    if (!connection) { return; }
+    if (!connection) {
+      return;
+    }
    connection.removeEventListener(type, handler);
  },

@@ -58,10 +61,14 @@ const NetInfo = {

  isConnected: {
    addEventListener(type: string, handler: Function): { remove: () => void } {
-      invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+      invariant(
+        eventTypes.indexOf(type) !== -1,
+        'Trying to subscribe to unknown event: "%s"',
+        type
+      );
      const onlineCallback = () => handler(true);
      const offlineCallback = () => handler(false);
-      connectionListeners.push([ handler, onlineCallback, offlineCallback ]);
+      connectionListeners.push([handler, onlineCallback, offlineCallback]);

      window.addEventListener('online', onlineCallback, false);
      window.addEventListener('offline', offlineCallback, false);
@@ -72,11 +79,18 @@ const NetInfo = {
    },

    removeEventListener(type: string, handler: Function): void {
-      invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
+      invariant(
+        eventTypes.indexOf(type) !== -1,
+        'Trying to subscribe to unknown event: "%s"',
+        type
+      );

-      const listenerIndex = findIndex(connectionListeners, (pair) => pair[0] === handler);
-      invariant(listenerIndex !== -1, 'Trying to remove NetInfo connection listener for unregistered handler');
-      const [ , onlineCallback, offlineCallback ] = connectionListeners[listenerIndex];
+      const listenerIndex = findIndex(connectionListeners, pair => pair[0] === handler);
+      invariant(
+        listenerIndex !== -1,
+        'Trying to remove NetInfo connection listener for unregistered handler'
+      );
+      const [, onlineCallback, offlineCallback] = connectionListeners[listenerIndex];

      window.removeEventListener('online', onlineCallback, false);
      window.removeEventListener('offline', offlineCallback, false);
--- a/src/apis/PanResponder/index.js
+++ b/src/apis/PanResponder/index.js
@@ -4,18 +4,14 @@
 * All rights reserved.
 */

-"use strict";
+'use strict';

 var TouchHistoryMath = require('react-dom/lib/TouchHistoryMath');

-var currentCentroidXOfTouchesChangedAfter =
-  TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;
-var currentCentroidYOfTouchesChangedAfter =
-  TouchHistoryMath.currentCentroidYOfTouchesChangedAfter;
-var previousCentroidXOfTouchesChangedAfter =
-  TouchHistoryMath.previousCentroidXOfTouchesChangedAfter;
-var previousCentroidYOfTouchesChangedAfter =
-  TouchHistoryMath.previousCentroidYOfTouchesChangedAfter;
+var currentCentroidXOfTouchesChangedAfter = TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;
+var currentCentroidYOfTouchesChangedAfter = TouchHistoryMath.currentCentroidYOfTouchesChangedAfter;
+var previousCentroidXOfTouchesChangedAfter = TouchHistoryMath.previousCentroidXOfTouchesChangedAfter;
+var previousCentroidYOfTouchesChangedAfter = TouchHistoryMath.previousCentroidYOfTouchesChangedAfter;
 var currentCentroidX = TouchHistoryMath.currentCentroidX;
 var currentCentroidY = TouchHistoryMath.currentCentroidY;

@@ -115,7 +111,6 @@ var currentCentroidY = TouchHistoryMath.currentCentroidY;
 */

 var PanResponder = {
-
  /**
   *
   * A graphical explanation of the touch data flow:
@@ -236,8 +231,7 @@ var PanResponder = {
    var nextDY = gestureState.dy + (y - prevY);

    // TODO: This must be filtered intelligently.
-    var dt =
-      (touchHistory.mostRecentTimeStamp - gestureState._accountsForMovesUpTo);
+    var dt = touchHistory.mostRecentTimeStamp - gestureState._accountsForMovesUpTo;
    gestureState.vx = (nextDX - gestureState.dx) / dt;
    gestureState.vy = (nextDY - gestureState.dy) / dt;

@@ -281,17 +275,19 @@ var PanResponder = {
  create: function(config) {
    var gestureState = {
      // Useful for debugging
-      stateID: Math.random(),
+      stateID: Math.random()
    };
    PanResponder._initializeGestureState(gestureState);
    var panHandlers = {
      onStartShouldSetResponder: function(e) {
-        return config.onStartShouldSetPanResponder === undefined ? false :
-          config.onStartShouldSetPanResponder(e, gestureState);
+        return config.onStartShouldSetPanResponder === undefined
+          ? false
+          : config.onStartShouldSetPanResponder(e, gestureState);
      },
      onMoveShouldSetResponder: function(e) {
-        return config.onMoveShouldSetPanResponder === undefined ? false :
-          config.onMoveShouldSetPanResponder(e, gestureState);
+        return config.onMoveShouldSetPanResponder === undefined
+          ? false
+          : config.onMoveShouldSetPanResponder(e, gestureState);
      },
      onStartShouldSetResponderCapture: function(e) {
        // TODO: Actually, we should reinitialize the state any time
@@ -300,13 +296,15 @@ var PanResponder = {
          if (e.nativeEvent.touches.length === 1) {
            PanResponder._initializeGestureState(gestureState);
          }
-        }
-        else if (e.nativeEvent.originalEvent && e.nativeEvent.originalEvent.type === 'mousedown') {
+        } else if (
+          e.nativeEvent.originalEvent && e.nativeEvent.originalEvent.type === 'mousedown'
+        ) {
          PanResponder._initializeGestureState(gestureState);
        }
        gestureState.numberActiveTouches = e.touchHistory.numberActiveTouches;
-        return config.onStartShouldSetPanResponderCapture !== undefined ?
-          config.onStartShouldSetPanResponderCapture(e, gestureState) : false;
+        return config.onStartShouldSetPanResponderCapture !== undefined
+          ? config.onStartShouldSetPanResponderCapture(e, gestureState)
+          : false;
      },

      onMoveShouldSetResponderCapture: function(e) {
@@ -318,8 +316,9 @@ var PanResponder = {
          return false;
        }
        PanResponder._updateGestureStateOnMove(gestureState, touchHistory);
-        return config.onMoveShouldSetPanResponderCapture ?
-          config.onMoveShouldSetPanResponderCapture(e, gestureState) : false;
+        return config.onMoveShouldSetPanResponderCapture
+          ? config.onMoveShouldSetPanResponderCapture(e, gestureState)
+          : false;
      },

      onResponderGrant: function(e) {
@@ -329,8 +328,9 @@ var PanResponder = {
        gestureState.dy = 0;
        config.onPanResponderGrant && config.onPanResponderGrant(e, gestureState);
        // TODO: t7467124 investigate if this can be removed
-        return config.onShouldBlockNativeResponder === undefined ? true :
-          config.onShouldBlockNativeResponder();
+        return config.onShouldBlockNativeResponder === undefined
+          ? true
+          : config.onShouldBlockNativeResponder();
      },

      onResponderReject: function(e) {
@@ -368,18 +368,18 @@ var PanResponder = {
      },

      onResponderTerminate: function(e) {
-        config.onPanResponderTerminate &&
-          config.onPanResponderTerminate(e, gestureState);
+        config.onPanResponderTerminate && config.onPanResponderTerminate(e, gestureState);
        PanResponder._initializeGestureState(gestureState);
      },

      onResponderTerminationRequest: function(e) {
-        return config.onPanResponderTerminationRequest === undefined ? true :
-          config.onPanResponderTerminationRequest(e, gestureState);
-      },
+        return config.onPanResponderTerminationRequest === undefined
+          ? true
+          : config.onPanResponderTerminationRequest(e, gestureState);
+      }
    };
-    return {panHandlers: panHandlers};
-  },
+    return { panHandlers: panHandlers };
+  }
 };

 module.exports = PanResponder;
--- a/src/apis/StyleSheet/StyleManager.js
+++ b/src/apis/StyleSheet/StyleManager.js
@@ -0,0 +1,137 @@
+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;
--- a/src/apis/StyleSheet/StyleRegistry.js
+++ b/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;
--- a/src/apis/StyleSheet/StyleSheetValidation.js
+++ b/src/apis/StyleSheet/StyleSheetValidation.js
@@ -7,13 +7,14 @@
 * @flow
 */

-import { PropTypes } from 'react'
-import ImageStylePropTypes from '../../components/Image/ImageStylePropTypes'
-import ReactPropTypeLocations from 'react-dom/lib/ReactPropTypeLocations'
-import ReactPropTypesSecret from 'react-dom/lib/ReactPropTypesSecret'
-import TextStylePropTypes from '../../components/Text/TextStylePropTypes'
-import ViewStylePropTypes from '../../components/View/ViewStylePropTypes'
-import warning from 'fbjs/lib/warning'
+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';

 class StyleSheetValidation {
  static validateStyleProp(prop, style, caller) {
@@ -57,26 +58,29 @@ class StyleSheetValidation {
 var styleError = function(message1, style, caller?, message2?) {
  warning(
    false,
-    message1 + '\n' + (caller || '<<unknown>>') + ': ' +
-    JSON.stringify(style, null, '  ') + (message2 || '')
+    message1 +
+      '\n' +
+      (caller || '<<unknown>>') +
+      ': ' +
+      JSON.stringify(style, null, '  ') +
+      (message2 || '')
  );
 };

 var allStylePropTypes = {};

-StyleSheetValidation.addValidStylePropTypes(ImageStylePropTypes)
-StyleSheetValidation.addValidStylePropTypes(TextStylePropTypes)
-StyleSheetValidation.addValidStylePropTypes(ViewStylePropTypes)
+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 */
+  float: PropTypes.oneOf(['left', 'none', 'right']),
+  font: PropTypes.string /* @private */,
  listStyle: PropTypes.string,
-  pointerEvents: PropTypes.string,
-  WebkitOverflowScrolling: PropTypes.string /* @private */
-})
+  pointerEvents: PropTypes.string
+});

-module.exports = StyleSheetValidation
+module.exports = StyleSheetValidation;
--- a/src/apis/StyleSheet/tests/StyleManager-test.js
+++ b/src/apis/StyleSheet/tests/StyleManager-test.js
@@ -0,0 +1,31 @@
+/* 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();
+  });
+});
--- a/src/apis/StyleSheet/tests/StyleRegistry-test.js
+++ b/src/apis/StyleSheet/tests/StyleRegistry-test.js
@@ -0,0 +1,76 @@
+/* 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();
+  });
+});
--- a/src/apis/StyleSheet/tests/snapshots/StyleManager-test.js.snap
+++ b/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>"
+`;
--- a/src/apis/StyleSheet/tests/snapshots/StyleRegistry-test.js.snap
+++ b/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,
+  },
+}
+`;
--- a/src/apis/StyleSheet/tests/snapshots/index-test.js.snap
+++ b/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>"
 `;
--- a/src/apis/StyleSheet/tests/snapshots/registry-test.js.snap
+++ b/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",
-  },
-}
-`;
--- a/src/apis/StyleSheet/tests/expandStyle-test.js
+++ b/src/apis/StyleSheet/tests/expandStyle-test.js
@@ -47,19 +47,35 @@ describe('apis/StyleSheet/expandStyle', () => {
  });

  test('flex', () => {
-    expect(expandStyle({ display: 'flex' }))
-      .toEqual({ display: 'flex', flexShrink: 0 });
+    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: 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', 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', flexShrink: 1 })).toEqual({
+      display: 'flex',
+      flexShrink: 1
+    });

-    expect(expandStyle({ display: 'flex', flex: 1, flexShrink: 2 }))
-      .toEqual({ display: 'flex', flexGrow: 1, flexShrink: 2, flexBasis: 'auto' });
+    expect(expandStyle({ display: 'flex', flex: 1, flexShrink: 2 })).toEqual({
+      display: 'flex',
+      flexGrow: 1,
+      flexShrink: 2,
+      flexBasis: 'auto'
+    });
  });
 });
--- a/src/apis/StyleSheet/tests/flattenStyle-test.js
+++ b/src/apis/StyleSheet/tests/flattenStyle-test.js
@@ -13,10 +13,7 @@ import flattenStyle from '../flattenStyle';

 describe('apis/StyleSheet/flattenStyle', () => {
  test('should merge style objects', () => {
-    const style = flattenStyle([
-      { opacity: 1 },
-      { order: 2 }
-    ]);
+    const style = flattenStyle([{ opacity: 1 }, { order: 2 }]);
    expect(style).toMatchSnapshot();
  });

@@ -29,24 +26,16 @@ describe('apis/StyleSheet/flattenStyle', () => {
  });

  test('should overwrite properties with `undefined`', () => {
-    const style = flattenStyle([
-      { backgroundColor: '#000' },
-      { backgroundColor: undefined }
-    ]);
+    const style = flattenStyle([{ backgroundColor: '#000' }, { backgroundColor: undefined }]);
    expect(style).toMatchSnapshot();
  });

  test('should not fail on falsy values', () => {
-    expect(() => flattenStyle([ null, false, undefined ])).not.toThrow();
+    expect(() => flattenStyle([null, false, undefined])).not.toThrow();
  });

  test('should recursively flatten arrays', () => {
-    const style = flattenStyle([
-      null,
-      [],
-      [ { order: 2 }, { opacity: 1 } ],
-      { order: 3 }
-    ]);
+    const style = flattenStyle([null, [], [{ order: 2 }, { opacity: 1 }], { order: 3 }]);
    expect(style).toMatchSnapshot();
  });
 });
--- a/src/apis/StyleSheet/tests/index-test.js
+++ b/src/apis/StyleSheet/tests/index-test.js
@@ -1,24 +1,17 @@
 /* eslint-env jasmine, jest */

 import StyleSheet from '..';
-import StyleRegistry from '../registry';

-const isPlainObject = (x) => {
+const isPlainObject = x => {
  const toString = Object.prototype.toString;
  let proto;
  /* eslint-disable */
-  return (
-    toString.call(x) === '[object Object]' &&
-    (proto = Object.getPrototypeOf(x), proto === null || proto === Object.getPrototypeOf({}))
-  );
+  return toString.call(x) === '[object Object]' &&
+    (proto = Object.getPrototypeOf(x), proto === null || proto === Object.getPrototypeOf({}));
  /* eslint-enable */
 };

 describe('apis/StyleSheet', () => {
-  beforeEach(() => {
-    StyleRegistry.reset();
-  });
-
  test('absoluteFill', () => {
    expect(Number.isInteger(StyleSheet.absoluteFill) === true).toBeTruthy();
  });
@@ -29,7 +22,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 +36,6 @@ describe('apis/StyleSheet', () => {
  });

  test('renderToString', () => {
-    StyleSheet.create({
-      a: {
-        borderWidth: 0,
-        borderColor: 'red'
-      },
-      b: {
-        position: 'absolute',
-        left: 50
-      }
-    });
    expect(StyleSheet.renderToString()).toMatchSnapshot();
  });
 });
--- a/src/apis/StyleSheet/tests/injector.js
+++ b/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
-    });
-  });
-});
--- a/src/apis/StyleSheet/tests/prefixInlineStyles-test.js
+++ b/src/apis/StyleSheet/tests/prefixInlineStyles-test.js
@@ -5,7 +5,7 @@ import prefixInlineStyles from '../prefixInlineStyles';
 describe('apis/StyleSheet/prefixInlineStyles', () => {
  test('handles array values', () => {
    const style = {
-      display: [ '-webkit-flex', 'flex' ]
+      display: ['-webkit-flex', 'flex']
    };

    expect(prefixInlineStyles(style)).toEqual({ display: 'flex' });
--- a/src/apis/StyleSheet/tests/registry-test.js
+++ b/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);
-    });
-  });
-});
--- a/src/apis/StyleSheet/tests/resolveTransform-test.js
+++ b/src/apis/StyleSheet/tests/resolveTransform-test.js
@@ -6,12 +6,7 @@ describe('apis/StyleSheet/resolveTransform', () => {
  test('transform', () => {
    const resolvedStyle = {};
    const style = {
-      transform: [
-        { perspective: 50 },
-        { scaleX: 20 },
-        { translateX: 20 },
-        { rotate: '20deg' }
-      ]
+      transform: [{ perspective: 50 }, { scaleX: 20 }, { translateX: 20 }, { rotate: '20deg' }]
    };
    resolveTransform(resolvedStyle, style);

@@ -22,7 +17,7 @@ describe('apis/StyleSheet/resolveTransform', () => {

  test('transformMatrix', () => {
    const resolvedStyle = {};
-    const style = { transformMatrix: [ 1, 2, 3, 4, 5, 6 ] };
+    const style = { transformMatrix: [1, 2, 3, 4, 5, 6] };
    resolveTransform(resolvedStyle, style);

    expect(resolvedStyle).toEqual({
--- a/src/apis/StyleSheet/createReactDOMStyle.js
+++ b/src/apis/StyleSheet/createReactDOMStyle.js
@@ -1,6 +1,7 @@
 import expandStyle from './expandStyle';
 import i18nStyle from './i18nStyle';

-const createReactDOMStyle = (flattenedReactNativeStyle) => expandStyle(i18nStyle(flattenedReactNativeStyle));
+const createReactDOMStyle = flattenedReactNativeStyle =>
+  expandStyle(i18nStyle(flattenedReactNativeStyle));

 module.exports = createReactDOMStyle;
--- a/src/apis/StyleSheet/expandStyle.js
+++ b/src/apis/StyleSheet/expandStyle.js
@@ -16,24 +16,33 @@ import resolveTransform from './resolveTransform';

 const emptyObject = {};
 const styleShortFormProperties = {
-  borderColor: [ 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor' ],
-  borderRadius: [ 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius' ],
-  borderStyle: [ 'borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle' ],
-  borderWidth: [ 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth' ],
-  margin: [ 'marginTop', 'marginRight', 'marginBottom', 'marginLeft' ],
-  marginHorizontal: [ 'marginRight', 'marginLeft' ],
-  marginVertical: [ 'marginTop', 'marginBottom' ],
-  overflow: [ 'overflowX', 'overflowY' ],
-  padding: [ 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft' ],
-  paddingHorizontal: [ 'paddingRight', 'paddingLeft' ],
-  paddingVertical: [ 'paddingTop', 'paddingBottom' ],
-  textDecorationLine: [ 'textDecoration' ],
-  writingDirection: [ 'direction' ]
+  borderColor: ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],
+  borderRadius: [
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius'
+  ],
+  borderStyle: ['borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle'],
+  borderWidth: ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],
+  margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
+  marginHorizontal: ['marginRight', 'marginLeft'],
+  marginVertical: ['marginTop', 'marginBottom'],
+  overflow: ['overflowX', 'overflowY'],
+  padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
+  paddingHorizontal: ['paddingRight', 'paddingLeft'],
+  paddingVertical: ['paddingTop', 'paddingBottom'],
+  textDecorationLine: ['textDecoration'],
+  writingDirection: ['direction']
 };

-const alphaSortProps = (propsArray) => propsArray.sort((a, b) => {
-  if (a < b) { return -1; }
-  if (a > b) { return 1; }
+const alphaSortProps = propsArray => propsArray.sort((a, b) => {
+  if (a < b) {
+    return -1;
+  }
+  if (a > b) {
+    return 1;
+  }
  return 0;
 });

@@ -43,24 +52,24 @@ const createReducer = (style, styleProps) => {

  return (resolvedStyle, prop) => {
    const value = normalizeValue(prop, style[prop]);
-    if (value == null) { return resolvedStyle; }
+    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
-        ) {
+        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': {
@@ -80,7 +89,7 @@ const createReducer = (style, styleProps) => {
        break;
      }
      case 'textAlignVertical': {
-        resolvedStyle.verticalAlign = (value === 'center' ? 'middle' : value);
+        resolvedStyle.verticalAlign = value === 'center' ? 'middle' : value;
        break;
      }
      case 'textShadowColor':
@@ -116,8 +125,10 @@ const createReducer = (style, styleProps) => {
  };
 };

-const expandStyle = (style) => {
-  if (!style) { return emptyObject; }
+const expandStyle = style => {
+  if (!style) {
+    return emptyObject;
+  }
  const styleProps = Object.keys(style);
  const sortedStyleProps = alphaSortProps(styleProps);
  const reducer = createReducer(style, styleProps);
--- a/src/apis/StyleSheet/generateCss.js
+++ b/src/apis/StyleSheet/generateCss.js
@@ -1,13 +1,13 @@
-import hyphenate from './hyphenate';
+import hyphenateStyleName from 'hyphenate-style-name';
 import mapKeyValue from '../../modules/mapKeyValue';
 import normalizeValue from './normalizeValue';
 import prefixAll from 'inline-style-prefixer/static';

 const createDeclarationString = (prop, val) => {
-  const name = hyphenate(prop);
+  const name = hyphenateStyleName(prop);
  const value = normalizeValue(prop, val);
  if (Array.isArray(val)) {
-    return val.map((v) => `${name}:${v}`).join(';');
+    return val.map(v => `${name}:${v}`).join(';');
  }
  return `${name}:${value}`;
 };
@@ -18,6 +18,7 @@ const createDeclarationString = (prop, val) => {
 * generateCss({ width: 20, color: 'blue' });
 * // => 'color:blue;width:20px'
 */
-const generateCss = (style) => mapKeyValue(prefixAll(style), createDeclarationString).sort().join(';');
+const generateCss = style =>
+  mapKeyValue(prefixAll(style), createDeclarationString).sort().join(';');

 module.exports = generateCss;
--- a/src/apis/StyleSheet/hash.js
+++ b/src/apis/StyleSheet/hash.js
@@ -0,0 +1,51 @@
+/* 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);
--- a/src/apis/StyleSheet/hyphenate.js
+++ b/src/apis/StyleSheet/hyphenate.js
@@ -1,3 +0,0 @@
-const RE_1 = /([A-Z])/g;
-const RE_2 = /^ms-/;
-module.exports = (s) => s.replace(RE_1, '-$1').toLowerCase().replace(RE_2, '-ms-');
--- a/src/apis/StyleSheet/i18nStyle.js
+++ b/src/apis/StyleSheet/i18nStyle.js
@@ -7,28 +7,28 @@ const emptyObject = {};
 * Map of property names to their BiDi equivalent.
 */
 const PROPERTIES_TO_SWAP = {
-  'borderTopLeftRadius': 'borderTopRightRadius',
-  'borderTopRightRadius': 'borderTopLeftRadius',
-  'borderBottomLeftRadius': 'borderBottomRightRadius',
-  'borderBottomRightRadius': 'borderBottomLeftRadius',
-  'borderLeftColor': 'borderRightColor',
-  'borderLeftStyle': 'borderRightStyle',
-  'borderLeftWidth': 'borderRightWidth',
-  'borderRightColor': 'borderLeftColor',
-  'borderRightWidth': 'borderLeftWidth',
-  'borderRightStyle': 'borderLeftStyle',
-  'left': 'right',
-  'marginLeft': 'marginRight',
-  'marginRight': 'marginLeft',
-  'paddingLeft': 'paddingRight',
-  'paddingRight': 'paddingLeft',
-  'right': 'left'
+  borderTopLeftRadius: 'borderTopRightRadius',
+  borderTopRightRadius: 'borderTopLeftRadius',
+  borderBottomLeftRadius: 'borderBottomRightRadius',
+  borderBottomRightRadius: 'borderBottomLeftRadius',
+  borderLeftColor: 'borderRightColor',
+  borderLeftStyle: 'borderRightStyle',
+  borderLeftWidth: 'borderRightWidth',
+  borderRightColor: 'borderLeftColor',
+  borderRightWidth: 'borderLeftWidth',
+  borderRightStyle: 'borderLeftStyle',
+  left: 'right',
+  marginLeft: 'marginRight',
+  marginRight: 'marginLeft',
+  paddingLeft: 'paddingRight',
+  paddingRight: 'paddingLeft',
+  right: 'left'
 };

 const PROPERTIES_SWAP_LEFT_RIGHT = {
-  'clear': true,
-  'float': true,
-  'textAlign': true
+  clear: true,
+  float: true,
+  textAlign: true
 };

 /**
@@ -54,11 +54,11 @@ const flipTransform = (transform: Object): Object => {
  return transform;
 };

-const swapLeftRight = (value:String): String => {
+const swapLeftRight = (value: String): String => {
  return value === 'left' ? 'right' : value === 'right' ? 'left' : value;
 };

-const i18nStyle = (originalStyle) => {
+const i18nStyle = originalStyle => {
  if (!I18nManager.isRTL) {
    return originalStyle;
  }
--- a/src/apis/StyleSheet/index.js
+++ b/src/apis/StyleSheet/index.js
@@ -1,18 +1,21 @@
 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 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 = {};
-    Object.keys(styles).forEach((key) => {
+    Object.keys(styles).forEach(key => {
      if (process.env.NODE_ENV !== 'production') {
        require('./StyleSheetValidation').validateStyle(key, styles);
      }
@@ -22,5 +25,7 @@ module.exports = {
  },
  hairlineWidth: 1,
  flatten: flattenStyle,
-  renderToString: injector.getStyleSheetHtml
+  renderToString() {
+    return StyleRegistry.getStyleSheetHtml();
+  }
 };
--- a/src/apis/StyleSheet/initialize.js
+++ b/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;
--- a/src/apis/StyleSheet/injector.js
+++ b/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
-};
--- a/src/apis/StyleSheet/prefixInlineStyles.js
+++ b/src/apis/StyleSheet/prefixInlineStyles.js
@@ -1,11 +1,11 @@
 import prefixAll from 'inline-style-prefixer/static';

-const prefixInlineStyles = (style) => {
+const prefixInlineStyles = style => {
  const prefixedStyles = prefixAll(style);

  // React@15 removed undocumented support for fallback values in
  // inline-styles. Revert array values to the standard CSS value
-  Object.keys(prefixedStyles).forEach((prop) => {
+  Object.keys(prefixedStyles).forEach(prop => {
    const value = prefixedStyles[prop];
    if (Array.isArray(value)) {
      prefixedStyles[prop] = value[value.length - 1];
--- a/src/apis/StyleSheet/registry.js
+++ b/src/apis/StyleSheet/registry.js
@@ -1,202 +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 I18nManager from '../I18nManager';
-import injector from './injector';
-import mapKeyValue from '../../modules/mapKeyValue';
-import prefixInlineStyles from './prefixInlineStyles';
-import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry';
-
-const SPACE_REGEXP = /\s/g;
-const ESCAPE_SELECTOR_CHARS_REGEXP = /[(),":?.%\\$#*]/g;
-
-const createCacheKey = (id) => {
-  const prefix = I18nManager.isRTL ? 'rtl' : 'ltr';
-  return `${prefix}-${id}`;
-};
-
-/**
- * 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 = createCacheKey(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 = createCacheKey(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;
-      }
-    }
-
-    // cache resolved props when all styles are registered
-    const key = isArrayOfNumbers ? createCacheKey(flatArray.join('-')) : null;
-
-    return resolvePropsIfNeeded(key, flatArray);
-  }
-};
-
-module.exports = StyleRegistry;
+import StyleRegistry from './StyleRegistry';
+const registry = new StyleRegistry();
+module.exports = registry;
--- a/src/apis/StyleSheet/resolveTransform.js
+++ b/src/apis/StyleSheet/resolveTransform.js
@@ -1,15 +1,15 @@
 import normalizeValue from './normalizeValue';

 // { scale: 2 } => 'scale(2)'
- // { translateX: 20 } => 'translateX(20px)'
-const mapTransform = (transform) => {
+// { translateX: 20 } => 'translateX(20px)'
+const mapTransform = transform => {
  const type = Object.keys(transform)[0];
  const value = normalizeValue(type, transform[type]);
  return `${type}(${value})`;
 };

 // [1,2,3,4,5,6] => 'matrix3d(1,2,3,4,5,6)'
-const convertTransformMatrix = (transformMatrix) => {
+const convertTransformMatrix = transformMatrix => {
  const matrix = transformMatrix.join(',');
  return `matrix3d(${matrix})`;
 };
--- a/src/apis/StyleSheet/staticCss.js
+++ b/src/apis/StyleSheet/staticCss.js
@@ -0,0 +1,17 @@
+module.exports = 'html{' + // css reset
+  '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%);}' +
+  '}';
--- a/src/apis/UIManager/tests/index-test.js
+++ b/src/apis/UIManager/tests/index-test.js
@@ -4,7 +4,7 @@ import UIManager from '..';

 const createNode = (style = {}) => {
  const root = document.createElement('div');
-  Object.keys(style).forEach((prop) => {
+  Object.keys(style).forEach(prop => {
    root.style[prop] = style[prop];
  });
  return root;
@@ -30,7 +30,9 @@ describe('apis/UIManager', () => {
      const node = createNode({ color: 'red' });
      const props = { style: { marginTop: 0, marginBottom: 0, opacity: 0 } };
      UIManager.updateView(node, props, componentStub);
-      expect(node.getAttribute('style')).toEqual('color: red; margin-top: 0px; margin-bottom: 0px; opacity: 0;');
+      expect(node.getAttribute('style')).toEqual(
+        'color: red; margin-top: 0px; margin-bottom: 0px; opacity: 0;'
+      );
    });

    test('replaces input and textarea text', () => {
--- a/src/apis/UIManager/index.js
+++ b/src/apis/UIManager/index.js
@@ -1,7 +1,7 @@
 import asap from 'asap';
 import CSSPropertyOperations from 'react-dom/lib/CSSPropertyOperations';

-const getRect = (node) => {
+const getRect = node => {
  const height = node.offsetHeight;
  const width = node.offsetWidth;
  let left = 0;
@@ -27,11 +27,15 @@ const measureLayout = (node, relativeToNativeNode, callback) => {

 const UIManager = {
  blur(node) {
-    try { node.blur(); } catch (err) {}
+    try {
+      node.blur();
+    } catch (err) {}
  },

  focus(node) {
-    try { node.focus(); } catch (err) {}
+    try {
+      node.focus();
+    } catch (err) {}
  },

  measure(node, callback) {
--- a/src/apis/Vibration/index.js
+++ b/src/apis/Vibration/index.js
@@ -1,4 +1,4 @@
-const vibrate = (pattern) => {
+const vibrate = pattern => {
  if ('vibrate' in window.navigator) {
    if (typeof pattern === 'number' || Array.isArray(pattern)) {
      window.navigator.vibrate(pattern);
--- a/src/components/ActivityIndicator/tests/snapshots/index-test.js.snap
+++ b/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-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-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-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  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-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-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-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  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%"
--- a/src/components/ActivityIndicator/tests/index-test.js
+++ b/src/components/ActivityIndicator/tests/index-test.js
@@ -11,7 +11,9 @@ describe('components/ActivityIndicator', () => {
  });

  test('other render', () => {
-    const component = renderer.create(<ActivityIndicator animating={false} hidesWhenStopped={false} size='large' />);
+    const component = renderer.create(
+      <ActivityIndicator animating={false} hidesWhenStopped={false} size="large" />
+    );
    expect(component.toJSON()).toMatchSnapshot();
  });
 });
--- a/src/components/ActivityIndicator/index.js
+++ b/src/components/ActivityIndicator/index.js
@@ -12,7 +12,7 @@ class ActivityIndicator extends Component {
    animating: PropTypes.bool,
    color: PropTypes.string,
    hidesWhenStopped: PropTypes.bool,
-    size: PropTypes.oneOfType([ PropTypes.oneOf([ 'small', 'large' ]), PropTypes.number ])
+    size: PropTypes.oneOfType([PropTypes.oneOf(['small', 'large']), PropTypes.number])
  };

  static defaultProps = {
@@ -33,24 +33,24 @@ class ActivityIndicator extends Component {
    } = this.props;

    const svg = (
-      <svg height='100%' viewBox='0 0 32 32' width='100%'>
+      <svg height="100%" viewBox="0 0 32 32" width="100%">
        <circle
-          cx='16'
-          cy='16'
-          fill='none'
-          r='14'
-          strokeWidth='4'
+          cx="16"
+          cy="16"
+          fill="none"
+          r="14"
+          strokeWidth="4"
          style={{
            stroke: color,
            opacity: 0.2
          }}
        />
        <circle
-          cx='16'
-          cy='16'
-          fill='none'
-          r='14'
-          strokeWidth='4'
+          cx="16"
+          cy="16"
+          fill="none"
+          r="14"
+          strokeWidth="4"
          style={{
            stroke: color,
            strokeDasharray: 80,
@@ -61,15 +61,12 @@ class ActivityIndicator extends Component {
    );

    return (
-      <View {...other}
-        accessibilityRole='progressbar'
-        aria-valuemax='1'
-        aria-valuemin='0'
-        style={[
-          styles.container,
-          style,
-          typeof size === 'number' && { height: size, width: size }
-        ]}
+      <View
+        {...other}
+        accessibilityRole="progressbar"
+        aria-valuemax="1"
+        aria-valuemin="0"
+        style={[styles.container, style, typeof size === 'number' && { height: size, width: size }]}
      >
        <View
          children={svg}
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -32,11 +32,9 @@ class Button extends Component {
          styles.button,
          color && { backgroundColor: color },
          disabled && styles.buttonDisabled
-        ]}>
-        <Text style={[
-          styles.text,
-          disabled && styles.textDisabled
-        ]}>
+        ]}
+      >
+        <Text style={[styles.text, disabled && styles.textDisabled]}>
          {title}
        </Text>
      </TouchableOpacity>
--- a/src/components/Image/ImageStylePropTypes.js
+++ b/src/components/Image/ImageStylePropTypes.js
@@ -6,7 +6,8 @@ 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 = {
  ...BorderPropTypes,
@@ -15,15 +16,17 @@ module.exports = {
  ...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
 };
--- a/src/components/Image/tests/snapshots/index-test.js.snap
+++ b/src/components/Image/tests/snapshots/index-test.js.snap
@@ -1,41 +1,6 @@
 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-flexShrink:0
-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
-rn-zIndex:0"
+  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]}
  style={Object {}} />
 `;
@@ -43,125 +8,20 @@ rn-zIndex:0"
 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-flexShrink:0
-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
-rn-zIndex:0"
+  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-flexShrink:0
-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
-rn-zIndex:0"
+  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-flexShrink:0
-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
-rn-zIndex:0"
+  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,42 +30,7 @@ rn-zIndex:0"

 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-flexShrink:0
-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
-rn-zIndex:0"
+  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\")",
@@ -214,16 +39,7 @@ rn-zIndex:0"
    }
  }>
  <img
-    className="
-  rn-bottom:0px
-  rn-height:100%
-  rn-left:0px
-  rn-opacity:0
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%
-  rn-zIndex:-1"
+    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>
@@ -231,42 +47,7 @@ rn-zIndex:0"

 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-flexShrink:0
-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
-rn-zIndex:0"
+  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\")",
@@ -275,16 +56,7 @@ rn-zIndex:0"
    }
  }>
  <img
-    className="
-  rn-bottom:0px
-  rn-height:100%
-  rn-left:0px
-  rn-opacity:0
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%
-  rn-zIndex:-1"
+    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>
@@ -292,58 +64,14 @@ rn-zIndex:0"

 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-flexShrink:0
-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
-rn-zIndex:0"
+  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:0px
-  rn-height:100%
-  rn-left:0px
-  rn-opacity:0
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%
-  rn-zIndex:-1"
+    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>
@@ -351,58 +79,14 @@ rn-zIndex:0"

 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-flexShrink:0
-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
-rn-zIndex:0"
+  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:0px
-  rn-height:100%
-  rn-left:0px
-  rn-opacity:0
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%
-  rn-zIndex:-1"
+    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>
@@ -410,329 +94,49 @@ rn-zIndex:0"

 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-flexShrink:0
-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
-rn-zIndex:0"
+  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-flexShrink:0
-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
-rn-zIndex:0"
+  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-flexShrink:0
-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
-rn-zIndex:0"
+  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-flexShrink:0
-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
-rn-zIndex:0"
+  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-flexShrink:0
-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
-rn-zIndex:0"
+  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-flexShrink:0
-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
-rn-zIndex:0"
+  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-flexShrink:0
-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
-rn-zIndex:0"
+  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"
  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-flexShrink:0
-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
-rn-zIndex:0"
+  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 {}} />
 `;
--- a/src/components/Image/tests/index-test.js
+++ b/src/components/Image/tests/index-test.js
@@ -23,7 +23,7 @@ describe('components/Image', () => {
  });

  test('prop "accessibilityLabel"', () => {
-    const component = renderer.create(<Image accessibilityLabel='accessibilityLabel' />);
+    const component = renderer.create(<Image accessibilityLabel="accessibilityLabel" />);
    expect(component.toJSON()).toMatchSnapshot();
  });

@@ -33,7 +33,7 @@ describe('components/Image', () => {
  });

  test('prop "children"', () => {
-    const children = <div className='unique' />;
+    const children = <div className="unique" />;
    const component = renderer.create(<Image children={children} />);
    expect(component.toJSON()).toMatchSnapshot();
  });
@@ -53,14 +53,24 @@ describe('components/Image', () => {
    });

    test('sets "height" and "width" styles if missing', () => {
-      const defaultSource = { uri: 'https://google.com/favicon.ico', height: 10, width: 20 };
+      const defaultSource = {
+        uri: 'https://google.com/favicon.ico',
+        height: 10,
+        width: 20
+      };
      const component = renderer.create(<Image defaultSource={defaultSource} />);
      expect(component.toJSON()).toMatchSnapshot();
    });

    test('does not override "height" and "width" styles', () => {
-      const defaultSource = { uri: 'https://google.com/favicon.ico', height: 10, width: 20 };
-      const component = renderer.create(<Image defaultSource={defaultSource} style={{ height: 20, width: 40 }} />);
+      const defaultSource = {
+        uri: 'https://google.com/favicon.ico',
+        height: 10,
+        width: 20
+      };
+      const component = renderer.create(
+        <Image defaultSource={defaultSource} style={{ height: 20, width: 40 }} />
+      );
      expect(component.toJSON()).toMatchSnapshot();
    });
  });
@@ -72,7 +82,7 @@ describe('components/Image', () => {
      Image.resizeMode.none,
      Image.resizeMode.stretch,
      undefined
-    ].forEach((resizeMode) => {
+    ].forEach(resizeMode => {
      test(`value "${resizeMode}"`, () => {
        const component = renderer.create(<Image resizeMode={resizeMode} />);
        expect(component.toJSON()).toMatchSnapshot();
@@ -88,7 +98,7 @@ describe('components/Image', () => {
  });

  test('prop "testID"', () => {
-    const component = renderer.create(<Image testID='testID' />);
+    const component = renderer.create(<Image testID="testID" />);
    expect(component.toJSON()).toMatchSnapshot();
  });

--- a/src/components/Image/index.js
+++ b/src/components/Image/index.js
@@ -28,15 +28,15 @@ const ImageSourcePropType = PropTypes.oneOfType([
  PropTypes.string
 ]);

-const resolveAssetDimensions = (source) => {
+const resolveAssetDimensions = source => {
  if (typeof source === 'object') {
    const { height, width } = source;
    return { height, width };
  }
 };

-const resolveAssetSource = (source) => {
-  return ((typeof source === 'object') ? source.uri : source) || null;
+const resolveAssetSource = source => {
+  return (typeof source === 'object' ? source.uri : source) || null;
 };

 class Image extends Component {
@@ -140,10 +140,12 @@ class Image extends Component {
    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;
+    const hiddenImage = displayImage
+      ? createDOMElement('img', {
+          src: displayImage,
+          style: [StyleSheet.absoluteFill, styles.img]
+        })
+      : null;

    return (
      <View
@@ -192,31 +194,38 @@ class Image extends Component {
      });
    }
    this._onLoadEnd();
-  }
+  };

-  _onLoad = (e) => {
+  _onLoad = e => {
    const { onLoad } = this.props;
    const event = { nativeEvent: e };

    this._updateImageState(STATUS_LOADED);
-    if (onLoad) { onLoad(event); }
+    if (onLoad) {
+      onLoad(event);
+    }
    this._onLoadEnd();
-  }
+  };

  _onLoadEnd() {
    const { onLoadEnd } = this.props;
-    if (onLoadEnd) { onLoadEnd(); }
+    if (onLoadEnd) {
+      onLoadEnd();
+    }
  }

  _onLoadStart() {
    const { onLoadStart } = this.props;
    this._updateImageState(STATUS_LOADING);
-    if (onLoadStart) { onLoadStart(); }
+    if (onLoadStart) {
+      onLoadStart();
+    }
  }

  _updateImageState(status) {
    this._imageState = status;
-    const shouldDisplaySource = this._imageState === STATUS_LOADED || this._imageState === STATUS_LOADING;
+    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) {
      if (this._isMounted) {
--- a/src/components/ListView/ListViewDataSource.js
+++ b/src/components/ListView/ListViewDataSource.js
@@ -33,29 +33,22 @@ var invariant = require('fbjs/lib/invariant');
 var isEmpty = require('fbjs/lib/isEmpty');
 var warning = require('fbjs/lib/warning');

-function defaultGetRowData(
-  dataBlob: any,
-  sectionID: number | string,
-  rowID: number | string
-): any {
+function defaultGetRowData(dataBlob: any, sectionID: number | string, rowID: number | string): any {
  return dataBlob[sectionID][rowID];
 }

-function defaultGetSectionHeaderData(
-  dataBlob: any,
-  sectionID: number | string
-): any {
+function defaultGetSectionHeaderData(dataBlob: any, sectionID: number | string): any {
  return dataBlob[sectionID];
 }

-type differType = (data1: any, data2: any) => bool;
+type differType = (data1: any, data2: any) => boolean;

 type ParamType = {
-  rowHasChanged: differType;
-  getRowData: ?typeof defaultGetRowData;
-  sectionHeaderHasChanged: ?differType;
-  getSectionHeaderData: ?typeof defaultGetSectionHeaderData;
-}
+  rowHasChanged: differType,
+  getRowData: ?typeof defaultGetRowData,
+  sectionHeaderHasChanged: ?differType,
+  getSectionHeaderData: ?typeof defaultGetSectionHeaderData
+};

 /**
 * Provides efficient data processing and access to the
@@ -92,7 +85,6 @@ type ParamType = {
 */

 class ListViewDataSource {
-
  /**
   * You can provide custom extraction and `hasChanged` functions for section
   * headers and rows.  If absent, data will be extracted with the
@@ -126,8 +118,7 @@ class ListViewDataSource {
    this._rowHasChanged = params.rowHasChanged;
    this._getRowData = params.getRowData || defaultGetRowData;
    this._sectionHeaderHasChanged = params.sectionHeaderHasChanged;
-    this._getSectionHeaderData =
-      params.getSectionHeaderData || defaultGetSectionHeaderData;
+    this._getSectionHeaderData = params.getSectionHeaderData || defaultGetSectionHeaderData;

    this._dataBlob = null;
    this._dirtyRows = [];
@@ -156,15 +147,15 @@ class ListViewDataSource {
   * handle merging of old and new data separately and then pass that into
   * this function as the `dataBlob`.
   */
-   cloneWithRows(
-       dataBlob: Array<any> | {[key: string]: any},
-       rowIdentities: ?Array<string>
-   ): ListViewDataSource {
+  cloneWithRows(
+    dataBlob: Array<any> | { [key: string]: any },
+    rowIdentities: ?Array<string>
+  ): ListViewDataSource {
    var rowIds = rowIdentities ? [rowIdentities] : null;
    if (!this._sectionHeaderHasChanged) {
      this._sectionHeaderHasChanged = () => false;
    }
-    return this.cloneWithRowsAndSections({s1: dataBlob}, ['s1'], rowIds);
+    return this.cloneWithRowsAndSections({ s1: dataBlob }, ['s1'], rowIds);
  }

  /**
@@ -179,9 +170,9 @@ class ListViewDataSource {
   * Note: this returns a new object!
   */
  cloneWithRowsAndSections(
-      dataBlob: any,
-      sectionIdentities: ?Array<string>,
-      rowIdentities: ?Array<Array<string>>
+    dataBlob: any,
+    sectionIdentities: ?Array<string>,
+    rowIdentities: ?Array<Array<string>>
  ): ListViewDataSource {
    invariant(
      typeof this._sectionHeaderHasChanged === 'function',
@@ -191,7 +182,7 @@ class ListViewDataSource {
      getRowData: this._getRowData,
      getSectionHeaderData: this._getSectionHeaderData,
      rowHasChanged: this._rowHasChanged,
-      sectionHeaderHasChanged: this._sectionHeaderHasChanged,
+      sectionHeaderHasChanged: this._sectionHeaderHasChanged
    });
    newSource._dataBlob = dataBlob;
    if (sectionIdentities) {
@@ -203,17 +194,13 @@ class ListViewDataSource {
      newSource.rowIdentities = rowIdentities;
    } else {
      newSource.rowIdentities = [];
-      newSource.sectionIdentities.forEach((sectionID) => {
+      newSource.sectionIdentities.forEach(sectionID => {
        newSource.rowIdentities.push(Object.keys(dataBlob[sectionID]));
      });
    }
    newSource._cachedRowCount = countRows(newSource.rowIdentities);

-    newSource._calculateDirtyArrays(
-      this._dataBlob,
-      this.sectionIdentities,
-      this.rowIdentities
-    );
+    newSource._calculateDirtyArrays(this._dataBlob, this.sectionIdentities, this.rowIdentities);

    return newSource;
  }
@@ -223,16 +210,18 @@ class ListViewDataSource {
  }

  getRowAndSectionCount(): number {
-    return (this._cachedRowCount + this.sectionIdentities.length);
+    return this._cachedRowCount + this.sectionIdentities.length;
  }

  /**
   * Returns if the row is dirtied and needs to be rerendered
   */
-  rowShouldUpdate(sectionIndex: number, rowIndex: number): bool {
+  rowShouldUpdate(sectionIndex: number, rowIndex: number): boolean {
    var needsUpdate = this._dirtyRows[sectionIndex][rowIndex];
-    warning(needsUpdate !== undefined,
-      'missing dirtyBit for section, row: ' + sectionIndex + ', ' + rowIndex);
+    warning(
+      needsUpdate !== undefined,
+      'missing dirtyBit for section, row: ' + sectionIndex + ', ' + rowIndex
+    );
    return needsUpdate;
  }

@@ -295,10 +284,9 @@ class ListViewDataSource {
  /**
   * Returns if the section header is dirtied and needs to be rerendered
   */
-  sectionHeaderShouldUpdate(sectionIndex: number): bool {
+  sectionHeaderShouldUpdate(sectionIndex: number): boolean {
    var needsUpdate = this._dirtySections[sectionIndex];
-    warning(needsUpdate !== undefined,
-      'missing dirtyBit for section: ' + sectionIndex);
+    warning(needsUpdate !== undefined, 'missing dirtyBit for section: ' + sectionIndex);
    return needsUpdate;
  }

@@ -310,8 +298,7 @@ class ListViewDataSource {
      return null;
    }
    var sectionID = this.sectionIdentities[sectionIndex];
-    warning(sectionID !== undefined,
-      'renderSection called on invalid section: ' + sectionIndex);
+    warning(sectionID !== undefined, 'renderSection called on invalid section: ' + sectionIndex);
    return this._getSectionHeaderData(this._dataBlob, sectionID);
  }

@@ -325,8 +312,8 @@ class ListViewDataSource {
  _sectionHeaderHasChanged: ?differType;

  _dataBlob: any;
-  _dirtyRows: Array<Array<bool>>;
-  _dirtySections: Array<bool>;
+  _dirtyRows: Array<Array<boolean>>;
+  _dirtySections: Array<boolean>;
  _cachedRowCount: number;

  // These two 'protected' variables are accessed by ListView to iterate over
@@ -344,10 +331,7 @@ class ListViewDataSource {
    var prevRowsHash = {};
    for (var ii = 0; ii < prevRowIDs.length; ii++) {
      var sectionID = prevSectionIDs[ii];
-      warning(
-        !prevRowsHash[sectionID],
-        'SectionID appears more than once: ' + sectionID
-      );
+      warning(!prevRowsHash[sectionID], 'SectionID appears more than once: ' + sectionID);
      prevRowsHash[sectionID] = keyedDictionaryFromArray(prevRowIDs[ii]);
    }

@@ -373,8 +357,7 @@ class ListViewDataSource {
      for (var rIndex = 0; rIndex < this.rowIdentities[sIndex].length; rIndex++) {
        var rowID = this.rowIdentities[sIndex][rIndex];
        // dirty if the section is new, row is new or _rowHasChanged is true
-        dirty =
-          !prevSectionsHash[sectionID] ||
+        dirty = !prevSectionsHash[sectionID] ||
          !prevRowsHash[sectionID][rowID] ||
          this._rowHasChanged(
            this._getRowData(prevDataBlob, sectionID, rowID),
@@ -408,5 +391,4 @@ function keyedDictionaryFromArray(arr) {
  return result;
 }

-
 module.exports = ListViewDataSource;
--- a/src/components/ListView/index.js
+++ b/src/components/ListView/index.js
@@ -19,7 +19,7 @@ class ListView extends Component {
  static defaultProps = {
    initialListSize: DEFAULT_INITIAL_ROWS,
    pageSize: DEFAULT_PAGE_SIZE,
-    renderScrollComponent: (props) => <ScrollView {...props} />,
+    renderScrollComponent: props => <ScrollView {...props} />,
    scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
    onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
    scrollEventThrottle: DEFAULT_SCROLL_CALLBACK_THROTTLE,
@@ -61,16 +61,24 @@ class ListView extends Component {
  }

  componentWillReceiveProps(nextProps: Object) {
-    if (this.props.dataSource !== nextProps.dataSource || this.props.initialListSize !== nextProps.initialListSize) {
-      this.setState((state, props) => {
-        this._prevRenderedRowsCount = 0;
-        return {
-          curRenderedRowsCount: Math.min(
-            Math.max(state.curRenderedRowsCount, props.initialListSize),
-            props.enableEmptySections ? props.dataSource.getRowAndSectionCount() : props.dataSource.getRowCount()
-          )
-        };
-      }, () => this._renderMoreRowsIfNeeded());
+    if (
+      this.props.dataSource !== nextProps.dataSource ||
+      this.props.initialListSize !== nextProps.initialListSize
+    ) {
+      this.setState(
+        (state, props) => {
+          this._prevRenderedRowsCount = 0;
+          return {
+            curRenderedRowsCount: Math.min(
+              Math.max(state.curRenderedRowsCount, props.initialListSize),
+              props.enableEmptySections
+                ? props.dataSource.getRowAndSectionCount()
+                : props.dataSource.getRowCount()
+            )
+          };
+        },
+        () => this._renderMoreRowsIfNeeded()
+      );
    }
  }

@@ -94,15 +102,15 @@ class ListView extends Component {

  _onRowHighlighted = (sectionId, rowId) => {
    this.setState({ highlightedRow: { sectionId, rowId } });
-  }
+  };

  renderSectionHeaderFn = (data, sectionID) => {
    return () => this.props.renderSectionHeader(data, sectionID);
-  }
+  };

  renderRowFn = (data, sectionID, rowID) => {
    return () => this.props.renderRow(data, sectionID, rowID, this._onRowHighlighted);
-  }
+  };

  render() {
    const children = [];
@@ -117,6 +125,8 @@ class ListView extends Component {
      renderSeparator,
      /* eslint-disable */
      initialListSize,
+      onChangeVisibleRows,
+      onEndReached,
      onEndReachedThreshold,
      onKeyboardDidHide,
      onKeyboardDidShow,
@@ -144,18 +154,22 @@ class ListView extends Component {
      if (rowIDs.length === 0) {
        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.');
+          warning(
+            false,
+            'In next release empty section headers will be rendered.' +
+              " In this release you can use 'enableEmptySections' flag to render empty section headers."
+          );
          continue;
        } else {
          const invariant = require('fbjs/lib/invariant');
          invariant(
            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.' +
-            ' In this release \'enableEmptySections\' may only have value \'true\'' +
-            ' to allow empty section headers rendering.');
+            "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.' +
+              " In this release 'enableEmptySections' may only have value 'true'" +
+              ' to allow empty section headers rendering.'
+          );
        }
      }

@@ -172,7 +186,7 @@ class ListView extends Component {
            shouldUpdate={!!shouldUpdateHeader}
          />
        );
-        sectionHeaderIndices.push(totalIndex++);
+        sectionHeaderIndices.push((totalIndex++));
      }

      for (let rowIdx = 0; rowIdx < rowIDs.length; rowIdx++) {
@@ -180,31 +194,23 @@ class ListView extends Component {
        const comboID = `${sectionID}_${rowID}`;
        const shouldUpdateRow = rowCount >= this._prevRenderedRowsCount &&
          dataSource.rowShouldUpdate(sectionIdx, rowIdx);
-        const row =
+        const row = (
          <StaticRenderer
            key={`r_${comboID}`}
-            render={this.renderRowFn(
-              dataSource.getRowData(sectionIdx, rowIdx),
-              sectionID,
-              rowID
-            )}
+            render={this.renderRowFn(dataSource.getRowData(sectionIdx, rowIdx), sectionID, rowID)}
            shouldUpdate={!!shouldUpdateRow}
-          />;
+          />
+        );
        children.push(row);
        totalIndex++;

-        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 = renderSeparator(
-            sectionID,
-            rowID,
-            adjacentRowHighlighted
-          );
+        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 = renderSeparator(sectionID, rowID, adjacentRowHighlighted);
          if (separator) {
            children.push(separator);
            totalIndex++;
@@ -220,11 +226,17 @@ class ListView extends Component {
    }
    scrollProps.onScroll = this._onScroll;

-    return React.cloneElement(renderScrollComponent(scrollProps), {
-      ref: this._setScrollViewRef,
-      onContentSizeChange: this._onContentSizeChange,
-      onLayout: this._onLayout
-    }, header, children, footer);
+    return React.cloneElement(
+      renderScrollComponent(scrollProps),
+      {
+        ref: this._setScrollViewRef,
+        onContentSizeChange: this._onContentSizeChange,
+        onLayout: this._onLayout
+      },
+      header,
+      children,
+      footer
+    );
  }

  _measureAndUpdateScrollProps() {
@@ -245,14 +257,14 @@ class ListView extends Component {
      this._renderMoreRowsIfNeeded();
    }
    this.props.onLayout && this.props.onLayout(event);
-  }
+  };

  _updateVisibleRows(updatedFrames?: Array<Object>) {
    if (!this.props.onChangeVisibleRows) {
      return; // No need to compute visible rows if there is no callback
    }
    if (updatedFrames) {
-      updatedFrames.forEach((newFrame) => {
+      updatedFrames.forEach(newFrame => {
        this._childFrames[newFrame.index] = Object.assign({}, newFrame);
      });
    }
@@ -283,8 +295,10 @@ class ListView extends Component {
        const rowID = rowIDs[rowIdx];
        const frame = this._childFrames[totalIndex];
        totalIndex++;
-        if (this.props.renderSeparator &&
-           (rowIdx !== rowIDs.length - 1 || sectionIdx === allRowIDs.length - 1)) {
+        if (
+          this.props.renderSeparator &&
+          (rowIdx !== rowIDs.length - 1 || sectionIdx === allRowIDs.length - 1)
+        ) {
          totalIndex++;
        }
        if (!frame) {
@@ -293,7 +307,7 @@ class ListView extends Component {
        const rowVisible = visibleSection[rowID];
        const min = isVertical ? frame.y : frame.x;
        const max = min + (isVertical ? frame.height : frame.width);
-        if ((!min && !max) || (min === max)) {
+        if ((!min && !max) || min === max) {
          break;
        }
        if (min > visibleMax || max < visibleMin) {
@@ -331,18 +345,24 @@ class ListView extends Component {
      this._renderMoreRowsIfNeeded();
    }
    this.props.onContentSizeChange && this.props.onContentSizeChange(width, height);
-  }
+  };

  _getDistanceFromEnd(scrollProperties: Object) {
-    return scrollProperties.contentLength - scrollProperties.visibleLength - scrollProperties.offset;
+    return scrollProperties.contentLength -
+      scrollProperties.visibleLength -
+      scrollProperties.offset;
  }

  _maybeCallOnEndReached(event?: Object) {
-    if (this.props.onEndReached &&
-        this.scrollProperties.contentLength !== this._sentEndForContentLength &&
-        this._getDistanceFromEnd(this.scrollProperties) < this.props.onEndReachedThreshold &&
-        this.state.curRenderedRowsCount === (this.props.enableEmptySections ?
-          this.props.dataSource.getRowAndSectionCount() : this.props.dataSource.getRowCount())) {
+    if (
+      this.props.onEndReached &&
+      this.scrollProperties.contentLength !== this._sentEndForContentLength &&
+      this._getDistanceFromEnd(this.scrollProperties) < this.props.onEndReachedThreshold &&
+      this.state.curRenderedRowsCount ===
+        (this.props.enableEmptySections
+          ? this.props.dataSource.getRowAndSectionCount()
+          : this.props.dataSource.getRowCount())
+    ) {
      this._sentEndForContentLength = this.scrollProperties.contentLength;
      this.props.onEndReached(event);
      return true;
@@ -351,10 +371,14 @@ class ListView extends Component {
  }

  _renderMoreRowsIfNeeded() {
-    if (this.scrollProperties.contentLength === null ||
+    if (
+      this.scrollProperties.contentLength === null ||
      this.scrollProperties.visibleLength === null ||
-      this.state.curRenderedRowsCount === (this.props.enableEmptySections ?
-        this.props.dataSource.getRowAndSectionCount() : this.props.dataSource.getRowCount())) {
+      this.state.curRenderedRowsCount ===
+        (this.props.enableEmptySections
+          ? this.props.dataSource.getRowAndSectionCount()
+          : this.props.dataSource.getRowCount())
+    ) {
      this._maybeCallOnEndReached();
      return;
    }
@@ -366,19 +390,24 @@ class ListView extends Component {
  }

  _pageInNewRows() {
-    this.setState((state, props) => {
-      const rowsToRender = Math.min(
-        state.curRenderedRowsCount + props.pageSize,
-        (props.enableEmptySections ? props.dataSource.getRowAndSectionCount() : props.dataSource.getRowCount())
-      );
-      this._prevRenderedRowsCount = state.curRenderedRowsCount;
-      return {
-        curRenderedRowsCount: rowsToRender
-      };
-    }, () => {
-      this._measureAndUpdateScrollProps();
-      this._prevRenderedRowsCount = this.state.curRenderedRowsCount;
-    });
+    this.setState(
+      (state, props) => {
+        const rowsToRender = Math.min(
+          state.curRenderedRowsCount + props.pageSize,
+          props.enableEmptySections
+            ? props.dataSource.getRowAndSectionCount()
+            : props.dataSource.getRowCount()
+        );
+        this._prevRenderedRowsCount = state.curRenderedRowsCount;
+        return {
+          curRenderedRowsCount: rowsToRender
+        };
+      },
+      () => {
+        this._measureAndUpdateScrollProps();
+        this._prevRenderedRowsCount = this.state.curRenderedRowsCount;
+      }
+    );
  }

  _onScroll = (e: Object) => {
@@ -389,16 +418,16 @@ class ListView extends Component {
    this.scrollProperties.contentLength = e.nativeEvent.contentSize[
      isVertical ? 'height' : 'width'
    ];
-    this.scrollProperties.offset = e.nativeEvent.contentOffset[
-      isVertical ? 'y' : 'x'
-    ];
+    this.scrollProperties.offset = e.nativeEvent.contentOffset[isVertical ? 'y' : 'x'];
    this._updateVisibleRows(e.nativeEvent.updatedChildFrames);
    if (!this._maybeCallOnEndReached(e)) {
      this._renderMoreRowsIfNeeded();
    }

-    if (this.props.onEndReached &&
-        this._getDistanceFromEnd(this.scrollProperties) > this.props.onEndReachedThreshold) {
+    if (
+      this.props.onEndReached &&
+      this._getDistanceFromEnd(this.scrollProperties) > this.props.onEndReachedThreshold
+    ) {
      // Scrolled out of the end zone, so it should be able to trigger again.
      this._sentEndForContentLength = null;
    }
@@ -406,9 +435,9 @@ class ListView extends Component {
    this.props.onScroll && this.props.onScroll(e);
  };

-  _setScrollViewRef = (component) => {
+  _setScrollViewRef = component => {
    this._scrollViewRef = component;
-  }
+  };
 }

 module.exports = applyNativeMethods(ListView);
--- a/src/components/ProgressBar/index.js
+++ b/src/components/ProgressBar/index.js
@@ -44,32 +44,25 @@ class ProgressBar extends Component {
    const percentageProgress = progress * 100;

    return (
-      <View {...other}
-        accessibilityRole='progressbar'
-        aria-valuemax='100'
-        aria-valuemin='0'
+      <View
+        {...other}
+        accessibilityRole="progressbar"
+        aria-valuemax="100"
+        aria-valuemin="0"
        aria-valuenow={indeterminate ? null : percentageProgress}
-        style={[
-          styles.track,
-          style,
-          { backgroundColor: trackColor }
-        ]}
+        style={[styles.track, style, { backgroundColor: trackColor }]}
      >
        <View
          ref={this._setProgressRef}
-          style={[
-            styles.progress,
-            indeterminate && styles.animation,
-            { backgroundColor: color }
-          ]}
+          style={[styles.progress, indeterminate && styles.animation, { backgroundColor: color }]}
        />
      </View>
    );
  }

-  _setProgressRef = (component) => {
+  _setProgressRef = component => {
    this._progressRef = component;
-  }
+  };

  _updateProgressWidth = () => {
    const { indeterminate, progress } = this.props;
@@ -78,7 +71,7 @@ class ProgressBar extends Component {
    this._progressRef.setNativeProps({
      style: { width }
    });
-  }
+  };
 }

 const styles = StyleSheet.create({
--- a/src/components/ScrollView/ScrollViewBase.js
+++ b/src/components/ScrollView/ScrollViewBase.js
@@ -11,7 +11,7 @@ import View from '../View';
 import ViewPropTypes from '../View/ViewPropTypes';
 import React, { Component, PropTypes } from 'react';

-const normalizeScrollEvent = (e) => ({
+const normalizeScrollEvent = e => ({
  nativeEvent: {
    contentOffset: {
      get x() {
@@ -72,17 +72,19 @@ export default class ScrollViewBase extends Component {
    this._state = { isScrolling: false };
  }

-  _handlePreventableScrollEvent = (handler) => {
-    return (e) => {
+  _handlePreventableScrollEvent = handler => {
+    return e => {
      if (!this.props.scrollEnabled) {
        e.preventDefault();
      } else {
-        if (handler) { handler(e); }
+        if (handler) {
+          handler(e);
+        }
      }
    };
-  }
+  };

-  _handleScroll = (e) => {
+  _handleScroll = e => {
    e.persist();
    const { scrollEventThrottle } = this.props;
    // A scroll happened, so the scroll bumps the debounce.
@@ -96,7 +98,7 @@ export default class ScrollViewBase extends Component {
      // Weren't scrolling, so we must have just started
      this._handleScrollStart(e);
    }
-  }
+  };

  _handleScrollStart(e) {
    this._state.isScrolling = true;
@@ -106,18 +108,22 @@ export default class ScrollViewBase extends Component {
  _handleScrollTick(e) {
    const { onScroll } = this.props;
    this._state.scrollLastTick = Date.now();
-    if (onScroll) { onScroll(normalizeScrollEvent(e)); }
+    if (onScroll) {
+      onScroll(normalizeScrollEvent(e));
+    }
  }

  _handleScrollEnd(e) {
    const { onScroll } = this.props;
    this._state.isScrolling = false;
-    if (onScroll) { onScroll(normalizeScrollEvent(e)); }
+    if (onScroll) {
+      onScroll(normalizeScrollEvent(e));
+    }
  }

  _shouldEmitScrollEvent(lastTick, eventThrottle) {
    const timeSinceLastTick = Date.now() - lastTick;
-    return (eventThrottle > 0 && timeSinceLastTick >= eventThrottle);
+    return eventThrottle > 0 && timeSinceLastTick >= eventThrottle;
  }

  render() {
--- a/src/components/ScrollView/index.js
+++ b/src/components/ScrollView/index.js
@@ -26,7 +26,7 @@ const ScrollView = React.createClass({
    ...ViewPropTypes,
    contentContainerStyle: StyleSheetPropType(ViewStylePropTypes),
    horizontal: PropTypes.bool,
-    keyboardDismissMode: PropTypes.oneOf([ 'none', 'interactive', 'on-drag' ]),
+    keyboardDismissMode: PropTypes.oneOf(['none', 'interactive', 'on-drag']),
    onContentSizeChange: PropTypes.func,
    onScroll: PropTypes.func,
    pagingEnabled: PropTypes.bool,
@@ -36,7 +36,7 @@ const ScrollView = React.createClass({
    style: StyleSheetPropType(ViewStylePropTypes)
  },

-  mixins: [ ScrollResponder.Mixin ],
+  mixins: [ScrollResponder.Mixin],

  getInitialState() {
    return this.scrollResponderMixinGetInitialState();
@@ -80,12 +80,18 @@ const ScrollView = React.createClass({
    animated?: boolean
  ) {
    if (typeof y === 'number') {
-      console.warn('`scrollTo(y, x, animated)` is deprecated. Use `scrollTo({x: 5, y: 5, animated: true})` instead.');
+      console.warn(
+        '`scrollTo(y, x, animated)` is deprecated. Use `scrollTo({x: 5, y: 5, animated: true})` instead.'
+      );
    } else {
      ({ x, y, animated } = y || emptyObject);
    }

-    this.getScrollResponder().scrollResponderScrollTo({ x: x || 0, y: y || 0, animated: animated !== false });
+    this.getScrollResponder().scrollResponderScrollTo({
+      x: x || 0,
+      y: y || 0,
+      animated: animated !== false
+    });
  },

  /**
@@ -112,11 +118,13 @@ const ScrollView = React.createClass({

    if (process.env.NODE_ENV !== 'production' && this.props.style) {
      const style = StyleSheet.flatten(this.props.style);
-      const childLayoutProps = [ 'alignItems', 'justifyContent' ].filter((prop) => style && style[prop] !== undefined);
+      const childLayoutProps = ['alignItems', 'justifyContent'].filter(
+        prop => style && style[prop] !== undefined
+      );
      invariant(
        childLayoutProps.length === 0,
        `ScrollView child layout (${JSON.stringify(childLayoutProps)}) ` +
-        'must be applied through the contentContainerStyle prop.'
+          'must be applied through the contentContainerStyle prop.'
      );
    }

@@ -143,11 +151,7 @@ const ScrollView = React.createClass({

    const props = {
      ...other,
-      style: [
-        styles.base,
-        horizontal && styles.baseHorizontal,
-        this.props.style
-      ],
+      style: [styles.base, horizontal && styles.baseHorizontal, this.props.style],
      onTouchStart: this.scrollResponderHandleTouchStart,
      onTouchMove: this.scrollResponderHandleTouchMove,
      onTouchEnd: this.scrollResponderHandleTouchEnd,
@@ -168,20 +172,15 @@ const ScrollView = React.createClass({

    const ScrollViewClass = ScrollViewBase;

-    invariant(
-      ScrollViewClass !== undefined,
-      'ScrollViewClass must not be undefined'
-    );
+    invariant(ScrollViewClass !== undefined, 'ScrollViewClass must not be undefined');

    if (refreshControl) {
      return React.cloneElement(
        refreshControl,
        { style: props.style },
-        (
-          <ScrollViewClass {...props} ref={this._setScrollViewRef} style={styles.base}>
-            {contentContainer}
-          </ScrollViewClass>
-        )
+        <ScrollViewClass {...props} ref={this._setScrollViewRef} style={styles.base}>
+          {contentContainer}
+        </ScrollViewClass>
      );
    }

@@ -202,10 +201,10 @@ const ScrollView = React.createClass({
      if (this.props.onScroll && !this.props.scrollEventThrottle) {
        console.log(
          'You specified `onScroll` on a <ScrollView> but not ' +
-          '`scrollEventThrottle`. You will only receive one event. ' +
-          'Using `16` you get all the events but be aware that it may ' +
-          'cause frame drops, use a bigger number if you don\'t need as ' +
-          'much precision.'
+            '`scrollEventThrottle`. You will only receive one event. ' +
+            'Using `16` you get all the events but be aware that it may ' +
+            "cause frame drops, use a bigger number if you don't need as " +
+            'much precision.'
        );
      }
    }
@@ -239,7 +238,7 @@ const styles = StyleSheet.create({
    overflowY: 'hidden'
  },
  contentContainer: {
-    transform: [ { translateZ: 0 } ]
+    transform: [{ translateZ: 0 }]
  },
  contentContainerHorizontal: {
    flexDirection: 'row'
--- a/src/components/StaticContainer/index.js
+++ b/src/components/StaticContainer/index.js
@@ -35,7 +35,7 @@ class StaticContainer extends Component {

  render() {
    const child = this.props.children;
-    return (child === null || child === false) ? null : React.Children.only(child);
+    return child === null || child === false ? null : React.Children.only(child);
  }
 }

--- a/src/components/Switch/tests/snapshots/index-test.js.snap
+++ b/src/components/Switch/tests/snapshots/index-test.js.snap
@@ -1,39 +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-flexShrink:0
-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
-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",
@@ -41,44 +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-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  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",
@@ -89,46 +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-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  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",
@@ -138,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]}
@@ -167,40 +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-flexShrink:0
-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
-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",
@@ -208,45 +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-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  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",
@@ -256,47 +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-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  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",
@@ -305,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]}
@@ -334,40 +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-flexShrink:0
-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
-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",
@@ -375,44 +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-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  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",
@@ -423,46 +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-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  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",
@@ -472,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]}
@@ -501,40 +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-flexShrink:0
-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
-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",
@@ -542,44 +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-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  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",
@@ -590,45 +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-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  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",
@@ -639,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]}
--- a/src/components/Switch/index.js
+++ b/src/components/Switch/index.js
@@ -71,12 +71,7 @@ class Switch extends Component {
    const thumbHeight = height;
    const thumbWidth = thumbHeight;

-    const rootStyle = [
-      styles.root,
-      style,
-      { height, width },
-      disabled && styles.cursorDefault
-    ];
+    const rootStyle = [styles.root, style, { height, width }, disabled && styles.cursorDefault];

    const trackStyle = [
      styles.track,
@@ -104,7 +99,7 @@ class Switch extends Component {
      onChange: this._handleChange,
      onFocus: this._handleFocusState,
      ref: this._setCheckboxRef,
-      style: [ styles.nativeControl, styles.cursorInherit ],
+      style: [styles.nativeControl, styles.cursorInherit],
      type: 'checkbox'
    });

@@ -129,21 +124,21 @@ class Switch extends Component {
  _handleChange = (event: Object) => {
    const { onValueChange } = this.props;
    onValueChange && onValueChange(event.nativeEvent.target.checked);
-  }
+  };

  _handleFocusState = (event: Object) => {
    const isFocused = event.nativeEvent.type === 'focus';
    const boxShadow = isFocused ? thumbFocusedBoxShadow : thumbDefaultBoxShadow;
    this._thumb.setNativeProps({ style: { boxShadow } });
-  }
+  };

-  _setCheckboxRef = (component) => {
+  _setCheckboxRef = component => {
    this._checkbox = component;
-  }
+  };

-  _setThumbRef = (component) => {
+  _setThumbRef = component => {
    this._thumb = component;
-  }
+  };
 }

 const styles = StyleSheet.create({
@@ -172,9 +167,7 @@ const styles = StyleSheet.create({
    borderRadius: '100%',
    boxShadow: thumbDefaultBoxShadow,
    left: '0%',
-    transform: [
-      { translateZ: 0 }
-    ],
+    transform: [{ translateZ: 0 }],
    transitionDuration: '0.1s'
  },
  thumbOn: {
--- a/src/components/Text/TextStylePropTypes.js
+++ b/src/components/Text/TextStylePropTypes.js
@@ -3,22 +3,23 @@ import { PropTypes } from 'react';
 import ViewStylePropTypes from '../View/ViewStylePropTypes';

 const { number, oneOf, oneOfType, shape, string } = PropTypes;
-const numberOrString = oneOfType([ number, string ]);
+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 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' ]),
+  textAlignVertical: oneOf(['auto', 'bottom', 'center', 'top']),
  textDecorationLine: string,
  textShadowColor: ColorPropType,
  textShadowOffset: ShadowOffsetPropType,
@@ -26,9 +27,16 @@ const TextOnlyStylePropTypes = {
  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' ]),
+  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,
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Nicolas Gallagher	b7d3f0d099	0.0.76	2017-03-06 12:31:41 -08:00
Nicolas Gallagher	f1ca00a13a	[fix] ProgressBar animation styles Fix #384	2017-03-06 12:30:34 -08:00
Aaron Craig	9451c0f85e	[fix] avoid passing ListView props to ScrollView The 'onChangeVisibleRows' and 'onEndReachedThreshold' props should not be passed to 'ScrollView', as it results in React warnings about unknown props on the underlying DOM node. Close #383	2017-03-05 09:21:10 -08:00
Nicolas Gallagher	b408bc5537	Use a package for style name hyphenation The 'hyphenate-style-name' packages is already a dependency of 'inline-style-prefixer', so we don't need our own implementation.	2017-03-02 19:10:05 -08:00
Nicolas Gallagher	a2f25a46c4	Reformat 'performance' and 'src' code	2017-03-02 18:59:33 -08:00
Nicolas Gallagher	29d52f5b31	Remove formatting rules from eslint config	2017-03-02 18:59:32 -08:00
Nicolas Gallagher	ba6be1f64a	Install prettier code formatter	2017-03-02 18:59:32 -08:00
Nicolas Gallagher	43f78828a5	Update benchmarks to use styled-components@2.0.0-5 No significant change in the benchmark results	2017-03-02 18:57:57 -08:00
Nicolas Gallagher	26bc8173f0	0.0.75	2017-02-27 23:11:30 -08:00
Nicolas Gallagher	ecae52ccc5	[change] Touchable pass through props Add support for web-specific props to improve accessibility, e.g., ARIA properties (and declarative links). Fix #65	2017-02-27 17:05:38 -08:00
Nicolas Gallagher	997653863f	[fix] ignore unsupported style prop types Fix #347 Close #371	2017-02-27 16:40:54 -08:00
Nicolas Gallagher	5dc692719f	Update snapshots after StyleSheet refactor	2017-02-27 15:59:18 -08:00
Nicolas Gallagher	0361845537	[change] StyleSheet refactor * HTML class names are now hashes of the corresponding declaration * Simplifies 'setNativeProps' logic * Fixes use of server-rendered style sheet * Fixes duplicate insertion of style sheets with hot-reloading No significant change to the benchmark results	2017-02-27 15:59:18 -08:00
Nicolas Gallagher	f391031fb1	0.0.74	2017-02-27 14:55:34 -08:00
Matthias Le Brun	77799abf9b	[fix] Touchable support for 'Enter' keypress event Close #375	2017-02-27 14:53:27 -08:00
Nicolas Gallagher	2cfd09ecdb	[fix] server-side rendering `e1fc253` added deferred image loading but didn't guard the 'requestIdleFallback' shim for use in Node.js Fix #376	2017-02-27 14:50:29 -08:00
Nicolas Gallagher	89eea2b366	Remove unused style in 'View'	2017-02-27 14:41:47 -08:00
Nicolas Gallagher	18440158b3	Add comparative performance benchmarks Includes a 'css-modules' implementation of the nested trees to act as a baseline for comparison.	2017-02-26 17:19:43 -08:00
Nicolas Gallagher	24eda7c4ad	0.0.73	2017-02-24 12:35:18 -08:00
Nicolas Gallagher	44ebd8f5a3	[change] modality-specific focus styles Remove the default focus ring when the keyboard is not being used. This provides a superior UX when using touch or mouse. Fix #310	2017-02-18 13:39:25 -08:00
Matthias Le Brun	a3ed8f05e6	[add] resize 'TextInput' style Fix #363	2017-02-18 12:49:25 -08:00
Nicolas Gallagher	b653fe0bd3	[add] fontFeatureSettings 'Text' style Fix #331	2017-02-18 12:18:28 -08:00
Nicolas Gallagher	30da226e4d	Update component style docs	2017-02-18 12:07:30 -08:00