React Native Web
Github
Documentation
šCodeSandbox Template
š®Integrations
Examples of using React Native for Web with other web tools:
Getting Started
Install
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:
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
.
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:
Configuring Babel
BabelĀ supports module aliasing usingĀ babel-plugin-module-resolver
Configuring 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.
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).