{"id":11811,"library":"react-native-web","title":"React Native for Web","description":"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.","status":"active","version":"0.21.2","language":"javascript","source_language":"en","source_url":"git://github.com/necolas/react-native-web","tags":["javascript","react","react-component","react-native","web"],"install":[{"cmd":"npm install react-native-web","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-web","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-web","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React library functionality.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Components and APIs are imported directly from 'react-native' due to Babel/Webpack aliasing 'react-native' to 'react-native-web' in web builds.","wrong":"import { View, Text, StyleSheet } from 'react-native-web';","symbol":"{ View, Text, StyleSheet }","correct":"import { View, Text, StyleSheet } from 'react-native';"},{"note":"Used for registering and running the main application component, following the standard React Native pattern.","wrong":"import { AppRegistry } from 'react-native-web';","symbol":"AppRegistry","correct":"import { AppRegistry } from 'react-native';"},{"note":"Provides platform-specific checks (e.g., Platform.OS === 'web') for conditional code execution.","symbol":"Platform","correct":"import { Platform } from 'react-native';"}],"quickstart":{"code":"import React from 'react';\nimport { AppRegistry, StyleSheet, Text, View } from 'react-native';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <View style={styles.box}>\n        <Text style={styles.text}>Hello, world!</Text>\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  box: { padding: 10 },\n  text: { fontWeight: 'bold' }\n});\n\nAppRegistry.registerComponent('App', () => App);\nAppRegistry.runApplication('App', { rootTag: document.getElementById('react-root') });","lang":"javascript","description":"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."},"warnings":[{"fix":"Avoid using `findNodeHandle` in web-targeting code; consider alternative approaches for DOM node access or refactor to use web-specific APIs where necessary.","message":"With React 19 support introduced in v0.20.0, the `findNodeHandle` API is no longer supported on the web platform.","severity":"breaking","affected_versions":">=0.20.0"},{"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.","message":"Version 0.18.0 significantly reduced browser support, dropping compatibility for IE and legacy Android browsers. Supported browsers are Safari 10.1+, and Edge (Chromium).","severity":"breaking","affected_versions":">=0.18.0"},{"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.","message":"Since 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.","severity":"breaking","affected_versions":">=0.18.0"},{"fix":"Update usage of `I18nManager` from `I18nManager.isRTL` to `I18nManager.getConstants().isRTL`.","message":"The `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.","severity":"breaking","affected_versions":">=0.15.0"},{"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.","message":"Correct Babel/Webpack configuration is crucial for 'react-native' imports to resolve to 'react-native-web'. Without proper aliasing, web builds will fail.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The build system (Webpack/Babel) is not configured to alias 'react-native' to 'react-native-web' for the web environment.","error":"Error: Cannot find module 'react-native'"},{"fix":"Remove all calls to `findNodeHandle` from your codebase targeting the web. Consider using `ref` for direct DOM access or alternative web-specific APIs.","cause":"Attempting to use `findNodeHandle` in a `react-native-web` application, which was removed with React 19 support in v0.20.0.","error":"Invariant Violation: findNodeHandle is not supported on web."},{"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.","cause":"This typically occurs when `react-dom` is not correctly set up for React 18's `createRoot` API, or there's a version mismatch.","error":"TypeError: (0 , react_dom__WEBPACK_IMPORTED_MODULE_2__.createRoot) is not a function"},{"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.","cause":"This error often happens during server-side rendering (SSR) when client-side APIs (like `document`) are accessed in a Node.js environment.","error":"ReferenceError: document is not defined"}],"ecosystem":"npm"}