vite-plugin-react-native-web

vite-plugin-react-native-web

Add React Native Web support to Vite by removing Flow types, aliasing react-native to react-native-web and transforming .js files as .jsx files using ESBuild.

Installation

Just install it:

npm i vite-plugin-react-native-web -D

Usage

import reactNativeWeb from "vite-plugin-react-native-web";

export default defineConfig({
  plugins: [reactNativeWeb({ ... })],
});

If you are getting errors please report them in the issues section.

The following variables are defined in the transformed files: (inferred during Vite's build process)

• global as globalThis
• __DEV__ as process.env.NODE_ENV === 'development'
• process.env.NODE_ENV as process.env.NODE_ENV
• process.env.EXPO_OS as "web"

Peer Dependencies

This plugin requires react-native-web and inline-style-prefixer as peer dependencies. You must install them in the node_modules directory of the app where you use this plugin.

Note: If you are using pnpm or a workspace setup, peer dependencies may be installed in nested node_modules folders by default. To avoid issues, ensure both react-native-web and inline-style-prefixer are installed in the app's own node_modules directory:

pnpm add react-native-web inline-style-prefixer

Examples

• React + TypeScript + Vite + React Native Web Example
• React + TypeScript + Expo + Vite + React Native Web Example

Contributing

Please feel free to contribute to this project. Just fork it and submit a PR.

License

MIT