0.0.128

[fix] cross-browser flex styles
Fix #616 Close #648
2026-03-30 23:23:35 +08:00 · 2017-09-20 09:45:25 -07:00 · 2017-09-19 15:44:10 -07:00 · 2017-09-19 15:23:09 -07:00 · 2017-09-19 15:12:13 -07:00 · 2017-09-19 15:07:54 -07:00
173 changed files with 2688 additions and 1678 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -56,7 +56,6 @@
    "no-dupe-class-members": 2,
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
-    "no-duplicate-imports": 2,
    "no-empty-character-class": 2,
    "no-empty-pattern": 2,
    "no-eval": 2,
--- a/README.md
+++ b/README.md
@@ -3,19 +3,23 @@
 [![Build Status][travis-image]][travis-url]
 [![npm version][npm-image]][npm-url]

-"React Native for Web" brings [React Native][react-native-url]'s
-building blocks and touch handling to the Web.
+"React Native for Web" brings the platform-agnostic Components and APIs of
+[React Native][react-native-url] to the Web.

-* [UI Explorer and documentation](https://necolas.github.io/react-native-web/storybook/).
-* [React Native for Web: Playground](https://glitch.com/edit/#!/react-native-web-playground) using create-react-app.
+Browse the [interactive
+documentation](https://necolas.github.io/react-native-web/storybook/) or [try
+it out](https://glitch.com/edit/#!/react-native-web-playground) on Glitch.

-Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
+## Features

-[npm-image]: https://badge.fury.io/js/react-native-web.svg
-[npm-url]: https://npmjs.org/package/react-native-web
-[react-native-url]: https://facebook.github.io/react-native/
-[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
-[travis-url]: https://travis-ci.org/necolas/react-native-web
+* Interoperability with ReactDOM components.
+* Native-like touch handling.
+* Built-in integration with web accessibility APIs.
+* Built-in support for LTR and RTL layouts.
+* Built-in expressive and reliable subset of CSS.
+* Optimized, vendor-prefixed CSS with [good runtime performance](benchmarks/README.md).
+* Server-side rendering of HTML and critical CSS.
+* Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.

 ## Quick start

@@ -27,12 +31,28 @@ Install in your existing app using `yarn` or `npm`:
 yarn add react@15.6 react-dom@15.6 react-native-web
 ```

-Then read the [Getting Started](docs/guides/getting-started.md) guide.
+Add the `react-native-web/babel` plugin to your Babel configuration. This will
+alias `react-native` to `react-native-web` and exclude any modules not required
+by the app.
+
+```json
+{
+  "plugins": [
+    "react-native-web/babel"
+  ],
+  "presets": [
+    "react-native"
+  ]
+}
+```
+
+See the [Getting Started](docs/guides/getting-started.md) guide for more details.

 ## Documentation

-The [UI Explorer](https://necolas.github.io/react-native-web/storybook/)
-interactively documents all the supported APIs and Components.
+The [interactive
+documentation](https://necolas.github.io/react-native-web/storybook/) shows all
+the supported APIs and Components.

 Guides:

@@ -46,7 +66,8 @@ Guides:

 ## Starter kits

-* [create-react-app](https://github.com/facebookincubator/create-react-app) ([on Glitch](https://glitch.com/edit/#!/react-native-web-playground))
+* [Glitch](https://glitch.com/edit/#!/react-native-web-playground)
+* [create-react-app](https://github.com/facebookincubator/create-react-app)
 * [react-native-web-starter](https://github.com/grabcode/react-native-web-starter)
 * [react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack)

@@ -99,3 +120,9 @@ AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-ro
 ## License

 React Native for Web is [BSD licensed](LICENSE).
+
+[npm-image]: https://badge.fury.io/js/react-native-web.svg
+[npm-url]: https://npmjs.org/package/react-native-web
+[react-native-url]: https://facebook.github.io/react-native/
+[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
+[travis-url]: https://travis-ci.org/necolas/react-native-web
--- a/babel/tests/snapshots/index-test.js.snap
+++ b/babel/tests/snapshots/index-test.js.snap
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`1. Rewrite react-native paths for react-native-web 1`] = `
+"
+import { View } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import View from 'react-native-web/dist/components/View';
+"
+`;
+
+exports[`2. Rewrite react-native paths for react-native-web 1`] = `
+"
+import { Switch, Text, View as MyView } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import Switch from 'react-native-web/dist/components/Switch';
+import Text from 'react-native-web/dist/components/Text';
+import MyView from 'react-native-web/dist/components/View';
+"
+`;
+
+exports[`3. Rewrite react-native paths for react-native-web 1`] = `
+"
+import { createElement, Switch, StyleSheet } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import createElement from 'react-native-web/dist/modules/createElement';
+import Switch from 'react-native-web/dist/components/Switch';
+import StyleSheet from 'react-native-web/dist/apis/StyleSheet';
+"
+`;
+
+exports[`4. Rewrite react-native paths for react-native-web 1`] = `
+"
+import { InvalidThing, TouchableOpacity } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { InvalidThing } from 'react-native-web';
+import TouchableOpacity from 'react-native-web/dist/components/Touchable/TouchableOpacity';
+"
+`;
+
+exports[`5. Rewrite react-native paths for react-native-web 1`] = `
+"
+import * as RNW from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import * as RNW from 'react-native-web';
+"
+`;
+
+exports[`6. Rewrite react-native paths for react-native-web 1`] = `
+"
+const { View } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const View = require('react-native-web/dist/components/View');
+"
+`;
+
+exports[`7. Rewrite react-native paths for react-native-web 1`] = `
+"
+let { Switch, Text, View: MyView } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+let Switch = require('react-native-web/dist/components/Switch');
+
+let Text = require('react-native-web/dist/components/Text');
+
+let MyView = require('react-native-web/dist/components/View');
+"
+`;
+
+exports[`8. Rewrite react-native paths for react-native-web 1`] = `
+"
+var { createElement, Switch, StyleSheet } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+var createElement = require('react-native-web/dist/modules/createElement');
+
+var Switch = require('react-native-web/dist/components/Switch');
+
+var StyleSheet = require('react-native-web/dist/apis/StyleSheet');
+"
+`;
+
+exports[`9. Rewrite react-native paths for react-native-web 1`] = `
+"
+const { InvalidThing, TouchableOpacity } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const TouchableOpacity = require('react-native-web/dist/components/Touchable/TouchableOpacity');
+"
+`;
--- a/babel/tests/index-test.js
+++ b/babel/tests/index-test.js
@@ -0,0 +1,39 @@
+const plugin = require('..');
+const pluginTester = require('babel-plugin-tester');
+
+pluginTester({
+  plugin,
+  snapshot: true,
+  tests: [
+    // import react-native
+    "import { View } from 'react-native';",
+    "import { Switch, Text, View as MyView } from 'react-native';",
+    "import { createElement, Switch, StyleSheet } from 'react-native';",
+    "import { InvalidThing, TouchableOpacity } from 'react-native';",
+    "import * as RNW from 'react-native';",
+
+    // import react-native-web
+    // "import { View } from 'react-native-web';",
+    // "import { Switch, Text, View as MyView } from 'react-native-web';",
+    // "import { createElement, Switch, StyleSheet } from 'react-native-web';",
+    // "import { InvalidThing, TouchableOpacity } from 'react-native-web';",
+    // "import * as RNW from 'react-native-web';",
+
+    // require react-native
+    "const { View } = require('react-native');",
+    "let { Switch, Text, View: MyView } = require('react-native');",
+    "var { createElement, Switch, StyleSheet } = require('react-native');",
+    "const { InvalidThing, TouchableOpacity } = require('react-native');",
+
+    // require react-native-web
+    // "const { View } = require('react-native-web');",
+    // "let { Switch, Text, View: MyView } = require('react-native-web');",
+    // "var { createElement, Switch, StyleSheet } = require('react-native-web');",
+    // "const { InvalidThing, TouchableOpacity } = require('react-native-web');",
+    {
+      code: "const RNW = require('react-native');",
+      output: "const RNW = require('react-native');",
+      snapshot: false
+    }
+  ]
+});
--- a/babel/index.js
+++ b/babel/index.js
@@ -0,0 +1,148 @@
+const getDistLocation = importName => {
+  const root = 'react-native-web/dist';
+
+  switch (importName) {
+    // apis
+    case 'Animated':
+    case 'AppRegistry':
+    case 'AppState':
+    case 'AsyncStorage':
+    case 'BackAndroid':
+    case 'Clipboard':
+    case 'Dimensions':
+    case 'Easing':
+    case 'I18nManager':
+    case 'InteractionManager':
+    case 'Keyboard':
+    case 'Linking':
+    case 'NetInfo':
+    case 'PanResponder':
+    case 'PixelRatio':
+    case 'Platform':
+    case 'StyleSheet':
+    case 'UIManager':
+    case 'Vibration': {
+      return `${root}/apis/${importName}`;
+    }
+
+    // components
+    case 'ActivityIndicator':
+    case 'Button':
+    case 'FlatList':
+    case 'Image':
+    case 'KeyboardAvoidingView':
+    case 'ListView':
+    case 'Modal':
+    case 'Picker':
+    case 'ProgressBar':
+    case 'RefreshControl':
+    case 'ScrollView':
+    case 'SectionList':
+    case 'Slider':
+    case 'StatusBar':
+    case 'Switch':
+    case 'Text':
+    case 'TextInput':
+    case 'View':
+    case 'VirtualizedList': {
+      return `${root}/components/${importName}`;
+    }
+
+    case 'Touchable':
+    case 'TouchableHighlight':
+    case 'TouchableNativeFeedback':
+    case 'TouchableOpacity':
+    case 'TouchableWithoutFeedback': {
+      return `${root}/components/Touchable/${importName}`;
+    }
+
+    // modules
+    case 'createElement':
+    case 'findNodeHandle':
+    case 'NativeModules':
+    case 'processColor':
+    case 'render':
+    case 'unmountComponentAtNode': {
+      return `${root}/modules/${importName}`;
+    }
+
+    // propTypes
+    case 'ColorPropType':
+    case 'EdgeInsetsPropType':
+    case 'PointPropType':
+    case 'TextPropTypes':
+    case 'ViewPropTypes': {
+      return `${root}/propTypes/${importName}`;
+    }
+
+    default:
+      return;
+  }
+};
+
+const isReactNativeRequire = (t, node) => {
+  const { declarations } = node;
+  if (declarations.length > 1) {
+    return false;
+  }
+  const { id, init } = declarations[0];
+  return (
+    t.isObjectPattern(id) &&
+    t.isCallExpression(init) &&
+    t.isIdentifier(init.callee) &&
+    init.callee.name === 'require' &&
+    init.arguments.length === 1 &&
+    init.arguments[0].value === 'react-native'
+  );
+};
+
+module.exports = function({ types: t }) {
+  return {
+    name: 'Rewrite react-native paths for react-native-web',
+    visitor: {
+      ImportDeclaration(path) {
+        const { source, specifiers } = path.node;
+        if (source.value === 'react-native' && specifiers.length) {
+          const imports = specifiers
+            .map(specifier => {
+              if (t.isImportSpecifier(specifier)) {
+                const importName = specifier.imported.name;
+                const distLocation = getDistLocation(importName);
+
+                if (distLocation) {
+                  return t.importDeclaration(
+                    [t.importDefaultSpecifier(t.identifier(specifier.local.name))],
+                    t.stringLiteral(distLocation)
+                  );
+                }
+              }
+              return t.importDeclaration([specifier], t.stringLiteral('react-native-web'));
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(imports);
+        }
+      },
+      VariableDeclaration(path) {
+        if (isReactNativeRequire(t, path.node)) {
+          const { id } = path.node.declarations[0];
+          const imports = id.properties
+            .map(identifier => {
+              const distLocation = getDistLocation(identifier.key.name);
+              if (distLocation) {
+                return t.variableDeclaration(path.node.kind, [
+                  t.variableDeclarator(
+                    t.identifier(identifier.value.name),
+                    t.callExpression(t.identifier('require'), [t.stringLiteral(distLocation)])
+                  )
+                ]);
+              }
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(imports);
+        }
+      }
+    }
+  };
+};
--- a/benchmarks/README.md
+++ b/benchmarks/README.md
@@ -27,24 +27,25 @@ Typical render timings*: mean ± two standard deviations.

 | Implementation                        | Deep tree (ms)    | Wide tree (ms)    | Tweets (ms)       |
 | :--- | ---: | ---: | ---: |
-| `css-modules`                         |  `84.19` `±14.69` | `183.37` `±22.98` | |
-| `react-native-web/stylesheet@0.0.113` |  `88.83` `±14.31` | `185.54` `±24.62` | |
-| `react-native-web@0.0.113`            | `110.45` `±19.63` | `251.53` `±32.52` | `15.52` `±7.93ms` |
+| `css-modules`                         |  `88.83` `±18.63` | `198.79` `±22.98` | |
+| `react-native-web/stylesheet@0.0.121` |  `91.17` `±19.29` | `209.67` `±32.38` | |
+| `react-native-web@0.0.121`            | `124.21` `±16.84` | `264.55` `±38.75` | `16.90` `±7.30ms` |

 Other libraries

 | Implementation                       | Deep tree (ms)    | Wide tree (ms)    |
 | :--- | ---: | ---: |
-| `aphrodite@1.2.3`                    |  `84.68` `±18.80` | `180.62` `±41.98` |
-| `styletron@2.5.1`                    |  `83.93` `±13.10` | `185.96` `±45.65` |
-| `react-jss@7.0.1`                    | `174.75` `±30.87` | `411.77` `±83.83` |
-| `glamor@3.0.0-3`                     | `255.21` `±45.68` | `545.74` `±107.79` |
-| `reactxp@0.34.3`                     | `237.46` `±36.72` | `514.48` `±84.87` |
-| `styled-components@2.1.1`            | `266.91` `±50.04` | `598.29` `±95.13` |
-| `styled-components/primitives@2.1.1` | `266.62` `±50.39` | `567.13` `±68.12` |
-| `radium@0.19.1`                      | `518.48` `±69.74` | `1058.85` `±120.85` |
+| `aphrodite@1.2.3`                    |  `91.73` `±41.63` | `197.72` `±44.90` |
+| `styletron@2.5.1`                    |  `94.73` `±37.58` | `201.81` `±57.93` |
+| `glamor@2.20.40`                     | `146.60` `±26.73` | `277.46` `±29.17` |
+| `emotion@7.2.2`                      | `150.79` `±38.29` | `282.18` `±41.79` |
+| `react-jss@7.1.0`                    | `201.83` `±34.65` | `428.61` `±47.8` |
+| `reactxp@0.42.1`                     | `262.69` `±24.14` | `595.20` `±66.17` |
+| `styled-components@2.1.2`            | `280.59` `±31.77` | `599.00` `±62.99` |
+| `styled-components/primitives@2.1.2` | `291.74` `±48.96` | `606.57` `±78.18` |
+| `radium@0.19.4`                      | `563.94` `±69.91` | `1139.18` `±152.59` |

-These results indicate that styled render performance is not a significant
+These results indicate that style render performance is not a significant
 differentiating factor between `aphrodite`, `css-modules`, `react-native-web`,
 and `styletron`.

--- a/benchmarks/index.js
+++ b/benchmarks/index.js
@@ -1,5 +1,6 @@
 import aphrodite from './src/aphrodite';
 import cssModules from './src/css-modules';
+import emotion from './src/emotion';
 import glamor from './src/glamor';
 import jss from './src/jss';
 import radium from './src/radium';
@@ -29,24 +30,26 @@ const coreTests = [
 ];

 const fastestTests = [
-  () => renderDeepTree('styletron', styletron),
-  () => renderWideTree('styletron', styletron),
  () => renderDeepTree('aphrodite', aphrodite),
-  () => renderWideTree('aphrodite', aphrodite)
+  () => renderWideTree('aphrodite', aphrodite),
+  () => renderDeepTree('styletron', styletron),
+  () => renderWideTree('styletron', styletron)
 ];

 /**
 * Optionally run tests using other libraries
 */
 const restTests = [
+  () => renderDeepTree('emotion', emotion),
+  () => renderWideTree('emotion', emotion),
  () => renderDeepTree('glamor', glamor),
  () => renderWideTree('glamor', glamor),
-  () => renderDeepTree('react-jss', jss),
-  () => renderWideTree('react-jss', jss),
  () => renderDeepTree('radium', radium),
  () => renderWideTree('radium', radium),
  () => renderDeepTree('reactxp', xp),
  () => renderWideTree('reactxp', xp),
+  () => renderDeepTree('react-jss', jss),
+  () => renderWideTree('react-jss', jss),
  () => renderDeepTree('styled-components', styledComponents),
  () => renderWideTree('styled-components', styledComponents),
  () => renderDeepTree('styled-components/primitives', styledComponentsPrimitives),
--- a/benchmarks/package.json
+++ b/benchmarks/package.json
@@ -4,19 +4,19 @@
  "dependencies": {
    "aphrodite": "^1.2.3",
    "classnames": "^2.2.5",
-    "glamor": "^2.20.37",
+    "emotion": "^7.2.2",
+    "glamor": "^2.20.40",
    "marky": "^1.2.0",
-    "radium": "^0.19.1",
-    "react-jss": "^7.0.1",
+    "radium": "^0.19.4",
+    "react-jss": "^7.1.0",
    "react-primitives": "^0.4.3",
-    "reactxp": "0.34.3",
-    "styled-components": "^2.1.1",
+    "reactxp": "^0.42.1",
+    "styled-components": "^2.1.2",
    "styletron-client": "^2.5.7",
    "styletron-utils": "^2.5.4"
  },
  "devDependencies": {
-    "css-loader": "^0.28.4",
-    "react-addons-perf": "^15.4.2",
+    "css-loader": "^0.28.7",
    "style-loader": "^0.18.2"
  }
 }
--- a/benchmarks/src/components/AspectRatio/index.js
+++ b/benchmarks/src/components/AspectRatio/index.js
@@ -22,9 +22,7 @@ class AspectRatio extends PureComponent {
    return (
      <View style={[styles.root, style]}>
        <View style={[styles.shim, { paddingBottom: `${percentage}%` }]} />
-        <View style={StyleSheet.absoluteFill}>
-          {children}
-        </View>
+        <View style={StyleSheet.absoluteFill}>{children}</View>
      </View>
    );
  }
--- a/benchmarks/src/components/Box/aphrodite.js
+++ b/benchmarks/src/components/Box/aphrodite.js
@@ -3,7 +3,7 @@ import React from 'react';
 import View from '../View/aphrodite';
 import { StyleSheet } from 'aphrodite';

-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
  <View
    {...other}
    style={[
@@ -12,7 +12,8 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
      layout === 'row' && styles.row,
      outer && styles.outer
    ]}
-  />;
+  />
+);

 const styles = StyleSheet.create({
  outer: {
--- a/benchmarks/src/components/Box/css-modules.js
+++ b/benchmarks/src/components/Box/css-modules.js
@@ -4,7 +4,7 @@ import React from 'react';
 import View from '../View/css-modules';
 import styles from './styles.css';

-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
  <View
    {...other}
    className={classnames(styles[`color${color}`], {
@@ -12,6 +12,7 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
      [styles.outer]: outer,
      [styles.row]: layout === 'row'
    })}
-  />;
+  />
+);

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

-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
  <View
    {...other}
    style={[
@@ -11,7 +11,8 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
      layout === 'row' && styles.row,
      outer && styles.outer
    ]}
-  />;
+  />
+);

 const styles = {
  outer: {
--- a/benchmarks/src/components/Box/jss.js
+++ b/benchmarks/src/components/Box/jss.js
@@ -4,7 +4,7 @@ import injectSheet from 'react-jss';
 import React from 'react';
 import View from '../View/jss';

-const Box = ({ classes, color, fixed = false, layout = 'column', outer = false, ...other }) =>
+const Box = ({ classes, color, fixed = false, layout = 'column', outer = false, ...other }) => (
  <View
    {...other}
    className={classnames({
@@ -13,7 +13,8 @@ const Box = ({ classes, color, fixed = false, layout = 'column', outer = false,
      [classes.row]: layout === 'row',
      [classes.outer]: outer
    })}
-  />;
+  />
+);

 const styles = {
  outer: {
--- a/benchmarks/src/components/Box/radium.js
+++ b/benchmarks/src/components/Box/radium.js
@@ -3,7 +3,7 @@ import Radium from 'radium';
 import React from 'react';
 import View from '../View/radium';

-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
  <View
    {...other}
    style={[
@@ -12,7 +12,8 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
      layout === 'row' && styles.row,
      outer && styles.outer
    ]}
-  />;
+  />
+);

 const styles = {
  outer: {
--- a/benchmarks/src/components/Box/react-native-stylesheet.js
+++ b/benchmarks/src/components/Box/react-native-stylesheet.js
@@ -3,7 +3,7 @@ import React from 'react';
 import StyleSheet from 'react-native/apis/StyleSheet';
 import View from '../View/react-native-stylesheet';

-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
  <View
    {...other}
    style={[
@@ -12,7 +12,8 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
      layout === 'row' && styles.row,
      outer && styles.outer
    ]}
-  />;
+  />
+);

 const styles = StyleSheet.create({
  outer: {
--- a/benchmarks/src/components/Box/react-native.js
+++ b/benchmarks/src/components/Box/react-native.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';

-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
  <View
    {...other}
    style={[
@@ -11,7 +11,8 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
      layout === 'row' && styles.row,
      outer && styles.outer
    ]}
-  />;
+  />
+);

 const styles = StyleSheet.create({
  outer: {
--- a/benchmarks/src/components/Box/reactxp.js
+++ b/benchmarks/src/components/Box/reactxp.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import { Styles, View } from 'reactxp';

-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
  <View
    {...other}
    style={[
@@ -11,7 +11,8 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
      layout === 'row' && styles.row,
      outer && styles.outer
    ]}
-  />;
+  />
+);

 const styles = {
  outer: Styles.createViewStyle({
--- a/benchmarks/src/components/Box/styletron.js
+++ b/benchmarks/src/components/Box/styletron.js
@@ -3,7 +3,7 @@ import { injectStylePrefixed } from 'styletron-utils';
 import React from 'react';
 import View, { styletron } from '../View/styletron';

-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) =>
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
  <View
    {...other}
    style={[
@@ -12,7 +12,8 @@ const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other
      layout === 'row' && styles.row,
      outer && styles.outer
    ]}
-  />;
+  />
+);

 const styles = {
  outer: injectStylePrefixed(styletron, {
--- a/benchmarks/src/components/Icons/DirectMessage.js
+++ b/benchmarks/src/components/Icons/DirectMessage.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';

 const IconDirectMessage = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
    children: (
      <g>
        <path d="M43.34 14H12.66L28 27.946z" />
--- a/benchmarks/src/components/Icons/Heart.js
+++ b/benchmarks/src/components/Icons/Heart.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';

 const IconHeart = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
    children: (
      <g>
        <path d="M38.723 12c-7.187 0-11.16 7.306-11.723 8.131C26.437 19.306 22.504 12 15.277 12 8.791 12 3.533 18.163 3.533 24.647 3.533 39.964 21.891 55.907 27 56c5.109-.093 23.467-16.036 23.467-31.353C50.467 18.163 45.209 12 38.723 12z" />
--- a/benchmarks/src/components/Icons/Reply.js
+++ b/benchmarks/src/components/Icons/Reply.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';

 const IconReply = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
    children: (
      <g>
        <path d="M41 31h-9V19a2.999 2.999 0 0 0-4.817-2.386l-21 16a3 3 0 0 0-.001 4.773l21 16a3.006 3.006 0 0 0 3.15.301A2.997 2.997 0 0 0 32 51V39h9c5.514 0 10 4.486 10 10a4 4 0 0 0 8 0c0-9.925-8.075-18-18-18z" />
--- a/benchmarks/src/components/Icons/Retweet.js
+++ b/benchmarks/src/components/Icons/Retweet.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';

 const IconRetweet = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
    children: (
      <g>
        <path d="M70.676 36.644A3 3 0 0 0 68 35h-7V19a4 4 0 0 0-4-4H34a4 4 0 0 0 0 8h18a1 1 0 0 1 1 .998V35h-7a3.001 3.001 0 0 0-2.419 4.775l11 15a3.003 3.003 0 0 0 4.839-.001l11-15a3.001 3.001 0 0 0 .256-3.13zM40.001 48H22a.995.995 0 0 1-.992-.96L21.001 36h7a3.001 3.001 0 0 0 2.419-4.775l-11-15a3.003 3.003 0 0 0-4.839.001l-11 15A3 3 0 0 0 6.001 36h7l.011 16.003a4 4 0 0 0 4 3.997h22.989a4 4 0 0 0 0-8z" />
--- a/benchmarks/src/components/NestedTree/index.js
+++ b/benchmarks/src/components/NestedTree/index.js
@@ -10,6 +10,24 @@ class DeepTree extends Component {
    wrap: PropTypes.number.isRequired
  };

+  /* necessary for reactxp to work without errors */
+  static childContextTypes = {
+    focusManager: PropTypes.object
+  };
+
+  getChildContext() {
+    return {
+      focusManager: {
+        addFocusableComponent() {},
+        removeFocusableComponent() {},
+        restrictFocusWithin() {},
+        removeFocusRestriction() {},
+        limitFocusWithin() {},
+        removeFocusLimitation() {}
+      }
+    };
+  }
+
  render() {
    const { breadth, components, depth, id, wrap } = this.props;
    const { Box } = components;
@@ -18,7 +36,7 @@ class DeepTree extends Component {
      <Box color={id % 3} components={components} layout={depth % 2 === 0 ? 'column' : 'row'} outer>
        {depth === 0 && <Box color={id % 3 + 3} components={components} fixed />}
        {depth !== 0 &&
-          Array.from({ length: breadth }).map((el, i) =>
+          Array.from({ length: breadth }).map((el, i) => (
            <DeepTree
              breadth={breadth}
              components={components}
@@ -27,15 +45,11 @@ class DeepTree extends Component {
              key={i}
              wrap={wrap}
            />
-          )}
+          ))}
      </Box>
    );
    for (let i = 0; i < wrap; i++) {
-      result = (
-        <Box components={components}>
-          {result}
-        </Box>
-      );
+      result = <Box components={components}>{result}</Box>;
    }
    return result;
  }
--- a/benchmarks/src/components/Tweet/index.js
+++ b/benchmarks/src/components/Tweet/index.js
@@ -51,17 +51,17 @@ export class Tweet extends Component {
                <TweetText displayMode={'links'} lang={lang} textParts={textParts} />
              </View>

-              {media
-                ? <View style={styles.richContent}>
-                    <AspectRatio ratio={16 / 9}>
-                      <Image
-                        resizeMode={Image.resizeMode.cover}
-                        source={media.source}
-                        style={styles.media}
-                      />
-                    </AspectRatio>
-                  </View>
-                : null}
+              {media ? (
+                <View style={styles.richContent}>
+                  <AspectRatio ratio={16 / 9}>
+                    <Image
+                      resizeMode={Image.resizeMode.cover}
+                      source={media.source}
+                      style={styles.media}
+                    />
+                  </AspectRatio>
+                </View>
+              ) : null}
            </View>

            <TweetActionsBar
--- a/benchmarks/src/components/TweetAction/index.js
+++ b/benchmarks/src/components/TweetAction/index.js
@@ -46,11 +46,7 @@ export default class TweetAction extends React.Component {
          ]}
        >
          {getIcon(displayMode, highlighted)}
-          {count > 0
-            ? <Text style={styles.count}>
-                {count}
-              </Text>
-            : null}
+          {count > 0 ? <Text style={styles.count}>{count}</Text> : null}
        </Text>
      </View>
    );
--- a/benchmarks/src/components/TweetActionsBar/index.js
+++ b/benchmarks/src/components/TweetActionsBar/index.js
@@ -25,7 +25,7 @@ export default class TweetActionsBar extends PureComponent {
    /* eslint-disable react/jsx-handler-names */
    return (
      <View style={[styles.root, style]}>
-        {actions.map((action, i) =>
+        {actions.map((action, i) => (
          <TweetAction
            accessibilityLabel={actions.label}
            count={action.count}
@@ -35,7 +35,7 @@ export default class TweetActionsBar extends PureComponent {
            onPress={action.onPress}
            style={styles.action}
          />
-        )}
+        ))}
      </View>
    );
  }
--- a/benchmarks/src/components/TweetText/index.js
+++ b/benchmarks/src/components/TweetText/index.js
@@ -18,9 +18,9 @@ class TweetText extends React.Component {

    return (
      <AppText {...other} lang={lang} numberOfLines={numberOfLines}>
-        {textParts.map((part, i) =>
+        {textParts.map((part, i) => (
          <TweetTextPart displayMode={displayMode} key={i} part={part} />
-        )}
+        ))}
      </AppText>
    );
  }
--- a/benchmarks/src/components/TweetTextPart/index.js
+++ b/benchmarks/src/components/TweetTextPart/index.js
@@ -6,13 +6,14 @@ import theme from '../theme';

 const createTextEntity = ({ part }) => <Text>{`${part.prefix}${part.text}`}</Text>;

-const createTwemojiEntity = ({ part }) =>
+const createTwemojiEntity = ({ part }) => (
  <Image
    accessibilityLabel={part.text}
    draggable={false}
    source={{ uri: part.emoji }}
    style={styles.twemoji}
-  />;
+  />
+);

 // @mention, #hashtag, $cashtag
 const createSymbolEntity = ({ displayMode, part }) => {
--- a/benchmarks/src/components/UserAvatar/index.js
+++ b/benchmarks/src/components/UserAvatar/index.js
@@ -23,15 +23,15 @@ class UserAvatar extends PureComponent {

    return (
      <AspectRatio ratio={1} style={[styles.root, style]}>
-        {uri
-          ? <Image
-              accessibilityLabel={accessibilityLabel}
-              onLoad={this._handleLoad}
-              ref={this._setImageRef}
-              source={{ uri }}
-              style={[styles.image, circle && styles.circle]}
-            />
-          : null}
+        {uri ? (
+          <Image
+            accessibilityLabel={accessibilityLabel}
+            onLoad={this._handleLoad}
+            ref={this._setImageRef}
+            source={{ uri }}
+            style={[styles.image, circle && styles.circle]}
+          />
+        ) : null}
      </AspectRatio>
    );
  }
--- a/benchmarks/src/components/View/emotion.js
+++ b/benchmarks/src/components/View/emotion.js
@@ -0,0 +1,29 @@
+/* eslint-disable react/prop-types */
+import { css } from 'emotion';
+import React from 'react';
+
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    return <div {...other} className={css([viewStyle, ...style])} />;
+  }
+}
+
+const viewStyle = {
+  alignItems: 'stretch',
+  borderWidth: 0,
+  borderStyle: 'solid',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexBasis: 'auto',
+  flexDirection: 'column',
+  flexShrink: 0,
+  margin: 0,
+  padding: 0,
+  position: 'relative',
+  // fix flexbox bugs
+  minHeight: 0,
+  minWidth: 0
+};
+
+export default View;
--- a/benchmarks/src/emotion.js
+++ b/benchmarks/src/emotion.js
@@ -0,0 +1,7 @@
+import Box from './components/Box/emotion';
+import View from './components/View/emotion';
+
+export default {
+  Box,
+  View
+};
--- a/benchmarks/webpack.config.js
+++ b/benchmarks/webpack.config.js
@@ -26,7 +26,9 @@ module.exports = {
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
-          options: { cacheDirectory: true }
+          options: {
+            cacheDirectory: true
+          }
        }
      }
    ]
--- a/benchmarks/yarn.lock
+++ b/benchmarks/yarn.lock
@@ -2,6 +2,14 @@
 # yarn lockfile v1


+"@types/lodash@^4.14.64", "@types/lodash@^4.14.66":
+  version "4.14.74"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.74.tgz#ac3bd8db988e7f7038e5d22bd76a7ba13f876168"
+
+abbrev@1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
+
 ajv@^5.0.0:
  version "5.2.0"
  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.0.tgz#c1735024c5da2ef75cc190713073d44f098bf486"
@@ -37,6 +45,12 @@ ansi-styles@^2.2.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"

+ansi-styles@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.0"
+
 aphrodite@^1.2.3:
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-1.2.3.tgz#4b161e9eef319b1f90a889501f985d7b5e70b285"
@@ -84,6 +98,17 @@ autoprefixer@^6.3.1:
    postcss "^5.2.15"
    postcss-value-parser "^3.2.3"

+autoprefixer@^7.1.2:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.4.tgz#960847dbaa4016bc8e8e52ec891cbf8f1257a748"
+  dependencies:
+    browserslist "^2.4.0"
+    caniuse-lite "^1.0.30000726"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.11"
+    postcss-value-parser "^3.2.3"
+
 babel-code-frame@^6.11.0:
  version "6.22.0"
  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
@@ -92,6 +117,22 @@ babel-code-frame@^6.11.0:
    esutils "^2.0.2"
    js-tokens "^3.0.0"

+babel-plugin-emotion@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-7.2.2.tgz#eae520ef15e4affd87aab761e1c8b48b3385af3e"
+  dependencies:
+    autoprefixer "^7.1.2"
+    babel-plugin-syntax-jsx "^6.18.0"
+    emotion-utils "^7.2.2"
+    postcss "^6.0.9"
+    postcss-js "^1.0.0"
+    postcss-nested "^2.1.1"
+    touch "^1.0.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+
 babel-runtime@^6.23.0:
  version "6.25.0"
  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.25.0.tgz#33b98eaa5d482bb01a8d1aa6b437ad2b01aec41c"
@@ -103,10 +144,6 @@ balanced-match@^0.4.2:
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"

-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-
 base64-js@^1.0.2:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
@@ -123,13 +160,6 @@ bowser@^1.6.0:
  version "1.7.1"
  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.7.1.tgz#a4de8f18a1a0dc9531eb2a92a1521fb6a9ba96a5"

-brace-expansion@^1.1.7:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
 brcast@^2.0.0:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/brcast/-/brcast-2.0.1.tgz#4311508f0634a6f5a2465b6cf2db27f06902aaca"
@@ -141,6 +171,13 @@ browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.5:
    caniuse-db "^1.0.30000624"
    electron-to-chromium "^1.2.3"

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

+camelcase-css@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-1.0.1.tgz#157c4238265f5cf94a1dffde86446552cbf3f705"
+
 caniuse-api@^1.5.2:
  version "1.5.3"
  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.3.tgz#5018e674b51c393e4d50614275dc017e27c4a2a2"
@@ -161,6 +202,10 @@ caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000624:
  version "1.0.30000628"
  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000628.tgz#3d010e2a8e2537a8d135792e90e4f2ce0eb838cc"

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

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

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

-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-
 core-js@^1.0.0:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@@ -265,9 +314,9 @@ css-in-js-utils@^1.0.3:
  dependencies:
    hyphenate-style-name "^1.0.2"

-css-loader@^0.28.4:
-  version "0.28.4"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
+css-loader@^0.28.7:
+  version "0.28.7"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
  dependencies:
    babel-code-frame "^6.11.0"
    css-selector-tokenizer "^0.7.0"
@@ -282,7 +331,7 @@ css-loader@^0.28.4:
    postcss-modules-scope "^1.0.0"
    postcss-modules-values "^1.1.0"
    postcss-value-parser "^3.3.0"
-    source-list-map "^0.1.7"
+    source-list-map "^2.0.0"

 css-selector-tokenizer@^0.6.0:
  version "0.6.0"
@@ -388,17 +437,43 @@ electron-to-chromium@^1.2.3:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.2.4.tgz#9751cbea89fa120bf88c226ba41eb8d0b6f1b597"

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

+emotion-server@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/emotion-server/-/emotion-server-7.2.2.tgz#d1073df1c71ef6fad4ee5e32319deced97b15c6b"
+  dependencies:
+    emotion "^7.2.2"
+    emotion-utils "^7.2.2"
+
+emotion-utils@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/emotion-utils/-/emotion-utils-7.2.2.tgz#0057927581bdd0877d6d8fb90a6162a15c75b805"
+  dependencies:
+    fbjs "^0.8.12"
+
+emotion@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-7.2.2.tgz#c89908662f4abb706d488a316ea8bdcad0b29727"
+  dependencies:
+    babel-plugin-emotion "^7.2.2"
+    emotion-server "^7.2.2"
+    emotion-utils "^7.2.2"
+    react-emotion "^7.2.2"
+
 encoding@^0.1.11:
  version "0.1.12"
  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
  dependencies:
    iconv-lite "~0.4.13"

-escape-string-regexp@^1.0.2:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"

@@ -434,7 +509,7 @@ fbjs@^0.8.12:
    setimmediate "^1.0.5"
    ua-parser-js "^0.7.9"

-fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
+fbjs@^0.8.5, fbjs@^0.8.9:
  version "0.8.12"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
  dependencies:
@@ -454,33 +529,19 @@ flexibility@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/flexibility/-/flexibility-2.0.1.tgz#ad323aafc40f469ce624286518fc4d7cd72b7c77"

-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-
 function-bind@^1.0.2:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"

-glamor@^2.20.37:
-  version "2.20.37"
-  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.37.tgz#3cd576deb760eaaf475dcc1f9b77bf6a7d2f8b26"
+glamor@^2.20.40:
+  version "2.20.40"
+  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.40.tgz#f606660357b7cf18dface731ad1a2cfa93817f05"
  dependencies:
    fbjs "^0.8.12"
    inline-style-prefixer "^3.0.6"
    object-assign "^4.1.1"
    prop-types "^15.5.10"
-
-glob@^7.0.5:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
+    through "^2.3.8"

 has-ansi@^2.0.0:
  version "2.0.0"
@@ -540,14 +601,7 @@ indexes-of@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"

-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@2.0.1:
+inherits@2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"

@@ -740,7 +794,7 @@ lodash.uniq@^4.3.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"

-lodash@^4.17.1:
+lodash@^4.17.1, lodash@^4.17.4:
  version "4.17.4"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"

@@ -762,12 +816,6 @@ math-expression-evaluator@^1.2.14:
  version "1.2.16"
  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"

-minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  dependencies:
-    brace-expansion "^1.1.7"
-
 minimist@0.0.8:
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
@@ -785,6 +833,12 @@ node-fetch@^1.0.1:
    encoding "^0.1.11"
    is-stream "^1.0.1"

+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  dependencies:
+    abbrev "1"
+
 normalize-css-color@^1.0.1, normalize-css-color@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
@@ -810,16 +864,6 @@ object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"

-once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  dependencies:
-    wrappy "1"
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-
 postcss-calc@^5.2.0:
  version "5.3.1"
  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -881,6 +925,13 @@ postcss-filter-plugins@^2.0.0:
    postcss "^5.0.4"
    uniqid "^4.0.0"

+postcss-js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-1.0.0.tgz#ccee5aa3b1970dd457008e79438165f66919ba30"
+  dependencies:
+    camelcase-css "^1.0.1"
+    postcss "^6.0.1"
+
 postcss-merge-idents@^2.1.5:
  version "2.1.7"
  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
@@ -969,6 +1020,13 @@ postcss-modules-values@^1.1.0:
    icss-replace-symbols "^1.0.2"
    postcss "^5.0.14"

+postcss-nested@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-2.1.2.tgz#04057281f9631fef684857fb0119bae04ede03c6"
+  dependencies:
+    postcss "^6.0.9"
+    postcss-selector-parser "^2.2.3"
+
 postcss-normalize-charset@^1.1.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
@@ -1012,7 +1070,7 @@ postcss-reduce-transforms@^1.0.3:
    postcss "^5.0.8"
    postcss-value-parser "^3.0.1"

-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2, postcss-selector-parser@^2.2.3:
  version "2.2.3"
  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
  dependencies:
@@ -1066,6 +1124,14 @@ postcss@^6.0.1:
    source-map "^0.5.6"
    supports-color "^4.0.0"

+postcss@^6.0.11, postcss@^6.0.9:
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.11.tgz#f48db210b1d37a7f7ab6499b7a54982997ab6f72"
+  dependencies:
+    chalk "^2.1.0"
+    source-map "^0.5.7"
+    supports-color "^4.4.0"
+
 prepend-http@^1.0.0:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
@@ -1076,7 +1142,7 @@ promise@^7.1.1:
  dependencies:
    asap "~2.0.3"

-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.5.9:
  version "15.5.10"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
  dependencies:
@@ -1094,26 +1160,26 @@ query-string@^4.1.0:
    object-assign "^4.1.0"
    strict-uri-encode "^1.0.0"

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

-react-addons-perf@^15.4.2:
-  version "15.4.2"
-  resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b"
+react-emotion@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-7.2.2.tgz#0401607a0ba011bc16600a2691f5f57cb38ce89d"
  dependencies:
-    fbjs "^0.8.4"
-    object-assign "^4.1.0"
+    babel-plugin-emotion "^7.2.2"
+    emotion "^7.2.2"
+    emotion-utils "^7.2.2"

-react-jss@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-7.0.1.tgz#36c505c3798993edd46ea01734f171f895348e25"
+react-jss@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-7.1.0.tgz#de9430cbe01a82f3b2dcf87a03b798130868ff93"
  dependencies:
    hoist-non-react-statics "^1.2.0"
    jss "^8.1.0"
@@ -1168,14 +1234,17 @@ react@^15.5.4:
    object-assign "^4.1.0"
    prop-types "^15.5.10"

-reactxp@0.34.3:
-  version "0.34.3"
-  resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.34.3.tgz#6481992e57758ae6ffffbfde3d497527bb495032"
+reactxp@^0.42.1:
+  version "0.42.1"
+  resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.42.1.tgz#1c142a87f0a82a8da94e5c875525952c35a53a17"
  dependencies:
+    "@types/lodash" "^4.14.66"
    assert "^1.3.0"
    ifvisible.js "^1.0.6"
    lodash "^4.17.1"
+    prop-types "^15.5.9"
    rebound "^0.0.13"
+    subscribableevent "^1.0.0"
    synctasks "^0.2.9"

 rebound@^0.0.13:
@@ -1222,12 +1291,6 @@ regjsparser@^0.1.4:
  dependencies:
    jsesc "~0.5.0"

-rimraf@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
-  dependencies:
-    glob "^7.0.5"
-
 sax@~1.2.1:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
@@ -1248,14 +1311,18 @@ sort-keys@^1.0.0:
  dependencies:
    is-plain-obj "^1.0.0"

-source-list-map@^0.1.7:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+source-list-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"

 source-map@^0.5.3, source-map@^0.5.6:
  version "0.5.6"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"

+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
 sprintf-js@~1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -1281,9 +1348,9 @@ style-loader@^0.18.2:
    loader-utils "^1.0.2"
    schema-utils "^0.3.0"

-styled-components@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.1.1.tgz#7e9b5bc319ee3963b47aebb74f4658119ea9d484"
+styled-components@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.1.2.tgz#bb419978e1287c5d0d88fa9106b2dd75f66a324c"
  dependencies:
    buffer "^5.0.3"
    css-to-react-native "^2.0.3"
@@ -1315,6 +1382,13 @@ stylis@^3.2.1:
  version "3.2.3"
  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.3.tgz#fed751d792af3f48a247769f55aca05c1a100a09"

+subscribableevent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/subscribableevent/-/subscribableevent-1.0.0.tgz#bde9500fa9009c7740c924109bac6119cd9898e6"
+  dependencies:
+    "@types/lodash" "^4.14.64"
+    lodash "^4.17.4"
+
 supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -1331,6 +1405,12 @@ supports-color@^4.0.0:
  dependencies:
    has-flag "^2.0.0"

+supports-color@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e"
+  dependencies:
+    has-flag "^2.0.0"
+
 svgo@^0.7.0:
  version "0.7.2"
  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@@ -1357,6 +1437,16 @@ theming@^1.1.0:
    prop-types "^15.5.8"
    react "^15.5.4"

+through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+touch@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de"
+  dependencies:
+    nopt "~1.0.10"
+
 ua-parser-js@^0.7.9:
  version "0.7.12"
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
@@ -1398,7 +1488,3 @@ whatwg-fetch@>=0.10.0:
 whet.extend@~0.9.9:
  version "0.9.9"
  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
--- a/docs/guides/advanced.md
+++ b/docs/guides/advanced.md
@@ -2,7 +2,7 @@

 ## Use with existing React DOM components

-React Native for Web exports a web-specific module called `createDOMElement`,
+React Native for Web exports a web-specific module called `createElement`,
 which can be used to wrap React DOM components. This allows you to use React
 Native's accessibility and style optimizations.

@@ -11,9 +11,8 @@ In the example below, `Video` will now accept common React Native props such as
 props.

 ```js
-import { createDOMElement } from 'react-native';
-
-const Video = (props) => createDOMElement('video', props);
+import { createElement } from 'react-native-web';
+const Video = (props) => createElement('video', props);
 ```

 This also works with composite components defined in your existing component
@@ -21,9 +20,10 @@ gallery or dependencies ([live example](https://www.webpackbin.com/bins/-KiTSGFw

 ```js
 import RaisedButton from 'material-ui/RaisedButton';
-import { createDOMElement, StyleSheet } from 'react-native';
+import { createElement } from 'react-native-web';
+import { StyleSheet } from 'react-native';

-const CustomButton = (props) => createDOMElement(RaisedButton, {
+const CustomButton = (props) => createElement(RaisedButton, {
  ...props,
  style: [ styles.button, props.style ]
 });
@@ -35,6 +35,14 @@ const styles = StyleSheet.create({
 });
 ```

+And `createElement` can be used as drop-in replacement for `React.createElement`:
+
+```js
+/* @jsx createElement */
+import { createElement } from 'react-native-web';
+const Video = (props) => <video {...props} style={[ { marginVertical: 10 }, props.style ]} />
+```
+
 Remember that React Native styles are not the same as React DOM styles, and
 care needs to be taken not to pass React DOM styles into your React Native
 wrapped components.
@@ -47,7 +55,8 @@ an API inspired by styled-components ([live
 example](https://www.webpackbin.com/bins/-KjT9ziwv4O7FDZdvsnX)).

 ```js
-const { createDOMElement, StyleSheet } = ReactNative;
+import { createElement } from 'react-native-web';
+import { StyleSheet } from 'react-native';

 /**
 * styled API
@@ -69,7 +78,7 @@ const styled = (Component, styler) => {

      return (
        isDOMComponent
-          ? createDOMElement(Component, nextProps)
+          ? createElement(Component, nextProps)
          : <Component {...nextProps} />
      );
    }
--- a/docs/guides/getting-started.md
+++ b/docs/guides/getting-started.md
@@ -34,6 +34,9 @@ const babelLoaderConfiguration = {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
+      // This aliases 'react-native' to 'react-native-web' and includes only
+      // the modules needed by the app
+      plugins: ['react-native-web/babel']
      // The 'react-native' preset is recommended (or use your own .babelrc)
      presets: ['react-native']
    }
@@ -71,10 +74,6 @@ module.exports = {
  ],

  resolve: {
-    // Maps the 'react-native' import to 'react-native-web'.
-    alias: {
-      'react-native': 'react-native-web'
-    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
--- a/docs/storybook/.storybook/decorator-centered.js
+++ b/docs/storybook/.storybook/decorator-centered.js
@@ -10,9 +10,5 @@ const styles = StyleSheet.create({
 });

 export default function(renderStory) {
-  return (
-    <View style={styles.root}>
-      {renderStory()}
-    </View>
-  );
+  return <View style={styles.root}>{renderStory()}</View>;
 }
--- a/docs/storybook/1-components/ActivityIndicator/ActivityIndicatorScreen.js
+++ b/docs/storybook/1-components/ActivityIndicator/ActivityIndicatorScreen.js
@@ -11,7 +11,7 @@ import PropSize from './examples/PropSize';
 import React from 'react';
 import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';

-const ActivityIndicatorScreen = () =>
+const ActivityIndicatorScreen = () => (
  <UIExplorer title="ActivityIndicator" url="1-components/ActivityIndicator">
    <Description>Displays a customizable activity indicator</Description>
    <Section title="Props">
@@ -53,6 +53,7 @@ const ActivityIndicatorScreen = () =>
        }}
      />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('ActivityIndicator', ActivityIndicatorScreen);
--- a/docs/storybook/1-components/ActivityIndicator/examples/PropAnimating.js
+++ b/docs/storybook/1-components/ActivityIndicator/examples/PropAnimating.js
@@ -5,11 +5,12 @@
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import React from 'react';

-const ActivityIndicatorAnimatingExample = () =>
+const ActivityIndicatorAnimatingExample = () => (
  <View style={styles.horizontal}>
    <ActivityIndicator />
    <ActivityIndicator animating={false} />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
--- a/docs/storybook/1-components/ActivityIndicator/examples/PropColor.js
+++ b/docs/storybook/1-components/ActivityIndicator/examples/PropColor.js
@@ -5,7 +5,7 @@
 import React from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';

-const ActivityIndicatorColorExample = () =>
+const ActivityIndicatorColorExample = () => (
  <View style={styles.horizontal}>
    <ActivityIndicator color="#1DA1F2" style={styles.rightPadding} />
    <ActivityIndicator color="#17BF63" style={styles.rightPadding} />
@@ -13,7 +13,8 @@ const ActivityIndicatorColorExample = () =>
    <ActivityIndicator color="#794BC4" style={styles.rightPadding} />
    <ActivityIndicator color="#E0245E" style={styles.rightPadding} />
    <ActivityIndicator color="#FFAD1F" style={styles.rightPadding} />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
--- a/docs/storybook/1-components/ActivityIndicator/examples/PropHidesWhenStopped.js
+++ b/docs/storybook/1-components/ActivityIndicator/examples/PropHidesWhenStopped.js
@@ -43,11 +43,12 @@ class ToggleAnimatingActivityIndicator extends PureComponent {
  }
 }

-const ActivityIndicatorHidesWhenStoppedExample = () =>
+const ActivityIndicatorHidesWhenStoppedExample = () => (
  <View style={[styles.horizontal]}>
    <ToggleAnimatingActivityIndicator hidesWhenStopped={false} style={styles.rightPadding} />
    <ToggleAnimatingActivityIndicator />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
--- a/docs/storybook/1-components/ActivityIndicator/examples/PropSize.js
+++ b/docs/storybook/1-components/ActivityIndicator/examples/PropSize.js
@@ -7,11 +7,12 @@ import { ActivityIndicator, StyleSheet, View } from 'react-native';

 const sizes = [20, 'small', 36, 'large', 60];

-const ActivityIndicatorSizeExample = () =>
+const ActivityIndicatorSizeExample = () => (
  <View style={styles.horizontal}>
    {sizes.map((size, i) => <ActivityIndicator key={i} size={size} style={styles.rightPadding} />)}
    <ActivityIndicator size="large" style={styles.large} />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
--- a/docs/storybook/1-components/Button/ButtonScreen.js
+++ b/docs/storybook/1-components/Button/ButtonScreen.js
@@ -17,7 +17,7 @@ import UIExplorer, {
  storiesOf
 } from '../../ui-explorer';

-const ButtonScreen = () =>
+const ButtonScreen = () => (
  <UIExplorer title="Button" url="1-components/Button">
    <Description>
      <AppText>
@@ -68,6 +68,7 @@ const ButtonScreen = () =>

      <DocItem name="title" typeInfo="string" description="Text to display inside the button." />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('Button', ButtonScreen);
--- a/docs/storybook/1-components/Button/examples/PropColor.js
+++ b/docs/storybook/1-components/Button/examples/PropColor.js
@@ -8,7 +8,7 @@ import { Button, View } from 'react-native';

 const emptyFunction = () => {};

-const ButtonColorExample = () =>
+const ButtonColorExample = () => (
  <View>
    <Button color="#17BF63" onPress={emptyFunction} title="Press me" />
    <DividerVertical />
@@ -17,6 +17,7 @@ const ButtonColorExample = () =>
    <Button color="#794BC4" onPress={emptyFunction} title="Press me" />
    <DividerVertical />
    <Button color="#E0245E" onPress={emptyFunction} title="Press me" />
-  </View>;
+  </View>
+);

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

 const emptyFunction = () => {};

-const ButtonOnPressExample = () =>
+const ButtonOnPressExample = () => (
  <View style={styles.horizontal}>
    <Button
      accessibilityLabel="This sounds great!"
@@ -17,7 +17,8 @@ const ButtonOnPressExample = () =>
    />
    <DividerHorizontal />
    <Button color="#841584" onPress={emptyFunction} title="Ok!" />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
--- a/docs/storybook/1-components/Image/ImageScreen.js
+++ b/docs/storybook/1-components/Image/ImageScreen.js
@@ -25,7 +25,7 @@ import UIExplorer, {
  storiesOf
 } from '../../ui-explorer';

-const ImageScreen = () =>
+const ImageScreen = () => (
  <UIExplorer title="Image" url="1-components/Image">
    <Description>
      An accessibile image component with support for image resizing, default image, and child
@@ -175,6 +175,7 @@ const ImageScreen = () =>
        }}
      />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('Image', ImageScreen);
--- a/docs/storybook/1-components/Image/examples/NetworkImage.js
+++ b/docs/storybook/1-components/Image/examples/NetworkImage.js
@@ -24,11 +24,11 @@ class NetworkImageExample extends PureComponent {
  };

  render() {
-    const loader = this.state.loading
-      ? <View>
-          <ActivityIndicator />
-        </View>
-      : null;
+    const loader = this.state.loading ? (
+      <View>
+        <ActivityIndicator />
+      </View>
+    ) : null;

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

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

 const styles = StyleSheet.create({
  image: {
--- a/docs/storybook/1-components/Image/examples/PropDefaultSource.js
+++ b/docs/storybook/1-components/Image/examples/PropDefaultSource.js
@@ -7,11 +7,12 @@ import sources from '../sources';
 import React from 'react';
 import { Image } from 'react-native';

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

 export default ImageDefaultSourceExample;
--- a/docs/storybook/1-components/Image/examples/PropDraggable.js
+++ b/docs/storybook/1-components/Image/examples/PropDraggable.js
@@ -6,10 +6,11 @@ import sources from '../sources';
 import React from 'react';
 import { Image, StyleSheet, View } from 'react-native';

-const ImageDraggableExample = () =>
+const ImageDraggableExample = () => (
  <View style={styles.container}>
    <Image draggable={false} source={sources.large} style={styles.image} />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  container: {
--- a/docs/storybook/1-components/Image/examples/PropOnLoad.js
+++ b/docs/storybook/1-components/Image/examples/PropOnLoad.js
@@ -7,7 +7,8 @@ import NetworkImage from './NetworkImage';
 import React from 'react';
 import sources from '../sources';

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

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

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

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

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

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

-const ImageResizeModeExample = () =>
+const ImageResizeModeExample = () => (
  <View>
    {[sources.small, sources.large].map((source, i) => {
      return (
@@ -48,7 +48,8 @@ const ImageResizeModeExample = () =>
        </View>
      );
    })}
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  horizontal: {
--- a/docs/storybook/1-components/Image/examples/PropSource.js
+++ b/docs/storybook/1-components/Image/examples/PropSource.js
@@ -6,7 +6,7 @@ import sources from '../sources';
 import React from 'react';
 import { Image, StyleSheet, Text, View } from 'react-native';

-const ImageSourceExample = () =>
+const ImageSourceExample = () => (
  <View style={styles.row}>
    <View style={styles.column}>
      <Text style={styles.text}>Static image</Text>
@@ -24,7 +24,8 @@ const ImageSourceExample = () =>
      <Text style={styles.text}>Data SVG</Text>
      <Image source={sources.dataSvg} style={styles.image} />
    </View>
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  row: {
--- a/docs/storybook/1-components/Image/examples/StaticGetSize.js
+++ b/docs/storybook/1-components/Image/examples/StaticGetSize.js
@@ -24,20 +24,20 @@ class ImageGetSizeExample extends PureComponent {

    return (
      <View>
-        {showButton
-          ? <View style={styles.button}>
-              <Button onPress={this._handlePress} title="(4.7MB) Get image dimensions" />
-            </View>
-          : null}
-        {startLoad
-          ? <View>
-              <Text>
-                Source dimensions:{' '}
-                {JSON.stringify({ width: this.state.width, height: this.state.height })}
-              </Text>
-              <Image source={createUncachedURI(this.props.source.uri)} style={styles.image} />
-            </View>
-          : null}
+        {showButton ? (
+          <View style={styles.button}>
+            <Button onPress={this._handlePress} title="(4.7MB) Get image dimensions" />
+          </View>
+        ) : null}
+        {startLoad ? (
+          <View>
+            <Text>
+              Source dimensions:{' '}
+              {JSON.stringify({ width: this.state.width, height: this.state.height })}
+            </Text>
+            <Image source={createUncachedURI(this.props.source.uri)} style={styles.image} />
+          </View>
+        ) : null}
      </View>
    );
  }
--- a/docs/storybook/1-components/Image/examples/StaticPrefetch.js
+++ b/docs/storybook/1-components/Image/examples/StaticPrefetch.js
@@ -23,25 +23,23 @@ class ImagePrefetchExample extends PureComponent {

    return (
      <View>
-        {showButton
-          ? <View style={styles.button}>
-              <Button onPress={this._handlePress} title="Prefetch image" />
-            </View>
-          : null}
-        {startLoad
-          ? <View>
-              <Text>
-                {this.state.events.join('\n')}
-              </Text>
-              <Image
-                onLoad={this._handleLoad}
-                onLoadEnd={this._handleLoadEnd}
-                onLoadStart={this._handleLoadStart}
-                source={this.props.source}
-                style={styles.image}
-              />
-            </View>
-          : null}
+        {showButton ? (
+          <View style={styles.button}>
+            <Button onPress={this._handlePress} title="Prefetch image" />
+          </View>
+        ) : null}
+        {startLoad ? (
+          <View>
+            <Text>{this.state.events.join('\n')}</Text>
+            <Image
+              onLoad={this._handleLoad}
+              onLoadEnd={this._handleLoadEnd}
+              onLoadStart={this._handleLoadStart}
+              source={this.props.source}
+              style={styles.image}
+            />
+          </View>
+        ) : null}
      </View>
    );
  }
--- a/docs/storybook/1-components/ProgressBar/ProgressScreen.js
+++ b/docs/storybook/1-components/ProgressBar/ProgressScreen.js
@@ -10,7 +10,7 @@ import PropTrackColor from './examples/PropTrackColor';
 import React from 'react';
 import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';

-const ProgressBarScreen = () =>
+const ProgressBarScreen = () => (
  <UIExplorer title="ProgressBar" url="1-components/ProgressBar">
    <Description>Display an activity progress bar</Description>
    <Section title="Props">
@@ -62,6 +62,7 @@ const ProgressBarScreen = () =>
        }}
      />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('ProgressBar', ProgressBarScreen);
--- a/docs/storybook/1-components/ProgressBar/examples/CustomSize.js
+++ b/docs/storybook/1-components/ProgressBar/examples/CustomSize.js
@@ -6,12 +6,13 @@ import { DividerVertical } from '../helpers';
 import React from 'react';
 import { ProgressBar, StyleSheet, View } from 'react-native';

-const ProgressBarCustomSizeExample = () =>
+const ProgressBarCustomSizeExample = () => (
  <View>
    <ProgressBar color="#1DA1F2" progress={0.33} style={styles.one} trackColor="#D1E3F6" />
    <DividerVertical />
    <ProgressBar color="#1DA1F2" progress={0.33} style={styles.two} trackColor="#D1E3F6" />
-  </View>;
+  </View>
+);

 const styles = StyleSheet.create({
  one: {
--- a/docs/storybook/1-components/ProgressBar/examples/PropColor.js
+++ b/docs/storybook/1-components/ProgressBar/examples/PropColor.js
@@ -6,7 +6,7 @@ import React from 'react';
 import { DividerVertical } from '../helpers';
 import { ProgressBar, View } from 'react-native';

-const ProgressBarColorExample = () =>
+const ProgressBarColorExample = () => (
  <View>
    <ProgressBar color="#1DA1F2" progress={0.2} />
    <DividerVertical />
@@ -17,6 +17,7 @@ const ProgressBarColorExample = () =>
    <ProgressBar color="#794BC4" progress={0.8} />
    <DividerVertical />
    <ProgressBar color="#E0245E" progress={1.0} />
-  </View>;
+  </View>
+);

 export default ProgressBarColorExample;
--- a/docs/storybook/1-components/ProgressBar/examples/PropTrackColor.js
+++ b/docs/storybook/1-components/ProgressBar/examples/PropTrackColor.js
@@ -6,13 +6,14 @@ import { DividerVertical } from '../helpers';
 import React from 'react';
 import { ProgressBar, View } from 'react-native';

-const ProgressBarTrackColorExample = () =>
+const ProgressBarTrackColorExample = () => (
  <View>
    <ProgressBar color="#1DA1F2" progress={0.1} trackColor="#17BF63" />
    <DividerVertical />
    <ProgressBar color="#1DA1F2" progress={0.2} trackColor="#F45D22" />
    <DividerVertical />
    <ProgressBar color="#1DA1F2" progress={0.3} trackColor="#794BC4" />
-  </View>;
+  </View>
+);

 export default ProgressBarTrackColorExample;
--- a/docs/storybook/1-components/ScrollView/ScrollViewScreen.js
+++ b/docs/storybook/1-components/ScrollView/ScrollViewScreen.js
@@ -18,7 +18,7 @@ import UIExplorer, {
  TextList
 } from '../../ui-explorer';

-const ScrollViewScreen = () =>
+const ScrollViewScreen = () => (
  <UIExplorer title="ScrollView" url="1-components/ScrollView">
    <Description>
      <AppText>
@@ -166,6 +166,7 @@ const ScrollViewScreen = () =>
        }}
      />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('ScrollView', ScrollViewScreen);
--- a/docs/storybook/1-components/ScrollView/examples/Horizontal.js
+++ b/docs/storybook/1-components/ScrollView/examples/Horizontal.js
@@ -11,7 +11,7 @@ const onScroll = () => {
  console.log('ScrollView.onScroll');
 };

-const VerticalExample = () =>
+const VerticalExample = () => (
  <View style={styles.scrollViewContainer}>
    <ScrollView
      contentContainerStyle={styles.scrollViewContentContainerStyle}
@@ -19,17 +19,16 @@ const VerticalExample = () =>
      scrollEventThrottle={16} // ~60 events per second
      style={styles.scrollViewStyle}
    >
-      {Array.from({ length: 50 }).map((item, i) =>
+      {Array.from({ length: 50 }).map((item, i) => (
        <View key={i} style={[styles.box, styles.horizontalBox]}>
-          <Text>
-            {i}
-          </Text>
+          <Text>{i}</Text>
        </View>
-      )}
+      ))}
    </ScrollView>
-  </View>;
+  </View>
+);

-const HorizontalExample = () =>
+const HorizontalExample = () => (
  <View style={styles.scrollViewContainer}>
    <ScrollView
      contentContainerStyle={styles.scrollViewContentContainerStyle}
@@ -38,15 +37,14 @@ const HorizontalExample = () =>
      scrollEventThrottle={16} // ~60 events per second
      style={styles.scrollViewStyle}
    >
-      {Array.from({ length: 50 }).map((item, i) =>
+      {Array.from({ length: 50 }).map((item, i) => (
        <View key={i} style={[styles.box, styles.horizontalBox]}>
-          <Text>
-            {i}
-          </Text>
+          <Text>{i}</Text>
        </View>
-      )}
+      ))}
    </ScrollView>
-  </View>;
+  </View>
+);

 export { HorizontalExample, VerticalExample };

--- a/docs/storybook/1-components/ScrollView/examples/ScrollTo.js
+++ b/docs/storybook/1-components/ScrollView/examples/ScrollTo.js
@@ -19,17 +19,15 @@ export default class ScrollToExample extends PureComponent {
          scrollEventThrottle={16} // ~60 events per second
          style={styles.scrollViewStyle}
        >
-          {Array.from({ length: 50 }).map((item, i) =>
+          {Array.from({ length: 50 }).map((item, i) => (
            <TouchableHighlight
              key={i}
              onPress={() => {}}
              style={[styles.box, styles.horizontalBox]}
            >
-              <Text>
-                {i}
-              </Text>
+              <Text>{i}</Text>
            </TouchableHighlight>
-          )}
+          ))}
        </ScrollView>
        <Button
          onPress={() => {
--- a/docs/storybook/1-components/ScrollView/examples/ScrollToEnd.js
+++ b/docs/storybook/1-components/ScrollView/examples/ScrollToEnd.js
@@ -19,13 +19,11 @@ export default class ScrollToEndExample extends PureComponent {
          scrollEventThrottle={16} // ~60 events per second
          style={styles.scrollViewStyle}
        >
-          {Array.from({ length: 50 }).map((item, i) =>
+          {Array.from({ length: 50 }).map((item, i) => (
            <View key={i} style={[styles.box, styles.horizontalBox]}>
-              <Text>
-                {i}
-              </Text>
+              <Text>{i}</Text>
            </View>
-          )}
+          ))}
        </ScrollView>
        <Button
          onPress={() => {
--- a/docs/storybook/1-components/Switch/SwitchScreen.js
+++ b/docs/storybook/1-components/Switch/SwitchScreen.js
@@ -22,7 +22,7 @@ import UIExplorer, {
  storiesOf
 } from '../../ui-explorer';

-const SwitchScreen = () =>
+const SwitchScreen = () => (
  <UIExplorer title="Switch" url="1-components/Switch">
    <Description>
      <AppText>
@@ -130,6 +130,7 @@ const SwitchScreen = () =>
        }}
      />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('Switch', SwitchScreen);
--- a/docs/storybook/1-components/Switch/examples/PropActiveThumbColor.js
+++ b/docs/storybook/1-components/Switch/examples/PropActiveThumbColor.js
@@ -9,16 +9,17 @@ import { Switch, View } from 'react-native';
 const colors = ['#1DA1F2', '#17BF63', '#F45D22', '#794BC4', '#E0245E'];
 const itemStyle = [styles.marginVertical, styles.marginRight];

-const SwitchActiveThumbColorExample = () =>
+const SwitchActiveThumbColorExample = () => (
  <View style={styles.row}>
    <View style={itemStyle}>
      <Switch value={true} />
    </View>
-    {colors.map((color, i) =>
+    {colors.map((color, i) => (
      <View key={i} style={itemStyle}>
        <Switch activeThumbColor={color} activeTrackColor="#ccc" value={true} />
      </View>
-    )}
-  </View>;
+    ))}
+  </View>
+);

 export default SwitchActiveThumbColorExample;
--- a/docs/storybook/1-components/Switch/examples/PropActiveTrackColor.js
+++ b/docs/storybook/1-components/Switch/examples/PropActiveTrackColor.js
@@ -9,16 +9,17 @@ import { Switch, View } from 'react-native';
 const colors = ['#1DA1F2', '#17BF63', '#F45D22', '#794BC4', '#E0245E'];
 const itemStyle = [styles.marginVertical, styles.marginRight];

-const SwitchActiveTrackColorExample = () =>
+const SwitchActiveTrackColorExample = () => (
  <View style={styles.row}>
    <View style={itemStyle}>
      <Switch value={true} />
    </View>
-    {colors.map((color, i) =>
+    {colors.map((color, i) => (
      <View key={i} style={itemStyle}>
        <Switch activeThumbColor="#ccc" activeTrackColor={color} value={true} />
      </View>
-    )}
-  </View>;
+    ))}
+  </View>
+);

 export default SwitchActiveTrackColorExample;
--- a/docs/storybook/1-components/Switch/examples/PropDisabled.js
+++ b/docs/storybook/1-components/Switch/examples/PropDisabled.js
@@ -6,7 +6,7 @@ import React from 'react';
 import { styles } from '../helpers';
 import { Switch, View } from 'react-native';

-const SwitchDisabledExample = () =>
+const SwitchDisabledExample = () => (
  <View style={styles.row}>
    <View style={styles.marginRight}>
      <Switch disabled={true} value={false} />
@@ -14,6 +14,7 @@ const SwitchDisabledExample = () =>
    <View style={styles.marginRight}>
      <Switch disabled={true} value={true} />
    </View>
-  </View>;
+  </View>
+);

 export default SwitchDisabledExample;
--- a/docs/storybook/1-components/Switch/examples/PropOnValueChange.js
+++ b/docs/storybook/1-components/Switch/examples/PropOnValueChange.js
@@ -28,9 +28,7 @@ class SwitchOnValueChangeExample extends PureComponent {
            style={styles.marginBottom}
            value={eventSwitchIsOn}
          />
-          <Text>
-            {eventSwitchIsOn ? 'On' : 'Off'}
-          </Text>
+          <Text>{eventSwitchIsOn ? 'On' : 'Off'}</Text>
        </View>
        <View style={styles.alignCenter}>
          <Switch
@@ -43,9 +41,7 @@ class SwitchOnValueChangeExample extends PureComponent {
            style={styles.marginBottom}
            value={eventSwitchRegressionIsOn}
          />
-          <Text>
-            {eventSwitchRegressionIsOn ? 'On' : 'Off'}
-          </Text>
+          <Text>{eventSwitchRegressionIsOn ? 'On' : 'Off'}</Text>
        </View>
      </View>
    );
--- a/docs/storybook/1-components/Switch/examples/PropThumbColor.js
+++ b/docs/storybook/1-components/Switch/examples/PropThumbColor.js
@@ -9,16 +9,17 @@ import { Switch, View } from 'react-native';
 const colors = ['#ddd', '#aaa', '#999', '#666', '#000'];
 const itemStyle = [styles.marginVertical, styles.marginRight];

-const SwitchThumbColorExample = () =>
+const SwitchThumbColorExample = () => (
  <View style={styles.row}>
    <View style={itemStyle}>
      <Switch value={false} />
    </View>
-    {colors.map((color, i) =>
+    {colors.map((color, i) => (
      <View key={i} style={itemStyle}>
        <Switch thumbColor={color} value={false} />
      </View>
-    )}
-  </View>;
+    ))}
+  </View>
+);

 export default SwitchThumbColorExample;
--- a/docs/storybook/1-components/Switch/examples/PropTrackColor.js
+++ b/docs/storybook/1-components/Switch/examples/PropTrackColor.js
@@ -9,16 +9,17 @@ import { Switch, View } from 'react-native';
 const colors = ['#ddd', '#aaa', '#999', '#666', '#000'];
 const itemStyle = [styles.marginVertical, styles.marginRight];

-const SwitchTrackColorExample = () =>
+const SwitchTrackColorExample = () => (
  <View style={styles.row}>
    <View style={itemStyle}>
      <Switch value={false} />
    </View>
-    {colors.map((color, i) =>
+    {colors.map((color, i) => (
      <View key={i} style={itemStyle}>
        <Switch trackColor={color} value={false} />
      </View>
-    )}
-  </View>;
+    ))}
+  </View>
+);

 export default SwitchTrackColorExample;
--- a/docs/storybook/1-components/Switch/examples/PropValue.js
+++ b/docs/storybook/1-components/Switch/examples/PropValue.js
@@ -6,7 +6,7 @@ import { styles } from '../helpers';
 import React from 'react';
 import { Switch, View } from 'react-native';

-const SwitchValueExample = () =>
+const SwitchValueExample = () => (
  <View style={styles.row}>
    <View style={styles.marginRight}>
      <Switch value={false} />
@@ -14,6 +14,7 @@ const SwitchValueExample = () =>
    <View style={styles.marginRight}>
      <Switch value={true} />
    </View>
-  </View>;
+  </View>
+);

 export default SwitchValueExample;
--- a/docs/storybook/1-components/Text/TextScreen.js
+++ b/docs/storybook/1-components/Text/TextScreen.js
@@ -18,7 +18,7 @@ import UIExplorer, {
  StyleList
 } from '../../ui-explorer';

-const TextScreen = () =>
+const TextScreen = () => (
  <UIExplorer title="Text" url="1-components/Text">
    <Description>
      <AppText>
@@ -37,7 +37,12 @@ const TextScreen = () =>
      <DocItem
        name="accessibilityLabel"
        typeInfo="?string"
-        description="Overrides the text that is read by a screen reader when the user interacts with the element. (This is implemented using 'aria-label'.)"
+        description={
+          <AppText>
+            Overrides the text that is read by a screen reader when the user interacts with the
+            element. (This is implemented using <Code>aria-label</Code>.)
+          </AppText>
+        }
      />

      <DocItem
@@ -49,7 +54,7 @@ const TextScreen = () =>
            The values of this attribute are expressed in degrees of importance. When regions are
            specified as <Code>polite</Code> (recommended), updates take low priority. When regions
            are specified as <Code>assertive</Code>, assistive technologies will interrupt and
-            immediately notify the user. (This is implemented using 'aria-live'.)
+            immediately notify the user. (This is implemented using <Code>aria-live</Code>.)
          </AppText>
        }
      />
@@ -78,7 +83,7 @@ const TextScreen = () =>
            When <Code>true</Code>, indicates that the view is an accessibility element (i.e.,
            focusable) and groups its child content. By default, all the touchable elements and
            elements with <Code>accessibilityRole</Code> of <Code>button</Code> and{' '}
-            <Code>link</Code> are accessible. (This is implemented using 'tabindex'.)
+            <Code>link</Code> are accessible. (This is implemented using <Code>tabindex</Code>.)
          </AppText>
        }
      />
@@ -86,9 +91,12 @@ const TextScreen = () =>
      <DocItem
        name="children"
        typeInfo="?any"
-        description={`Child content. Nested text components will inherit the styles of their parents
-(only backgroundColor is inherited from non-Text parents). <Text>
-only supports other <Text> and raw text (strings) as children.`}
+        description={
+          <AppText>
+            Child content. Nested text components will inherit the styles of their parents (only
+            backgroundColor is inherited from non-<Code>Text</Code> parents).
+          </AppText>
+        }
        example={{
          render: () => <PropChildren />
        }}
@@ -103,7 +111,7 @@ only supports other <Text> and raw text (strings) as children.`}
          </AppText>,
          <AppText>
            A value of <Code>no-hide-descendants</Code> will hide the element and its children from
-            assistive technologies. (This is implemented using 'aria-hidden'.)
+            assistive technologies. (This is implemented using <Code>aria-hidden</Code>.)
          </AppText>
        ]}
      />
@@ -156,7 +164,8 @@ only supports other <Text> and raw text (strings) as children.`}
        description="Used to locate this view in end-to-end tests. The test ID is rendered to a 'data-testid' DOM attribute"
      />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 const stylePropTypes = [
  {
--- a/docs/storybook/1-components/Text/examples/PropChildren.js
+++ b/docs/storybook/1-components/Text/examples/PropChildren.js
@@ -7,12 +7,11 @@
 import React from 'react';
 import { Image, Text, View } from 'react-native';

-const Entity = ({ children }) =>
-  <Text style={{ fontWeight: '500', color: '#527fe4' }}>
-    {children}
-  </Text>;
+const Entity = ({ children }) => (
+  <Text style={{ fontWeight: '500', color: '#527fe4' }}>{children}</Text>
+);

-const TextChildrenExample = () =>
+const TextChildrenExample = () => (
  <View>
    <Text>
      This text contains an inline blue view{' '}
@@ -39,6 +38,7 @@ const TextChildrenExample = () =>
        <Text>
          (is inherited
          <Text style={{ opacity: 0.7 }}>
+            {'\n'}
            (and accumulated
            <Text style={{ backgroundColor: '#ffaaaa' }}>(and also applies to the background)</Text>
            )
@@ -51,6 +51,7 @@ const TextChildrenExample = () =>
        <Entity>Entity Name</Entity>
      </Text>
    </View>
-  </View>;
+  </View>
+);

 export default TextChildrenExample;
--- a/docs/storybook/1-components/Text/examples/PropNumberOfLines.js
+++ b/docs/storybook/1-components/Text/examples/PropNumberOfLines.js
@@ -5,7 +5,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';

-const TextNumberOfLinesExample = () =>
+const TextNumberOfLinesExample = () => (
  <View style={{ maxWidth: 320 }}>
    <Text numberOfLines={1}>
      Maximum of one line, no matter how much I write here. If I keep writing, it
@@ -22,6 +22,7 @@ const TextNumberOfLinesExample = () =>
      {"'"}
      ll just keep going and going.
    </Text>
-  </View>;
+  </View>
+);

 export default TextNumberOfLinesExample;
--- a/docs/storybook/1-components/Text/examples/PropOnPress.js
+++ b/docs/storybook/1-components/Text/examples/PropOnPress.js
@@ -22,9 +22,7 @@ class TextOnPressExample extends React.Component {
          Text has built-in onPress handling
        </Text>
        <View style={styles.logBox}>
-          <Text>
-            {textLog}
-          </Text>
+          <Text>{textLog}</Text>
        </View>
      </View>
    );
--- a/docs/storybook/1-components/TextInput/TextInputScreen.js
+++ b/docs/storybook/1-components/TextInput/TextInputScreen.js
@@ -31,7 +31,7 @@ import UIExplorer, {
  TextList
 } from '../../ui-explorer';

-const TextInputScreen = () =>
+const TextInputScreen = () => (
  <UIExplorer title="TextInput" url="1-components/TextInput">
    <Description>
      <AppText>
@@ -371,6 +371,7 @@ nativeEvent: { key: keyValue } }`}</Code>{' '}
        }}
      />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('TextInput', TextInputScreen);
--- a/docs/storybook/1-components/TextInput/examples/PropAutoCapitalize.js
+++ b/docs/storybook/1-components/TextInput/examples/PropAutoCapitalize.js
@@ -6,7 +6,7 @@ import React from 'react';
 import { WithLabel, styles } from '../helpers';
 import { TextInput, View } from 'react-native';

-const TextInputAutoCapitalizeExample = () =>
+const TextInputAutoCapitalizeExample = () => (
  <View>
    <WithLabel label="none">
      <TextInput autoCapitalize="none" style={styles.textinput} />
@@ -20,6 +20,7 @@ const TextInputAutoCapitalizeExample = () =>
    <WithLabel label="characters">
      <TextInput autoCapitalize="characters" style={styles.textinput} />
    </WithLabel>
-  </View>;
+  </View>
+);

 export default TextInputAutoCapitalizeExample;
--- a/docs/storybook/1-components/TextInput/examples/PropClearButtonMode.js
+++ b/docs/storybook/1-components/TextInput/examples/PropClearButtonMode.js
@@ -6,7 +6,7 @@ import React from 'react';
 import { styles, WithLabel } from '../helpers';
 import { TextInput, View } from 'react-native';

-const TextInputClearButtonModeExample = () =>
+const TextInputClearButtonModeExample = () => (
  <View>
    <WithLabel label="never">
      <TextInput clearButtonMode="never" style={styles.textinput} />
@@ -20,6 +20,7 @@ const TextInputClearButtonModeExample = () =>
    <WithLabel label="always">
      <TextInput clearButtonMode="always" style={styles.textinput} />
    </WithLabel>
-  </View>;
+  </View>
+);

 export default TextInputClearButtonModeExample;
--- a/docs/storybook/1-components/TextInput/examples/PropClearTextOnFocus.js
+++ b/docs/storybook/1-components/TextInput/examples/PropClearTextOnFocus.js
@@ -6,7 +6,7 @@ import React from 'react';
 import { styles } from '../helpers';
 import { TextInput, View } from 'react-native';

-const TextInputClearTextOnFocusExample = () =>
+const TextInputClearTextOnFocusExample = () => (
  <View>
    <TextInput
      clearTextOnFocus={true}
@@ -21,6 +21,7 @@ const TextInputClearTextOnFocusExample = () =>
      placeholder="text is cleared on focus"
      style={styles.multiline}
    />
-  </View>;
+  </View>
+);

 export default TextInputClearTextOnFocusExample;
--- a/docs/storybook/1-components/TextInput/examples/PropEditable.js
+++ b/docs/storybook/1-components/TextInput/examples/PropEditable.js
@@ -6,7 +6,7 @@ import React from 'react';
 import { styles } from '../helpers';
 import { TextInput, View } from 'react-native';

-const TextInputEditableExample = () =>
+const TextInputEditableExample = () => (
  <View>
    <TextInput defaultValue="uneditable text input" editable={false} style={styles.textinput} />
    <TextInput
@@ -15,6 +15,7 @@ const TextInputEditableExample = () =>
      multiline={true}
      style={styles.multiline}
    />
-  </View>;
+  </View>
+);

 export default TextInputEditableExample;
--- a/docs/storybook/1-components/TextInput/examples/PropKeyboardType.js
+++ b/docs/storybook/1-components/TextInput/examples/PropKeyboardType.js
@@ -21,13 +21,14 @@ const keyboardTypes = [
  'numeric'
 ];

-const TextInputKeyboardTypeExample = () =>
+const TextInputKeyboardTypeExample = () => (
  <View>
-    {keyboardTypes.map(type =>
+    {keyboardTypes.map(type => (
      <WithLabel key={type} label={type}>
        <TextInput keyboardType={type} style={styles.textinput} />
      </WithLabel>
-    )}
-  </View>;
+    ))}
+  </View>
+);

 export default TextInputKeyboardTypeExample;
--- a/docs/storybook/1-components/TextInput/examples/PropMaxLength.js
+++ b/docs/storybook/1-components/TextInput/examples/PropMaxLength.js
@@ -6,7 +6,7 @@ import React from 'react';
 import { styles, WithLabel } from '../helpers';
 import { TextInput, View } from 'react-native';

-const TextInputMaxLengthExample = () =>
+const TextInputMaxLengthExample = () => (
  <View>
    <WithLabel label="maxLength: 5">
      <TextInput maxLength={5} style={styles.textinput} />
@@ -20,6 +20,7 @@ const TextInputMaxLengthExample = () =>
    <WithLabel label="maxLength: 5 with very long default value already set">
      <TextInput defaultValue="9402512345" maxLength={5} style={styles.textinput} />
    </WithLabel>
-  </View>;
+  </View>
+);

 export default TextInputMaxLengthExample;
--- a/docs/storybook/1-components/TextInput/examples/PropMultiline.js
+++ b/docs/storybook/1-components/TextInput/examples/PropMultiline.js
@@ -6,10 +6,11 @@ import React from 'react';
 import { styles } from '../helpers';
 import { TextInput, View } from 'react-native';

-const TextInputMultilineExample = () =>
+const TextInputMultilineExample = () => (
  <View>
    <TextInput multiline={true} style={styles.multiline} />
    <TextInput multiline={true} style={styles.multiline} />
-  </View>;
+  </View>
+);

 export default TextInputMultilineExample;
--- a/docs/storybook/1-components/TextInput/examples/PropNumberOfLines.js
+++ b/docs/storybook/1-components/TextInput/examples/PropNumberOfLines.js
@@ -6,7 +6,7 @@ import React from 'react';
 import { styles } from '../helpers';
 import { TextInput, View } from 'react-native';

-const TextInputNumberOfLinesExample = () =>
+const TextInputNumberOfLinesExample = () => (
  <View>
    <TextInput
      multiline={true}
@@ -20,6 +20,7 @@ const TextInputNumberOfLinesExample = () =>
      placeholder="numberOfLines = 3"
      style={[styles.multiline, { height: 'auto' }]}
    />
-  </View>;
+  </View>
+);

 export default TextInputNumberOfLinesExample;
--- a/docs/storybook/1-components/TextInput/examples/PropOnSelectionChange.js
+++ b/docs/storybook/1-components/TextInput/examples/PropOnSelectionChange.js
@@ -84,9 +84,7 @@ class OnSelectionChangeExample extends React.Component {
          value={this.state.value}
        />
        <View>
-          <Text>
-            selection = {JSON.stringify(this.state.selection)}
-          </Text>
+          <Text>selection = {JSON.stringify(this.state.selection)}</Text>
          <Text onPress={this.placeAt(0)}>Place at Start (0, 0)</Text>
          <Text onPress={this.placeAt(length)}>
            Place at End ({length}, {length})
@@ -100,7 +98,7 @@ class OnSelectionChangeExample extends React.Component {
  }
 }

-const TextInputOnSelectionChangeExample = () =>
+const TextInputOnSelectionChangeExample = () => (
  <View>
    <OnSelectionChangeExample style={styles.textinput} value="text selection can be changed" />
    <OnSelectionChangeExample
@@ -108,6 +106,7 @@ const TextInputOnSelectionChangeExample = () =>
      style={styles.multiline}
      value={'multiline text selection\ncan also be changed'}
    />
-  </View>;
+  </View>
+);

 export default TextInputOnSelectionChangeExample;
--- a/docs/storybook/1-components/TextInput/examples/PropPlaceholder.js
+++ b/docs/storybook/1-components/TextInput/examples/PropPlaceholder.js
@@ -6,10 +6,11 @@ import React from 'react';
 import { styles } from '../helpers';
 import { TextInput, View } from 'react-native';

-const TextInputPlaceholderExample = () =>
+const TextInputPlaceholderExample = () => (
  <View>
    <TextInput placeholder="This is placeholder text" style={styles.textinput} />
    <TextInput multiline={true} placeholder="This is placeholder text" style={styles.multiline} />
-  </View>;
+  </View>
+);

 export default TextInputPlaceholderExample;
--- a/docs/storybook/1-components/TextInput/examples/PropSecureTextEntry.js
+++ b/docs/storybook/1-components/TextInput/examples/PropSecureTextEntry.js
@@ -6,12 +6,8 @@ import React from 'react';
 import { styles } from '../helpers';
 import { TextInput } from 'react-native';

-const TextInputSecureTextEntryExample = () =>
-  <TextInput
-    defaultValue="abc"
-    numberOfLines={2}
-    secureTextEntry={true}
-    style={styles.textinput}
-  />;
+const TextInputSecureTextEntryExample = () => (
+  <TextInput defaultValue="abc" numberOfLines={2} secureTextEntry={true} style={styles.textinput} />
+);

 export default TextInputSecureTextEntryExample;
--- a/docs/storybook/1-components/TextInput/examples/PropSelectTextOnFocus.js
+++ b/docs/storybook/1-components/TextInput/examples/PropSelectTextOnFocus.js
@@ -6,7 +6,7 @@ import React from 'react';
 import { styles } from '../helpers';
 import { TextInput, View } from 'react-native';

-const TextInputSelectTextOnFocusExample = () =>
+const TextInputSelectTextOnFocusExample = () => (
  <View>
    <TextInput
      defaultValue="text is selected on focus"
@@ -21,6 +21,7 @@ const TextInputSelectTextOnFocusExample = () =>
      selectTextOnFocus={true}
      style={styles.multiline}
    />
-  </View>;
+  </View>
+);

 export default TextInputSelectTextOnFocusExample;
--- a/docs/storybook/1-components/TextInput/examples/Rewrite.js
+++ b/docs/storybook/1-components/TextInput/examples/Rewrite.js
@@ -27,9 +27,7 @@ export default class TextInputRewrite extends React.Component {
          style={helperStyles.textinput}
          value={this.state.text}
        />
-        <Text style={[styles.remainder, { color: remainderColor }]}>
-          {remainder}
-        </Text>
+        <Text style={[styles.remainder, { color: remainderColor }]}>{remainder}</Text>
      </View>
    );
  }
--- a/docs/storybook/1-components/TextInput/helpers.js
+++ b/docs/storybook/1-components/TextInput/helpers.js
@@ -37,9 +37,7 @@ export class WithLabel extends React.Component {
    return (
      <View style={withLabelStyles.labelContainer}>
        <View style={withLabelStyles.label}>
-          <Text>
-            {this.props.label}
-          </Text>
+          <Text>{this.props.label}</Text>
        </View>
        {this.props.children}
      </View>
--- a/docs/storybook/1-components/Touchable/TouchableHighlightScreen.js
+++ b/docs/storybook/1-components/Touchable/TouchableHighlightScreen.js
@@ -11,7 +11,7 @@ import React from 'react';
 import { TouchableHighlightDisabled } from './examples/PropDisabled';
 import UIExplorer, { AppText, Description, DocItem, Section, storiesOf } from '../../ui-explorer';

-const TouchableHighlightScreen = () =>
+const TouchableHighlightScreen = () => (
  <UIExplorer title="TouchableHighlight" url="1-components/Touchable">
    <Description>
      <AppText>
@@ -87,6 +87,7 @@ const TouchableHighlightScreen = () =>
        }}
      />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('TouchableHighlight', TouchableHighlightScreen);
--- a/docs/storybook/1-components/Touchable/TouchableOpacityScreen.js
+++ b/docs/storybook/1-components/Touchable/TouchableOpacityScreen.js
@@ -10,7 +10,7 @@ import React from 'react';
 import { TouchableOpacityDisabled } from './examples/PropDisabled';
 import UIExplorer, { AppText, Description, DocItem, Section, storiesOf } from '../../ui-explorer';

-const TouchableOpacityScreen = () =>
+const TouchableOpacityScreen = () => (
  <UIExplorer title="TouchableOpacity" url="1-components/Touchable">
    <Description>
      <AppText>
@@ -69,6 +69,7 @@ const TouchableOpacityScreen = () =>
        }}
      />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('TouchableOpacity', TouchableOpacityScreen);
--- a/docs/storybook/1-components/Touchable/TouchableWithoutFeedbackScreen.js
+++ b/docs/storybook/1-components/Touchable/TouchableWithoutFeedbackScreen.js
@@ -18,7 +18,7 @@ import UIExplorer, {
  storiesOf
 } from '../../ui-explorer';

-const TouchableWithoutFeedbackScreen = () =>
+const TouchableWithoutFeedbackScreen = () => (
  <UIExplorer title="TouchableWithoutFeedback" url="1-components/Touchable">
    <Description>
      <AppText>
@@ -120,6 +120,7 @@ constant to reduce memory allocations.`}

      <DocItem description="Hit slop" example={{ render: () => <PropHitSlop /> }} />
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 storiesOf('Components', module).add('TouchableWithoutFeedback', TouchableWithoutFeedbackScreen);
--- a/docs/storybook/1-components/Touchable/examples/CustomStyleOverrides.js
+++ b/docs/storybook/1-components/Touchable/examples/CustomStyleOverrides.js
@@ -28,9 +28,7 @@ export default class TouchableCustomStyleOverridesExample extends React.Componen
              style={[styles.touchable, this.state[button] && styles.blue]}
              underlayColor={processColor('#1B95E0', 0.125)}
            >
-              <Text style={[!this.state[button] && styles.text]}>
-                {button}
-              </Text>
+              <Text style={[!this.state[button] && styles.text]}>{button}</Text>
            </TouchableHighlight>
          );
        })}
--- a/docs/storybook/1-components/Touchable/examples/DelayEvents.js
+++ b/docs/storybook/1-components/Touchable/examples/DelayEvents.js
@@ -46,18 +46,12 @@ export default class TouchableDelayEvents extends PureComponent {
            onPressOut={this._createPressHandler('pressOut: 1000ms delay')}
          >
            <View>
-              <Text style={styles.touchableText}>
-                {displayName}
-              </Text>
+              <Text style={styles.touchableText}>{displayName}</Text>
            </View>
          </Touchable>
        </View>
        <View style={styles.eventLogBox}>
-          {this.state.eventLog.map((e, ii) =>
-            <Text key={ii}>
-              {e}
-            </Text>
-          )}
+          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
        </View>
      </View>
    );
--- a/docs/storybook/1-components/Touchable/examples/FeedbackEvents.js
+++ b/docs/storybook/1-components/Touchable/examples/FeedbackEvents.js
@@ -47,11 +47,7 @@ export default class TouchableFeedbackEvents extends PureComponent {
          </Touchable>
        </View>
        <View style={styles.eventLogBox}>
-          {this.state.eventLog.map((e, ii) =>
-            <Text key={ii}>
-              {e}
-            </Text>
-          )}
+          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
        </View>
      </View>
    );
--- a/docs/storybook/1-components/Touchable/examples/PropHitSlop.js
+++ b/docs/storybook/1-components/Touchable/examples/PropHitSlop.js
@@ -39,9 +39,7 @@ export default class TouchableHitSlopExample extends React.Component {
          </TouchableOpacity>
        </View>
        <View style={styles.logBox}>
-          <Text>
-            {log}
-          </Text>
+          <Text>{log}</Text>
        </View>
      </View>
    );
--- a/docs/storybook/1-components/View/ViewScreen.js
+++ b/docs/storybook/1-components/View/ViewScreen.js
@@ -19,7 +19,7 @@ import UIExplorer, {
  StyleList
 } from '../../ui-explorer';

-const ViewScreen = () =>
+const ViewScreen = () => (
  <UIExplorer title="View" url="1-components/View">
    <Description>
      <AppText>
@@ -285,11 +285,12 @@ const ViewScreen = () =>
          render: () => <ZIndexExample />
        }}
      />
-      {transformExamples.map(({ title, render }, i) =>
+      {transformExamples.map(({ title, render }, i) => (
        <DocItem description={title} key={i} example={{ render }} />
-      )}
+      ))}
    </Section>
-  </UIExplorer>;
+  </UIExplorer>
+);

 const stylePropTypes = [
  {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Nicolas Gallagher	450722153d	0.0.128	2017-09-20 09:45:25 -07:00
Nicolas Gallagher	fbba32defb	[fix] cross-browser flex styles Fix #616 Close #648	2017-09-19 15:44:10 -07:00
Nicolas Gallagher	d762d64b49	Revert SSR Image change Reverts `3c660e2ad7` See #543	2017-09-19 15:23:09 -07:00
Nicolas Gallagher	a5b1dda62d	0.0.127	2017-09-19 15:12:13 -07:00
Nicolas Gallagher	aad904b550	[fix] remove 'use strict' from warnValidStyle	2017-09-19 15:07:54 -07:00
Unknown	a01e895e30	[change] RefreshControl placeholder Fix #638 Close #644	2017-09-19 13:44:31 -07:00
Nicolas Gallagher	52e5d41518	[fix] keyboard interaction with Touchable as link Fix #643 Close #645	2017-09-19 13:40:57 -07:00
Nicolas Gallagher	77a40b6237	[fix] Easing import when using babel plugin Fix #649	2017-09-19 13:37:12 -07:00
Nicolas Gallagher	4bbe1a40aa	0.0.126	2017-09-18 21:08:39 -07:00
Nicolas Gallagher	6942e4e417	Shallow render ActivityIndicator tests These snapshots should be improved by flattening the React Native style object.	2017-09-18 19:47:03 -07:00
Nicolas Gallagher	63daff7f80	Simplify Switch tests	2017-09-18 19:32:02 -07:00
Nicolas Gallagher	662b7c3d6e	Simplify Image snapshot testing	2017-09-18 19:26:48 -07:00
Nicolas Gallagher	12fb588596	Simplify View snapshot testing	2017-09-18 19:26:11 -07:00
Nicolas Gallagher	5cb09b1a9e	[fix] disallow text node children of View Catch text nodes that are not the only child of View. Fixes a case missing from `0ad6ab948b`.	2017-09-18 13:28:51 -07:00
Nicolas Gallagher	c03cfdf8bd	Add compile task to build task	2017-09-17 11:25:50 -07:00
Nicolas Gallagher	997b598de8	[fix] event normalization Work better with simulated events, and avoid crashing if 'nativeEvent.target' isn't an element node. Close #597	2017-09-15 15:16:40 -07:00
Nicolas Gallagher	6fe796f9da	[add] accessibilityRole 'label' to Text	2017-09-15 11:29:44 -07:00
Nicolas Gallagher	0ad6ab948b	[fix] disallow text node children of View Fix #627	2017-09-15 11:29:41 -07:00
Nicolas Gallagher	32a23136af	0.0.125	2017-09-14 15:16:52 -07:00
Nicolas Gallagher	96f48226cb	[fix] ColorPropType validation Check color is of type string before using `indexOf`. Fix #630	2017-09-14 13:19:13 -07:00
Peter Schussheim	f1ef0f21af	Fix typo in NetInfo docs	2017-09-14 11:31:18 -07:00
Unknown	d42e8907ca	[fix] return value of Keyboard.addListener Close #631 Fix #632	2017-09-14 11:26:46 -07:00
Nicolas Gallagher	90724b2cef	[fix] filter unsupported ScrollView props Fix #633	2017-09-14 11:20:18 -07:00
Nicolas Gallagher	dd0f1de3d1	[fix] avoid prop types check on UnimplementedView Fix #635	2017-09-14 11:08:36 -07:00
Nicolas Gallagher	fc751ed715	[fix] remove TouchalbeWithoutFeedback children prop type Fix #634	2017-09-14 10:49:49 -07:00
Nicolas Gallagher	917b06a690	Update README	2017-09-13 11:27:36 -07:00
Nicolas Gallagher	80cb7baf82	0.0.124	2017-09-12 15:58:28 -07:00
Nicolas Gallagher	f08515b1f1	Avoid compiling tests	2017-09-12 15:58:14 -07:00
Nicolas Gallagher	8591bf7ce5	[fix] add AppState to Babel plugin list	2017-09-12 15:46:27 -07:00
Nicolas Gallagher	b7c8f00fcc	0.0.123	2017-09-12 11:31:49 -07:00
Nicolas Gallagher	ed81b985a9	Include the babel dir in published package	2017-09-12 11:31:38 -07:00
Nicolas Gallagher	441dc8efff	0.0.122	2017-09-12 10:54:01 -07:00
Paul Armstrong	7e8ef5b72c	Add babel plugin to rewrite import paths Replace 'react-native' imports with direct imports to the relevant module within 'react-native-web'. Follow up task is to also rewrite 'react-native-web' imports from the entry file to become direct imports (reduces bundle size). Close #608	2017-09-12 10:45:42 -07:00
Nicolas Gallagher	641c8c47e0	[change] Button text style to match Android	2017-09-11 15:52:44 -07:00
Nicolas Gallagher	87ead7f64e	Fix doc styles	2017-09-11 15:52:41 -07:00
Nicolas Gallagher	5ed2127175	[fix] default Text styles Match React Native's default font-size for Text, and use the system font stack by default. Nested Text elements will inherit font styles from their parent Text.	2017-09-11 15:47:49 -07:00
Nicolas Gallagher	e802026298	Benchmarks: add emotion and latest results	2017-09-10 12:52:07 -07:00
Nicolas Gallagher	5d24f4c8fa	Update jest	2017-09-10 10:36:39 -07:00
Nicolas Gallagher	a9f1afc07c	Update formatter and linter tools	2017-09-10 10:35:07 -07:00
Nicolas Gallagher	d185d81560	Update build tools	2017-09-10 10:32:11 -07:00
Nicolas Gallagher	66fa09da8e	Move modality initialization to StyleSheet	2017-09-10 10:28:22 -07:00
Nicolas Gallagher	bae4dd806a	[change] rename createDOMElement to createElement Allow 'createElement' to be used as a drop-in replacement for 'ReactDOM.createElement'.	2017-09-10 10:28:21 -07:00
Unknown	4a680fd9b6	[add] basic support for KeyboardAvoidingView Close #624	2017-09-08 10:57:44 -07:00