0.0.124

Avoid compiling tests
[fix] add AppState to Babel plugin list
2026-03-30 23:23:35 +08:00 · 2017-09-12 15:58:28 -07:00 · 2017-09-12 15:58:14 -07:00 · 2017-09-12 15:46:27 -07:00 · 2017-09-12 11:31:49 -07:00 · 2017-09-12 11:31:38 -07:00
157 changed files with 2039 additions and 1248 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/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/core.js
+++ b/core.js
@@ -1 +0,0 @@
-module.exports = require('./dist/core');
--- 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,8 +11,8 @@ import PropSize from './examples/PropSize';
 import React from 'react';
 import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';

-const ActivityIndicatorScreen = () =>
-  <UIExplorer title="ActivityIndicator" url="components/ActivityIndicator">
+const ActivityIndicatorScreen = () => (
+  <UIExplorer title="ActivityIndicator" url="1-components/ActivityIndicator">
    <Description>Displays a customizable activity indicator</Description>
    <Section title="Props">
      <DocItem name="...View 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,8 +17,8 @@ import UIExplorer, {
  storiesOf
 } from '../../ui-explorer';

-const ButtonScreen = () =>
-  <UIExplorer title="Button" url="components/Button">
+const ButtonScreen = () => (
+  <UIExplorer title="Button" url="1-components/Button">
    <Description>
      <AppText>
        A basic button component. Supports a minimal level of customization. You can build your own
@@ -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,8 +25,8 @@ import UIExplorer, {
  storiesOf
 } from '../../ui-explorer';

-const ImageScreen = () =>
-  <UIExplorer title="Image" url="components/Image">
+const ImageScreen = () => (
+  <UIExplorer title="Image" url="1-components/Image">
    <Description>
      An accessibile image component with support for image resizing, default image, and child
      content.
@@ -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,8 +10,8 @@ import PropTrackColor from './examples/PropTrackColor';
 import React from 'react';
 import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';

-const ProgressBarScreen = () =>
-  <UIExplorer title="ProgressBar" url="components/ProgressBar">
+const ProgressBarScreen = () => (
+  <UIExplorer title="ProgressBar" url="1-components/ProgressBar">
    <Description>Display an activity progress bar</Description>
    <Section title="Props">
      <DocItem name="...View 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,8 +18,8 @@ import UIExplorer, {
  TextList
 } from '../../ui-explorer';

-const ScrollViewScreen = () =>
-  <UIExplorer title="ScrollView" url="components/ScrollView">
+const ScrollViewScreen = () => (
+  <UIExplorer title="ScrollView" url="1-components/ScrollView">
    <Description>
      <AppText>
        A scrollable <Code>View</Code> that provides itegration with the touch-locking responder
@@ -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,8 +22,8 @@ import UIExplorer, {
  storiesOf
 } from '../../ui-explorer';

-const SwitchScreen = () =>
-  <UIExplorer title="Switch" url="components/Switch">
+const SwitchScreen = () => (
+  <UIExplorer title="Switch" url="1-components/Switch">
    <Description>
      <AppText>
        This is a controlled component that requires an <Code>onValueChange</Code> callback that
@@ -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,8 +18,8 @@ import UIExplorer, {
  StyleList
 } from '../../ui-explorer';

-const TextScreen = () =>
-  <UIExplorer title="Text" url="components/Text">
+const TextScreen = () => (
+  <UIExplorer title="Text" url="1-components/Text">
    <Description>
      <AppText>
        Text is component for displaying text. It supports style, basic touch handling, and inherits
@@ -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
@@ -18,6 +18,7 @@ import PropSecureTextEntry from './examples/PropSecureTextEntry';
 import PropSelectTextOnFocus from './examples/PropSelectTextOnFocus';
 import TextInputEvents from './examples/TextInputEvents';
 import TextInputRewrite, { TextInputRewriteInvalidCharacters } from './examples/Rewrite';
+import TouchableWrapper from './examples/TouchableWrapper';
 import React from 'react';
 import UIExplorer, {
  AppText,
@@ -30,8 +31,8 @@ import UIExplorer, {
  TextList
 } from '../../ui-explorer';

-const TextInputScreen = () =>
-  <UIExplorer title="TextInput" url="components/TextInput">
+const TextInputScreen = () => (
+  <UIExplorer title="TextInput" url="1-components/TextInput">
    <Description>
      <AppText>
        Accessible single- and multi-line text input via a keyboard. Supports features such as
@@ -362,7 +363,15 @@ nativeEvent: { key: keyValue } }`}</Code>{' '}
          render: () => <TextInputRewriteInvalidCharacters />
        }}
      />
+
+      <DocItem
+        description="Wrapped in a TouchableWithoutFeedback"
+        example={{
+          render: () => <TouchableWrapper />
+        }}
+      />
    </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/examples/TouchableWrapper.js
+++ b/docs/storybook/1-components/TextInput/examples/TouchableWrapper.js
@@ -0,0 +1,37 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { styles as helperStyles } from '../helpers';
+import { StyleSheet, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+export default class TouchableWrapper extends React.Component {
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View style={styles.container}>
+          <TextInput multiline={false} ref={this._setRef} style={helperStyles.textinput} />
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+
+  _handlePress = () => {
+    if (this._input) {
+      this._input.focus();
+    }
+  };
+
+  _setRef = c => {
+    this._input = c;
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 50
+  }
+});
--- 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,8 +11,8 @@ import React from 'react';
 import { TouchableHighlightDisabled } from './examples/PropDisabled';
 import UIExplorer, { AppText, Description, DocItem, Section, storiesOf } from '../../ui-explorer';

-const TouchableHighlightScreen = () =>
-  <UIExplorer title="TouchableHighlight" url="components/Touchable">
+const TouchableHighlightScreen = () => (
+  <UIExplorer title="TouchableHighlight" url="1-components/Touchable">
    <Description>
      <AppText>
        A wrapper for making views respond properly to touches. On press down, the opacity of the
@@ -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,8 +10,8 @@ import React from 'react';
 import { TouchableOpacityDisabled } from './examples/PropDisabled';
 import UIExplorer, { AppText, Description, DocItem, Section, storiesOf } from '../../ui-explorer';

-const TouchableOpacityScreen = () =>
-  <UIExplorer title="TouchableOpacity" url="components/Touchable">
+const TouchableOpacityScreen = () => (
+  <UIExplorer title="TouchableOpacity" url="1-components/Touchable">
    <Description>
      <AppText>
        A wrapper for making views respond properly to touches. On press down, the opacity of the
@@ -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,8 +18,8 @@ import UIExplorer, {
  storiesOf
 } from '../../ui-explorer';

-const TouchableWithoutFeedbackScreen = () =>
-  <UIExplorer title="TouchableWithoutFeedback" url="components/Touchable">
+const TouchableWithoutFeedbackScreen = () => (
+  <UIExplorer title="TouchableWithoutFeedback" url="1-components/Touchable">
    <Description>
      <AppText>
        Do not use unless you have a very good reason. All the elements that respond to press should
@@ -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/Show More
+++ b/Show More
Author	SHA1	Message	Date
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
Nicolas Gallagher	e34e4e38d3	0.0.121	2017-09-07 13:31:47 -07:00
Unknown	b23a4f55dc	[add] support for Keyboard API Close #625	2017-09-07 13:07:33 -07:00
Nicolas Gallagher	26bdf44a4c	[fix] TextInput keyPress events when child of Touchable Fix #612	2017-09-07 11:40:00 -07:00
Nicolas Gallagher	5e98107617	[fix] support "System" as a font-family on web Fix #622	2017-09-02 12:26:36 -07:00
Nicolas Gallagher	86ea0e5eff	Fix source code URLs in docs	2017-08-31 17:42:03 -07:00
Nicolas Gallagher	6e02c5690c	[add] support for AssetRegistry Applies changes from @fmoo to help with Metro packager support. Also fixed a Flow exposed by this change.	2017-08-31 12:32:24 -07:00
Nicolas Gallagher	c50d808a2b	[change] remove 'core' module export	2017-08-31 12:06:48 -07:00