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 PromiseObject.assignArray.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