The `babel-plugin-react-native-web` package is a Babel plugin designed to optimize applications using `react-native-web`. It works by aliasing `react-native` imports to `react-native-web` and performing tree-shaking to exclude unused modules, thereby reducing bundle size. The current stable version is 0.21.2. This plugin is part of the `react-native-web` ecosystem, which generally sees frequent updates, often tied to new React and React Native versions, indicating an active development and release cadence. Its primary differentiator is enabling existing React Native codebases to run efficiently on the web without significant code changes, by providing a targeted build-time optimization layer. It's crucial for projects aiming for a single codebase across native and web platforms.
npm install babel-plugin-react-native-webVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates configuring the `babel-plugin-react-native-web` plugin in a Babel configuration file to enable aliasing and tree-shaking for React Native for Web projects.
Upgrade React to v19 or compatible version. Refactor code that relies on `findNodeHandle` for web, as it's no longer supported.
Ensure target browser matrix aligns with the new requirements. Review server-side rendering setup for style injection changes.
Upgrade React to v18 or a compatible version. Verify `Animated` and `ScrollView` implementations for React 18 compatibility.
Review and update usage of `accessibilityRole` props and `unstable_createElement` to align with the new behaviors, particularly for accessibility features.
Update implementations relying on `Dimensions`, `Animated`, `VirtualizedList`. For `NativeEventEmitter`, replace `removeSubscription` with the subscription object's `remove()` method.
Set `commonjs: true` only if your bundler is configured to use CommonJS modules by default for `react-native-web` (e.g., older Webpack configs or specific module resolutions). Most modern bundlers support ES modules, so `commonjs: false` (or omitting the option) is often correct.
Ensure `react` and `react-dom` are at least version 17. Update `I18nManager` access patterns: `I18nManager.getConstants().isRTL`.
Ensure the plugin configuration is an array with the plugin name as the first element and an options object as the second element, e.g., `['react-native-web', { commonjs: false }]`.Always import components and APIs from `react-native` (e.g., `import { View, Text } from 'react-native';`). The Babel plugin will handle the internal path rewriting automatically and reliably.