0.7.3

React 16.4 includes the necessary ResponderEventPlugin dependencies and
makes some changes to the event internals that causes a breaking change.
This patch fixes rendering with react-dom@16.4 while preserving
backward-compatibility with earlier versions of react-dom.

Close #908

.github/ISSUE_TEMPLATE.md

@@ -1,20 +0,0 @@
-**Do you want to request a *feature* or report a *bug*?**
-
-**What is the current behavior?**
-
-**If the current behavior is a bug, please provide the steps to reproduce and
-if a minimal demo of the problem via Glitch or similar (template:
-https://glitch.com/edit/#!/react-native-web-playground).**
-
-1.
-2.
-
-**What is the expected behavior?**
-
-**Environment (include versions). Did this work in previous versions?**
-
-* OS:
-* Device:
-* Browser:
-* React Native for Web (version):
-* React (version):

.github/ISSUE_TEMPLATE/bug.md

@@ -0,0 +1,32 @@
+---
+name: "\U0001F41B Bug report"
+about: "If something isn't working as expected \U0001F914"
+
+---
+
+**The problem**
+A clear and concise description of the bug or problem.
+
+**How to reproduce**
+Test case: <!-- FORK THIS TEMPLATE: https://codesandbox.io/s/6lx6ql1w5r -->
+
+Steps to reproduce:
+1.
+2.
+3.
+
+<!-- If applicable, add screenshots to help explain your problem. -->
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Environment (include versions). Did this work in previous versions?**
+
+* OS:
+* Device:
+* Browser:
+* React Native for Web (version):
+* React (version):
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature.md

@@ -0,0 +1,17 @@
+---
+name: "\U0001F680 Feature request"
+about: If you have a suggestion
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is, e.g., I have an issue when [...]
+
+**Describe a solution you'd like**
+A clear and concise description of what you want to happen. Add any considered drawbacks.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1 +0,0 @@
-**Before submitting a pull request,** please make sure you have followed the steps the CONTRIBUTING guide.

README.md

@@ -29,8 +29,9 @@ Browser support: Chrome, Firefox, Edge, Safari 7+, IE 10+.
 ## Quick start
 
 The easiest way to get started with React Native for Web is to use this
-[ready-to-go project on Glitch](https://glitch.com/edit/#!/react-native).
-You don’t need to install anything to try it out.
+[CodeSandbox](https://codesandbox.io/s/q4qymyp2l6) template (or
+[Glitch](https://glitch.com/edit/#!/react-native)). You don’t need to install
+anything to try it out.
 
 ## Documentation
 
@@ -42,21 +43,6 @@ design details, and for information about the [Gesture Responder
 system](https://facebook.github.io/react-native/docs/gesture-responder-system.html)
 and [animations](https://facebook.github.io/react-native/docs/animations.html).
 
-### Installation
-
-Install using `yarn` or `npm`:
-
-```
-yarn add react react-dom react-native-web
-yarn add --dev babel-plugin-react-native-web
-```
-
-And if you need to use `ART`:
-
-```
-yarn add react-art
-```
-
 ### Guides
 
 * [Getting started](https://github.com/necolas/react-native-web/blob/master/website/guides/getting-started.md)
@@ -109,8 +95,8 @@ Examples of using React Native for Web with other web tools:
 * [Next.js](https://github.com/zeit/next.js/tree/master/examples/with-react-native-web)
 * [Phenomic](https://github.com/phenomic/phenomic/tree/master/examples/react-native-web-app)
 * [Razzle](https://github.com/jaredpalmer/razzle/tree/master/examples/with-react-native-web)
-* [Storybook](https://github.com/necolas/react-native-web/tree/0.5.1/website/storybook/.storybook)
-* [Styleguidist](https://github.com/styleguidist/react-styleguidist/tree/v6.2.6/examples/react-native)
+* [Storybook](https://github.com/necolas/react-native-web/tree/master/website/storybook/.storybook)
+* [Styleguidist](https://github.com/styleguidist/react-styleguidist/tree/master/examples/react-native)
 
 ## Contributing
 

package.json

@@ -1,10 +1,11 @@
 {
   "private": true,
-  "version": "0.6.1",
+  "version": "0.7.3",
   "name": "react-native-web-monorepo",
   "scripts": {
     "clean": "del ./packages/*/dist",
     "compile": "yarn clean && cd packages/react-native-web && babel src --out-dir dist --ignore \"**/__tests__\"",
+    "compile:commonjs": "cd packages/react-native-web && MODULES=commonjs babel src --out-dir dist/cjs --ignore \"**/__tests__\"",
     "benchmarks": "cd packages/benchmarks && yarn build",
     "benchmarks:release": "cd packages/benchmarks && yarn release",
     "website": "cd website && yarn start",
@@ -12,11 +13,11 @@
     "flow": "flow",
     "fmt": "find packages scripts types website -name '*.js' | grep -v -E '(node_modules|dist|vendor)' | xargs yarn fmt:cmd",
     "fmt:cmd": "prettier --write",
-    "jest": "jest --config ./scripts/jest/config.js",
+    "jest": "MODULES=commonjs jest --config ./scripts/jest/config.js",
     "lint": "yarn lint:check --fix",
     "lint:check": "eslint packages scripts website",
     "precommit": "lint-staged",
-    "prerelease": "yarn test && yarn compile",
+    "prerelease": "yarn test && yarn compile && yarn compile:commonjs",
     "release": "node ./scripts/release/publish.js",
     "postrelease": "yarn website:release && yarn benchmarks:release",
     "test": "yarn flow && yarn lint:check && yarn jest --runInBand"
@@ -24,7 +25,7 @@
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.3",
+    "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -37,22 +38,22 @@
     "del-cli": "^1.1.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.0",
-    "enzyme-to-json": "^3.2.2",
-    "eslint": "^4.12.1",
+    "enzyme-to-json": "^3.3.3",
+    "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-promise": "^3.6.0",
-    "eslint-plugin-react": "^7.5.1",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-react": "^7.7.0",
     "flow-bin": "^0.63.1",
     "glob": "^7.1.2",
     "husky": "^0.14.3",
-    "jest": "^21.2.1",
-    "lint-staged": "^6.0.0",
-    "prettier": "^1.8.2",
-    "raf": "^3.4.0",
-    "react": "^16.2.0",
-    "react-art": "^16.3.0",
-    "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.2.0"
+    "jest": "^22.4.3",
+    "jest-canvas-mock": "^1.0.2",
+    "lint-staged": "^7.1.0",
+    "prettier": "^1.12.1",
+    "react": "^16.3.2",
+    "react-art": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-test-renderer": "^16.3.2"
   },
   "workspaces": [
     "packages/*",
@@ -60,7 +61,7 @@
   ],
   "lint-staged": {
     "**/*.js": [
-      "fmt:cmd",
+      "prettier --write",
       "git update-index --again",
       "eslint"
     ],

packages/babel-plugin-react-native-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-react-native-web",
-  "version": "0.6.1",
+  "version": "0.7.3",
   "description": "Babel plugin for React Native for Web",
   "main": "index.js",
   "devDependencies": {

packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`export from "react-native" 1`] = `
+exports[`Rewrite react-native to react-native-web export from "react-native": export from "react-native" 1`] = `
 "
 export { View } from 'react-native';
 export { ColorPropType, StyleSheet, Text, createElement } from 'react-native';
@@ -15,7 +15,7 @@ export { default as createElement } from 'react-native-web/dist/exports/createEl
 "
 `;
 
-exports[`export from "react-native-web" 1`] = `
+exports[`Rewrite react-native to react-native-web export from "react-native-web": export from "react-native-web" 1`] = `
 "
 export { View } from 'react-native-web';
 export { ColorPropType, StyleSheet, Text, createElement } from 'react-native-web';
@@ -30,7 +30,7 @@ export { default as createElement } from 'react-native-web/dist/exports/createEl
 "
 `;
 
-exports[`import from "native-native" 1`] = `
+exports[`Rewrite react-native to react-native-web import from "native-native": import from "native-native" 1`] = `
 "
 import ReactNative from 'react-native';
 import { View } from 'react-native';
@@ -48,7 +48,7 @@ import * as ReactNativeModules from 'react-native-web/dist/index';
 "
 `;
 
-exports[`import from "react-native-web" 1`] = `
+exports[`Rewrite react-native to react-native-web import from "react-native-web": import from "react-native-web" 1`] = `
 "
 import { createElement } from 'react-native-web';
 import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
@@ -66,7 +66,7 @@ import * as ReactNativeModules from 'react-native-web/dist/index';
 "
 `;
 
-exports[`require "react-native" 1`] = `
+exports[`Rewrite react-native to react-native-web require "react-native": require "react-native" 1`] = `
 "
 const ReactNative = require('react-native');
 const { View } = require('react-native');
@@ -84,7 +84,7 @@ const TouchableOpacity = require('react-native-web/dist/exports/TouchableOpacity
 "
 `;
 
-exports[`require "react-native-web" 1`] = `
+exports[`Rewrite react-native to react-native-web require "react-native-web": require "react-native-web" 1`] = `
 "
 const ReactNative = require('react-native-web');
 const { createElement } = require('react-native-web');

packages/benchmarks/package.json

@@ -1,37 +1,37 @@
 {
   "private": true,
   "name": "benchmarks",
-  "version": "0.6.1",
+  "version": "0.7.3",
   "scripts": {
-    "build": "mkdir -p dist && cp -f index.html dist/index.html && webpack --config ./webpack.config.js",
+    "build": "mkdir -p dist && cp -f index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
     "release": "yarn build && git checkout gh-pages && rm -rf ../../benchmarks && mv dist ../../benchmarks && git add -A && git commit -m \"Benchmarks deploy\" && git push origin gh-pages && git checkout -"
   },
   "dependencies": {
-    "aphrodite": "^2.1.0",
+    "aphrodite": "^2.2.0",
     "classnames": "^2.2.5",
     "d3-scale-chromatic": "^1.2.0",
-    "emotion": "^9.1.1",
+    "emotion": "^9.1.3",
     "fela": "^6.1.7",
     "glamor": "2.20.40",
     "radium": "^0.24.0",
-    "react": "^16.2.0",
-    "react-component-benchmark": "^0.0.4",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "react-fela": "^7.2.0",
     "react-jss": "^8.4.0",
-    "react-native-web": "0.6.1",
-    "reactxp": "^1.1.0",
-    "styled-components": "^3.2.5",
+    "react-native-web": "0.7.3",
+    "reactxp": "^1.1.1",
+    "styled-components": "^3.2.6",
     "styled-jsx": "^2.2.6",
-    "styletron-engine-atomic": "^1.0.4",
-    "styletron-react": "^4.0.3"
+    "styletron-engine-atomic": "^1.0.5",
+    "styletron-react": "^4.2.1"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.6.1",
+    "babel-plugin-react-native-web": "0.7.3",
     "css-loader": "^0.28.11",
-    "style-loader": "^0.20.3",
+    "style-loader": "^0.21.0",
     "url-loader": "^1.0.1",
-    "webpack": "^3.10.0",
-    "webpack-bundle-analyzer": "^2.9.2"
+    "webpack": "^4.8.1",
+    "webpack-bundle-analyzer": "^2.11.1",
+    "webpack-cli": "^2.1.3"
   }
 }

packages/benchmarks/src/app/App.js

@@ -292,7 +292,6 @@ const styles = StyleSheet.create({
   },
   button: {
     borderRadius: 0,
-    fontSize: 32,
     flex: 1
   }
 });

packages/benchmarks/src/app/Benchmark/index.js

@@ -1,3 +1,9 @@
+/**
+ * The MIT License (MIT)
+ * Copyright (c) 2017 Paul Armstrong
+ * https://github.com/paularmstrong/react-component-benchmark
+ */
+
 /* global $Values */
 /**
  * @flow

packages/benchmarks/src/app/Button.js

@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
   },
   text: {
     color: '#fff',
+    fontSize: 20,
     fontWeight: '500',
     padding: 8,
     textAlign: 'center',

packages/benchmarks/src/cases/SierpinskiTriangle.js

@@ -1,4 +1,4 @@
-import { BenchmarkType } from 'react-component-benchmark';
+import { BenchmarkType } from '../app/Benchmark';
 import { number, object } from 'prop-types';
 import React from 'react';
 import { interpolatePurples, interpolateBuPu, interpolateRdPu } from 'd3-scale-chromatic';

packages/benchmarks/src/cases/Tree.js

@@ -1,4 +1,4 @@
-import { BenchmarkType } from 'react-component-benchmark';
+import { BenchmarkType } from '../app/Benchmark';
 import { number, object } from 'prop-types';
 import React, { Component } from 'react';
 

packages/benchmarks/src/implementations/styled-components/Box.js

@@ -25,7 +25,7 @@ const Box = styled(View)`
   flex-direction: ${props => (props.layout === 'column' ? 'column' : 'row')};
   padding: ${props => (props.outer ? '4px' : '0')};
   ${props => props.fixed && 'height:6px;'} ${props =>
-      props.fixed && 'width:6px;'} background-color: ${props => getColor(props.color)};
+  props.fixed && 'width:6px;'} background-color: ${props => getColor(props.color)};
 `;
 
 export default Box;

packages/benchmarks/webpack.config.js

@@ -1,11 +1,11 @@
 const babelPreset = require('../../scripts/babel/preset');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const path = require('path');
-const webpack = require('webpack');
 
 const appDirectory = path.resolve(__dirname);
 
 module.exports = {
+  mode: 'production',
   context: __dirname,
   entry: './src/index',
   output: {
@@ -32,7 +32,7 @@ module.exports = {
           options: {
             cacheDirectory: false,
             presets: babelPreset,
-            plugins: ['react-native-web', 'styled-jsx/babel']
+            plugins: ['styled-jsx/babel']
           }
         }
       }
@@ -42,17 +42,11 @@ module.exports = {
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
       openAnalyzer: false
-    }),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        dead_code: true,
-        drop_console: false,
-        screw_ie8: true,
-        warnings: false
-      }
     })
-  ]
+  ],
+  resolve: {
+    alias: {
+      'react-native': 'react-native-web'
+    }
+  }
 };

packages/react-native-web/jest/__tests__/__snapshots__/serializer-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`enzyme.mount complex 1`] = `
+exports[`enzyme complex: enzyme.mount complex 1`] = `
 <Box
   element={
     <View>
@@ -26,7 +26,7 @@ exports[`enzyme.mount 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"
+      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-1qe8dj5 rn-flexBasis-1mlwlqe 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
@@ -48,7 +48,7 @@ exports[`enzyme.mount complex 1`] = `
       </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"
+          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-1qe8dj5 rn-flexBasis-1mlwlqe 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={
@@ -58,7 +58,7 @@ exports[`enzyme.mount complex 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-1knelpx rn-paddingRight-1ah4tor rn-paddingBottom-k8qxaj rn-paddingLeft-b5h31w rn-position-bnwqim rn-zIndex-1lgpqti"
+              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-1qe8dj5 rn-flexBasis-1mlwlqe 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>
@@ -76,70 +76,9 @@ exports[`enzyme.mount complex 1`] = `
 </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-fontFamily-14xgk7a rn-fontSize-ubezar rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b 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`] = `
+exports[`enzyme complex: 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"
+  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-1qe8dj5 rn-flexBasis-1mlwlqe 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-fontFamily-14xgk7a rn-fontSize-ubezar rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b 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"
@@ -148,10 +87,10 @@ exports[`enzyme.render complex 1`] = `
     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"
+    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-1qe8dj5 rn-flexBasis-1mlwlqe 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"
+      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-1qe8dj5 rn-flexBasis-1mlwlqe 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-fontFamily-14xgk7a rn-fontSize-1b43r93 rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b 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"
@@ -163,32 +102,7 @@ exports[`enzyme.render complex 1`] = `
 </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-fontFamily-14xgk7a rn-fontSize-ubezar rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b 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`] = `
+exports[`enzyme complex: enzyme.shallow complex 1`] = `
 <View
   style={
     Object {
@@ -215,7 +129,30 @@ exports[`enzyme.shallow complex 1`] = `
 </View>
 `;
 
-exports[`enzyme.shallow composite 1`] = `
+exports[`enzyme composite: 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-1qe8dj5 rn-flexBasis-1mlwlqe 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 composite: 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-1qe8dj5 rn-flexBasis-1mlwlqe 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 composite: enzyme.shallow composite 1`] = `
 <View
   style={
     Object {
@@ -226,7 +163,56 @@ exports[`enzyme.shallow composite 1`] = `
 />
 `;
 
-exports[`enzyme.shallow nested 1`] = `
+exports[`enzyme nested: 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-1qe8dj5 rn-flexBasis-1mlwlqe 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-fontFamily-14xgk7a rn-fontSize-ubezar rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b 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 nested: 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-1qe8dj5 rn-flexBasis-1mlwlqe 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-fontFamily-14xgk7a rn-fontSize-ubezar rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b 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 nested: enzyme.shallow nested 1`] = `
 <View
   style={
     Object {
@@ -241,15 +227,29 @@ exports[`enzyme.shallow nested 1`] = `
 </View>
 `;
 
-exports[`enzyme.shallow noop 1`] = `
+exports[`enzyme noop: 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-1qe8dj5 rn-flexBasis-1mlwlqe 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 noop: enzyme.render 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"
+  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-1qe8dj5 rn-flexBasis-1mlwlqe 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 noop: 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-1qe8dj5 rn-flexBasis-1mlwlqe 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"
+  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-1qe8dj5 rn-flexBasis-1mlwlqe 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-fontFamily-14xgk7a rn-fontSize-ubezar rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b 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"
@@ -258,10 +258,10 @@ exports[`react-test-renderer complex 1`] = `
     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"
+    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-1qe8dj5 rn-flexBasis-1mlwlqe 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"
+      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-1qe8dj5 rn-flexBasis-1mlwlqe 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-fontFamily-14xgk7a rn-fontSize-1b43r93 rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b 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"
@@ -275,13 +275,13 @@ exports[`react-test-renderer complex 1`] = `
 
 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"
+  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-1qe8dj5 rn-flexBasis-1mlwlqe 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"
+  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-1qe8dj5 rn-flexBasis-1mlwlqe 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-fontFamily-14xgk7a rn-fontSize-ubezar rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b 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"
@@ -294,6 +294,6 @@ exports[`react-test-renderer nested 1`] = `
 
 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"
+  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-1qe8dj5 rn-flexBasis-1mlwlqe 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"
 />
 `;

packages/react-native-web/package.json

@@ -1,8 +1,10 @@
 {
   "name": "react-native-web",
-  "version": "0.6.1",
+  "version": "0.7.3",
   "description": "React Native for Web",
-  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "sideEffects": false,
   "files": [
     "dist",
     "jest",
@@ -16,7 +18,7 @@
     "deep-assign": "^2.0.0",
     "fbjs": "^0.8.16",
     "hyphenate-style-name": "^1.0.2",
-    "inline-style-prefixer": "^4.0.0",
+    "inline-style-prefixer": "^4.0.2",
     "normalize-css-color": "^1.0.2",
     "prop-types": "^15.6.0",
     "react-timer-mixin": "^0.13.3"

packages/react-native-web/src/exports/ActivityIndicator/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule ActivityIndicator
  * @flow
  */
 

packages/react-native-web/src/exports/Animated/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Animated
  * @flow
  */
 

packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Additional CSS for styled app 1`] = `
+exports[`AppRegistry getApplication "getStyleElement" produces styles that are a function of rendering "element": Additional CSS for styled app 1`] = `
 "
 .rn-backgroundColor-1e4kli0{background-color:purple}
 .rn-borderTopWidth-10pzpfo{border-top-width:1234px}
@@ -9,25 +9,7 @@ exports[`Additional CSS for styled app 1`] = `
 .rn-borderLeftWidth-150mub4{border-left-width:1234px}"
 `;
 
-exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = `
-<AppContainer
-  WrapperComponent={undefined}
-  rootTag={Object {}}
->
-  <RootComponent />
-</AppContainer>
-`;
-
-exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = `
-"<style id=\\"react-native-stylesheet\\">@media all{
-html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
-body{margin:0;}
-button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
-input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-}</style>"
-`;
-
-exports[`CSS for an unstyled app 1`] = `
+exports[`AppRegistry getApplication "getStyleElement" produces styles that are a function of rendering "element": CSS for an unstyled app 1`] = `
 "@media all{
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
 body{margin:0;}
@@ -47,8 +29,8 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
 .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-flexShrink-1pxmb3b{-ms-flex-negative:0 !important;-webkit-flex-shrink:0 !important;flex-shrink:0 !important}
-.rn-flexBasis-7vfszb{-ms-flex-preferred-size:auto !important;-webkit-flex-basis:auto !important;flex-basis:auto !important}
+.rn-flexShrink-1qe8dj5{-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0}
+.rn-flexBasis-1mlwlqe{-ms-flex-preferred-size:auto;-webkit-flex-basis:auto;flex-basis:auto}
 .rn-flexDirection-eqz5dr{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
 .rn-marginTop-1mnahxq{margin-top:0px}
 .rn-marginRight-61z16t{margin-right:0px}
@@ -62,7 +44,25 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
 .rn-paddingLeft-gy4na3{padding-left:0px}
 .rn-position-bnwqim{position:relative}
 .rn-zIndex-1lgpqti{z-index:0}
-.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-flexShrink-1awmn5t{-ms-flex-negative:1 !important;-webkit-flex-shrink:1 !important;flex-shrink:1 !important}"
+.rn-flexGrow-16y2uox{-ms-flex-positive:1;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1}
+.rn-flexShrink-1wbh5a2{-ms-flex-negative:1;-webkit-flex-shrink:1;flex-shrink:1}
+.rn-flexBasis-1ro0kt6{-ms-flex-preferred-size:0%;-webkit-flex-basis:0%;flex-basis:0%}"
+`;
+
+exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = `
+<AppContainer
+  WrapperComponent={undefined}
+  rootTag={Object {}}
+>
+  <RootComponent />
+</AppContainer>
+`;
+
+exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = `
+"<style id=\\"react-native-stylesheet\\">@media all{
+html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+}</style>"
 `;

packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js

@@ -10,6 +10,9 @@ import View from '../../View';
 
 const RootComponent = () => <div />;
 
+const styles = StyleSheet.create({ root: { borderWidth: 1234, backgroundColor: 'purple' } });
+const AlternativeComponent = () => <View style={styles.root} />;
+
 describe('AppRegistry', () => {
   describe('getApplication', () => {
     const canUseDOM = ExecutionEnvironment.canUseDOM;
@@ -29,56 +32,59 @@ describe('AppRegistry', () => {
 
     test('returns "element" and "getStyleElement"', () => {
       AppRegistry.registerComponent('App', () => RootComponent);
-
       const { element, getStyleElement } = AppRegistry.getApplication('App', {});
+      const styleElement = ReactDOMServer.renderToStaticMarkup(getStyleElement());
+
       expect(element).toMatchSnapshot();
-      expect(ReactDOMServer.renderToStaticMarkup(getStyleElement())).toMatchSnapshot();
+      expect(styleElement).toMatchSnapshot();
+    });
+
+    test('"getStyleElement" adds props to <style>', () => {
+      const nonce = '2Bz9RM/UHvBbmo3jK/PbYZ==';
+      AppRegistry.registerComponent('App', () => RootComponent);
+      const { getStyleElement } = AppRegistry.getApplication('App', {});
+      const styleElement = getStyleElement({ nonce });
+      expect(styleElement.props.nonce).toBe(nonce);
     });
 
     test('"getStyleElement" produces styles that are a function of rendering "element"', () => {
-      const getTextContent = getStyleElement =>
-        getStyleElement().props.dangerouslySetInnerHTML.__html;
-
-      // First "RootComponent" render
-      AppRegistry.registerComponent('App1', () => RootComponent);
-      let app = AppRegistry.getApplication('App1', {});
-      render(app.element);
-      const first = getTextContent(app.getStyleElement);
-
-      // Next render is a different tree; the style sheet should be different
-      const styles = StyleSheet.create({ root: { borderWidth: 1234, backgroundColor: 'purple' } });
-      const Component = () => <View style={styles.root} />;
-      AppRegistry.registerComponent('App2', () => Component);
-      app = AppRegistry.getApplication('App2', {});
-      render(app.element);
-      const second = getTextContent(app.getStyleElement);
-
-      const diff = second.split(first)[1];
+      const getApplicationStyles = appName => {
+        const { element, getStyleElement } = AppRegistry.getApplication(appName, {});
+        render(element);
+        return getStyleElement().props.dangerouslySetInnerHTML.__html;
+      };
 
+      // First render "RootComponent"
+      AppRegistry.registerComponent('App', () => RootComponent);
+      const first = getApplicationStyles('App');
       expect(first).toMatchSnapshot('CSS for an unstyled app');
-      expect(diff).toMatchSnapshot('Additional CSS for styled app');
+
+      // Second render "AlternativeComponent"
+      AppRegistry.registerComponent('AlternativeApp', () => AlternativeComponent);
+      const second = getApplicationStyles('AlternativeApp');
+      const diff = second.split(first)[1];
       expect(first).not.toEqual(second);
+      expect(diff).toMatchSnapshot('Additional CSS for styled app');
 
-      // Final render is once again "RootComponent"; the style sheet should not
-      // be polluted by earlier rendering of a different tree
-      app = AppRegistry.getApplication('App1', {});
-      render(app.element);
-      const third = getTextContent(app.getStyleElement);
-
+      // Third render "RootComponent" again
+      const third = getApplicationStyles('App');
       expect(first).toEqual(third);
     });
   });
 
   describe('runApplication', () => {
     test('callback after render', () => {
-      AppRegistry.registerComponent('App', () => RootComponent);
-
-      const callback = jest.fn();
+      // setup
       const rootTag = document.createElement('div');
       rootTag.id = 'react-root';
       document.body.appendChild(rootTag);
+
+      const callback = jest.fn();
+      AppRegistry.registerComponent('App', () => RootComponent);
       AppRegistry.runApplication('App', { initialProps: {}, rootTag, callback });
       expect(callback).toHaveBeenCalledTimes(1);
+
+      // cleanup
       document.body.removeChild(rootTag);
     });
   });

packages/react-native-web/src/exports/AppRegistry/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule AppRegistry
  * @flow
  */
 

packages/react-native-web/src/exports/AppRegistry/renderApplication.js

@@ -46,9 +46,11 @@ export function getApplication(
     </AppContainer>
   );
   // Don't escape CSS text
-  const getStyleElement = () => {
+  const getStyleElement = props => {
     const sheet = styleResolver.getStyleSheet();
-    return <style dangerouslySetInnerHTML={{ __html: sheet.textContent }} id={sheet.id} />;
+    return (
+      <style {...props} dangerouslySetInnerHTML={{ __html: sheet.textContent }} id={sheet.id} />
+    );
   };
   return { element, getStyleElement };
 }

packages/react-native-web/src/exports/AppState/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule AppState
  * @noflow
  */
 

packages/react-native-web/src/exports/AsyncStorage/__tests__/index-test.js

@@ -159,7 +159,7 @@ describe('apis/AsyncStorage', () => {
   });
 
   describe('multiSet', () => {
-    const assertResult = result => {
+    const assertResult = () => {
       expect(mockLocalStorage.getItem('UID123')).toEqual(JSON.stringify(uid123Object));
       expect(mockLocalStorage.getItem('UID124')).toEqual(JSON.stringify(uid124Object));
     };
@@ -206,7 +206,7 @@ describe('apis/AsyncStorage', () => {
   });
 
   describe('multiMerge', () => {
-    const assertResult = result => {
+    const assertResult = () => {
       expect(JSON.parse(mockLocalStorage.getItem('UID123'))).toMatchSnapshot();
       expect(JSON.parse(mockLocalStorage.getItem('UID124'))).toMatchSnapshot();
     };
@@ -253,7 +253,7 @@ describe('apis/AsyncStorage', () => {
   });
 
   describe('multiRemove', () => {
-    const assertResult = result => {
+    const assertResult = () => {
       expect(mockLocalStorage.getItem('UID123')).toBeUndefined();
       expect(mockLocalStorage.getItem('UID124')).toBeUndefined();
     };

packages/react-native-web/src/exports/AsyncStorage/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule AsyncStorage
  * @flow
  */
 

packages/react-native-web/src/exports/BackHandler/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule BackHandler
  * @flow
  */
 

packages/react-native-web/src/exports/Button/__tests__/index-test.js

@@ -1,31 +1,32 @@
 /* eslint-env jasmine, jest */
 /* eslint-disable react/jsx-no-bind */
 
-import React from 'react';
 import Button from '..';
-import { mount, shallow } from 'enzyme';
-
-const findNativeButton = wrapper => wrapper.getDOMNode();
+import React from 'react';
+import StyleSheet from '../../StyleSheet';
+import TouchableOpacity from '../../TouchableOpacity';
+import { render, shallow } from 'enzyme';
 
 describe('components/Button', () => {
   test('prop "color"', () => {
     const onPress = () => {};
     const color = 'blue';
-    const button = findNativeButton(mount(<Button color={color} onPress={onPress} title="" />));
-    expect(button.style.backgroundColor).toEqual(color);
+    const button = shallow(<Button color={color} onPress={onPress} title="" />);
+    const style = StyleSheet.flatten(button.prop('style'));
+    expect(style.backgroundColor).toEqual(color);
   });
 
   test('prop "onPress"', () => {
     const onPress = jest.fn();
     const component = shallow(<Button onPress={onPress} title="" />);
-    component.simulate('press');
+    component.find(TouchableOpacity).simulate('press');
     expect(onPress).toHaveBeenCalled();
   });
 
   test('prop "title"', () => {
     const onPress = () => {};
     const text = 'Click me';
-    const component = mount(<Button onPress={onPress} title={text} />);
+    const component = render(<Button onPress={onPress} title={text} />);
     expect(component.text()).toEqual(text);
   });
 });

packages/react-native-web/src/exports/Button/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Button
  * @flow
  */
 

packages/react-native-web/src/exports/CheckBox/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule CheckBox
  * @flow
  */
 

packages/react-native-web/src/exports/Clipboard/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Clipboard
  * @flow
  */
 

packages/react-native-web/src/exports/ColorPropType/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule ColorPropType
  * @noflow
  */
 

packages/react-native-web/src/exports/Dimensions/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Dimensions
  * @flow
  */
 

packages/react-native-web/src/exports/EdgeInsetsPropType/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule EdgeInsetsPropType
  * @flow
  */
 

packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js

@@ -18,6 +18,10 @@ describe('apis/I18nManager', () => {
     });
 
     describe('forceRTL', () => {
+      afterEach(() => {
+        I18nManager.forceRTL(false);
+      });
+
       test('when set to false, "isRTL" is false', () => {
         I18nManager.forceRTL(false);
         expect(I18nManager.isRTL).toBe(false);
@@ -27,11 +31,14 @@ describe('apis/I18nManager', () => {
         I18nManager.forceRTL(true);
         expect(I18nManager.isRTL).toBe(true);
         expect(getDocumentDir()).toEqual('rtl');
-        I18nManager.forceRTL(false);
       });
     });
 
     describe('swapLeftAndRightInRTL', () => {
+      afterEach(() => {
+        I18nManager.swapLeftAndRightInRTL(true);
+      });
+
       test('when set to false, "doLeftAndRightSwapInRTL" is false', () => {
         I18nManager.swapLeftAndRightInRTL(false);
         expect(I18nManager.doLeftAndRightSwapInRTL).toBe(false);
@@ -60,11 +67,14 @@ describe('apis/I18nManager', () => {
     });
 
     describe('allowRTL', () => {
+      afterEach(() => {
+        I18nManager.allowRTL(true);
+      });
+
       test('when set to false, "isRTL" is false', () => {
         I18nManager.allowRTL(false);
         expect(I18nManager.isRTL).toBe(false);
         expect(getDocumentDir()).toEqual('ltr');
-        I18nManager.allowRTL(true);
       });
       test('when set to true, "isRTL" is true', () => {
         I18nManager.allowRTL(true);
@@ -74,6 +84,10 @@ describe('apis/I18nManager', () => {
     });
 
     describe('forceRTL', () => {
+      afterEach(() => {
+        I18nManager.forceRTL(false);
+      });
+
       test('when set to false, "isRTL" is true', () => {
         I18nManager.forceRTL(false);
         expect(I18nManager.isRTL).toBe(true);
@@ -83,11 +97,14 @@ describe('apis/I18nManager', () => {
         I18nManager.forceRTL(true);
         expect(I18nManager.isRTL).toBe(true);
         expect(getDocumentDir()).toEqual('rtl');
-        I18nManager.forceRTL(false);
       });
     });
 
     describe('swapLeftAndRightInRTL', () => {
+      afterEach(() => {
+        I18nManager.swapLeftAndRightInRTL(true);
+      });
+
       test('when set to false, "doLeftAndRightSwapInRTL" is false', () => {
         I18nManager.swapLeftAndRightInRTL(false);
         expect(I18nManager.doLeftAndRightSwapInRTL).toBe(false);

packages/react-native-web/src/exports/I18nManager/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule I18nManager
  * @flow
  */
 

packages/react-native-web/src/exports/Image/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Image
  * @flow
  */
 

packages/react-native-web/src/exports/InteractionManager/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule InteractionManager
  * @flow
  */
 

packages/react-native-web/src/exports/Keyboard/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Keyboard
  * @flow
  */
 

packages/react-native-web/src/exports/KeyboardAvoidingView/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule KeyboardAvoidingView
  * @flow
  */
 

packages/react-native-web/src/exports/Linking/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Linking
  * @flow
  */
 

packages/react-native-web/src/exports/ListView/ListViewDataSource.js

@@ -23,7 +23,6 @@
  * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
  * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *
- * @providesModule ListViewDataSource
  * @typechecks
  * @flow
  */

packages/react-native-web/src/exports/ListView/__tests__/index-test.js

@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('components/ListView', () => {
-  test('NO TEST COVERAGE');
-});

packages/react-native-web/src/exports/NetInfo/__tests__/index-test.js

@@ -37,6 +37,15 @@ describe('apis/NetInfo', () => {
       } catch (e) {}
     });
 
+    describe('fetch', () => {
+      test('returns a boolean', done => {
+        NetInfo.isConnected.fetch().then(isConnected => {
+          expect(isConnected).toBe(true);
+          done();
+        });
+      });
+    });
+
     describe('addEventListener', () => {
       test('throws if the provided "eventType" is not supported', () => {
         expect(() => NetInfo.isConnected.addEventListener('foo', handler)).toThrow();

packages/react-native-web/src/exports/NetInfo/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule NetInfo
  * @flow
  */
 
@@ -156,11 +155,6 @@ const NetInfo = {
     },
 
     fetch(): Promise<boolean> {
-      console.warn('`fetch` is deprecated. Use `getConnectionInfo` instead.');
-      return NetInfo.isConnected.getConnectionInfo();
-    },
-
-    getConnectionInfo(): Promise<boolean> {
       return new Promise((resolve, reject) => {
         try {
           resolve(window.navigator.onLine);

packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap

@@ -11,6 +11,7 @@ exports[`components/Picker prop "children" items 1`] = `
 exports[`components/Picker prop "children" renders items 1`] = `
 <select
   className="rn-fontFamily-14xgk7a rn-fontSize-7cikom rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw"
+  data-focusable={true}
   onChange={[Function]}
 >
   <PickerItem

packages/react-native-web/src/exports/Picker/__tests__/index-test.js

@@ -33,7 +33,7 @@ describe('components/Picker', () => {
         </Picker>
       );
       const component = shallow(picker);
-      expect(component.find('select').props().disabled).toBe(true);
+      expect(component.find('select').prop('disabled')).toBe(true);
     });
   });
 

packages/react-native-web/src/exports/Picker/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Picker
  * @flow
  */
 

packages/react-native-web/src/exports/PixelRatio/__tests__/index-test.js

@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('apis/PixelRatio', () => {
-  test.skip('NO TEST COVERAGE', () => {});
-});

packages/react-native-web/src/exports/PixelRatio/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule PixelRatio
  * @flow
  */
 

packages/react-native-web/src/exports/Platform/__tests__/index-test.js

@@ -0,0 +1,17 @@
+/* eslint-env jasmine, jest */
+
+import Platform from '../';
+
+describe('apis/Platform', () => {
+  describe('select', () => {
+    test('supports "default"', () => {
+      expect(Platform.select({ default: 'default' })).toEqual('default');
+    });
+
+    test('chooses "web"', () => {
+      expect(
+        Platform.select({ android: 'android', ios: 'ios', web: 'web', default: 'default' })
+      ).toEqual('web');
+    });
+  });
+});

packages/react-native-web/src/exports/Platform/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Platform
  * @flow
  */
 

packages/react-native-web/src/exports/PointPropType/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule PointPropType
  * @flow
  */
 

packages/react-native-web/src/exports/ProgressBar/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule ProgressBar
  * @flow
  */
 

packages/react-native-web/src/exports/RefreshControl/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule RefreshControl
  * @flow
  */
 

packages/react-native-web/src/exports/SafeAreaView/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule SafeAreaView
  * @flow
  */
 

packages/react-native-web/src/exports/ScrollView/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule ScrollView
  * @noflow
  */
 

packages/react-native-web/src/exports/StatusBar/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule StatusBar
  * @flow
  */
 

packages/react-native-web/src/exports/StyleSheet/StyleSheet.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule StyleSheet
  * @noflow
  */
 

packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js

@@ -69,10 +69,6 @@ export default class StyleSheetManager {
     return className;
   }
 
-  injectKeyframe(): string {
-    // return identifier;
-  }
-
   _addToCache(className, prop, value) {
     const cache = this._cache;
     if (!cache.byProp[prop]) {

packages/react-native-web/src/exports/StyleSheet/StyleSheetValidation.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule StyleSheetValidation
  * @flow
  */
 
@@ -104,5 +103,6 @@ StyleSheetValidation.addValidStylePropTypes({
   pointerEvents: string,
   tableLayout: string,
   /* @private */
-  MozAppearance: string
+  MozAppearance: string,
+  WebkitAppearance: string
 });

packages/react-native-web/src/exports/StyleSheet/WebStyleSheet.js

@@ -8,6 +8,7 @@
  */
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import modality from './modality';
 
 export default class WebStyleSheet {
   _cssRules = [];
@@ -29,6 +30,7 @@ export default class WebStyleSheet {
       }
 
       if (domStyleElement) {
+        modality(domStyleElement);
         // $FlowFixMe
         this._sheet = domStyleElement.sheet;
         this._textContent = domStyleElement.textContent;

packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js

@@ -60,44 +60,44 @@ describe('StyleSheet/createReactDOMStyle', () => {
     test('flex defaults', () => {
       expect(createReactDOMStyle({ display: 'flex' })).toEqual({
         display: 'flex',
-        flexShrink: '0 !important',
-        flexBasis: 'auto !important'
+        flexShrink: 0,
+        flexBasis: 'auto'
       });
     });
 
     test('flex: -1', () => {
       expect(createReactDOMStyle({ display: 'flex', flex: -1 })).toEqual({
         display: 'flex',
-        flexGrow: '0 !important',
-        flexShrink: '1 !important',
-        flexBasis: 'auto !important'
+        flexGrow: 0,
+        flexShrink: 1,
+        flexBasis: 'auto'
       });
     });
 
     test('flex: 0', () => {
       expect(createReactDOMStyle({ display: 'flex', flex: 0 })).toEqual({
         display: 'flex',
-        flexGrow: '0 !important',
-        flexShrink: '0 !important',
-        flexBasis: 'auto !important'
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: '0%'
       });
     });
 
     test('flex: 1', () => {
       expect(createReactDOMStyle({ display: 'flex', flex: 1 })).toEqual({
         display: 'flex',
-        flex: 1,
-        flexGrow: '1 !important',
-        flexShrink: '1 !important'
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: '0%'
       });
     });
 
     test('flex: 10', () => {
       expect(createReactDOMStyle({ display: 'flex', flex: 10 })).toEqual({
         display: 'flex',
-        flex: 10,
-        flexGrow: '10 !important',
-        flexShrink: '1 !important'
+        flexGrow: 10,
+        flexShrink: 1,
+        flexBasis: '0%'
       });
     });
 
@@ -105,17 +105,16 @@ describe('StyleSheet/createReactDOMStyle', () => {
       // is flex-basis applied?
       expect(createReactDOMStyle({ display: 'flex', flexBasis: '25%' })).toEqual({
         display: 'flex',
-        flexShrink: '0 !important',
-        flexBasis: '25% !important'
+        flexShrink: 0,
+        flexBasis: '25%'
       });
 
       // can flex-basis override the 'flex' expansion?
       expect(createReactDOMStyle({ display: 'flex', flex: 1, flexBasis: '25%' })).toEqual({
         display: 'flex',
-        flex: 1,
-        flexGrow: '1 !important',
-        flexShrink: '1 !important',
-        flexBasis: '25% !important'
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: '25%'
       });
     });
 
@@ -123,16 +122,16 @@ describe('StyleSheet/createReactDOMStyle', () => {
       // is flex-shrink applied?
       expect(createReactDOMStyle({ display: 'flex', flexShrink: 1 })).toEqual({
         display: 'flex',
-        flexShrink: '1 !important',
-        flexBasis: 'auto !important'
+        flexShrink: 1,
+        flexBasis: 'auto'
       });
 
       // can flex-shrink override the 'flex' expansion?
       expect(createReactDOMStyle({ display: 'flex', flex: 1, flexShrink: 2 })).toEqual({
         display: 'flex',
-        flex: 1,
-        flexGrow: '1 !important',
-        flexShrink: '2 !important'
+        flexGrow: 1,
+        flexShrink: 2,
+        flexBasis: '0%'
       });
     });
   });

packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js

@@ -186,10 +186,10 @@ const createReducer = (style, styleProps) => {
         // set only if there is no otherwise supplied flex style.
         if (style.display === 'flex' && style.flex == null) {
           if (style.flexShrink == null) {
-            resolvedStyle.flexShrink = '0 !important';
+            resolvedStyle.flexShrink = 0;
           }
           if (style.flexBasis == null) {
-            resolvedStyle.flexBasis = 'auto !important';
+            resolvedStyle.flexBasis = 'auto';
           }
         }
         break;
@@ -197,41 +197,19 @@ const createReducer = (style, styleProps) => {
 
       // The 'flex' property value in React Native must be a positive integer,
       // 0, or -1.
-      //
-      // On the web, a positive integer value for 'flex' is complicated by
-      // browser differences. Although browsers render styles like 'flex:2'
-      // consistently, they don't all set the same value for the resulting
-      // 'flexBasis' (See #616). Expanding 'flex' in 'StyleSheet' would mean
-      // setting different values for different browsers.
-      //
-      // This fix instead relies on the browser expanding 'flex' itself. And
-      // because the 'flex' style is not being expanded the generated CSS is
-      // likely to contain source order "conflicts". To avoid the browser
-      // relying on source order to resolve the styles, all the longhand flex
-      // property values must use '!important'.
       case 'flex': {
         if (value > 0) {
-          resolvedStyle.flex = value;
-          resolvedStyle.flexGrow = `${value} !important`;
-          resolvedStyle.flexShrink = '1 !important';
+          resolvedStyle.flexGrow = value;
+          resolvedStyle.flexShrink = 1;
+          resolvedStyle.flexBasis = '0%';
         } else if (value === 0) {
-          resolvedStyle.flexGrow = '0 !important';
-          resolvedStyle.flexShrink = '0 !important';
-          resolvedStyle.flexBasis = 'auto !important';
+          resolvedStyle.flexGrow = 0;
+          resolvedStyle.flexShrink = 0;
+          resolvedStyle.flexBasis = '0%';
         } else if (value === -1) {
-          resolvedStyle.flexGrow = '0 !important';
-          resolvedStyle.flexShrink = '1 !important';
-          resolvedStyle.flexBasis = 'auto !important';
-        }
-        break;
-      }
-
-      case 'flexGrow':
-      case 'flexShrink':
-      case 'flexBasis': {
-        if (value != null) {
-          const hasImportant = `${value}`.indexOf('!important') > -1;
-          resolvedStyle[prop] = hasImportant ? value : `${value} !important`;
+          resolvedStyle.flexGrow = 0;
+          resolvedStyle.flexShrink = 1;
+          resolvedStyle.flexBasis = 'auto';
         }
         break;
       }

packages/react-native-web/src/exports/StyleSheet/flattenStyle.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule flattenStyle
  * @flow
  */
 

packages/react-native-web/src/exports/StyleSheet/index.js

@@ -1,9 +1,5 @@
-import modality from '../../modules/modality';
 import StyleSheet from './StyleSheet';
 
-// initialize focus-ring fix
-modality();
-
 // allow component styles to be editable in React Dev Tools
 if (process.env.NODE_ENV !== 'production') {
   const { canUseDOM } = require('fbjs/lib/ExecutionEnvironment');

packages/react-native-web/src/exports/StyleSheet/modality.js

@@ -18,12 +18,14 @@
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 
-const modality = () => {
+const rule = ':focus { outline: none; }';
+let ruleExists = false;
+
+const modality = styleElement => {
   if (!canUseDOM) {
     return;
   }
 
-  let styleElement;
   let hadKeyboardEvent = false;
   let keyboardThrottleTimeoutID = 0;
 
@@ -55,21 +57,6 @@ const modality = () => {
     '[role=textbox]'
   ].join(',');
 
-  /**
-   * Disable the focus ring by default
-   */
-  const initialize = () => {
-    // check if the style sheet needs to be created
-    const id = 'react-native-modality';
-    styleElement = document.getElementById(id);
-    if (!styleElement) {
-      // removes focus styles by default
-      const style = `<style id="${id}">:focus { outline: none; }</style>`;
-      document.head.insertAdjacentHTML('afterbegin', style);
-      styleElement = document.getElementById(id);
-    }
-  };
-
   /**
    * Computes whether the given element should automatically trigger the
    * `focus-ring`.
@@ -83,20 +70,22 @@ const modality = () => {
   };
 
   /**
-   * Add the focus ring to the focused element
+   * Add the focus ring style
    */
   const addFocusRing = () => {
-    if (styleElement) {
-      styleElement.disabled = true;
+    if (styleElement && ruleExists) {
+      styleElement.sheet.deleteRule(0);
+      ruleExists = false;
     }
   };
 
   /**
-   * Remove the focus ring
+   * Remove the focus ring style
    */
   const removeFocusRing = () => {
-    if (styleElement) {
-      styleElement.disabled = false;
+    if (styleElement && !ruleExists) {
+      styleElement.sheet.insertRule(rule, 0);
+      ruleExists = true;
     }
   };
 
@@ -136,7 +125,7 @@ const modality = () => {
   };
 
   if (document.body && document.body.addEventListener) {
-    initialize();
+    removeFocusRing();
     document.body.addEventListener('keydown', handleKeyDown, true);
     document.body.addEventListener('focus', handleFocus, true);
     document.body.addEventListener('blur', handleBlur, true);

packages/react-native-web/src/exports/Switch/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Switch
  * @flow
  */
 

packages/react-native-web/src/exports/Text/TextPropTypes.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule TextPropTypes
  * @flow
  */
 

packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap

@@ -3,6 +3,7 @@
 exports[`components/Text prop "onPress" 1`] = `
 <div
   className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-1loqt21 rn-display-1471scf rn-fontFamily-14xgk7a rn-fontSize-1b43r93 rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640 rn-lineHeight-t9a87b 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"
+  data-focusable={true}
   dir="auto"
   onClick={[Function]}
   onKeyDown={[Function]}

packages/react-native-web/src/exports/Text/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Text
  * @flow
  */
 

packages/react-native-web/src/exports/TextInput/__tests__/index-test.js

@@ -17,34 +17,46 @@ const testIfDocumentIsFocused = (message, fn) => {
 };
 
 describe('components/TextInput', () => {
-  test('prop "autoComplete"', () => {
-    // on
-    let input = findNativeInput(shallow(<TextInput />));
-    expect(input.prop('autoComplete')).toEqual('on');
-    // off
-    input = findNativeInput(shallow(<TextInput autoComplete="off" />));
-    expect(input.prop('autoComplete')).toEqual('off');
+  describe('prop "autoComplete"', () => {
+    test('value "on"', () => {
+      const input = findNativeInput(shallow(<TextInput />));
+      expect(input.prop('autoComplete')).toEqual('on');
+    });
+
+    test('value "off"', () => {
+      const input = findNativeInput(shallow(<TextInput autoComplete="off" />));
+      expect(input.prop('autoComplete')).toEqual('off');
+    });
   });
 
-  test('prop "autoFocus"', () => {
-    // false
-    let input = findNativeInput(mount(<TextInput />));
-    expect(input.prop('autoFocus')).toEqual(undefined);
-    // true
-    input = findNativeInput(mount(<TextInput autoFocus />));
-    expect(input.prop('autoFocus')).toEqual(true);
+  describe('prop "autoFocus"', () => {
+    test('value "false"', () => {
+      const input = findNativeInput(shallow(<TextInput />));
+      expect(input.prop('autoFocus')).toEqual(undefined);
+    });
+
+    test('value "true"', () => {
+      const input = findNativeInput(shallow(<TextInput autoFocus />));
+      expect(input.prop('autoFocus')).toEqual(true);
+    });
   });
 
-  testIfDocumentIsFocused('prop "clearTextOnFocus"', () => {
+  describe('prop "clearTextOnFocus"', () => {
     const defaultValue = 'defaultValue';
-    // false
-    let input = findNativeInput(mount(<TextInput defaultValue={defaultValue} />));
-    input.simulate('focus');
-    expect(input.node.value).toEqual(defaultValue);
-    // true
-    input = findNativeInput(mount(<TextInput clearTextOnFocus defaultValue={defaultValue} />));
-    input.simulate('focus');
-    expect(input.node.value).toEqual('');
+
+    testIfDocumentIsFocused('value "false"', () => {
+      const input = findNativeInput(shallow(<TextInput defaultValue={defaultValue} />));
+      input.simulate('focus');
+      expect(input.node.value).toEqual(defaultValue);
+    });
+
+    testIfDocumentIsFocused('value "true"', () => {
+      const input = findNativeInput(
+        shallow(<TextInput clearTextOnFocus defaultValue={defaultValue} />)
+      );
+      input.simulate('focus');
+      expect(input.node.value).toEqual('');
+    });
   });
 
   test('prop "defaultValue"', () => {
@@ -53,33 +65,45 @@ describe('components/TextInput', () => {
     expect(input.prop('defaultValue')).toEqual(defaultValue);
   });
 
-  test('prop "editable"', () => {
-    // true
-    let input = findNativeInput(shallow(<TextInput />));
-    expect(input.prop('readOnly')).toEqual(false);
-    // false
-    input = findNativeInput(shallow(<TextInput editable={false} />));
-    expect(input.prop('readOnly')).toEqual(true);
+  describe('prop "editable"', () => {
+    test('value "true"', () => {
+      const input = findNativeInput(shallow(<TextInput />));
+      expect(input.prop('readOnly')).toEqual(false);
+    });
+
+    test('value "false"', () => {
+      const input = findNativeInput(shallow(<TextInput editable={false} />));
+      expect(input.prop('readOnly')).toEqual(true);
+    });
   });
 
-  test('prop "keyboardType"', () => {
-    // default
-    let input = findNativeInput(shallow(<TextInput />));
-    expect(input.prop('type')).toEqual('text');
-    input = findNativeInput(shallow(<TextInput keyboardType="default" />));
-    expect(input.prop('type')).toEqual('text');
-    // email-address
-    input = findNativeInput(shallow(<TextInput keyboardType="email-address" />));
-    expect(input.prop('type')).toEqual('email');
-    // numeric
-    input = findNativeInput(shallow(<TextInput keyboardType="numeric" />));
-    expect(input.prop('type')).toEqual('number');
-    // phone-pad
-    input = findNativeInput(shallow(<TextInput keyboardType="phone-pad" />));
-    expect(input.prop('type')).toEqual('tel');
-    // url
-    input = findNativeInput(shallow(<TextInput keyboardType="url" />));
-    expect(input.prop('type')).toEqual('url');
+  describe('prop "keyboardType"', () => {
+    test('default value', () => {
+      let input = findNativeInput(shallow(<TextInput />));
+      expect(input.prop('type')).toEqual('text');
+      input = findNativeInput(shallow(<TextInput keyboardType="default" />));
+      expect(input.prop('type')).toEqual('text');
+    });
+
+    test('value "email-address"', () => {
+      const input = findNativeInput(shallow(<TextInput keyboardType="email-address" />));
+      expect(input.prop('type')).toEqual('email');
+    });
+
+    test('value "numeric"', () => {
+      const input = findNativeInput(shallow(<TextInput keyboardType="numeric" />));
+      expect(input.prop('type')).toEqual('number');
+    });
+
+    test('value "phone-pad"', () => {
+      const input = findNativeInput(shallow(<TextInput keyboardType="phone-pad" />));
+      expect(input.prop('type')).toEqual('tel');
+    });
+
+    test('value "url"', () => {
+      const input = findNativeInput(shallow(<TextInput keyboardType="url" />));
+      expect(input.prop('type')).toEqual('url');
+    });
   });
 
   test('prop "maxLength"', () => {
@@ -89,25 +113,28 @@ describe('components/TextInput', () => {
     expect(input.prop('maxLength')).toEqual(10);
   });
 
-  test('prop "multiline"', () => {
-    // false
-    let input = findNativeInput(shallow(<TextInput />));
-    expect(input.length).toEqual(1);
-    // true
-    input = findNativeTextarea(shallow(<TextInput multiline />));
-    expect(input.length).toEqual(1);
+  describe('prop "multiline"', () => {
+    test('value "false"', () => {
+      const input = findNativeInput(shallow(<TextInput />));
+      expect(input.length).toEqual(1);
+    });
+
+    test('value "true"', () => {
+      const input = findNativeTextarea(shallow(<TextInput multiline />));
+      expect(input.length).toEqual(1);
+    });
   });
 
-  test('prop "numberOfLines"', () => {
-    // missing multiline
-    let input = findNativeInput(shallow(<TextInput numberOfLines={2} />));
-    expect(input.length).toEqual(1);
-    // with multiline
-    input = findNativeTextarea(shallow(<TextInput multiline numberOfLines={2} />));
-    expect(input.length).toEqual(1);
+  describe('prop "numberOfLines"', () => {
+    test('without "multiline"', () => {
+      const input = findNativeInput(shallow(<TextInput numberOfLines={2} />));
+      expect(input.length).toEqual(1);
+    });
 
-    input = findNativeTextarea(shallow(<TextInput multiline numberOfLines={3} />));
-    expect(input.prop('rows')).toEqual(3);
+    test('with "multiline"', () => {
+      const input = findNativeTextarea(shallow(<TextInput multiline numberOfLines={3} />));
+      expect(input.prop('rows')).toEqual(3);
+    });
   });
 
   test('prop "onBlur"', () => {
@@ -339,7 +366,7 @@ describe('components/TextInput', () => {
       expect(onSubmitEditing).not.toHaveBeenCalled();
     });
 
-    test('multi-line input with "blurOnSubmit" triggers onSubmitEditing', () => {
+    test('multi-line input with "blurOnSubmit" triggers "onSubmitEditing"', () => {
       const onSubmitEditing = jest.fn();
       const input = findNativeTextarea(
         mount(
@@ -368,18 +395,20 @@ describe('components/TextInput', () => {
     expect(input.prop('type')).toEqual(undefined);
   });
 
-  testIfDocumentIsFocused('prop "selectTextOnFocus"', () => {
-    const text = 'Text';
-    // false
-    let input = findNativeInput(mount(<TextInput defaultValue={text} />));
-    input.node.focus();
-    expect(input.node.selectionEnd).toEqual(4);
-    expect(input.node.selectionStart).toEqual(4);
-    // true
-    input = findNativeInput(mount(<TextInput defaultValue={text} selectTextOnFocus />));
+  describe('prop "selectTextOnFocus"', () => {
+    testIfDocumentIsFocused('value "false"', () => {
+      const input = findNativeInput(mount(<TextInput defaultValue={'text'} />));
+      input.node.focus();
+      expect(input.node.selectionEnd).toEqual(4);
+      expect(input.node.selectionStart).toEqual(4);
+    });
+
+    // testIfDocumentIsFocused('value "true"', () => {
+    // const input = findNativeInput(mount(<TextInput defaultValue={'text'} selectTextOnFocus />));
     // input.node.focus()
     // assert.equal(input.node.selectionEnd, 4)
     // assert.equal(input.node.selectionStart, 0)
+    // });
   });
 
   describe('prop "selection"', () => {
@@ -401,15 +430,21 @@ describe('components/TextInput', () => {
     });
   });
 
-  test('prop "spellCheck"', () => {
-    // default (inherets from autoCorrect)
-    let input = findNativeInput(shallow(<TextInput />));
-    expect(input.prop('spellCheck')).toEqual(true);
-    input = findNativeInput(shallow(<TextInput autoCorrect={false} />));
-    expect(input.prop('spellCheck')).toEqual(false);
-    // false
-    input = findNativeInput(shallow(<TextInput spellCheck={false} />));
-    expect(input.prop('spellCheck')).toEqual(false);
+  describe('prop "spellCheck"', () => {
+    test('default value', () => {
+      const input = findNativeInput(shallow(<TextInput />));
+      expect(input.prop('spellCheck')).toEqual(true);
+    });
+
+    test('inherit from "autoCorrect"', () => {
+      const input = findNativeInput(shallow(<TextInput autoCorrect={false} />));
+      expect(input.prop('spellCheck')).toEqual(false);
+    });
+
+    test('value "false"', () => {
+      const input = findNativeInput(shallow(<TextInput spellCheck={false} />));
+      expect(input.prop('spellCheck')).toEqual(false);
+    });
   });
 
   test('prop "value"', () => {

packages/react-native-web/src/exports/TextInput/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule TextInput
  * @flow
  */
 
@@ -409,7 +408,7 @@ class TextInput extends Component<*> {
 const styles = StyleSheet.create({
   initial: {
     MozAppearance: 'textfield',
-    appearance: 'none',
+    WebkitAppearance: 'none',
     backgroundColor: 'transparent',
     borderColor: 'black',
     borderRadius: 0,

packages/react-native-web/src/exports/Touchable/ensurePositiveDelayProps.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule ensurePositiveDelayProps
  * @flow
  */
 

packages/react-native-web/src/exports/Touchable/index.js

@@ -7,7 +7,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Touchable
  * @flow
  */
 

packages/react-native-web/src/exports/TouchableHighlight/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule TouchableHighlight
  * @noflow
  */
 

packages/react-native-web/src/exports/TouchableOpacity/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule TouchableOpacity
  * @noflow
  */
 

packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule TouchableWithoutFeedback
  * @flow
  */
 

packages/react-native-web/src/exports/UIManager/__tests__/index-test.js

@@ -2,7 +2,7 @@
 
 import UIManager from '..';
 
-const createNode = (style = {}) => {
+const createStyledNode = (style = {}) => {
   const root = document.createElement('div');
   Object.keys(style).forEach(prop => {
     root.style[prop] = style[prop];
@@ -10,24 +10,24 @@ const createNode = (style = {}) => {
   return root;
 };
 
+const componentStub = {
+  _reactInternalInstance: {
+    _currentElement: { _owner: {} },
+    _debugID: 1
+  }
+};
+
 describe('apis/UIManager', () => {
   describe('updateView', () => {
-    const componentStub = {
-      _reactInternalInstance: {
-        _currentElement: { _owner: {} },
-        _debugID: 1
-      }
-    };
-
     test('supports className alias for class', () => {
-      const node = createNode();
+      const node = createStyledNode();
       const props = { className: 'extra' };
       UIManager.updateView(node, props, componentStub);
       expect(node.getAttribute('class')).toEqual('extra');
     });
 
     test('adds correct DOM styles to existing style', () => {
-      const node = createNode({ color: 'red' });
+      const node = createStyledNode({ color: 'red' });
       const props = { style: { marginTop: 0, marginBottom: 0, opacity: 0 } };
       UIManager.updateView(node, props, componentStub);
       expect(node.getAttribute('style')).toEqual(
@@ -36,7 +36,7 @@ describe('apis/UIManager', () => {
     });
 
     test('replaces input and textarea text', () => {
-      const node = createNode();
+      const node = createStyledNode();
       node.value = 'initial';
       const textProp = { text: 'expected-text' };
       const valueProp = { value: 'expected-value' };
@@ -49,7 +49,7 @@ describe('apis/UIManager', () => {
     });
 
     test('sets other attribute values', () => {
-      const node = createNode();
+      const node = createStyledNode();
       const props = { 'aria-level': '4', 'data-of-type': 'string' };
       UIManager.updateView(node, props);
       expect(node.getAttribute('aria-level')).toEqual('4');

packages/react-native-web/src/exports/UIManager/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule UIManager
  * @noflow
  */
 

packages/react-native-web/src/exports/Vibration/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule Vibration
  * @flow
  */
 

packages/react-native-web/src/exports/View/ViewPropTypes.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule ViewPropTypes
  * @flow
  */
 

packages/react-native-web/src/exports/View/index.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2015-present, Facebook, Inc.
  * All rights reserved.
  *
- * @providesModule View
  * @flow
  */
 

packages/react-native-web/src/exports/createElement/index.js

@@ -7,12 +7,18 @@
  * @noflow
  */
 
-import '../../modules/injectResponderEventPlugin';
-
 import AccessibilityUtil from '../../modules/AccessibilityUtil';
 import createDOMProps from '../../modules/createDOMProps';
 import normalizeNativeEvent from '../../modules/normalizeNativeEvent';
 import React from 'react';
+import ReactDOM from 'react-dom';
+import ResponderEventPlugin from '../../modules/ResponderEventPlugin';
+
+const { EventPluginHub } = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+EventPluginHub.injection.injectEventPluginsByName({
+  ResponderEventPlugin
+});
 
 /**
  * Ensure event handlers receive an event of the expected shape. The 'button'
@@ -46,17 +52,6 @@ const adjustProps = domProps => {
     if (isEventHandler) {
       if (isButtonRole && isDisabled) {
         domProps[propName] = undefined;
-      } else if (propName === 'onResponderRelease') {
-        // Browsers fire mouse events after touch events. This causes the
-        // 'onResponderRelease' handler to be called twice for Touchables.
-        // Auto-fix this issue by calling 'preventDefault' to cancel the mouse
-        // events.
-        domProps[propName] = e => {
-          if (e.cancelable && !e.isDefaultPrevented()) {
-            e.preventDefault();
-          }
-          return prop(e);
-        };
       } else {
         // TODO: move this out of the render path
         domProps[propName] = e => {

packages/react-native-web/src/exports/findNodeHandle/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule findNodeHandle
  * @noflow
  */
 

packages/react-native-web/src/exports/processColor/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule processColor
  * @flow
  */
 

packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToTabIndex-test.js

@@ -1,116 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import propsToTabIndex from '../propsToTabIndex';
-
-describe('modules/AccessibilityUtil/propsToTabIndex', () => {
-  test('with no accessibility props', () => {
-    expect(propsToTabIndex({})).toBeUndefined();
-  });
-
-  describe('"accessibilityRole" of "link"', () => {
-    const accessibilityRole = 'link';
-
-    test('default case', () => {
-      expect(propsToTabIndex({ accessibilityRole })).toBeUndefined();
-    });
-
-    test('when "accessible" is true', () => {
-      expect(propsToTabIndex({ accessibilityRole, accessible: true })).toBeUndefined();
-    });
-
-    test('when "accessible" is false', () => {
-      expect(propsToTabIndex({ accessibilityRole, accessible: false })).toEqual('-1');
-    });
-
-    test('when "disabled" is true', () => {
-      expect(propsToTabIndex({ accessibilityRole, disabled: true })).toEqual('-1');
-      expect(propsToTabIndex({ accessibilityRole, 'aria-disabled': true })).toEqual('-1');
-    });
-
-    test('when "disabled" is false', () => {
-      expect(propsToTabIndex({ accessibilityRole, disabled: false })).toBeUndefined();
-      expect(propsToTabIndex({ accessibilityRole, 'aria-disabled': false })).toBeUndefined();
-    });
-
-    test('when "importantForAccessibility" is "no"', () => {
-      expect(propsToTabIndex({ accessibilityRole, importantForAccessibility: 'no' })).toEqual('-1');
-    });
-
-    test('when "importantForAccessibility" is "no-hide-descendants"', () => {
-      expect(
-        propsToTabIndex({
-          accessibilityRole,
-          importantForAccessibility: 'no-hide-descendants'
-        })
-      ).toEqual('-1');
-    });
-  });
-
-  describe('"accessibilityRole" of "button"', () => {
-    const accessibilityRole = 'button';
-
-    test('default case', () => {
-      expect(propsToTabIndex({ accessibilityRole })).toEqual('0');
-    });
-
-    test('when "accessible" is true', () => {
-      expect(propsToTabIndex({ accessibilityRole, accessible: true })).toEqual('0');
-    });
-
-    test('when "accessible" is false', () => {
-      expect(propsToTabIndex({ accessibilityRole, accessible: false })).toBeUndefined();
-    });
-
-    test('when "disabled" is true', () => {
-      expect(propsToTabIndex({ accessibilityRole, disabled: true })).toBeUndefined();
-      expect(propsToTabIndex({ accessibilityRole, 'aria-disabled': true })).toBeUndefined();
-    });
-
-    test('when "disabled" is false', () => {
-      expect(propsToTabIndex({ accessibilityRole, disabled: false })).toEqual('0');
-      expect(propsToTabIndex({ accessibilityRole, 'aria-disabled': false })).toEqual('0');
-    });
-
-    test('when "importantForAccessibility" is "no"', () => {
-      expect(
-        propsToTabIndex({ accessibilityRole, importantForAccessibility: 'no' })
-      ).toBeUndefined();
-    });
-
-    test('when "importantForAccessibility" is "no-hide-descendants"', () => {
-      expect(
-        propsToTabIndex({
-          accessibilityRole,
-          importantForAccessibility: 'no-hide-descendants'
-        })
-      ).toBeUndefined();
-    });
-  });
-
-  describe('with unfocusable accessibilityRole', () => {
-    test('default case', () => {
-      expect(propsToTabIndex({})).toBeUndefined();
-    });
-
-    test('when "accessible" is true', () => {
-      expect(propsToTabIndex({ accessible: true })).toEqual('0');
-    });
-
-    test('when "accessible" is false', () => {
-      expect(propsToTabIndex({ accessible: false })).toBeUndefined();
-    });
-
-    test('when "importantForAccessibility" is "no"', () => {
-      expect(propsToTabIndex({ importantForAccessibility: 'no' })).toBeUndefined();
-      expect(
-        propsToTabIndex({ accessible: true, importantForAccessibility: 'no' })
-      ).toBeUndefined();
-    });
-
-    test('when "importantForAccessibility" is "no-hide-descendants"', () => {
-      expect(
-        propsToTabIndex({ accessible: true, importantForAccessibility: 'no-hide-descendants' })
-      ).toBeUndefined();
-    });
-  });
-});

packages/react-native-web/src/modules/AccessibilityUtil/index.js

@@ -10,13 +10,11 @@
 import isDisabled from './isDisabled';
 import propsToAccessibilityComponent from './propsToAccessibilityComponent';
 import propsToAriaRole from './propsToAriaRole';
-import propsToTabIndex from './propsToTabIndex';
 
 const AccessibilityUtil = {
   isDisabled,
   propsToAccessibilityComponent,
-  propsToAriaRole,
-  propsToTabIndex
+  propsToAriaRole
 };
 
 export default AccessibilityUtil;

packages/react-native-web/src/modules/AccessibilityUtil/propsToTabIndex.js

@@ -1,37 +0,0 @@
-/**
- * Copyright (c) 2017-present, Nicolas Gallagher.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import isDisabled from './isDisabled';
-import propsToAriaRole from './propsToAriaRole';
-
-const propsToTabIndex = (props: Object) => {
-  const role = propsToAriaRole(props);
-  const focusable =
-    !isDisabled(props) &&
-    props.importantForAccessibility !== 'no' &&
-    props.importantForAccessibility !== 'no-hide-descendants';
-
-  // Assume that 'link' is focusable by default (uses <a>).
-  // Assume that 'button' is not (uses <div role='button'>) but must be treated as such.
-  if (role === 'link') {
-    if (props.accessible === false || !focusable) {
-      return '-1';
-    }
-  } else if (role === 'button') {
-    if (props.accessible !== false && focusable) {
-      return '0';
-    }
-  } else {
-    if (props.accessible === true && focusable) {
-      return '0';
-    }
-  }
-};
-
-export default propsToTabIndex;

packages/react-native-web/src/modules/AssetRegistry/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule AssetRegistry
  * @flow
  */
 

packages/react-native-web/src/modules/NativeEventEmitter/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule NativeEventEmitter
  * @noflow
  */
 'use strict';

packages/react-native-web/src/modules/NativeMethodsMixin/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule NativeMethodsMixin
  * @flow
  */
 

packages/react-native-web/src/modules/ReactNativePropRegistry/index.js

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule ReactNativePropRegistry
  * @flow
  */
 

packages/react-native-web/src/modules/ResponderEventPlugin/index.js

@@ -0,0 +1,85 @@
+// based on https://github.com/facebook/react/pull/4303/files
+
+import normalizeNativeEvent from '../normalizeNativeEvent';
+import ReactDOMUnstableNativeDependencies from 'react-dom/unstable-native-dependencies';
+
+const { ResponderEventPlugin, ResponderTouchHistoryStore } = ReactDOMUnstableNativeDependencies;
+
+// On older versions of React (< 16.4) we have to inject the dependencies in
+// order for the plugin to work properly in the browser. This version still
+// uses `top*` strings to identify the internal event names.
+// https://github.com/facebook/react/pull/12629
+if (!ResponderEventPlugin.eventTypes.responderMove.dependencies) {
+  const topMouseDown = 'topMouseDown';
+  const topMouseMove = 'topMouseMove';
+  const topMouseUp = 'topMouseUp';
+  const topScroll = 'topScroll';
+  const topSelectionChange = 'topSelectionChange';
+  const topTouchCancel = 'topTouchCancel';
+  const topTouchEnd = 'topTouchEnd';
+  const topTouchMove = 'topTouchMove';
+  const topTouchStart = 'topTouchStart';
+
+  const endDependencies = [topTouchCancel, topTouchEnd, topMouseUp];
+  const moveDependencies = [topTouchMove, topMouseMove];
+  const startDependencies = [topTouchStart, topMouseDown];
+
+  /**
+   * Setup ResponderEventPlugin dependencies
+   */
+  ResponderEventPlugin.eventTypes.responderMove.dependencies = moveDependencies;
+  ResponderEventPlugin.eventTypes.responderEnd.dependencies = endDependencies;
+  ResponderEventPlugin.eventTypes.responderStart.dependencies = startDependencies;
+  ResponderEventPlugin.eventTypes.responderRelease.dependencies = endDependencies;
+  ResponderEventPlugin.eventTypes.responderTerminationRequest.dependencies = [];
+  ResponderEventPlugin.eventTypes.responderGrant.dependencies = [];
+  ResponderEventPlugin.eventTypes.responderReject.dependencies = [];
+  ResponderEventPlugin.eventTypes.responderTerminate.dependencies = [];
+  ResponderEventPlugin.eventTypes.moveShouldSetResponder.dependencies = moveDependencies;
+  ResponderEventPlugin.eventTypes.selectionChangeShouldSetResponder.dependencies = [
+    topSelectionChange
+  ];
+  ResponderEventPlugin.eventTypes.scrollShouldSetResponder.dependencies = [topScroll];
+  ResponderEventPlugin.eventTypes.startShouldSetResponder.dependencies = startDependencies;
+}
+
+let lastActiveTouchTimestamp = null;
+
+const originalExtractEvents = ResponderEventPlugin.extractEvents;
+ResponderEventPlugin.extractEvents = (topLevelType, targetInst, nativeEvent, nativeEventTarget) => {
+  const hasActiveTouches = ResponderTouchHistoryStore.touchHistory.numberActiveTouches > 0;
+  const eventType = nativeEvent.type;
+
+  let shouldSkipMouseAfterTouch = false;
+  if (eventType.indexOf('touch') > -1) {
+    lastActiveTouchTimestamp = Date.now();
+  } else if (lastActiveTouchTimestamp && eventType.indexOf('mouse') > -1) {
+    const now = Date.now();
+    shouldSkipMouseAfterTouch = now - lastActiveTouchTimestamp < 250;
+  }
+
+  if (
+    // Filter out mousemove and mouseup events when a touch hasn't started yet
+    ((eventType === 'mousemove' || eventType === 'mouseup') && !hasActiveTouches) ||
+    // Filter out events from wheel/middle and right click.
+    (nativeEvent.button === 1 || nativeEvent.button === 2) ||
+    // Filter out mouse events that browsers dispatch immediately after touch events end
+    // Prevents the REP from calling handlers twice for touch interactions.
+    // See #802 and #932.
+    shouldSkipMouseAfterTouch
+  ) {
+    return;
+  }
+
+  const normalizedEvent = normalizeNativeEvent(nativeEvent);
+
+  return originalExtractEvents.call(
+    ResponderEventPlugin,
+    topLevelType,
+    targetInst,
+    normalizedEvent,
+    nativeEventTarget
+  );
+};
+
+export default ResponderEventPlugin;

packages/react-native-web/src/modules/ScrollResponder/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule ScrollResponder
  * @flow
  */
 

packages/react-native-web/src/modules/StaticContainer/__tests__/index-test.js

@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('components/StaticContainer', () => {
-  test.skip('NO TEST COVERAGE', () => {});
-});

packages/react-native-web/src/modules/StaticContainer/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule StaticContainer
  * @flow
  */
 

packages/react-native-web/src/modules/StaticRenderer/__tests__/index-test.js

@@ -1,5 +0,0 @@
-/* eslint-env jasmine, jest */
-
-describe('components/StaticRenderer', () => {
-  test.skip('NO TEST COVERAGE', () => {});
-});

packages/react-native-web/src/modules/StaticRenderer/index.js

@@ -5,7 +5,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @providesModule StaticRenderer
  * @flow
  */