0.1.13

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

.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

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];

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"
   }
 }

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"

docs/guides/getting-started.md

@@ -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"
   }

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>
     );
   }

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
   }
 });
 

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;

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
   }

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;

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;

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;

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

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'
   }
 });
 

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'
   }
 });
 

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'

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."
       />

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);

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"
+/>
+`;

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();
+    });
+  });
+});

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;

jest/serializer.js

@@ -0,0 +1,6 @@
+const createSerializer = require('./createSerializer');
+const { StyleSheet } = require('../dist');
+
+const serializer = createSerializer(StyleSheet);
+
+module.exports = serializer;

package.json

@@ -1,31 +1,32 @@
 {
   "name": "react-native-web",
-  "version": "0.1.8",
+  "version": "0.1.13",
   "description": "React Native for Web",
   "main": "dist/index.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": {
@@ -83,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",

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>"
 `;

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,

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}",
   },
 ]
 `;

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({

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;
         }
       }
     }

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

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,

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

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: