Repository navigation
Enhanced React Native for Web support #814
Description
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: #316 (comment). 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-scriptsfrom npm. - Run
react-scripts init --react-nativewhich would:- Install
react,react-dom,react-nativeandreact-native-webas dependencies. - Bootstrap a React Native app with
react-native/local-cli/cli.jslike react-native-cli does (this is equivalent to ourreact-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-nativepackager start script, in addition to our usual scripts, topackage.json.
- Install
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.mdAdditionally 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.
Activity
gaearon commentedon Oct 1, 2016
cc @ericvicenti who experimented with this
ross-rosario commentedon Dec 3, 2016
Excited to hear @ericvicenti's opinion on this matter :).
gaearon commentedon Dec 5, 2016
Also cc @lacker
lacker commentedon Dec 5, 2016
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.jsonto 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 commentedon Dec 5, 2016
There is also a difference between classic code sharing approach and actual attempt to reuse RN primitives on the web (what RNW does).
brunolemos commentedon Dec 26, 2016
Currently most
react-nativethird party packages are published ines6, notes5, so if you try to use them you get aUnexpected token importerror on chrome.Shouldn't
create-react-apphandle this if it saysreact-native-webis supported?Maybe add a config in webpack to compile
react-native-*packages withes2015preset?Don't wanna eject to do this.
Let me know if this should be a separated issue.
ross-rosario commentedon Dec 26, 2016
@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 commentedon Jun 21, 2017
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 commentedon Jun 22, 2017
If you find or build one let us know!
This is not our focus right now.
gaearon commentedon Jan 8, 2018
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 commentedon Jan 8, 2018
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 commentedon Jan 13, 2018
FYI, we're starting the work to compile deps with
babel-preset-envin Create React App: #3776Let us know if you have feedback about how this should work.