Setup

Find out about package aliasing, package optimization, using types, and customizing the app’s HTML shell.

Package aliasing #

Bundler #

Configure your module bundler to alias the package to react-native. For example, modify your webpack configuration as follows:

// webpack.config.js
module.exports = {
  // ...the rest of your config

  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    }
  }
}

Compiler #

Babel supports module aliasing using babel-plugin-module-resolver

{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "^react-native$": "react-native-web"
      }
    }]
  ]
}

Jest #

Jest can be configured using the provided preset. This will map react-native to react-native-web and provide appropriate mocks. Please refer to the Jest documentation for more information.

{
  "preset": "react-native-web"
}

Flow #

Flow can be configured to understand the aliased module

[options]
# Alias the package name
module.name_mapper='^react-native$' -> 'react-native-web'

Node.js #

Node.js can alias react-native to react-native-web using module-alias. This is useful if you want to pre-render the app (e.g., server-side rendering or build-time rendering).

// Install the `module-alias` package as a dependency first
const moduleAlias = require("module-alias");
moduleAlias.addAliases({
  "react-native": require.resolve("react-native-web"),
});
moduleAlias();

Package optimization #

The project’s Babel plugin (see Installation) is recommended for build-time optimizations and to prune modules not used by your application.

{
  "plugins": ['react-native-web']
}

Types #

Flow can be configured to pull types from React Native for Web’s source code.

[options]
# Point flow to the 'module' field by default
module.system.node.main_field=module
module.system.node.main_field=main

Root element #

Full-screen React Native apps with a root <ScrollView> may require the following styles inlined in the HTML document shell. (Example.)

/* These styles make the body full-height */
html, body { height: 100%; }
/* These styles disable body scrolling if you are using <ScrollView> */
body { overflow: hidden; }
/* These styles make the root element full-height */
#root { display:flex; height:100%; }