{"id":19052,"library":"babel-plugin-expo-web","title":"babel-plugin-react-native-web","description":"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.","status":"active","version":"0.0.14","language":"javascript","source_language":"en","source_url":"git://github.com/raarts/expo-web","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-expo-web","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-expo-web","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-expo-web","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency; the plugin aliases react-native to react-native-web, which must be installed.","package":"react-native-web","optional":false}],"imports":[{"note":"Plugin name is 'react-native-web' (not 'babel-plugin-react-native-web') in .babelrc plugins array.","wrong":"// Incorrect: using require syntax in config\nmodule.exports = {\n  plugins: ['babel-plugin-react-native-web']\n}","symbol":"plugin","correct":"// .babelrc\n{\n  \"plugins\": [\"react-native-web\"]\n}"}],"quickstart":{"code":"// Install\nyarn add --dev babel-plugin-react-native-web react-native-web\n\n// .babelrc\n{\n  \"plugins\": [\"react-native-web\"]\n}\n\n// App.js\nimport { View, Text } from 'react-native';\n\nexport default function App() {\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <Text>Hello, Web!</Text>\n    </View>\n  );\n}","lang":"javascript","description":"Set up the Babel plugin to alias react-native to react-native-web, enabling a simple React Native component to render on web."},"warnings":[{"fix":"Always use the Babel plugin to handle aliasing; never import from react-native-web/dist directly.","message":"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.","severity":"gotcha","affected_versions":"all"},{"fix":"Use 'react-native-web' as the plugin string in your Babel configuration.","message":"The plugin name in .babelrc is 'react-native-web' not 'babel-plugin-react-native-web'. Using incorrect name will not transform imports.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'yarn add react-native-web' to install the required package.","cause":"Missing runtime dependency react-native-web.","error":"Module not found: Can't resolve 'react-native-web'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}