babel-plugin-react-native-web

0.0.14 verified Sat Apr 25 auth: no javascript

A Babel plugin that aliases `react-native` to `react-native-web` during build, enabling reuse of React Native components for web applications. Current stable version 0.0.14. It selectively rewrites imports to pull only required modules, reducing bundle size. Compared to alternatives like `react-native-web` alone, this plugin automates the alias and tree-shaking, integrating seamlessly into Babel configuration. Released under MIT license, actively used in Expo projects, with regular updates following `react-native-web` releases.

Common errors

error Module not found: Can't resolve 'react-native-web' ↓

cause Missing runtime dependency react-native-web.

fix

Run 'yarn add react-native-web' to install the required package.

Warnings

gotcha The plugin rewrites imports to internal react-native-web paths (e.g., 'react-native-web/dist/exports/StyleSheet'). Do not depend on these paths directly as they are unstable. ↓

fix Always use the Babel plugin to handle aliasing; never import from react-native-web/dist directly.

gotcha The plugin name in .babelrc is 'react-native-web' not 'babel-plugin-react-native-web'. Using incorrect name will not transform imports. ↓

fix Use 'react-native-web' as the plugin string in your Babel configuration.

Install

npm install babel-plugin-expo-web

yarn add babel-plugin-expo-web

pnpm add babel-plugin-expo-web

Imports

plugin

wrong

// Incorrect: using require syntax in config
module.exports = {
  plugins: ['babel-plugin-react-native-web']
}

correct

// .babelrc
{
  "plugins": ["react-native-web"]
}

Plugin name is 'react-native-web' (not 'babel-plugin-react-native-web') in .babelrc plugins array.

Quickstart

Set up the Babel plugin to alias react-native to react-native-web, enabling a simple React Native component to render on web.

// Install
yarn add --dev babel-plugin-react-native-web react-native-web

// .babelrc
{
  "plugins": ["react-native-web"]
}

// App.js
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello, Web!</Text>
    </View>
  );
}