Skip to content

Enhanced React Native for Web support #814

Closed
@fson

Description

@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: #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-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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions