0.1.15

[fix] Image 'onLoad' callback on update
'onLoad' should not be called when a component updates, if the 'uri' is unchanged. Fixes a regression introduced by 92952ee746
2026-03-30 17:34:05 +08:00 · 2017-12-01 17:55:17 -08:00 · 2017-12-01 17:52:47 -08:00 · 2017-11-15 15:21:45 -08:00 · 2017-11-15 15:20:21 -08:00 · 2017-11-15 14:45:33 -08:00
54 changed files with 1361 additions and 401 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -5,5 +5,4 @@ before_script:
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
 script:
-  - npm run lint
-  - npm test
+  - yarn lint
--- a/babel/tests/snapshots/index-test.js.snap
+++ b/babel/tests/snapshots/index-test.js.snap
@@ -103,3 +103,59 @@ const { InvalidThing, TouchableOpacity } = require('react-native');
 const TouchableOpacity = require('react-native-web/dist/components/Touchable/TouchableOpacity');
 "
 `;
+
+exports[`10. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { View } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as View } from 'react-native-web/dist/components/View';
+"
+`;
+
+exports[`11. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as Switch } from 'react-native-web/dist/components/Switch';
+export { default as Text } from 'react-native-web/dist/components/Text';
+export { default as MyView } from 'react-native-web/dist/components/View';
+export { default as ViewPropTypes } from 'react-native-web/dist/components/View/ViewPropTypes';
+"
+`;
+
+exports[`12. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { createElement, Switch, StyleSheet } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as createElement } from 'react-native-web/dist/modules/createElement';
+export { default as Switch } from 'react-native-web/dist/components/Switch';
+export { default as StyleSheet } from 'react-native-web/dist/apis/StyleSheet';
+"
+`;
+
+exports[`13. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { InvalidThing, TouchableOpacity } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { InvalidThing } from 'react-native-web';
+export { default as TouchableOpacity } from 'react-native-web/dist/components/Touchable/TouchableOpacity';
+"
+`;
+
+exports[`14. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { default as RNW } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as RNW } from 'react-native-web';
+"
+`;
--- a/babel/tests/index-test.js
+++ b/babel/tests/index-test.js
@@ -30,6 +30,13 @@ pluginTester({
    // "let { Switch, Text, View: MyView } = require('react-native-web');",
    // "var { createElement, Switch, StyleSheet } = require('react-native-web');",
    // "const { InvalidThing, TouchableOpacity } = require('react-native-web');",
+
+    // export react-native
+    "export { View } from 'react-native';",
+    "export { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';",
+    "export { createElement, Switch, StyleSheet } from 'react-native';",
+    "export { InvalidThing, TouchableOpacity } from 'react-native';",
+    "export { default as RNW } from 'react-native';",
    {
      code: "const RNW = require('react-native');",
      output: "const RNW = require('react-native');",
--- a/babel/index.js
+++ b/babel/index.js
@@ -7,7 +7,7 @@ const getDistLocation = importName => {
    case 'AppRegistry':
    case 'AppState':
    case 'AsyncStorage':
-    case 'BackAndroid':
+    case 'BackHandler':
    case 'Clipboard':
    case 'Dimensions':
    case 'Easing':
@@ -106,7 +106,7 @@ module.exports = function({ types: t }) {
    visitor: {
      ImportDeclaration(path) {
        const { source, specifiers } = path.node;
-        if (source.value === 'react-native' && specifiers.length) {
+        if (source && source.value === 'react-native' && specifiers.length) {
          const imports = specifiers
            .map(specifier => {
              if (t.isImportSpecifier(specifier)) {
@@ -127,6 +127,35 @@ module.exports = function({ types: t }) {
          path.replaceWithMultiple(imports);
        }
      },
+      ExportNamedDeclaration(path) {
+        const { source, specifiers } = path.node;
+        if (source && source.value === 'react-native' && specifiers.length) {
+          const exports = specifiers
+            .map(specifier => {
+              if (t.isExportSpecifier(specifier)) {
+                const exportName = specifier.exported.name;
+                const localName = specifier.local.name;
+                const distLocation = getDistLocation(localName);
+
+                if (distLocation) {
+                  return t.exportNamedDeclaration(
+                    null,
+                    [t.exportSpecifier(t.identifier('default'), t.identifier(exportName))],
+                    t.stringLiteral(distLocation)
+                  );
+                }
+                return t.exportNamedDeclaration(
+                  null,
+                  [specifier],
+                  t.stringLiteral('react-native-web')
+                );
+              }
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(exports);
+        }
+      },
      VariableDeclaration(path) {
        if (isReactNativeRequire(t, path.node)) {
          const { id } = path.node.declarations[0];
--- a/benchmarks/README.md
+++ b/benchmarks/README.md
@@ -1,10 +1,10 @@
 # Performance

-To run these benchmarks:
+To run these benchmarks from the root of the project:

 ```
-npm run build:performance
-open ./performance/index.html
+yarn benchmark
+open ./benchmarks/index.html
 ```

 Append `?fastest` to the URL to include the fastest "other libraries", and
--- a/benchmarks/index.js
+++ b/benchmarks/index.js
@@ -7,7 +7,6 @@ import radium from './src/radium';
 import reactNative from './src/react-native';
 import reactNativeStyleSheet from './src/react-native-stylesheet';
 import styledComponents from './src/styled-components';
-import styledComponentsPrimitives from './src/styled-components-primitives';
 import styletron from './src/styletron';
 import xp from './src/reactxp';

@@ -51,9 +50,7 @@ const restTests = [
  () => renderDeepTree('react-jss', jss),
  () => renderWideTree('react-jss', jss),
  () => renderDeepTree('styled-components', styledComponents),
-  () => renderWideTree('styled-components', styledComponents),
-  () => renderDeepTree('styled-components/primitives', styledComponentsPrimitives),
-  () => renderWideTree('styled-components/primitives', styledComponentsPrimitives)
+  () => renderWideTree('styled-components', styledComponents)
 ];

 const tests = [...coreTests];
--- a/benchmarks/package.json
+++ b/benchmarks/package.json
@@ -2,21 +2,21 @@
  "name": "benchmarks",
  "private": true,
  "dependencies": {
-    "aphrodite": "^1.2.3",
+    "aphrodite": "^1.2.5",
    "classnames": "^2.2.5",
-    "emotion": "^7.2.2",
+    "emotion": "^8.0.9",
    "glamor": "^2.20.40",
    "marky": "^1.2.0",
-    "radium": "^0.19.4",
-    "react-jss": "^7.1.0",
+    "radium": "^0.19.6",
+    "react-jss": "^7.2.0",
    "react-primitives": "^0.4.3",
-    "reactxp": "^0.42.1",
-    "styled-components": "^2.1.2",
+    "reactxp": "^0.42.11",
+    "styled-components": "^2.2.3",
    "styletron-client": "^2.5.7",
    "styletron-utils": "^2.5.4"
  },
  "devDependencies": {
    "css-loader": "^0.28.7",
-    "style-loader": "^0.18.2"
+    "style-loader": "^0.19.0"
  }
 }
--- a/benchmarks/yarn.lock
+++ b/benchmarks/yarn.lock
@@ -2,7 +2,11 @@
 # yarn lockfile v1


-"@types/lodash@^4.14.64", "@types/lodash@^4.14.66":
+"@types/lodash@4.14.66":
+  version "4.14.66"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.66.tgz#3dbb83477becf130611f8fac82a8fdb199805981"
+
+"@types/lodash@^4.14.64":
  version "4.14.74"
  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.74.tgz#ac3bd8db988e7f7038e5d22bd76a7ba13f876168"

@@ -45,15 +49,9 @@ ansi-styles@^2.2.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"

-ansi-styles@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
-  dependencies:
-    color-convert "^1.9.0"
-
-aphrodite@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-1.2.3.tgz#4b161e9eef319b1f90a889501f985d7b5e70b285"
+aphrodite@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-1.2.5.tgz#8358c36c80bb03aee9b97165aaa70186225b4983"
  dependencies:
    asap "^2.0.3"
    inline-style-prefixer "^3.0.1"
@@ -98,17 +96,6 @@ autoprefixer@^6.3.1:
    postcss "^5.2.15"
    postcss-value-parser "^3.2.3"

-autoprefixer@^7.1.2:
-  version "7.1.4"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.4.tgz#960847dbaa4016bc8e8e52ec891cbf8f1257a748"
-  dependencies:
-    browserslist "^2.4.0"
-    caniuse-lite "^1.0.30000726"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^6.0.11"
-    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"
@@ -117,22 +104,54 @@ babel-code-frame@^6.11.0:
    esutils "^2.0.2"
    js-tokens "^3.0.0"

-babel-plugin-emotion@^7.2.2:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-7.2.2.tgz#eae520ef15e4affd87aab761e1c8b48b3385af3e"
+babel-generator@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
  dependencies:
-    autoprefixer "^7.1.2"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.6"
+    trim-right "^1.0.1"
+
+babel-macros@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/babel-macros/-/babel-macros-1.2.0.tgz#39e47ed6d286d4a98f1948d8bab45dac17e4e2d4"
+  dependencies:
+    cosmiconfig "3.1.0"
+
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-emotion@^8.0.9:
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-8.0.9.tgz#65a9ead1e9a574fa1b0390ebcea942739761713c"
+  dependencies:
+    babel-generator "^6.26.0"
+    babel-macros "^1.0.2"
    babel-plugin-syntax-jsx "^6.18.0"
-    emotion-utils "^7.2.2"
-    postcss "^6.0.9"
-    postcss-js "^1.0.0"
-    postcss-nested "^2.1.1"
+    convert-source-map "^1.5.0"
+    emotion-utils "^8.0.9"
+    source-map "^0.5.7"
    touch "^1.0.0"

 babel-plugin-syntax-jsx@^6.18.0:
  version "6.18.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"

+babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 babel-runtime@^6.23.0:
  version "6.25.0"
  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.25.0.tgz#33b98eaa5d482bb01a8d1aa6b437ad2b01aec41c"
@@ -140,6 +159,15 @@ babel-runtime@^6.23.0:
    core-js "^2.4.0"
    regenerator-runtime "^0.10.0"

+babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
 balanced-match@^0.4.2:
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
@@ -171,13 +199,6 @@ browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.5:
    caniuse-db "^1.0.30000624"
    electron-to-chromium "^1.2.3"

-browserslist@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.4.0.tgz#693ee93d01e66468a6348da5498e011f578f87f8"
-  dependencies:
-    caniuse-lite "^1.0.30000718"
-    electron-to-chromium "^1.3.18"
-
 buffer@^5.0.3:
  version "5.0.5"
  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.5.tgz#35c9393244a90aff83581063d16f0882cecc9418"
@@ -185,10 +206,6 @@ buffer@^5.0.3:
    base64-js "^1.0.2"
    ieee754 "^1.1.4"

-camelcase-css@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-1.0.1.tgz#157c4238265f5cf94a1dffde86446552cbf3f705"
-
 caniuse-api@^1.5.2:
  version "1.5.3"
  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.3.tgz#5018e674b51c393e4d50614275dc017e27c4a2a2"
@@ -202,10 +219,6 @@ 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"

-caniuse-lite@^1.0.30000718, caniuse-lite@^1.0.30000726:
-  version "1.0.30000726"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000726.tgz#966a753fa107a09d4131cf8b3d616723a06ccf7e"
-
 chalk@^1.1.0, chalk@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -216,14 +229,6 @@ chalk@^1.1.0, chalk@^1.1.3:
    strip-ansi "^3.0.0"
    supports-color "^2.0.0"

-chalk@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
-  dependencies:
-    ansi-styles "^3.1.0"
-    escape-string-regexp "^1.0.5"
-    supports-color "^4.0.0"
-
 clap@^1.0.9:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.2.tgz#316545bf22229225a2cecaa6824cd2f56a9709ed"
@@ -248,7 +253,7 @@ coa@~1.0.1:
  dependencies:
    q "^1.1.2"

-color-convert@^1.3.0, color-convert@^1.9.0:
+color-convert@^1.3.0:
  version "1.9.0"
  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
  dependencies:
@@ -284,6 +289,10 @@ colors@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"

+convert-source-map@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
+
 core-js@^1.0.0:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@@ -292,6 +301,15 @@ core-js@^2.4.0:
  version "2.4.1"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"

+cosmiconfig@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-3.1.0.tgz#640a94bf9847f321800403cd273af60665c73397"
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.9.0"
+    parse-json "^3.0.0"
+    require-from-string "^2.0.1"
+
 create-react-class@^15.6.0:
  version "15.6.0"
  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
@@ -433,39 +451,32 @@ deline@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/deline/-/deline-1.0.4.tgz#6c05c87836926e1a1c63e47882f3d2eb2c6f14c9"

+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
 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"

-electron-to-chromium@^1.3.18:
-  version "1.3.21"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.21.tgz#a967ebdcfe8ed0083fc244d1894022a8e8113ea2"
-
 emojis-list@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"

-emotion-server@^7.2.2:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/emotion-server/-/emotion-server-7.2.2.tgz#d1073df1c71ef6fad4ee5e32319deced97b15c6b"
-  dependencies:
-    emotion "^7.2.2"
-    emotion-utils "^7.2.2"
+emotion-utils@^8.0.9:
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/emotion-utils/-/emotion-utils-8.0.9.tgz#458c7676de2f5206b0b796f7c96c53a5970ed9f2"

-emotion-utils@^7.2.2:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/emotion-utils/-/emotion-utils-7.2.2.tgz#0057927581bdd0877d6d8fb90a6162a15c75b805"
+emotion@^8.0.9:
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-8.0.9.tgz#788cf2c3ccd59becbd3e78eb01bef22ff20cf381"
  dependencies:
-    fbjs "^0.8.12"
-
-emotion@^7.2.2:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/emotion/-/emotion-7.2.2.tgz#c89908662f4abb706d488a316ea8bdcad0b29727"
-  dependencies:
-    babel-plugin-emotion "^7.2.2"
-    emotion-server "^7.2.2"
-    emotion-utils "^7.2.2"
-    react-emotion "^7.2.2"
+    babel-plugin-emotion "^8.0.9"
+    emotion-utils "^8.0.9"
+    stylis "^3.3.2"
+    stylis-rule-sheet "^0.0.5"

 encoding@^0.1.11:
  version "0.1.12"
@@ -473,7 +484,13 @@ encoding@^0.1.11:
  dependencies:
    iconv-lite "~0.4.13"

-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+error-ex@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+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"

@@ -481,6 +498,10 @@ esprima@^2.6.0:
  version "2.7.3"
  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"

+esprima@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+
 esutils@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -629,6 +650,20 @@ 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-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.0"
+
 is-function@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
@@ -680,6 +715,13 @@ 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.9.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@~3.7.0:
  version "3.7.0"
  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
@@ -687,6 +729,10 @@ js-yaml@~3.7.0:
    argparse "^1.0.7"
    esprima "^2.6.0"

+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
 jsesc@~0.5.0:
  version "0.5.0"
  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
@@ -860,10 +906,20 @@ num2fraction@^1.2.2:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"

+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"

+parse-json@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-3.0.0.tgz#fa6f47b18e23826ead32f263e744d0e1e847fb13"
+  dependencies:
+    error-ex "^1.3.1"
+
 postcss-calc@^5.2.0:
  version "5.3.1"
  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -925,13 +981,6 @@ postcss-filter-plugins@^2.0.0:
    postcss "^5.0.4"
    uniqid "^4.0.0"

-postcss-js@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-1.0.0.tgz#ccee5aa3b1970dd457008e79438165f66919ba30"
-  dependencies:
-    camelcase-css "^1.0.1"
-    postcss "^6.0.1"
-
 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"
@@ -1020,13 +1069,6 @@ postcss-modules-values@^1.1.0:
    icss-replace-symbols "^1.0.2"
    postcss "^5.0.14"

-postcss-nested@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-2.1.2.tgz#04057281f9631fef684857fb0119bae04ede03c6"
-  dependencies:
-    postcss "^6.0.9"
-    postcss-selector-parser "^2.2.3"
-
 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"
@@ -1070,7 +1112,7 @@ postcss-reduce-transforms@^1.0.3:
    postcss "^5.0.8"
    postcss-value-parser "^3.0.1"

-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2, postcss-selector-parser@^2.2.3:
+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:
@@ -1124,14 +1166,6 @@ postcss@^6.0.1:
    source-map "^0.5.6"
    supports-color "^4.0.0"

-postcss@^6.0.11, postcss@^6.0.9:
-  version "6.0.11"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.11.tgz#f48db210b1d37a7f7ab6499b7a54982997ab6f72"
-  dependencies:
-    chalk "^2.1.0"
-    source-map "^0.5.7"
-    supports-color "^4.4.0"
-
 prepend-http@^1.0.0:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
@@ -1160,26 +1194,18 @@ query-string@^4.1.0:
    object-assign "^4.1.0"
    strict-uri-encode "^1.0.0"

-radium@^0.19.4:
-  version "0.19.4"
-  resolved "https://registry.yarnpkg.com/radium/-/radium-0.19.4.tgz#56aa49fde6181d2f5e1fa57b4710ffd0c23de820"
+radium@^0.19.6:
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/radium/-/radium-0.19.6.tgz#b86721d08dbd303b061a4ae2ebb06cc6e335ae72"
  dependencies:
    array-find "^1.0.0"
    exenv "^1.2.1"
    inline-style-prefixer "^2.0.5"
    prop-types "^15.5.8"

-react-emotion@^7.2.2:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-7.2.2.tgz#0401607a0ba011bc16600a2691f5f57cb38ce89d"
-  dependencies:
-    babel-plugin-emotion "^7.2.2"
-    emotion "^7.2.2"
-    emotion-utils "^7.2.2"
-
-react-jss@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-7.1.0.tgz#de9430cbe01a82f3b2dcf87a03b798130868ff93"
+react-jss@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-7.2.0.tgz#30a5ed51d8388a33767c6d19790b222c1f33f48f"
  dependencies:
    hoist-non-react-statics "^1.2.0"
    jss "^8.1.0"
@@ -1234,11 +1260,11 @@ react@^15.5.4:
    object-assign "^4.1.0"
    prop-types "^15.5.10"

-reactxp@^0.42.1:
-  version "0.42.1"
-  resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.42.1.tgz#1c142a87f0a82a8da94e5c875525952c35a53a17"
+reactxp@^0.42.11:
+  version "0.42.11"
+  resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.42.11.tgz#ec88014e354ddc627fea61ab6639e5970edb85ae"
  dependencies:
-    "@types/lodash" "^4.14.66"
+    "@types/lodash" "4.14.66"
    assert "^1.3.0"
    ifvisible.js "^1.0.6"
    lodash "^4.17.1"
@@ -1273,6 +1299,10 @@ regenerator-runtime@^0.10.0:
  version "0.10.5"
  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"

+regenerator-runtime@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+
 regexpu-core@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
@@ -1291,6 +1321,16 @@ regjsparser@^0.1.4:
  dependencies:
    jsesc "~0.5.0"

+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+require-from-string@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.1.tgz#c545233e9d7da6616e9d59adfb39fc9f588676ff"
+
 sax@~1.2.1:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
@@ -1341,16 +1381,16 @@ strip-ansi@^3.0.0:
  dependencies:
    ansi-regex "^2.0.0"

-style-loader@^0.18.2:
-  version "0.18.2"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
+style-loader@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759"
  dependencies:
    loader-utils "^1.0.2"
    schema-utils "^0.3.0"

-styled-components@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.1.2.tgz#bb419978e1287c5d0d88fa9106b2dd75f66a324c"
+styled-components@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.3.tgz#154575c269880c840f903f580287dab155cf684c"
  dependencies:
    buffer "^5.0.3"
    css-to-react-native "^2.0.3"
@@ -1359,7 +1399,7 @@ styled-components@^2.1.2:
    is-function "^1.0.1"
    is-plain-object "^2.0.1"
    prop-types "^15.5.4"
-    stylis "^3.2.1"
+    stylis "3.x"
    supports-color "^3.2.3"

 styletron-client@^2.5.7:
@@ -1378,9 +1418,13 @@ styletron-utils@^2.5.4:
  dependencies:
    inline-style-prefixer "^2.0.1"

-stylis@^3.2.1:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.3.tgz#fed751d792af3f48a247769f55aca05c1a100a09"
+stylis-rule-sheet@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz#ebae935cc1f6fb31b9b62dba47f2ea8b833dad9f"
+
+stylis@3.x, stylis@^3.3.2:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.0.tgz#55c6530ebceeca5976d54fb4adc67578afee828d"

 subscribableevent@^1.0.0:
  version "1.0.0"
@@ -1405,12 +1449,6 @@ supports-color@^4.0.0:
  dependencies:
    has-flag "^2.0.0"

-supports-color@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e"
-  dependencies:
-    has-flag "^2.0.0"
-
 svgo@^0.7.0:
  version "0.7.2"
  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@@ -1441,12 +1479,20 @@ through@^2.3.8:
  version "2.3.8"
  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"

+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+
 touch@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de"
  dependencies:
    nopt "~1.0.10"

+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
 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"
--- a/docs/guides/getting-started.md
+++ b/docs/guides/getting-started.md
@@ -36,7 +36,7 @@ const babelLoaderConfiguration = {
      cacheDirectory: true,
      // This aliases 'react-native' to 'react-native-web' and includes only
      // the modules needed by the app
-      plugins: ['react-native-web/babel']
+      plugins: ['react-native-web/babel'],
      // The 'react-native' preset is recommended (or use your own .babelrc)
      presets: ['react-native']
    }
@@ -198,10 +198,20 @@ target platform.

 ## Testing with Jest

-[Jest](https://facebook.github.io/jest/) also needs to map `react-native` to `react-native-web`.
+[Jest](https://facebook.github.io/jest/) can be configured to improve snapshots
+of `react-native-web` components.

 ```
-"jest": {
+{
+  "snapshotSerializers": [ "enzyme-to-json/serializer", "react-native-web/jest/serializer" ]
+}
+```
+
+Jest also needs to map `react-native` to `react-native-web` (unless you are
+using Babel with the `react-native-web/babel` plugin).
+
+```
+{
  "moduleNameMapper": {
    "react-native": "<rootDir>/node_modules/react-native-web"
  }
--- a/docs/storybook/1-components/Image/examples/NetworkImage.js
+++ b/docs/storybook/1-components/Image/examples/NetworkImage.js
@@ -31,7 +31,7 @@ class NetworkImageExample extends PureComponent {
    ) : null;

    return (
-      <View style={[helpers.styles.row, helpers.styles.centerRow]}>
+      <View>
        <Image
          defaultSource={sources.placeholder}
          onError={this._handleError}
@@ -43,7 +43,7 @@ class NetworkImageExample extends PureComponent {
        >
          {loader}
        </Image>
-        {this.state.message && <Text style={helpers.styles.marginLeft}>{this.state.message}</Text>}
+        {this.state.message && <Text style={helpers.styles.marginTop}>{this.state.message}</Text>}
      </View>
    );
  }
--- a/docs/storybook/1-components/Image/examples/PropChildren.js
+++ b/docs/storybook/1-components/Image/examples/PropChildren.js
@@ -8,21 +8,25 @@ import { Image, StyleSheet, Text } from 'react-native';

 const ImageChildrenExample = () => (
  <Image source={sources.large} style={styles.image}>
-    <Text style={styles.text}>React</Text>
+    <Text style={styles.text}>Child content</Text>
  </Image>
 );

 const styles = StyleSheet.create({
  image: {
-    width: 60,
-    height: 60,
+    width: 300,
+    height: 200,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    backgroundColor: 'transparent',
-    color: 'white'
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 18,
+    position: 'relative',
+    top: 50
  }
 });

--- a/docs/storybook/1-components/Image/examples/PropDefaultSource.js
+++ b/docs/storybook/1-components/Image/examples/PropDefaultSource.js
@@ -8,11 +8,7 @@ import React from 'react';
 import { Image } from 'react-native';

 const ImageDefaultSourceExample = () => (
-  <Image
-    defaultSource={sources.placeholder}
-    source={sources.largeAlt}
-    style={helpers.styles.base}
-  />
+  <Image defaultSource={sources.placeholder} style={helpers.styles.base} />
 );

 export default ImageDefaultSourceExample;
--- a/docs/storybook/1-components/Image/examples/PropDraggable.js
+++ b/docs/storybook/1-components/Image/examples/PropDraggable.js
@@ -17,8 +17,8 @@ const styles = StyleSheet.create({
    flexDirection: 'row'
  },
  image: {
-    width: 60,
-    height: 60,
+    width: 300,
+    height: 200,
    backgroundColor: 'transparent',
    marginRight: 10
  }
--- a/docs/storybook/1-components/Image/examples/PropOnLoad.js
+++ b/docs/storybook/1-components/Image/examples/PropOnLoad.js
@@ -8,7 +8,7 @@ import React from 'react';
 import sources from '../sources';

 const ImageOnLoadExample = () => (
-  <NetworkImage logMethod="onLoad" source={createUncachedURI(sources.small)} />
+  <NetworkImage logMethod="onLoad" source={createUncachedURI(sources.largeAlt)} />
 );

 export default ImageOnLoadExample;
--- a/docs/storybook/1-components/Image/examples/PropOnLoadEnd.js
+++ b/docs/storybook/1-components/Image/examples/PropOnLoadEnd.js
@@ -8,7 +8,7 @@ import React from 'react';
 import sources from '../sources';

 const ImageOnLoadEndExample = () => (
-  <NetworkImage logMethod="onLoadEnd" source={createUncachedURI(sources.small)} />
+  <NetworkImage logMethod="onLoadEnd" source={createUncachedURI(sources.largeAlt)} />
 );

 export default ImageOnLoadEndExample;
--- a/docs/storybook/1-components/Image/examples/PropOnLoadStart.js
+++ b/docs/storybook/1-components/Image/examples/PropOnLoadStart.js
@@ -8,7 +8,7 @@ import React from 'react';
 import sources from '../sources';

 const ImageOnLoadStartExample = () => (
-  <NetworkImage logMethod="onLoadStart" source={createUncachedURI(sources.small)} />
+  <NetworkImage logMethod="onLoadStart" source={createUncachedURI(sources.largeAlt)} />
 );

 export default ImageOnLoadStartExample;
--- a/docs/storybook/1-components/Image/examples/PropResizeMode.js
+++ b/docs/storybook/1-components/Image/examples/PropResizeMode.js
@@ -8,7 +8,7 @@ import { Image, StyleSheet, Text, View } from 'react-native';

 const ImageResizeModeExample = () => (
  <View>
-    {[sources.small, sources.large].map((source, i) => {
+    {[sources.small].map((source, i) => {
      return (
        <View key={i}>
          <View style={styles.horizontal}>
@@ -60,12 +60,11 @@ const styles = StyleSheet.create({
  resizeMode: {
    borderColor: 'black',
    borderWidth: 0.5,
-    height: 60,
-    width: 90
+    height: 120,
+    width: 120
  },
  resizeModeText: {
-    fontSize: 11,
-    marginBottom: 3
+    marginBottom: '0.5rem'
  },
  leftMargin: {
    marginLeft: 10
--- a/docs/storybook/1-components/Image/examples/PropSource.js
+++ b/docs/storybook/1-components/Image/examples/PropSource.js
@@ -30,18 +30,22 @@ const ImageSourceExample = () => (
 const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'space-between'
  },
  column: {
-    marginRight: '1rem'
+    alignItems: 'flex-start',
+    marginBottom: '1rem'
  },
  text: {
    marginBottom: '0.5rem'
  },
  image: {
-    flex: 1,
-    height: 50,
-    resizeMode: 'contain'
+    borderColor: 'black',
+    borderWidth: 0.5,
+    height: 120,
+    width: 120,
+    resizeMode: 'cover'
  }
 });

--- a/docs/storybook/1-components/Image/helpers.js
+++ b/docs/storybook/1-components/Image/helpers.js
@@ -13,8 +13,8 @@ const createUncachedURI = source => {

 const styles = StyleSheet.create({
  base: {
-    height: 38,
-    width: 38
+    height: 200,
+    width: 300
  },
  row: {
    flexDirection: 'row'
@@ -22,8 +22,8 @@ const styles = StyleSheet.create({
  centerRow: {
    alignItems: 'center'
  },
-  marginLeft: {
-    marginLeft: '1rem'
+  marginTop: {
+    marginTop: '1rem'
  }
 });

--- a/docs/storybook/1-components/Image/sources/bunny.png
+++ b/docs/storybook/1-components/Image/sources/bunny.png
--- a/docs/storybook/1-components/Image/sources/index.js
+++ b/docs/storybook/1-components/Image/sources/index.js
@@ -1,5 +1,5 @@
-import placeholder from './bunny.png';
-import staticImage from './uie_thumb_normal@2x.png';
+import placeholder from './placeholder.jpg';
+import staticImage from './ladybug.jpg';

 const dataPng =
  '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==';
@@ -12,11 +12,27 @@ const sources = {
      'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'
  },
  broken: { uri: 'http://TYPO_ERROR.github.io/image.png' },
-  small: { uri: 'http://facebook.github.io/react/img/logo_small_2x.png' },
-  large: { uri: 'http://facebook.github.io/react/img/logo_og.png' },
-  largeAlt: { uri: 'http://facebook.github.io/origami/public/images/birds.jpg' },
+  small: {
+    uri:
+      'https://images.unsplash.com/photo-1488584585634-35fc98ccb808?dpr=1&auto=format&fit=crop&w=100&h=66&q=60&cs=tinysrgb'
+  },
+  smallAlt: {
+    uri:
+      'https://images.unsplash.com/photo-1481595357459-84468f6eeaac?dpr=1&auto=format&fit=crop&w=100&h=66&q=60&cs=tinysrgb'
+  },
+  large: {
+    uri:
+      'https://images.unsplash.com/photo-1481595357459-84468f6eeaac?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb'
+  },
+  largeAlt: {
+    uri:
+      'https://images.unsplash.com/photo-1471145653077-54c6f0aae511?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb'
+  },
  placeholder,
-  prefetchable: { uri: 'http://origami.design/public/images/bird-logo.png' },
+  prefetchable: {
+    uri:
+      'https://images.unsplash.com/photo-1471145653077-54c6f0aae511?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb'
+  },
  static: staticImage,
  huge: {
    uri: 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Chestnut-mandibled_Toucan.jpg'
--- a/docs/storybook/1-components/Image/sources/ladybug.jpg
+++ b/docs/storybook/1-components/Image/sources/ladybug.jpg
--- a/docs/storybook/1-components/Image/sources/placeholder.jpg
+++ b/docs/storybook/1-components/Image/sources/placeholder.jpg
--- a/docs/storybook/1-components/Image/sources/uie_thumb_normal@2x.png
+++ b/docs/storybook/1-components/Image/sources/uie_thumb_normal@2x.png
--- a/docs/storybook/1-components/Image/sources/uie_thumb_selected@2x.png
+++ b/docs/storybook/1-components/Image/sources/uie_thumb_selected@2x.png
--- a/docs/storybook/2-apis/Dimensions/DimensionsScreen.js
+++ b/docs/storybook/2-apis/Dimensions/DimensionsScreen.js
@@ -43,7 +43,7 @@ const DimensionsScreen = () => (
      />

      <DocItem
-        name="static addEventLitener"
+        name="static addEventListener"
        typeInfo="(type: string, handler: function) => void"
        description={[
          <AppText>Add an event handler. Supported events:</AppText>,
@@ -65,7 +65,7 @@ const DimensionsScreen = () => (
      />

      <DocItem
-        name="static removeEventLitener"
+        name="static removeEventListener"
        typeInfo="(type: string, handler: function) => void"
        description="Remove an event handler."
      />
--- a/jest-setup-framework.js
+++ b/jest-setup-framework.js
@@ -1,4 +1,9 @@
-import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import createSerializer from './jest/createSerializer';
+import Enzyme from 'enzyme';
+import { StyleSheet } from './src';
+
+const serializer = createSerializer(StyleSheet);

 Enzyme.configure({ adapter: new Adapter() });
+expect.addSnapshotSerializer(serializer);
--- a/jest/tests/snapshots/serializer-test.js.snap
+++ b/jest/tests/snapshots/serializer-test.js.snap
@@ -0,0 +1,299 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`enzyme.mount complex 1`] = `
+<Box
+  element={
+    <View>
+      <View
+        style={
+          Object {
+            "padding": 20,
+          }
+        }
+      />
+      <Text>
+        Nested
+      </Text>
+    </View>
+  }
+>
+  <View
+    style={
+      Object {
+        "backgroundColor": "red",
+        "padding": 10,
+      }
+    }
+  >
+    <div
+      className="rn-alignItems-1oszu61 rn-backgroundColor-1mjtqww 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-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-m611by rn-paddingRight-1qfoi16 rn-paddingBottom-1mi0q7o rn-paddingLeft-1hfyk0a rn-position-bnwqim rn-zIndex-1lgpqti"
+    >
+      <Title>
+        <Text
+          style={
+            Object {
+              "color": "black",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            }
+          }
+        >
+          <div
+            className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-1bodaif rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-ubezar rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-verticalAlign-9iso6 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+            dir="auto"
+          >
+            Hello World
+          </div>
+        </Text>
+      </Title>
+      <View>
+        <div
+          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-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr 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-zIndex-1lgpqti"
+        >
+          <View
+            style={
+              Object {
+                "padding": 20,
+              }
+            }
+          >
+            <div
+              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-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-1knelpx rn-paddingRight-1ah4tor rn-paddingBottom-k8qxaj rn-paddingLeft-b5h31w rn-position-bnwqim rn-zIndex-1lgpqti"
+            />
+          </View>
+          <Text>
+            <div
+              className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-1b43r93 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+              dir="auto"
+            >
+              Nested
+            </div>
+          </Text>
+        </div>
+      </View>
+    </div>
+  </View>
+</Box>
+`;
+
+exports[`enzyme.mount composite 1`] = `
+<Box>
+  <View
+    style={
+      Object {
+        "backgroundColor": "red",
+        "padding": 10,
+      }
+    }
+  >
+    <div
+      className="rn-alignItems-1oszu61 rn-backgroundColor-1mjtqww 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-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-m611by rn-paddingRight-1qfoi16 rn-paddingBottom-1mi0q7o rn-paddingLeft-1hfyk0a rn-position-bnwqim rn-zIndex-1lgpqti"
+    />
+  </View>
+</Box>
+`;
+
+exports[`enzyme.mount nested 1`] = `
+<Box>
+  <View
+    style={
+      Object {
+        "backgroundColor": "red",
+        "padding": 10,
+      }
+    }
+  >
+    <div
+      className="rn-alignItems-1oszu61 rn-backgroundColor-1mjtqww 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-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-m611by rn-paddingRight-1qfoi16 rn-paddingBottom-1mi0q7o rn-paddingLeft-1hfyk0a rn-position-bnwqim rn-zIndex-1lgpqti"
+    >
+      <Title>
+        <Text
+          style={
+            Object {
+              "color": "black",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            }
+          }
+        >
+          <div
+            className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-1bodaif rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-ubezar rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-verticalAlign-9iso6 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+            dir="auto"
+          >
+            Hello World
+          </div>
+        </Text>
+      </Title>
+    </div>
+  </View>
+</Box>
+`;
+
+exports[`enzyme.mount noop 1`] = `
+<View>
+  <div
+    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-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr 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-zIndex-1lgpqti"
+  />
+</View>
+`;
+
+exports[`enzyme.render complex 1`] = `
+<div
+  class="rn-alignItems-1oszu61 rn-backgroundColor-1mjtqww 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-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-m611by rn-paddingRight-1qfoi16 rn-paddingBottom-1mi0q7o rn-paddingLeft-1hfyk0a rn-position-bnwqim rn-zIndex-1lgpqti"
+>
+  <div
+    class="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-1bodaif rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-ubezar rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-verticalAlign-9iso6 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+    dir="auto"
+  >
+    Hello World
+  </div>
+  <div
+    class="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-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr 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-zIndex-1lgpqti"
+  >
+    <div
+      class="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-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-1knelpx rn-paddingRight-1ah4tor rn-paddingBottom-k8qxaj rn-paddingLeft-b5h31w rn-position-bnwqim rn-zIndex-1lgpqti"
+    />
+    <div
+      class="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-1b43r93 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+      dir="auto"
+    >
+      Nested
+    </div>
+  </div>
+</div>
+`;
+
+exports[`enzyme.render composite 1`] = `
+<div
+  class="rn-alignItems-1oszu61 rn-backgroundColor-1mjtqww 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-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-m611by rn-paddingRight-1qfoi16 rn-paddingBottom-1mi0q7o rn-paddingLeft-1hfyk0a rn-position-bnwqim rn-zIndex-1lgpqti"
+/>
+`;
+
+exports[`enzyme.render nested 1`] = `
+<div
+  class="rn-alignItems-1oszu61 rn-backgroundColor-1mjtqww 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-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-m611by rn-paddingRight-1qfoi16 rn-paddingBottom-1mi0q7o rn-paddingLeft-1hfyk0a rn-position-bnwqim rn-zIndex-1lgpqti"
+>
+  <div
+    class="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-1bodaif rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-ubezar rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-verticalAlign-9iso6 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+    dir="auto"
+  >
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`enzyme.render noop 1`] = `
+<div
+  class="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-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr 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-zIndex-1lgpqti"
+/>
+`;
+
+exports[`enzyme.shallow complex 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "red",
+      "padding": 10,
+    }
+  }
+>
+  <Title>
+    Hello World
+  </Title>
+  <View>
+    <View
+      style={
+        Object {
+          "padding": 20,
+        }
+      }
+    />
+    <Text>
+      Nested
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`enzyme.shallow composite 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "red",
+      "padding": 10,
+    }
+  }
+/>
+`;
+
+exports[`enzyme.shallow nested 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "red",
+      "padding": 10,
+    }
+  }
+>
+  <Title>
+    Hello World
+  </Title>
+</View>
+`;
+
+exports[`enzyme.shallow noop 1`] = `
+<div
+  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-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr 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-zIndex-1lgpqti"
+/>
+`;
+
+exports[`react-test-renderer complex 1`] = `
+<div
+  className="rn-alignItems-1oszu61 rn-backgroundColor-1mjtqww 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-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-m611by rn-paddingRight-1qfoi16 rn-paddingBottom-1mi0q7o rn-paddingLeft-1hfyk0a rn-position-bnwqim rn-zIndex-1lgpqti"
+>
+  <div
+    className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-1bodaif rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-ubezar rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-verticalAlign-9iso6 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+    dir="auto"
+  >
+    Hello World
+  </div>
+  <div
+    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-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr 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-zIndex-1lgpqti"
+  >
+    <div
+      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-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-1knelpx rn-paddingRight-1ah4tor rn-paddingBottom-k8qxaj rn-paddingLeft-b5h31w rn-position-bnwqim rn-zIndex-1lgpqti"
+    />
+    <div
+      className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-1b43r93 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+      dir="auto"
+    >
+      Nested
+    </div>
+  </div>
+</div>
+`;
+
+exports[`react-test-renderer composite 1`] = `
+<div
+  className="rn-alignItems-1oszu61 rn-backgroundColor-1mjtqww 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-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-m611by rn-paddingRight-1qfoi16 rn-paddingBottom-1mi0q7o rn-paddingLeft-1hfyk0a rn-position-bnwqim rn-zIndex-1lgpqti"
+/>
+`;
+
+exports[`react-test-renderer nested 1`] = `
+<div
+  className="rn-alignItems-1oszu61 rn-backgroundColor-1mjtqww 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-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-m611by rn-paddingRight-1qfoi16 rn-paddingBottom-1mi0q7o rn-paddingLeft-1hfyk0a rn-position-bnwqim rn-zIndex-1lgpqti"
+>
+  <div
+    className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-1bodaif rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-ubezar rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-verticalAlign-9iso6 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
+    dir="auto"
+  >
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`react-test-renderer noop 1`] = `
+<div
+  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-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1pxmb3b rn-flexBasis-7vfszb rn-flexDirection-eqz5dr 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-zIndex-1lgpqti"
+/>
+`;
--- a/jest/tests/serializer-test.js
+++ b/jest/tests/serializer-test.js
@@ -0,0 +1,92 @@
+/* eslint-env jasmine, jest */
+/* eslint-disable react/prop-types */
+
+import { mount, render, shallow } from 'enzyme';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { StyleSheet, Text, View } from '../../src';
+import toJson from 'enzyme-to-json';
+
+/**
+ * Fixtures
+ */
+
+const Box = ({ children, element, style, ...rest }) => (
+  <View {...rest} style={[styles.box, style]}>
+    {children}
+    {element}
+  </View>
+);
+
+const Title = ({ style, ...rest }) => <Text {...rest} style={[styles.title, style]} />;
+
+const styles = StyleSheet.create({
+  box: {
+    backgroundColor: 'red',
+    padding: 10
+  },
+  boxExtra: {
+    alignItems: 'center'
+  },
+  title: {
+    color: 'black',
+    fontSize: 16,
+    textAlignVertical: 'center'
+  },
+  element: {
+    padding: 20
+  }
+});
+
+/**
+ * Test cases
+ */
+
+const cases = {
+  noop: <View />,
+  composite: <Box />,
+  nested: (
+    <Box>
+      <Title>Hello World</Title>
+    </Box>
+  ),
+  complex: (
+    <Box
+      element={
+        <View>
+          <View style={styles.element} />
+          <Text>Nested</Text>
+        </View>
+      }
+    >
+      <Title>Hello World</Title>
+    </Box>
+  )
+};
+
+const caseNames = Object.keys(cases);
+
+describe('enzyme', () => {
+  caseNames.forEach(caseName => {
+    test(caseName, () => {
+      const element = cases[caseName];
+      const mountTree = mount(element);
+      const renderTree = render(element);
+      const shallowTree = shallow(element);
+
+      expect(toJson(mountTree)).toMatchSnapshot(`enzyme.mount ${caseName}`);
+      expect(toJson(renderTree)).toMatchSnapshot(`enzyme.render ${caseName}`);
+      expect(toJson(shallowTree)).toMatchSnapshot(`enzyme.shallow ${caseName}`);
+    });
+  });
+});
+
+describe('react-test-renderer', () => {
+  caseNames.forEach(caseName => {
+    test(caseName, () => {
+      const element = cases[caseName];
+      const tree = renderer.create(element).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});
--- a/jest/createSerializer.js
+++ b/jest/createSerializer.js
@@ -0,0 +1,56 @@
+const React = require('react');
+
+function createSerializer(styleSheet) {
+  function flattenNodeStyles(node) {
+    if (node && node.props) {
+      // check for React elements in any props
+      const nextProps = Object.keys(node.props).reduce((acc, curr) => {
+        const value = node.props[curr];
+        if (React.isValidElement(value)) {
+          acc[curr] = flattenNodeStyles(value);
+        }
+        return acc;
+      }, {});
+
+      // flatten styles and avoid empty objects in snapshots
+      if (node.props.style) {
+        const style = styleSheet.flatten(node.props.style);
+        if (Object.keys(style).length > 0) {
+          nextProps.style = style;
+        } else {
+          delete nextProps.style;
+        }
+      }
+
+      const args = [node, nextProps];
+
+      // recurse over children too
+      const children = node.children || node.props.children;
+      if (children) {
+        if (Array.isArray(children)) {
+          children.forEach(child => {
+            args.push(flattenNodeStyles(child));
+          });
+        } else {
+          args.push(flattenNodeStyles(children));
+        }
+      }
+
+      return React.cloneElement.apply(React.cloneElement, args);
+    }
+
+    return node;
+  }
+
+  function test(value) {
+    return !!value && value.$$typeof === Symbol.for('react.test.json');
+  }
+
+  function print(value, serializer) {
+    return serializer(flattenNodeStyles(value));
+  }
+
+  return { test, print };
+}
+
+module.exports = createSerializer;
--- a/jest/serializer.js
+++ b/jest/serializer.js
@@ -0,0 +1,6 @@
+const createSerializer = require('./createSerializer');
+const { StyleSheet } = require('../dist');
+
+const serializer = createSerializer(StyleSheet);
+
+module.exports = serializer;
--- a/package.json
+++ b/package.json
@@ -1,32 +1,32 @@
 {
  "name": "react-native-web",
-  "version": "0.1.4",
+  "version": "0.1.15",
  "description": "React Native for Web",
  "main": "dist/index.js",
-  "module": "dist/module.js",
  "files": [
    "babel",
    "dist",
+    "jest",
    "src",
    "!**/__tests__"
  ],
  "scripts": {
    "benchmark": "cd benchmarks && yarn && webpack && open index.html",
-    "build": "yarn compile && webpack --config webpack.config.js --sort-assets-by --progress",
+    "build": "yarn clean-dist && yarn compile && webpack --config webpack.config.js --sort-assets-by --progress",
    "clean-dist": "del ./dist && mkdir dist",
    "compile": "babel src -d dist --ignore *-test.js",
    "docs:build": "cd docs && yarn build",
    "docs:start": "cd docs && yarn && yarn start",
    "docs:release": "cd docs && yarn release",
    "flow": "flow",
-    "fmt": "find babel benchmarks docs src -name '*.js' | grep -v -E '(node_modules|dist)' | xargs yarn fmt:cmd",
+    "fmt": "find babel benchmarks docs jest src -name '*.js' | grep -v -E '(node_modules|dist)' | xargs yarn fmt:cmd",
    "fmt:cmd": "prettier --print-width=100 --single-quote --write",
    "jest": "jest",
    "jest:watch": "yarn test -- --watch",
-    "lint": "yarn lint:cmd -- babel benchmarks docs src",
+    "lint": "yarn lint:cmd -- babel benchmarks docs jest src",
    "lint:cmd": "eslint --ignore-path .gitignore --fix",
    "precommit": "lint-staged",
-    "release": "yarn clean-dist && yarn lint && yarn test && yarn build && npm publish",
+    "release": "yarn lint && yarn test && yarn build && npm publish",
    "test": "flow && jest"
  },
  "babel": {
@@ -84,9 +84,9 @@
    "babel-preset-react-native": "^4.0.0",
    "caniuse-api": "^2.0.0",
    "del-cli": "^1.1.0",
-    "enzyme": "^3.0.0",
-    "enzyme-adapter-react-16": "^1.0.0",
-    "enzyme-to-json": "^3.0.1",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.2",
+    "enzyme-to-json": "^3.1.4",
    "eslint": "^4.6.1",
    "eslint-config-prettier": "^2.6.0",
    "eslint-plugin-promise": "^3.5.0",
--- a/src/apis/AppRegistry/tests/snapshots/renderApplication-test.js.snap
+++ b/src/apis/AppRegistry/tests/snapshots/renderApplication-test.js.snap
@@ -26,19 +26,31 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
 exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
 "<style id=\\"react-native-stylesheet\\">.rn-bottom-1p0dtai{bottom:0px}
 .rn-left-1d2f490{left:0px}
+.rn-left-1fe0xdi{left:0%}
+.rn-left-7b7h2f{left:100%}
 .rn-position-u8s1d{position:absolute}
 .rn-position-bnwqim{position:relative}
 .rn-right-zchlnj{right:0px}
 .rn-top-ipm5af{top:0px}
 .rn-cursor-1loqt21{cursor:pointer}
+.rn-cursor-7q8q6z{cursor:default}
+.rn-cursor-1ei5mc7{cursor:inherit}
 .rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none}
 .rn-backgroundColor-wib322{background-color:transparent}
+.rn-backgroundColor-8ndhhv{background-color:rgba(33,150,243,1)}
+.rn-backgroundColor-15al3ab{background-color:rgba(223,223,223,1)}
+.rn-backgroundColor-1hj8efq{background-color:rgba(213,213,213,1)}
+.rn-backgroundColor-1bgzomc{background-color:rgba(189,189,189,1)}
 .rn-color-homxoj{color:inherit}
+.rn-color-1qtguxu{color:rgba(255,255,255,1)}
+.rn-color-istcb5{color:rgba(161,161,161,1)}
 .rn-font-1lw9tu2{font:inherit}
 .rn-textAlign-1ttztb7{text-align:inherit}
+.rn-textAlign-q4m81j{text-align:center}
 .rn-textDecoration-bauka4{text-decoration:none}
 .rn-listStyle-1ebb2ja{list-style:none}
 .rn-alignItems-1oszu61{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
+.rn-alignItems-1awozwy{-ms-flex-align:center;-webkit-align-items:center;-webkit-box-align:center;align-items:center}
 .rn-borderTopStyle-1efd50x{border-top-style:solid}
 .rn-borderRightStyle-14skgim{border-right-style:solid}
 .rn-borderBottomStyle-rull8r{border-bottom-style:solid}
@@ -50,22 +62,101 @@ exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
 .rn-boxSizing-deolkf{box-sizing:border-box}
 .rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
 .rn-display-xoduu5{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}
+.rn-display-1471scf{display:inline}
 .rn-flexShrink-1pxmb3b{-ms-flex-negative:0 !important;-webkit-flex-shrink:0 !important;flex-shrink:0 !important}
 .rn-flexShrink-1awmn5t{-ms-flex-negative:1 !important;-webkit-flex-shrink:1 !important;flex-shrink:1 !important}
 .rn-flexBasis-7vfszb{-ms-flex-preferred-size:auto !important;-webkit-flex-basis:auto !important;flex-basis:auto !important}
 .rn-flexDirection-eqz5dr{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
+.rn-flexDirection-18u37iz{-ms-flex-direction:row;-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row}
 .rn-marginTop-1mnahxq{margin-top:0px}
+.rn-marginTop-1t01tom{margin-top:auto}
 .rn-marginRight-61z16t{margin-right:0px}
+.rn-marginRight-lchren{margin-right:auto}
 .rn-marginBottom-p1pxzi{margin-bottom:0px}
+.rn-marginBottom-1qahzrx{margin-bottom:auto}
 .rn-marginLeft-11wrixw{margin-left:0px}
+.rn-marginLeft-1jj8364{margin-left:auto}
 .rn-minHeight-ifefl9{min-height:0px}
 .rn-minWidth-bcqeeo{min-width:0px}
 .rn-paddingTop-wk8lta{padding-top:0px}
+.rn-paddingTop-tskmnb{padding-top:8px}
 .rn-paddingRight-9aemit{padding-right:0px}
+.rn-paddingRight-1pyaxff{padding-right:8px}
 .rn-paddingBottom-1mdbw0j{padding-bottom:0px}
+.rn-paddingBottom-xd6kpl{padding-bottom:8px}
 .rn-paddingLeft-gy4na3{padding-left:0px}
+.rn-paddingLeft-1m04atk{padding-left:8px}
 .rn-zIndex-1lgpqti{z-index:0}
 .rn-zIndex-1wyyakw{z-index:-1}
+.rn-backgroundPosition-vvn4in{background-position:center}
+.rn-backgroundRepeat-u6sd8q{background-repeat:no-repeat}
+.rn-backgroundRepeat-17leim2{background-repeat:repeat}
+.rn-backgroundSize-4gszlv{background-size:cover}
+.rn-backgroundSize-1sxrcry{background-size:auto}
+.rn-backgroundSize-ehq7j7{background-size:contain}
+.rn-backgroundSize-x3cy2q{background-size:100% 100%}
+.rn-height-1pi2tsx{height:100%}
+.rn-height-z80fyv{height:20px}
+.rn-height-1r8g8re{height:36px}
+.rn-height-4v7adb{height:5px}
+.rn-height-1dernwh{height:70%}
+.rn-opacity-1272l3b{opacity:0}
+.rn-opacity-6dt33c{opacity:1}
+.rn-width-13qz1uu{width:100%}
+.rn-width-19wmn03{width:20px}
+.rn-width-1acpoxo{width:36px}
+.rn-touchAction-19z077z{-ms-touch-action:none;touch-action:none}
+.rn-touchAction-1gvxusu{-ms-touch-action:manipulate;touch-action:manipulate}
+.rn-WebkitOverflowScrolling-150rngu{-webkit-overflow-scrolling:touch}
 .rn-flex-13awgt0{-ms-flex:1;-webkit-flex:1;flex:1}
-.rn-flexGrow-1m1wadx{-ms-flex-positive:1 !important;-webkit-flex-grow:1 !important;flex-grow:1 !important}</style>"
+.rn-flexGrow-1m1wadx{-ms-flex-positive:1 !important;-webkit-flex-grow:1 !important;flex-grow:1 !important}
+.rn-overflowX-11yh6sk{overflow-x:hidden}
+.rn-overflowX-lltvgl{overflow-x:auto}
+.rn-overflowY-1rnoaur{overflow-y:auto}
+.rn-overflowY-buy8e9{overflow-y:hidden}
+.rn-transform-emqnss{-webkit-transform:translateZ(0px);transform:translateZ(0px)}
+.rn-fontFamily-10u92zi{font-family:-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif}
+.rn-fontFamily-poiln3{font-family:inherit}
+.rn-fontSize-1b43r93{font-size:14px}
+.rn-fontSize-7cikom{font-size:inherit}
+.rn-whiteSpace-q42fyq{white-space:pre-wrap}
+.rn-whiteSpace-irrty{white-space:inherit}
+.rn-whiteSpace-3s2u2q{white-space:nowrap}
+.rn-wordWrap-qvutc0{word-wrap:break-word}
+.rn-userSelect-lrvibr{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}
+.rn-maxWidth-dnmrzs{max-width:100%}
+.rn-textOverflow-1udbk01{text-overflow:ellipsis}
+.rn-justifyContent-1777fci{-ms-flex-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}
+.rn-visibility-11j9u27{visibility:hidden}
+.rn-animationDuration-17bb2tj{-webkit-animation-duration:0.75s;animation-duration:0.75s}
+.rn-animationDuration-1ay1djp{-webkit-animation-duration:1s;animation-duration:1s}
+.rn-animationIterationCount-1muvv40{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
+.rn-animationName-dozj4v{-webkit-animation-name:rn-ActivityIndicator-animation;animation-name:rn-ActivityIndicator-animation}
+.rn-animationName-141g9a{-webkit-animation-name:rn-ProgressBar-animation;animation-name:rn-ProgressBar-animation}
+.rn-animationTimingFunction-1ldzwu0{-webkit-animation-timing-function:linear;animation-timing-function:linear}
+.rn-animationPlayState-1abnn5w{-webkit-animation-play-state:paused;animation-play-state:paused}
+.rn-transitionDuration-eafdt9{-webkit-transition-duration:0.15s;transition-duration:0.15s}
+.rn-transitionDuration-13tjlyg{-webkit-transition-duration:0.1s;transition-duration:0.1s}
+.rn-transitionProperty-1i6wzkk{-moz-transition-property:opacity;-webkit-transition-property:opacity;transition-property:opacity}
+.rn-borderTopLeftRadius-1iymjk7{border-top-left-radius:2px}
+.rn-borderTopLeftRadius-jt3ufn{border-top-left-radius:100%}
+.rn-borderTopLeftRadius-ou6ah9{border-top-left-radius:0px}
+.rn-borderTopRightRadius-s2skl2{border-top-right-radius:2px}
+.rn-borderTopRightRadius-1e868j9{border-top-right-radius:100%}
+.rn-borderTopRightRadius-t12b5v{border-top-right-radius:0px}
+.rn-borderBottomRightRadius-l5bh9y{border-bottom-right-radius:2px}
+.rn-borderBottomRightRadius-ujv9e3{border-bottom-right-radius:100%}
+.rn-borderBottomRightRadius-zmljjp{border-bottom-right-radius:0px}
+.rn-borderBottomLeftRadius-101sy47{border-bottom-left-radius:2px}
+.rn-borderBottomLeftRadius-1hakmuk{border-bottom-left-radius:100%}
+.rn-borderBottomLeftRadius-pm2fo{border-bottom-left-radius:0px}
+.rn-fontWeight-majxgm{font-weight:500}
+.rn-textTransform-tsynxw{text-transform:uppercase}
+.rn-alignSelf-k200y{-ms-flex-item-align:start;-webkit-align-self:flex-start;align-self:flex-start}
+.rn-boxShadow-1ewcgjf{box-shadow:0px 1px 3px rgba(0,0,0,0.5)}
+.rn-borderTopColor-kqr9px{border-top-color:black}
+.rn-borderRightColor-q0dj5p{border-right-color:black}
+.rn-borderBottomColor-1ah7hsa{border-bottom-color:black}
+.rn-borderLeftColor-137uh4u{border-left-color:black}
+.rn-resize-1dz5y72{resize:none}</style>"
 `;
--- a/src/apis/AsyncStorage/index.js
+++ b/src/apis/AsyncStorage/index.js
@@ -61,6 +61,11 @@ export default class AsyncStorage {
    }, callback);
  }

+  /**
+   * (stub) Flushes any pending requests using a single batch call to get the data.
+   */
+  static flushGetRequests() {}
+
  /**
   * Gets *all* keys known to the app, for all callers, libraries, etc.
   */
--- a/src/apis/BackHandler/index.js
+++ b/src/apis/BackHandler/index.js
@@ -12,7 +12,7 @@

 function emptyFunction() {}

-const BackAndroid = {
+const BackHandler = {
  exitApp: emptyFunction,
  addEventListener() {
    return {
@@ -22,4 +22,4 @@ const BackAndroid = {
  removeEventListener: emptyFunction
 };

-export default BackAndroid;
+export default BackHandler;
--- a/src/apis/StyleSheet/StyleSheetValidation.js
+++ b/src/apis/StyleSheet/StyleSheetValidation.js
@@ -91,6 +91,7 @@ StyleSheetValidation.addValidStylePropTypes({
  borderSpacing: oneOf([number, string]),
  clear: string,
  cursor: string,
+  fill: string,
  float: oneOf(['left', 'none', 'right']),
  font: string /* @private */,
  listStyle: string,
--- a/src/apis/StyleSheet/tests/snapshots/index-test.js.snap
+++ b/src/apis/StyleSheet/tests/snapshots/index-test.js.snap
@@ -21,9 +21,139 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
    "id": "react-native-stylesheet",
    "textContent": ".rn-bottom-1p0dtai{bottom:0px}
 .rn-left-1d2f490{left:0px}
+.rn-left-1fe0xdi{left:0%}
+.rn-left-7b7h2f{left:100%}
 .rn-position-u8s1d{position:absolute}
+.rn-position-bnwqim{position:relative}
 .rn-right-zchlnj{right:0px}
-.rn-top-ipm5af{top:0px}",
+.rn-top-ipm5af{top:0px}
+.rn-cursor-1loqt21{cursor:pointer}
+.rn-cursor-7q8q6z{cursor:default}
+.rn-cursor-1ei5mc7{cursor:inherit}
+.rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none}
+.rn-backgroundColor-wib322{background-color:transparent}
+.rn-backgroundColor-8ndhhv{background-color:rgba(33,150,243,1)}
+.rn-backgroundColor-15al3ab{background-color:rgba(223,223,223,1)}
+.rn-backgroundColor-1hj8efq{background-color:rgba(213,213,213,1)}
+.rn-backgroundColor-1bgzomc{background-color:rgba(189,189,189,1)}
+.rn-color-homxoj{color:inherit}
+.rn-color-1qtguxu{color:rgba(255,255,255,1)}
+.rn-color-istcb5{color:rgba(161,161,161,1)}
+.rn-font-1lw9tu2{font:inherit}
+.rn-textAlign-1ttztb7{text-align:inherit}
+.rn-textAlign-q4m81j{text-align:center}
+.rn-textDecoration-bauka4{text-decoration:none}
+.rn-listStyle-1ebb2ja{list-style:none}
+.rn-alignItems-1oszu61{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
+.rn-alignItems-1awozwy{-ms-flex-align:center;-webkit-align-items:center;-webkit-box-align:center;align-items:center}
+.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-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
+.rn-display-xoduu5{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}
+.rn-display-1471scf{display:inline}
+.rn-flexShrink-1pxmb3b{-ms-flex-negative:0 !important;-webkit-flex-shrink:0 !important;flex-shrink:0 !important}
+.rn-flexShrink-1awmn5t{-ms-flex-negative:1 !important;-webkit-flex-shrink:1 !important;flex-shrink:1 !important}
+.rn-flexBasis-7vfszb{-ms-flex-preferred-size:auto !important;-webkit-flex-basis:auto !important;flex-basis:auto !important}
+.rn-flexDirection-eqz5dr{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
+.rn-flexDirection-18u37iz{-ms-flex-direction:row;-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row}
+.rn-marginTop-1mnahxq{margin-top:0px}
+.rn-marginTop-1t01tom{margin-top:auto}
+.rn-marginRight-61z16t{margin-right:0px}
+.rn-marginRight-lchren{margin-right:auto}
+.rn-marginBottom-p1pxzi{margin-bottom:0px}
+.rn-marginBottom-1qahzrx{margin-bottom:auto}
+.rn-marginLeft-11wrixw{margin-left:0px}
+.rn-marginLeft-1jj8364{margin-left:auto}
+.rn-minHeight-ifefl9{min-height:0px}
+.rn-minWidth-bcqeeo{min-width:0px}
+.rn-paddingTop-wk8lta{padding-top:0px}
+.rn-paddingTop-tskmnb{padding-top:8px}
+.rn-paddingRight-9aemit{padding-right:0px}
+.rn-paddingRight-1pyaxff{padding-right:8px}
+.rn-paddingBottom-1mdbw0j{padding-bottom:0px}
+.rn-paddingBottom-xd6kpl{padding-bottom:8px}
+.rn-paddingLeft-gy4na3{padding-left:0px}
+.rn-paddingLeft-1m04atk{padding-left:8px}
+.rn-zIndex-1lgpqti{z-index:0}
+.rn-zIndex-1wyyakw{z-index:-1}
+.rn-backgroundPosition-vvn4in{background-position:center}
+.rn-backgroundRepeat-u6sd8q{background-repeat:no-repeat}
+.rn-backgroundRepeat-17leim2{background-repeat:repeat}
+.rn-backgroundSize-4gszlv{background-size:cover}
+.rn-backgroundSize-1sxrcry{background-size:auto}
+.rn-backgroundSize-ehq7j7{background-size:contain}
+.rn-backgroundSize-x3cy2q{background-size:100% 100%}
+.rn-height-1pi2tsx{height:100%}
+.rn-height-z80fyv{height:20px}
+.rn-height-1r8g8re{height:36px}
+.rn-height-4v7adb{height:5px}
+.rn-height-1dernwh{height:70%}
+.rn-opacity-1272l3b{opacity:0}
+.rn-opacity-6dt33c{opacity:1}
+.rn-width-13qz1uu{width:100%}
+.rn-width-19wmn03{width:20px}
+.rn-width-1acpoxo{width:36px}
+.rn-touchAction-19z077z{-ms-touch-action:none;touch-action:none}
+.rn-touchAction-1gvxusu{-ms-touch-action:manipulate;touch-action:manipulate}
+.rn-WebkitOverflowScrolling-150rngu{-webkit-overflow-scrolling:touch}
+.rn-flex-13awgt0{-ms-flex:1;-webkit-flex:1;flex:1}
+.rn-flexGrow-1m1wadx{-ms-flex-positive:1 !important;-webkit-flex-grow:1 !important;flex-grow:1 !important}
+.rn-overflowX-11yh6sk{overflow-x:hidden}
+.rn-overflowX-lltvgl{overflow-x:auto}
+.rn-overflowY-1rnoaur{overflow-y:auto}
+.rn-overflowY-buy8e9{overflow-y:hidden}
+.rn-transform-emqnss{-webkit-transform:translateZ(0px);transform:translateZ(0px)}
+.rn-fontFamily-10u92zi{font-family:-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif}
+.rn-fontFamily-poiln3{font-family:inherit}
+.rn-fontSize-1b43r93{font-size:14px}
+.rn-fontSize-7cikom{font-size:inherit}
+.rn-whiteSpace-q42fyq{white-space:pre-wrap}
+.rn-whiteSpace-irrty{white-space:inherit}
+.rn-whiteSpace-3s2u2q{white-space:nowrap}
+.rn-wordWrap-qvutc0{word-wrap:break-word}
+.rn-userSelect-lrvibr{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}
+.rn-maxWidth-dnmrzs{max-width:100%}
+.rn-textOverflow-1udbk01{text-overflow:ellipsis}
+.rn-justifyContent-1777fci{-ms-flex-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}
+.rn-visibility-11j9u27{visibility:hidden}
+.rn-animationDuration-17bb2tj{-webkit-animation-duration:0.75s;animation-duration:0.75s}
+.rn-animationDuration-1ay1djp{-webkit-animation-duration:1s;animation-duration:1s}
+.rn-animationIterationCount-1muvv40{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
+.rn-animationName-dozj4v{-webkit-animation-name:rn-ActivityIndicator-animation;animation-name:rn-ActivityIndicator-animation}
+.rn-animationName-141g9a{-webkit-animation-name:rn-ProgressBar-animation;animation-name:rn-ProgressBar-animation}
+.rn-animationTimingFunction-1ldzwu0{-webkit-animation-timing-function:linear;animation-timing-function:linear}
+.rn-animationPlayState-1abnn5w{-webkit-animation-play-state:paused;animation-play-state:paused}
+.rn-transitionDuration-eafdt9{-webkit-transition-duration:0.15s;transition-duration:0.15s}
+.rn-transitionDuration-13tjlyg{-webkit-transition-duration:0.1s;transition-duration:0.1s}
+.rn-transitionProperty-1i6wzkk{-moz-transition-property:opacity;-webkit-transition-property:opacity;transition-property:opacity}
+.rn-borderTopLeftRadius-1iymjk7{border-top-left-radius:2px}
+.rn-borderTopLeftRadius-jt3ufn{border-top-left-radius:100%}
+.rn-borderTopLeftRadius-ou6ah9{border-top-left-radius:0px}
+.rn-borderTopRightRadius-s2skl2{border-top-right-radius:2px}
+.rn-borderTopRightRadius-1e868j9{border-top-right-radius:100%}
+.rn-borderTopRightRadius-t12b5v{border-top-right-radius:0px}
+.rn-borderBottomRightRadius-l5bh9y{border-bottom-right-radius:2px}
+.rn-borderBottomRightRadius-ujv9e3{border-bottom-right-radius:100%}
+.rn-borderBottomRightRadius-zmljjp{border-bottom-right-radius:0px}
+.rn-borderBottomLeftRadius-101sy47{border-bottom-left-radius:2px}
+.rn-borderBottomLeftRadius-1hakmuk{border-bottom-left-radius:100%}
+.rn-borderBottomLeftRadius-pm2fo{border-bottom-left-radius:0px}
+.rn-fontWeight-majxgm{font-weight:500}
+.rn-textTransform-tsynxw{text-transform:uppercase}
+.rn-alignSelf-k200y{-ms-flex-item-align:start;-webkit-align-self:flex-start;align-self:flex-start}
+.rn-boxShadow-1ewcgjf{box-shadow:0px 1px 3px rgba(0,0,0,0.5)}
+.rn-borderTopColor-kqr9px{border-top-color:black}
+.rn-borderRightColor-q0dj5p{border-right-color:black}
+.rn-borderBottomColor-1ah7hsa{border-bottom-color:black}
+.rn-borderLeftColor-137uh4u{border-left-color:black}
+.rn-resize-1dz5y72{resize:none}",
  },
 ]
 `;
--- a/src/apis/StyleSheet/tests/createReactDOMStyle-test.js
+++ b/src/apis/StyleSheet/tests/createReactDOMStyle-test.js
@@ -22,6 +22,23 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
    expect(firstStyle).toEqual(secondStyle);
  });

+  describe('borderWidth styles', () => {
+    test('defaults to 0 when "null"', () => {
+      expect(createReactDOMStyle({ borderWidth: null })).toEqual({
+        borderTopWidth: '0px',
+        borderRightWidth: '0px',
+        borderBottomWidth: '0px',
+        borderLeftWidth: '0px'
+      });
+      expect(createReactDOMStyle({ borderWidth: 2, borderRightWidth: null })).toEqual({
+        borderTopWidth: '2px',
+        borderRightWidth: '0px',
+        borderBottomWidth: '2px',
+        borderLeftWidth: '2px'
+      });
+    });
+  });
+
  describe('flexbox styles', () => {
    test('flex defaults', () => {
      expect(createReactDOMStyle({ display: 'flex' })).toEqual({
--- a/src/apis/StyleSheet/createReactDOMStyle.js
+++ b/src/apis/StyleSheet/createReactDOMStyle.js
@@ -52,6 +52,14 @@ const colorProps = {
  color: true
 };

+const borderWidthProps = {
+  borderWidth: true,
+  borderTopWidth: true,
+  borderRightWidth: true,
+  borderBottomWidth: true,
+  borderLeftWidth: true
+};
+
 const systemFontStack =
  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif';

@@ -141,13 +149,26 @@ const createReducer = (style, styleProps) => {
  let hasResolvedTextShadow = false;

  return (resolvedStyle, prop) => {
-    const value = normalizeValue(prop, style[prop]);
+    let value = normalizeValue(prop, style[prop]);
+
+    // Make sure the default border width is explicitly set to '0' to avoid
+    // falling back to any unwanted user-agent styles.
+    if (borderWidthProps[prop]) {
+      value = value == null ? normalizeValue(null, 0) : value;
+    }
+
+    // Normalize color values
+    if (colorProps[prop]) {
+      value = processColor(value);
+    }
+
+    // Ignore everything else with a null value
    if (value == null) {
      return resolvedStyle;
    }

    switch (prop) {
-      // ignore React Native styles
+      // Ignore some React Native styles
      case 'aspectRatio':
      case 'elevation':
      case 'overlayColor':
@@ -251,23 +272,17 @@ const createReducer = (style, styleProps) => {
      }

      default: {
-        // normalize color values
-        let finalValue = value;
-        if (colorProps[prop]) {
-          finalValue = processColor(value);
-        }
-
        const longFormProperties = styleShortFormProperties[prop];
        if (longFormProperties) {
          longFormProperties.forEach((longForm, i) => {
-            // the value of any longform property in the original styles takes
-            // precedence over the shortform's value
+            // The value of any longform property in the original styles takes
+            // precedence over the shortform's value.
            if (styleProps.indexOf(longForm) === -1) {
-              resolvedStyle[longForm] = finalValue;
+              resolvedStyle[longForm] = value;
            }
          });
        } else {
-          resolvedStyle[prop] = finalValue;
+          resolvedStyle[prop] = value;
        }
      }
    }
--- a/src/components/ActivityIndicator/tests/snapshots/index-test.js.snap
+++ b/src/components/ActivityIndicator/tests/snapshots/index-test.js.snap
@@ -6,20 +6,24 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        19,
-        17,
-        18,
-        16,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationPlayState": "paused",
+        "animationTimingFunction": "linear",
+        "height": 20,
+        "visibility": "hidden",
+        "width": 20,
+      }
    }
  >
    <svg
@@ -65,20 +69,22 @@ exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        19,
-        17,
-        false,
-        false,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationTimingFunction": "linear",
+        "height": 20,
+        "width": 20,
+      }
    }
  >
    <svg
@@ -160,20 +166,23 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        19,
-        17,
-        18,
-        false,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationPlayState": "paused",
+        "animationTimingFunction": "linear",
+        "height": 20,
+        "width": 20,
+      }
    }
  >
    <svg
@@ -219,20 +228,24 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        19,
-        17,
-        18,
-        16,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationPlayState": "paused",
+        "animationTimingFunction": "linear",
+        "height": 20,
+        "visibility": "hidden",
+        "width": 20,
+      }
    }
  >
    <svg
@@ -278,20 +291,22 @@ exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        20,
-        17,
-        false,
-        false,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationTimingFunction": "linear",
+        "height": 36,
+        "width": 36,
+      }
    }
  >
    <svg
@@ -337,23 +352,22 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        Object {
-          "height": 30,
-          "width": 30,
-        },
-        17,
-        false,
-        false,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationTimingFunction": "linear",
+        "height": 30,
+        "width": 30,
+      }
    }
  >
    <svg
--- a/src/components/ActivityIndicator/index.js
+++ b/src/components/ActivityIndicator/index.js
@@ -17,6 +17,10 @@ import ViewPropTypes from '../View/ViewPropTypes';
 import { bool, number, oneOf, oneOfType, string } from 'prop-types';
 import React, { Component } from 'react';

+const createSvgCircle = style => (
+  <circle cx="16" cy="16" fill="none" r="14" strokeWidth="4" style={style} />
+);
+
 class ActivityIndicator extends Component {
  static displayName = 'ActivityIndicator';

@@ -40,29 +44,15 @@ class ActivityIndicator extends Component {

    const svg = (
      <svg height="100%" viewBox="0 0 32 32" width="100%">
-        <circle
-          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"
-          style={{
-            stroke: color,
-            strokeDasharray: 80,
-            strokeDashoffset: 60
-          }}
-        />
+        {createSvgCircle({
+          stroke: color,
+          opacity: 0.2
+        })}
+        {createSvgCircle({
+          stroke: color,
+          strokeDasharray: 80,
+          strokeDashoffset: 60
+        })}
      </svg>
    );

--- a/src/components/Image/tests/index-test.js
+++ b/src/components/Image/tests/index-test.js
@@ -1,6 +1,7 @@
 /* eslint-env jasmine, jest */

 import Image from '../';
+import ImageLoader from '../../../modules/ImageLoader';
 import ImageUriCache from '../ImageUriCache';
 import React from 'react';
 import { mount, shallow } from 'enzyme';
@@ -86,6 +87,55 @@ describe('components/Image', () => {
    expect(component.find('img').prop('draggable')).toBe(false);
  });

+  describe('prop "onLoad"', () => {
+    test('is called after image is loaded from network', () => {
+      jest.useFakeTimers();
+      ImageLoader.load = jest.fn().mockImplementation((_, onLoad, onError) => {
+        onLoad();
+      });
+      const onLoadStub = jest.fn();
+      shallow(<Image onLoad={onLoadStub} source="https://test.com/img.jpg" />);
+      jest.runOnlyPendingTimers();
+      expect(ImageLoader.load).toBeCalled();
+      expect(onLoadStub).toBeCalled();
+    });
+
+    test('is called after image is loaded from cache', () => {
+      jest.useFakeTimers();
+      ImageLoader.load = jest.fn().mockImplementation((_, onLoad, onError) => {
+        onLoad();
+      });
+      const onLoadStub = jest.fn();
+      const uri = 'https://test.com/img.jpg';
+      shallow(<Image onLoad={onLoadStub} source={uri} />);
+      ImageUriCache.add(uri);
+      jest.runOnlyPendingTimers();
+      expect(ImageLoader.load).not.toBeCalled();
+      expect(onLoadStub).toBeCalled();
+      ImageUriCache.remove(uri);
+    });
+
+    test('is called on update if "uri" is different', () => {
+      jest.useFakeTimers();
+      const onLoadStub = jest.fn();
+      const uri = 'https://test.com/img.jpg';
+      const component = mount(<Image onLoad={onLoadStub} source={uri} />);
+      component.setProps({ source: `https://blah.com/img.png` });
+      jest.runOnlyPendingTimers();
+      expect(onLoadStub.mock.calls.length).toBe(2);
+    });
+
+    test('is not called on update if "uri" is the same', () => {
+      jest.useFakeTimers();
+      const onLoadStub = jest.fn();
+      const uri = 'https://test.com/img.jpg';
+      const component = mount(<Image onLoad={onLoadStub} source={uri} />);
+      component.setProps({ resizeMode: 'stretch' });
+      jest.runOnlyPendingTimers();
+      expect(onLoadStub.mock.calls.length).toBe(1);
+    });
+  });
+
  describe('prop "resizeMode"', () => {
    [
      Image.resizeMode.contain,
--- a/src/components/Image/index.js
+++ b/src/components/Image/index.js
@@ -140,6 +140,9 @@ class Image extends Component {
    this._isMounted = true;
    if (this._imageState === STATUS_PENDING) {
      this._createImageLoader();
+    } else if (this._imageState === STATUS_LOADED) {
+      const { onLoad } = this.props;
+      onLoad && onLoad();
    }
  }

--- a/src/components/Picker/index.js
+++ b/src/components/Picker/index.js
@@ -1,2 +1,4 @@
 import UnimplementedView from '../UnimplementedView';
-export default UnimplementedView;
+const Picker = UnimplementedView;
+Picker.Item = UnimplementedView;
+export default Picker;
--- a/src/components/ScrollView/ScrollViewBase.js
+++ b/src/components/ScrollView/ScrollViewBase.js
@@ -49,6 +49,8 @@ const normalizeScrollEvent = e => ({
 * Encapsulates the Web-specific scroll throttling and disabling logic
 */
 export default class ScrollViewBase extends Component {
+  _viewRef: View;
+
  static propTypes = {
    ...ViewPropTypes,
    onMomentumScrollBegin: func,
@@ -73,6 +75,66 @@ export default class ScrollViewBase extends Component {
  _debouncedOnScrollEnd = debounce(this._handleScrollEnd, 100);
  _state = { isScrolling: false, scrollLastTick: 0 };

+  setNativeProps(props: Object) {
+    if (this._viewRef) {
+      this._viewRef.setNativeProps(props);
+    }
+  }
+
+  render() {
+    const {
+      scrollEnabled,
+      style,
+      /* eslint-disable */
+      alwaysBounceHorizontal,
+      alwaysBounceVertical,
+      automaticallyAdjustContentInsets,
+      bounces,
+      bouncesZoom,
+      canCancelContentTouches,
+      centerContent,
+      contentInset,
+      contentInsetAdjustmentBehavior,
+      contentOffset,
+      decelerationRate,
+      directionalLockEnabled,
+      endFillColor,
+      indicatorStyle,
+      keyboardShouldPersistTaps,
+      maximumZoomScale,
+      minimumZoomScale,
+      onMomentumScrollBegin,
+      onMomentumScrollEnd,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+      overScrollMode,
+      pinchGestureEnabled,
+      removeClippedSubviews,
+      scrollEventThrottle,
+      scrollIndicatorInsets,
+      scrollPerfTag,
+      scrollsToTop,
+      showsHorizontalScrollIndicator,
+      showsVerticalScrollIndicator,
+      snapToInterval,
+      snapToAlignment,
+      zoomScale,
+      /* eslint-enable */
+      ...other
+    } = this.props;
+
+    return (
+      <View
+        {...other}
+        onScroll={this._handleScroll}
+        onTouchMove={this._createPreventableScrollHandler(this.props.onTouchMove)}
+        onWheel={this._createPreventableScrollHandler(this.props.onWheel)}
+        ref={this._setViewRef}
+        style={[style, !scrollEnabled && styles.scrollDisabled]}
+      />
+    );
+  }
+
  _createPreventableScrollHandler = (handler: Function) => {
    return (e: Object) => {
      if (this.props.scrollEnabled) {
@@ -124,63 +186,14 @@ export default class ScrollViewBase extends Component {
    }
  }

+  _setViewRef = (element: View) => {
+    this._viewRef = element;
+  };
+
  _shouldEmitScrollEvent(lastTick: number, eventThrottle: number) {
    const timeSinceLastTick = Date.now() - lastTick;
    return eventThrottle > 0 && timeSinceLastTick >= eventThrottle;
  }
-
-  render() {
-    const {
-      scrollEnabled,
-      style,
-      /* eslint-disable */
-      alwaysBounceHorizontal,
-      alwaysBounceVertical,
-      automaticallyAdjustContentInsets,
-      bounces,
-      bouncesZoom,
-      canCancelContentTouches,
-      centerContent,
-      contentInset,
-      contentInsetAdjustmentBehavior,
-      contentOffset,
-      decelerationRate,
-      directionalLockEnabled,
-      endFillColor,
-      indicatorStyle,
-      keyboardShouldPersistTaps,
-      maximumZoomScale,
-      minimumZoomScale,
-      onMomentumScrollBegin,
-      onMomentumScrollEnd,
-      onScrollBeginDrag,
-      onScrollEndDrag,
-      overScrollMode,
-      pinchGestureEnabled,
-      removeClippedSubviews,
-      scrollEventThrottle,
-      scrollIndicatorInsets,
-      scrollPerfTag,
-      scrollsToTop,
-      showsHorizontalScrollIndicator,
-      showsVerticalScrollIndicator,
-      snapToInterval,
-      snapToAlignment,
-      zoomScale,
-      /* eslint-enable */
-      ...other
-    } = this.props;
-
-    return (
-      <View
-        {...other}
-        onScroll={this._handleScroll}
-        onTouchMove={this._createPreventableScrollHandler(this.props.onTouchMove)}
-        onWheel={this._createPreventableScrollHandler(this.props.onWheel)}
-        style={[style, !scrollEnabled && styles.scrollDisabled]}
-      />
-    );
-  }
 }

 // Chrome doesn't support e.preventDefault in this case; touch-action must be
--- a/src/components/ScrollView/tests/index-test.js
+++ b/src/components/ScrollView/tests/index-test.js
@@ -1,5 +1,14 @@
 /* eslint-env jasmine, jest */

+import React from 'react';
+import ScrollView from '..';
+import { mount } from 'enzyme';
+
 describe('components/ScrollView', () => {
-  test('NO TEST COVERAGE');
+  test('instance method setNativeProps', () => {
+    const instance = mount(<ScrollView />).instance();
+    expect(() => {
+      instance.setNativeProps();
+    }).not.toThrow();
+  });
 });
--- a/src/components/ScrollView/index.js
+++ b/src/components/ScrollView/index.js
@@ -49,7 +49,9 @@ const ScrollView = createReactClass({
  },

  setNativeProps(props: Object) {
-    this._scrollViewRef.setNativeProps(props);
+    if (this._scrollViewRef) {
+      this._scrollViewRef.setNativeProps(props);
+    }
  },

  /**
--- a/src/components/Switch/tests/index-test.js
+++ b/src/components/Switch/tests/index-test.js
@@ -19,21 +19,21 @@ describe('components/Switch', () => {
    });
  });

-  /*
  describe('onValueChange', () => {
    test('when value is "false" it receives "true"', () => {
-      const handleValueChange = (value) => expect(value === true).toBeTruthy();
-      const component = shallow(<Switch onValueChange={handleValueChange} value={false} />);
-      component.find('input').simulate('click');
+      const onValueChange = jest.fn();
+      const component = shallow(<Switch onValueChange={onValueChange} value={false} />);
+      component.find('input').simulate('change', { nativeEvent: { target: { checked: true } } });
+      expect(onValueChange).toHaveBeenCalledWith(true);
    });

    test('when value is "true" it receives "false"', () => {
-      const handleValueChange = (value) => expect(value === false).toBeTruthy();
-      const component = shallow(<Switch onValueChange={handleValueChange} value />);
-      component.find('input').simulate('click');
+      const onValueChange = jest.fn();
+      const component = shallow(<Switch onValueChange={onValueChange} value />);
+      component.find('input').simulate('change', { nativeEvent: { target: { checked: false } } });
+      expect(onValueChange).toHaveBeenCalledWith(false);
    });
  });
-  */

  describe('value', () => {
    test('when "false" an unchecked checkbox is rendered', () => {
--- a/src/components/Text/TextStylePropTypes.js
+++ b/src/components/Text/TextStylePropTypes.js
@@ -30,7 +30,7 @@ const TextStylePropTypes = {
  letterSpacing: numberOrString,
  lineHeight: numberOrString,
  textAlign: TextAlignPropType,
-  textAlignVertical: oneOf(['auto', 'bottom', 'center', 'top']),
+  textAlignVertical: string,
  textDecorationColor: ColorPropType,
  textDecorationLine: string,
  textDecorationStyle: string,
--- a/src/components/TextInput/TextInputState.js
+++ b/src/components/TextInput/TextInputState.js
@@ -40,9 +40,11 @@ const TextInputState = {
   * noop if the text field was already focused
   */
  focusTextInput(textFieldNode: ?Object) {
-    if (document.activeElement !== textFieldNode && textFieldNode !== null) {
+    if (textFieldNode !== null) {
      this._currentlyFocusedNode = textFieldNode;
-      UIManager.focus(textFieldNode);
+      if (document.activeElement !== textFieldNode) {
+        UIManager.focus(textFieldNode);
+      }
    }
  },

@@ -52,9 +54,11 @@ const TextInputState = {
   * noop if it wasn't focused
   */
  blurTextInput(textFieldNode: ?Object) {
-    if (document.activeElement === textFieldNode && textFieldNode !== null) {
+    if (textFieldNode !== null) {
      this._currentlyFocusedNode = null;
-      UIManager.blur(textFieldNode);
+      if (document.activeElement === textFieldNode) {
+        UIManager.blur(textFieldNode);
+      }
    }
  }
 };
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -150,18 +150,12 @@ class TextInput extends Component {

  static State = TextInputState;

-  blur() {
-    TextInputState.blurTextInput(this._node);
-  }
+  blur: Function;

  clear() {
    this._node.value = '';
  }

-  focus() {
-    TextInputState.focusTextInput(this._node);
-  }
-
  isFocused() {
    return TextInputState.currentlyFocusedField() === this._node;
  }
@@ -270,6 +264,7 @@ class TextInput extends Component {

  _handleBlur = e => {
    const { onBlur } = this.props;
+    TextInputState.blurTextInput(this._node);
    if (onBlur) {
      onBlur(e);
    }
@@ -289,6 +284,7 @@ class TextInput extends Component {
  _handleFocus = e => {
    const { clearTextOnFocus, onFocus, selectTextOnFocus } = this.props;
    const node = this._node;
+    TextInputState.focusTextInput(this._node);
    if (onFocus) {
      onFocus(e);
    }
--- a/src/components/View/index.js
+++ b/src/components/View/index.js
@@ -68,7 +68,6 @@ class View extends Component {
      const hitSlopChild = createElement('span', { style: [styles.hitSlop, hitSlopStyle] });
      otherProps.children = React.Children.toArray(otherProps.children);
      otherProps.children.unshift(hitSlopChild);
-      otherProps.style.unshift(styles.hasHitSlop);
    }

    return createElement('div', otherProps);
@@ -87,6 +86,7 @@ const styles = StyleSheet.create({
    margin: 0,
    padding: 0,
    position: 'relative',
+    zIndex: 0,
    // fix flexbox bugs
    minHeight: 0,
    minWidth: 0
@@ -96,9 +96,6 @@ const styles = StyleSheet.create({
  },
  // this zIndex-ordering positions the hitSlop above the View but behind
  // its children
-  hasHitSlop: {
-    zIndex: 0
-  },
  hitSlop: {
    ...StyleSheet.absoluteFillObject,
    zIndex: -1
--- a/src/module.js
+++ b/src/module.js
@@ -9,7 +9,7 @@ import Animated from './apis/Animated';
 import AppRegistry from './apis/AppRegistry';
 import AppState from './apis/AppState';
 import AsyncStorage from './apis/AsyncStorage';
-import BackAndroid from './apis/BackAndroid';
+import BackHandler from './apis/BackHandler';
 import Clipboard from './apis/Clipboard';
 import Dimensions from './apis/Dimensions';
 import Easing from './apis/Easing';
@@ -73,7 +73,7 @@ export {
  AppRegistry,
  AppState,
  AsyncStorage,
-  BackAndroid,
+  BackHandler,
  Clipboard,
  Dimensions,
  Easing,
@@ -138,8 +138,7 @@ const ReactNative = {
  AppRegistry,
  AppState,
  AsyncStorage,
-  BackAndroid,
-  BackHandler: BackAndroid,
+  BackHandler,
  Clipboard,
  Dimensions,
  Easing,
--- a/yarn.lock
+++ b/yarn.lock
@@ -1684,15 +1684,16 @@ entities@^1.1.1, entities@~1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"

-enzyme-adapter-react-16@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.0.tgz#e7edd5536743818dcbef336d40d7da59b3a7db8e"
+enzyme-adapter-react-16@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.2.tgz#8c6f431f17c69e1e9eeb25ca4bd92f31971eb2dd"
  dependencies:
    enzyme-adapter-utils "^1.0.0"
    lodash "^4.17.4"
    object.assign "^4.0.4"
    object.values "^1.0.4"
    prop-types "^15.5.10"
+    react-test-renderer "^16.0.0-0"

 enzyme-adapter-utils@^1.0.0:
  version "1.0.0"
@@ -1702,15 +1703,15 @@ enzyme-adapter-utils@^1.0.0:
    object.assign "^4.0.4"
    prop-types "^15.5.10"

-enzyme-to-json@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.0.1.tgz#16468e2ff3e4db817d84f9df38760abbc322273d"
+enzyme-to-json@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.1.4.tgz#a4a85a8f7b561cb8c9c0d728ad1b619a3fed7df2"
  dependencies:
    lodash "^4.17.4"

-enzyme@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.0.0.tgz#94ce364254dc654c4e619b25eecc644bf6481de7"
+enzyme@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.1.0.tgz#d8ca84085790fbcec6ed40badd14478faee4c25a"
  dependencies:
    cheerio "^1.0.0-rc.2"
    function.prototype.name "^1.0.3"
@@ -1721,7 +1722,7 @@ enzyme@^3.0.0:
    object.entries "^1.0.4"
    object.values "^1.0.4"
    raf "^3.3.2"
-    rst-selector-parser "^2.2.1"
+    rst-selector-parser "^2.2.2"

 "errno@>=0.1.1 <0.2.0-0", errno@^0.1.3:
  version "0.1.4"
@@ -4382,7 +4383,7 @@ react-proxy@^1.1.7:
    lodash "^4.6.1"
    react-deep-force-update "^1.0.0"

-react-test-renderer@^16.0.0:
+react-test-renderer@^16.0.0, react-test-renderer@^16.0.0-0:
  version "16.0.0"
  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.0.0.tgz#9fe7b8308f2f71f29fc356d4102086f131c9cb15"
  dependencies:
@@ -4651,7 +4652,7 @@ ripemd160@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"

-rst-selector-parser@^2.2.1:
+rst-selector-parser@^2.2.2:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.2.tgz#9927b619bd5af8dc23a76c64caef04edf90d2c65"
  dependencies:
Author	SHA1	Message	Date
Nicolas Gallagher	5f3e422b5c	0.1.15	2017-12-01 17:55:17 -08:00
Nicolas Gallagher	1f1f89b062	[fix] Image 'onLoad' callback on update 'onLoad' should not be called when a component updates, if the 'uri' is unchanged. Fixes a regression introduced by `92952ee746`	2017-12-01 17:52:47 -08:00
Nicolas Gallagher	0f79960b85	0.1.14	2017-11-15 15:21:45 -08:00
Nicolas Gallagher	117ce59f27	[fix] TextInput focus/blur management 1. Focusing/blurring a TextInput should update TextInputState. 2. Using the focus/blur instance methods should trigger related events. Close #715	2017-11-15 15:20:21 -08:00
Louis Lagrange	214121480e	[fix] stub for Picker.Item Add stub function for API compatibility. Close #690	2017-11-15 14:45:33 -08:00
Li Jie	6261536f57	Fix benchmarks documentation Close #706	2017-11-15 14:43:13 -08:00
Nicolas Gallagher	a748b7e606	[fix] ScrollView 'setNativeProps' Fix #709 Close #710	2017-11-15 14:39:58 -08:00
Zero Cho	92952ee746	[fix] call Image 'onLoad' when image is loaded from cache Fix #452 Close #712	2017-11-15 13:33:13 -08:00
Nicolas Gallagher	c22a9aff7d	0.1.13	2017-10-31 10:56:36 -07:00
Nicolas Gallagher	dd8a3c8d59	[fix] StyleSheet handling of default 'borderWidth' Problem: The default border width should be '0px', but setting a border width value to 'null' would override the default and result in no border width being applied to the element. This could cause unwanted user agent styles to be applied. Solution: createReactDOMStyle now replaces border width values of 'null' with '0px'. Fix #697	2017-10-30 22:42:52 -07:00
Nicolas Gallagher	4a1abee1df	Update benchmarks packages	2017-10-30 14:45:13 -07:00
Nicolas Gallagher	92ef3ffbb8	0.1.12	2017-10-20 11:29:45 -07:00
Nicolas Gallagher	899763bc34	[fix] zIndex stacking React Native simplifies zIndex stacking by making every 'View' a new stacking context. Fix #689	2017-10-19 13:16:36 -07:00
Nicolas Gallagher	c69ad3c2d6	Update presentation of Image docs	2017-10-19 12:42:45 -07:00
Nicolas Gallagher	9a5b932139	Flatten styles in test snapshots	2017-10-19 12:42:05 -07:00
Nicolas Gallagher	ba96e457b4	0.1.11	2017-10-18 11:10:59 -07:00
Nicolas Gallagher	bdfe943bd5	0.1.10	2017-10-18 11:08:15 -07:00
Nicolas Gallagher	3870445b7e	[add] jest snapshot serializer Flatten style objects in snapshots	2017-10-17 17:36:34 -07:00
Nicolas Gallagher	5395a3e8bc	0.1.9	2017-10-13 13:25:52 -07:00
Nicolas Gallagher	45b3d8b0df	[fix] style warnings for text and SVG Allow 'fill' as a valid style property. Allow 'textAlignVertical' to be any string.	2017-10-13 13:17:27 -07:00
Jaco Bovenschen	f1ee3c003a	Fix typo in Dimensions doc Close #682	2017-10-13 10:53:35 -07:00
Nicolas Gallagher	606181406c	0.1.8	2017-10-11 15:14:43 -07:00
Nicolas Gallagher	b537400f38	[fix] remove 'module' from package.json This is properly supported and there are no ES6 modules in the package at the moment.	2017-10-11 15:02:58 -07:00
Nicolas Gallagher	0a4fdc155e	[fix] babel plugin 'source' check	2017-10-11 15:02:12 -07:00
Nicolas Gallagher	0b8e59974b	0.1.7	2017-10-09 13:14:01 -07:00
Jirat Kijlerdpornpailoj	22eebea633	[fix] babel plugin support for "export" statements Close #677	2017-10-06 14:22:00 -07:00
Nicolas Gallagher	5dd414f9aa	0.1.6	2017-10-05 19:05:13 -07:00
Louis Lagrange	72c72f6530	[fix] AsyncStorage.flushGetRequests Add stub function for API compatibility. Close #676	2017-10-05 19:03:43 -07:00
Nicolas Gallagher	de970f9dbb	Add more tests for Switch	2017-10-05 13:59:59 -07:00
Nicolas Gallagher	e8d6c5b4dd	Helper function for ActivityIndicator SVGs	2017-10-05 13:59:42 -07:00
Tiaan	e91a5ae13e	Add missing comma to example webpack config Close #671	2017-10-04 11:54:22 -07:00
Nicolas Gallagher	b08bfb9ad5	0.1.5	2017-10-04 11:49:22 -07:00
Nicolas Gallagher	5353011ee4	[fix] BackHandler export; remove BackAndroid Fix #673	2017-10-04 11:45:28 -07:00