https://github.com/dannyhw/vite-plugin-rnw
Vite plugin for React Native Web
https://github.com/dannyhw/vite-plugin-rnw
plugin react react-native react-native-web vite web
Last synced: 6 months ago
JSON representation
Vite plugin for React Native Web
- Host: GitHub
- URL: https://github.com/dannyhw/vite-plugin-rnw
- Owner: dannyhw
- Created: 2025-07-12T17:35:14.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-12T18:46:45.000Z (12 months ago)
- Last Synced: 2025-07-12T19:35:01.784Z (12 months ago)
- Topics: plugin, react, react-native, react-native-web, vite, web
- Language: JavaScript
- Homepage:
- Size: 214 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vite-plugin-rnw
A vite plugin for React Native Web projects.
This plugin uses the [react plugin](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) internally and applies a lot of fixes for react native web on top.
```js
// vite.config.js
import { defineConfig } from "vite";
import { rnw } from "vite-plugin-rnw";
export default defineConfig({
plugins: [rnw()],
});
```
## Options
### include/exclude
Includes `.js`, `.jsx`, `.ts` & `.tsx` by default. This option can be used to add fast refresh to other files:
```js
import { defineConfig } from "vite";
import { rnw } from "vite-plugin-rnw";
export default defineConfig({
plugins: [rnw({ include: /\.(js|jsx|ts|tsx)$/ })],
});
```
`node_modules` can be processed by this plugin when needed
By default the excludes pattern is:
```js
/\/node_modules\/(?!react-native|@react-native|expo|@expo)/;
```
This means any package that starts with react-native, @react-native, expo, or @expo will be included and other node_modules will be excluded. But you can change this to include or exclude any package you want.
### jsxImportSource
Control where the JSX factory is imported from. Default to `'react'`
```js
rnw({ jsxImportSource: "nativewind" });
```
### babel
The `babel` option lets you add plugins, presets, and [other configuration](https://babeljs.io/docs/en/options) to the Babel transformation performed on each included file.
```js
rnw({
babel: {
presets: [...],
// Your plugins run before any built-in transform (eg: Fast Refresh)
plugins: [...],
// Use .babelrc files
babelrc: true,
// Use babel.config.js files
configFile: true,
}
})
```