Create-react-app: Enhanced React Native for Web support

[fson]

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.

[gaearon]

cc @ericvicenti who experimented with this

[remon-nashid]

Excited to hear @ericvicenti's opinion on this matter :).

[gaearon]

Also cc @lacker

[lacker]

Ah thanks for ccing me on this issue. Making it reasonable to build a joint React Native + React-web app is definitely something we want to have a recommended way for. I think the root question where we came down differently than this proposal here is whether it's reasonable to expect the same package.json to apply to both web app and native app. My conclusion is "no" because quite a number of packages are going to end up being native-specific or web-specific for any reasonably sized application. So I think the most practical way to support doing joint React + RN development is actually to have separate package.json configurations, and instead to have some recommended way to have a file of code that is shared between the two. I could be wrong here though....

[gaearon]

There is also a difference between classic code sharing approach and actual attempt to reuse RN primitives on the web (what RNW does).

[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.

[remon-nashid]

@brunolemos yeah I typically include entire node_modules to be loaded by babel. Despite how terrible that sounds, it _seems_ to work so far. Checkout the discussion in #1125.

[webdevbyjoss]

hey folks, is there any progress planned for this feature? or maybe you could point me to some good examples of combining the Native and Web in a single project, ideally using "react-native-scripts" + "react-scripts" without a need to eject?

[gaearon]

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

[gaearon]

I'm going to close since this is not something we're looking at.
If somebody has specific ideas around improving, we're always happy to consider PRs.

[brunolemos]

Regarding my comment above, what I did was to use a custom react-scripts that allowed me to add some webpack config, so there was no need to eject.

I used my own https://github.com/brunolemos/extensible-react-scripts
but https://github.com/timarney/react-app-rewired should work too.

[gaearon]

FYI, we're starting the work to compile deps with babel-preset-env in Create React App: https://github.com/facebookincubator/create-react-app/pull/3776

Let us know if you have feedback about how this should work.