Enhanced React Native for Web support

Support for React Native for Web apps was added in #316 and it enables building cross platform React Native apps for the web with Create React App.

However, creating this kind of apps with create-react-app is not as straightforward yet as creating web apps: https://github.com/facebookincubator/create-react-app/issues/316#issuecomment-246139637. To create a cross platform app, at the moment you need to initialize a React Native app (react-native init), initialize a React app (create-react-app) in a separate folder, and then merge the folders and package.json files manually.

Being able to bootstrap a cross platform app directly with create-react-app would make this a lot easier.

To create a cross platform app one would simply run create-react-app --react-native. This would do following things:

• As usual, install react-scripts from npm.
• Run react-scripts init --react-native which would:
  • Install react, react-dom, react-native and react-native-web as dependencies.
  • Bootstrap a React Native app with react-native/local-cli/cli.js like react-native-cli does (this is equivalent to our react-scripts init, and this way it’s always up-to-date with RN.)
  • Copy files from a modified version of our template that uses React Native components and styles.
  • Add the local react-native packager start script, in addition to our usual scripts, to package.json.

An app created by react-native init currently looks like this:

android/
ios/
node_modules/
.buckconfig
.flowconfig
.gitignore
.watchmanconfig
index.android.js
index.ios.js
package.json

An app created with create-react-app --react-native would look like this:

  android/
  ios/
  node_modules/
+ public/
+  favicon.ico
+  index.html
+ src/
+   index.js        # Web entry point
  .buckconfig
  .flowconfig
  .gitignore
  .watchmanconfig
  index.android.js
  index.ios.js
  package.json
+ README.md

Additionally we should also add support for .web.js file extension to our webpack module resolution so that if filename.web.js exists, it will be used instead of filename.js, allowing for web specific code to be written the same way you can with .android.js and .ios.js extensions in React Native.

Note: for consistency with React Native, it might be nice to move the index.js file to the top level. This would also be more agnostic to different folder structures, such as packages/ folder (#741). However, I think that change should be considered independently of React Native support discussed in this issue.

I would be interested in working on this, if we want to support it in Create React App.

[brunolemos]

Currently most react-native third party packages are published in es6, not es5, so if you try to use them you get a Unexpected token import error on chrome.

Shouldn’t create-react-app handle this if it says react-native-web is supported? Maybe add a config in webpack to compile react-native-* packages with es2015 preset? Don’t wanna eject to do this.

Let me know if this should be a separated issue.

[gaearon]

If you find or build one let us know! This is not our focus right now.