0.1.8

This is properly supported and there are no ES6 modules in the package at
the moment.

babel/__tests__/__snapshots__/index-test.js.snap

@@ -103,3 +103,59 @@ const { InvalidThing, TouchableOpacity } = require('react-native');
 const TouchableOpacity = require('react-native-web/dist/components/Touchable/TouchableOpacity');
 "
 `;
+
+exports[`10. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { View } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as View } from 'react-native-web/dist/components/View';
+"
+`;
+
+exports[`11. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as Switch } from 'react-native-web/dist/components/Switch';
+export { default as Text } from 'react-native-web/dist/components/Text';
+export { default as MyView } from 'react-native-web/dist/components/View';
+export { default as ViewPropTypes } from 'react-native-web/dist/components/View/ViewPropTypes';
+"
+`;
+
+exports[`12. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { createElement, Switch, StyleSheet } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as createElement } from 'react-native-web/dist/modules/createElement';
+export { default as Switch } from 'react-native-web/dist/components/Switch';
+export { default as StyleSheet } from 'react-native-web/dist/apis/StyleSheet';
+"
+`;
+
+exports[`13. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { InvalidThing, TouchableOpacity } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { InvalidThing } from 'react-native-web';
+export { default as TouchableOpacity } from 'react-native-web/dist/components/Touchable/TouchableOpacity';
+"
+`;
+
+exports[`14. Rewrite react-native paths for react-native-web 1`] = `
+"
+export { default as RNW } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as RNW } from 'react-native-web';
+"
+`;

babel/__tests__/index-test.js

@@ -30,6 +30,13 @@ pluginTester({
     // "let { Switch, Text, View: MyView } = require('react-native-web');",
     // "var { createElement, Switch, StyleSheet } = require('react-native-web');",
     // "const { InvalidThing, TouchableOpacity } = require('react-native-web');",
+
+    // export react-native
+    "export { View } from 'react-native';",
+    "export { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';",
+    "export { createElement, Switch, StyleSheet } from 'react-native';",
+    "export { InvalidThing, TouchableOpacity } from 'react-native';",
+    "export { default as RNW } from 'react-native';",
     {
       code: "const RNW = require('react-native');",
       output: "const RNW = require('react-native');",

babel/index.js

@@ -7,7 +7,7 @@ const getDistLocation = importName => {
     case 'AppRegistry':
     case 'AppState':
     case 'AsyncStorage':
-    case 'BackAndroid':
+    case 'BackHandler':
     case 'Clipboard':
     case 'Dimensions':
     case 'Easing':
@@ -106,7 +106,7 @@ module.exports = function({ types: t }) {
     visitor: {
       ImportDeclaration(path) {
         const { source, specifiers } = path.node;
-        if (source.value === 'react-native' && specifiers.length) {
+        if (source && source.value === 'react-native' && specifiers.length) {
           const imports = specifiers
             .map(specifier => {
               if (t.isImportSpecifier(specifier)) {
@@ -127,6 +127,35 @@ module.exports = function({ types: t }) {
           path.replaceWithMultiple(imports);
         }
       },
+      ExportNamedDeclaration(path) {
+        const { source, specifiers } = path.node;
+        if (source && source.value === 'react-native' && specifiers.length) {
+          const exports = specifiers
+            .map(specifier => {
+              if (t.isExportSpecifier(specifier)) {
+                const exportName = specifier.exported.name;
+                const localName = specifier.local.name;
+                const distLocation = getDistLocation(localName);
+
+                if (distLocation) {
+                  return t.exportNamedDeclaration(
+                    null,
+                    [t.exportSpecifier(t.identifier('default'), t.identifier(exportName))],
+                    t.stringLiteral(distLocation)
+                  );
+                }
+                return t.exportNamedDeclaration(
+                  null,
+                  [specifier],
+                  t.stringLiteral('react-native-web')
+                );
+              }
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(exports);
+        }
+      },
       VariableDeclaration(path) {
         if (isReactNativeRequire(t, path.node)) {
           const { id } = path.node.declarations[0];

docs/guides/getting-started.md

@@ -36,7 +36,7 @@ const babelLoaderConfiguration = {
       cacheDirectory: true,
       // This aliases 'react-native' to 'react-native-web' and includes only
       // the modules needed by the app
-      plugins: ['react-native-web/babel']
+      plugins: ['react-native-web/babel'],
       // The 'react-native' preset is recommended (or use your own .babelrc)
       presets: ['react-native']
     }

package.json

@@ -1,9 +1,8 @@
 {
   "name": "react-native-web",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "description": "React Native for Web",
   "main": "dist/index.js",
-  "module": "dist/module.js",
   "files": [
     "babel",
     "dist",

src/apis/AsyncStorage/index.js

@@ -61,6 +61,11 @@ export default class AsyncStorage {
     }, callback);
   }
 
+  /**
+   * (stub) Flushes any pending requests using a single batch call to get the data.
+   */
+  static flushGetRequests() {}
+
   /**
    * Gets *all* keys known to the app, for all callers, libraries, etc.
    */

src/apis/BackHandler/index.js

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

src/components/ActivityIndicator/index.js

@@ -17,6 +17,10 @@ import ViewPropTypes from '../View/ViewPropTypes';
 import { bool, number, oneOf, oneOfType, string } from 'prop-types';
 import React, { Component } from 'react';
 
+const createSvgCircle = style => (
+  <circle cx="16" cy="16" fill="none" r="14" strokeWidth="4" style={style} />
+);
+
 class ActivityIndicator extends Component {
   static displayName = 'ActivityIndicator';
 
@@ -40,29 +44,15 @@ class ActivityIndicator extends Component {
 
     const svg = (
       <svg height="100%" viewBox="0 0 32 32" width="100%">
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          strokeWidth="4"
-          style={{
-            stroke: color,
-            opacity: 0.2
-          }}
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          strokeWidth="4"
-          style={{
-            stroke: color,
-            strokeDasharray: 80,
-            strokeDashoffset: 60
-          }}
-        />
+        {createSvgCircle({
+          stroke: color,
+          opacity: 0.2
+        })}
+        {createSvgCircle({
+          stroke: color,
+          strokeDasharray: 80,
+          strokeDashoffset: 60
+        })}
       </svg>
     );
 

src/components/Switch/__tests__/index-test.js

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

src/module.js

@@ -9,7 +9,7 @@ import Animated from './apis/Animated';
 import AppRegistry from './apis/AppRegistry';
 import AppState from './apis/AppState';
 import AsyncStorage from './apis/AsyncStorage';
-import BackAndroid from './apis/BackAndroid';
+import BackHandler from './apis/BackHandler';
 import Clipboard from './apis/Clipboard';
 import Dimensions from './apis/Dimensions';
 import Easing from './apis/Easing';
@@ -73,7 +73,7 @@ export {
   AppRegistry,
   AppState,
   AsyncStorage,
-  BackAndroid,
+  BackHandler,
   Clipboard,
   Dimensions,
   Easing,
@@ -138,8 +138,7 @@ const ReactNative = {
   AppRegistry,
   AppState,
   AsyncStorage,
-  BackAndroid,
-  BackHandler: BackAndroid,
+  BackHandler,
   Clipboard,
   Dimensions,
   Easing,