babel-plugin-react-native-web

babel-plugin-react-native-web

A Babel plugin that will alias react-native to react-native-web and exclude any modules not required by your app (keeping bundle size down).

Installation

npm install --save-dev babel-plugin-react-native-web

Usage

.babelrc

{
  "plugins": [
    ["react-native-web", { commonjs: true }]
  ]
}

You should configure the plugin to match the module format used by your bundler. Most modern bundlers will use a package's ES modules by default (i.e., if package.json has a module field). But if you need the plugin to rewrite import paths to point to CommonJS modules, you must set the commonjs option to true.

Example

NOTE: react-native-web internal paths are not stable and you must not rely on them. Always use the Babel plugin to optimize your build. What follows is an example of the rewrite performed by the plugin.

Before

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

After

import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
import View from 'react-native-web/dist/exports/View';

Similar packages

Other packages similar to babel-plugin-react-native-web

react-native-web

react-native-web is a library that provides React Native components and APIs for the web. It allows you to write a single codebase that runs on both React Native and web platforms. Unlike babel-plugin-react-native-web, which is a Babel plugin, react-native-web is a library that you import and use directly in your project.

react-native-dom

react-native-dom is an experimental project that aims to bring React Native to the web by providing a DOM renderer for React Native. It allows you to run React Native applications in a web environment. While it shares a similar goal with babel-plugin-react-native-web, it is still in an experimental stage and not as widely adopted.

react-primitives

react-primitives is a library that provides a set of primitive components that work across multiple platforms, including web, iOS, and Android. It allows you to write platform-agnostic components that can be used in both React Native and web projects. Unlike babel-plugin-react-native-web, which focuses on transforming React Native imports, react-primitives provides a unified set of components for cross-platform development.