Registry / web-framework / react-native-web

react-native-web

library0.21.2jsnpmunverified

React Native for Web is a library that enables developers to run React Native components and APIs directly on the web using React DOM. It aims to maximize code reuse between native mobile and web platforms, providing a unified API surface that abstracts away platform-specific implementation details. The current stable version is 0.21.2, with minor releases occurring relatively frequently, indicating active development. Key differentiators include its ability to directly interpret React Native's styling system (Yoga layout), accessibility APIs, and core components for web rendering, thereby allowing a single codebase to target multiple platforms, distinct from approaches that require separate web components or extensive platform-specific logic.

web-framework

npm install react-native-web

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-WEB

react-native-web

web-frameworkjavascriptv0.21.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

{ View, Text, StyleSheet }

✓ import { View, Text, StyleSheet } from 'react-native';

✗ import { View, Text, StyleSheet } from 'react-native-web';

Components and APIs are imported directly from 'react-native' due to Babel/Webpack aliasing 'react-native' to 'react-native-web' in web builds.

AppRegistry

✓ import { AppRegistry } from 'react-native';

✗ import { AppRegistry } from 'react-native-web';

Used for registering and running the main application component, following the standard React Native pattern.

Platform

✓ import { Platform } from 'react-native';

Provides platform-specific checks (e.g., Platform.OS === 'web') for conditional code execution.

This quickstart demonstrates a basic React Native component rendered on the web using React Native for Web, including component registration and rendering to a specified DOM element.

import React from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class App extends React.Component { render() { return ( <View style={styles.box}> <Text style={styles.text}>Hello, world!</Text> </View> ); } } const styles = StyleSheet.create({ box: { padding: 10 }, text: { fontWeight: 'bold' } }); AppRegistry.registerComponent('App', () => App); AppRegistry.runApplication('App', { rootTag: document.getElementById('react-root') });

Debug

Known issues

breakingWith React 19 support introduced in v0.20.0, the `findNodeHandle` API is no longer supported on the web platform.

fix

Avoid using `findNodeHandle` in web-targeting code; consider alternative approaches for DOM node access or refactor to use web-specific APIs where necessary.

affects: >=0.20.0

breakingVersion 0.18.0 significantly reduced browser support, dropping compatibility for IE and legacy Android browsers. Supported browsers are Safari 10.1+, and Edge (Chromium).

fix

Ensure your target audience's browsers meet the new minimum requirements or consider transpilation/polyfills for broader compatibility, though full functionality is not guaranteed.

affects: >=0.18.0

breakingSince v0.18.0, styles are inserted on module evaluation rather than component rendering. This change affects server-side rendering, where style sheets now include styles from all evaluated modules, not just those from the initial render.

fix

Review server-side rendering setup to ensure correct style extraction and injection. You may need to adapt your build process to account for the earlier style insertion phase.

affects: >=0.18.0

breakingThe `I18nManager` API was updated in v0.15.0. Properties like `isRTL` and `doLeftAndRightSwapInRTL` are no longer direct properties and must be accessed via the `getConstants()` method.

fix

Update usage of `I18nManager` from `I18nManager.isRTL` to `I18nManager.getConstants().isRTL`.

affects: >=0.15.0

gotchaCorrect Babel/Webpack configuration is crucial for 'react-native' imports to resolve to 'react-native-web'. Without proper aliasing, web builds will fail.

fix

Ensure your build configuration (e.g., `babel-plugin-module-resolver`, Webpack aliases) is set up to alias `react-native` to `react-native-web` for web targets.

affects: all

Errors

Common errors & fixes

Error: Cannot find module 'react-native'

The build system (Webpack/Babel) is not configured to alias 'react-native' to 'react-native-web' for the web environment.

fix

Add `babel-plugin-module-resolver` or a Webpack alias to your build configuration to map `react-native` to `react-native-web` for web builds.

Invariant Violation: findNodeHandle is not supported on web.

Attempting to use `findNodeHandle` in a `react-native-web` application, which was removed with React 19 support in v0.20.0.

fix

Remove all calls to `findNodeHandle` from your codebase targeting the web. Consider using `ref` for direct DOM access or alternative web-specific APIs.

TypeError: (0 , react_dom__WEBPACK_IMPORTED_MODULE_2__.createRoot) is not a function

This typically occurs when `react-dom` is not correctly set up for React 18's `createRoot` API, or there's a version mismatch.

fix

Ensure `react-dom` peer dependency is `^18.0.0 || ^19.0.0` and that your application entry point uses `ReactDOM.createRoot` instead of `ReactDOM.render` for React 18 and newer.

ReferenceError: document is not defined

This error often happens during server-side rendering (SSR) when client-side APIs (like `document`) are accessed in a Node.js environment.

fix

Implement proper checks (e.g., `typeof document !== 'undefined'`) around client-specific code or use a library for SSR that provides a simulated DOM environment.

Upgrade

Version history

0.21.2latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React library functionality.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/necolas/react-native-web ↗

packagehttps://www.npmjs.com/package/react-native-web ↗

homepagehttps://necolas.github.io/react-native-web ↗