Easily create react-native-web apps with create-react-app

[amsb]

In experimenting with react-native-web we found that while create-react-app will helpfully alias react-native-web, many react-native packages are not distributed in compiled form. For example, react-native-paper appears to work fairly well with react-native-web but can't be easily added to a create-react-app project. To fix this issue and allow continued experimentation, we forked create-react-app 2.1.1 and extended the webpack config to compile react-native-* packages in node_modules with the full suite of transforms, including JSX and stripping flow types. You can now easily get started consuming other react-native projects within a create-react-app by bootstrapping your app with the command (assuming you use npm 5.2+):

npx create-react-app --scripts-version=react-scripts-for-react-native-web my-app

This isn't well tested yet as we're primarily experimenting with react-native-paper, but we thought it might be useful to a broader audience. More information here:

• https://www.npmjs.com/package/react-scripts-for-react-native-web
• https://github.com/amsb/create-react-app-for-react-native-web/tree/master/packages/react-scripts

[necolas]

Thanks for looking to fill in some of the gaps. Have you thought about sharing this with the create-react-app project too?

[amsb]

I'll submit an issue and see if there is interest in upstreaming the change.

[dalcib]

Another option is to use babelInclude in customize-cra

yarn add customize-cra react-app-rewired --dev

babelInclude

Overwites the include option for babel loader, for when you need to transpile a module in your node_modules folder.

// config-overide.js
module.exports = override(
  babelInclude([
    path.resolve('src'), // make sure you link your own source
    path.resolve('node_modules/native-base-shoutem-theme'),
    path.resolve('node_modules/react-navigation'),
    path.resolve('node_modules/react-native-easy-grid')
  ])
);

[amsb]

Thank you for suggesting this @dalcib! The override config looks clean and simple. I was aware of react-app-rewired, but thought it was no longer supported and was waiting for its to successor to emerge. In the meantime, it was easy enough to create a simple fork. I can see how the naive pattern match will break with variously named react native packages so explicit will be more robust.

Do you know if react-app-rewired will continue to be maintained as dependency of customize-cra or if it will be merged in?

[dalcib]

@amsb, see the comment bellow from timarney/react-app-rewired#162 (comment)

@kopax The core functions of react-app-rewired work with CRA2.x, but many (most?) of the pre-existing rewires do not, because they were written for Webpack 2/3, and the Webpack 4 configuration has altered significantly - many of those rewires break. The decision finally was that there should be a split to a new project for CRA2.x rather than continuing react-app-rewired so that old rewires that were no longer maintained and were not CRA2.x compatible were not mistakenly thought to be working.

Two potential splits have emerged - one being craco and the other being customize-cra. Customize-cra uses the core functionality from react-app-rewired, but provides new rewires written for CRA2.x. Craco provides that functionality in a separate way without requiring react-app-rewired.

[0xpatrickdev]

Piggy backing off of @dalcib, here is an example of a full implementation of the CRA config required for RNW:

// config-overrides.js
const {
  addWebpackAlias,
  babelInclude,
  fixBabelImports,
  override,
} = require('customize-cra')

const path = require('path')

module.exports = override(
  fixBabelImports('module-resolver', {
    alias: {
      '^react-native$': 'react-native-web',
    },
  }),
  addWebpackAlias({
    'react-native': 'react-native-web',
    'react-native-svg': 'svgs',  // not necessary unless you wanted to do this
  }),
  babelInclude([
    path.resolve('src'), // make sure you link your own source
    // any react-native modules you need babel to compile
    path.resolve('node_modules/react-native-indicators'), 
    path.resolve('node_modules/react-native-popup-menu'),
    path.resolve('node_modules/react-native-vector-icons'),
    path.resolve('node_modules/react-native-web-linear-gradient'),
    path.resolve('node_modules/react-router-native'),
  ]),
)

And then update your npm scripts to be react-app-rewired start, react-app-rewired build, etc.

[pabloimmediate]

@pcooney10 Really helpful!

[kopax]

Thanks a lot, I will try this asap. !

[RichardLindhout]

I have made an easy tool to generate your React Native Web app with fast refresh on all platforms

https://github.com/web-ridge/create-react-native-web-application

npx create-react-native-web-application --name myappname

It used latest create react app and latest react native Cli in background and merges both

[RichardLindhout]

@pcooney10 thanks btw I used your config!

[RichardLindhout]

https://youtu.be/Pslo1WRpZz0

Here is the end result of a created app with some simple examples to show the power of React Native Web