React Native Web

Github

šŸ“š Documentation

šŸŽ® CodeSandbox Template

Integrations

Examples of using React Native for Web with other web tools:

Getting Started

Install

npm install react react-dom react-native-web

Your application may need to polyfillĀ Promise,Ā Object.assign,Ā Array.from, andĀ [ResizeObserver](https://github.com/que-etc/resize-observer-polyfill)Ā as necessary for your desired browser support.

Recommended starter kits

Expo

ExpoĀ is a framework and a platform for universal React applications. It is simple to setup, optimizes the web build, and provides dozens of additional cross-platform APIs.

šŸƒā€ā™‚ļøInstall and run expo start --web.

šŸ“– Expo guide on react-native-web

Starting in Expo v33, projects bootstrapped with the Expo CLI will have web support from the start. No need to install yourself unless it's an older project.

To add web support to an existing Expo app you can do the following:

npm install expo-cli --global
expo init my-app
cd my-app
yarn add react-native-web@0.11.7 react-dom
expo start --web

Ensure your project has at least expo@^33.0.0 installed.

Create React App

Create React AppĀ is a good way to setup a simple, web-only React app with built-in support for aliasingĀ react-native-webĀ toĀ react-native.

npx create-react-app my-app
cd my-app
npm install react-native-web
npm start

Standalone configurations

Configuring a module bundler

If you have a custom setup, you may choose to 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'
}
}
}

Configuring Babel

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

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

Configuring Jest

JestĀ can be configured using the provided preset. This will mapĀ react-nativeĀ toĀ react-native-webĀ and provide appropriate mocks:

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

Please refer to the Jest documentation for more information.

Configuring Node.js

Node.js can aliasĀ react-nativeĀ toĀ react-native-webĀ usingĀ [module-alias](https://www.npmjs.com/package/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();

References