Parcel plugin to build react-native-web projects without configuration.
yarn [global] add parcel-bundler // Install Parccel (local or global)
yarn add parcel-plugin-react-native-web // Install the plugin
yarn parcel public/index.html // Run the server or
yarn parcel build src/index.js // Compile the App
npm i [-g] parcel-bundler // Install Parccel (local or global)
npm i parcel-plugin-react-native-web // Install the plugin
npx parcel public/index.html // Run the sever or
npx parcel build src/index.js // Compile the App
- Alias
react-nativetoreact-native-web - Enable the use of
.web.jsextensions - Transpile react-native libraries in
node_modulesfollowing this rules:- There is a reference to
react-nativein the package.json atdependencies,devDependencies,peerDependenciesorkeywords - In case that the rule above doesn't catch the react-native library to transpile, it can be included in the
parcel-rnwfield in the package.json.
"parcel-rnw" : ["react-native-xxx"],- To alias one library, use the
aliasfield in package.json.
"alias": { "expo": "expo-web", "victory-native": "victory" },- The libraries and the source code are compiled with the follow Babel configuration (the local Babel configuration is meged with that for the source code):
{ presets: ['env', 'react-native'], plugins: [ require('./babel-plugin'), //internal plugin to .web.js 'react-native-web', 'expo-web', 'transform-dev', ], } - There is a reference to
- You can start creating a react-native project, with
- react-native,
react-native --init MyApp
- or Expo
exp --init MyApp
- or create-react-native-app
create-react-native-app MyApp
- Install Parcel and the Plugin
yarn add parcel-bundler parcel-plugin-react-native-web
- Create an
public/index.htmlfile
<!DOCTYPE html>
<html lang="en">
<head>
<title>React Native Web App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="./../index.web.js"></script>
</html>- Create an
index.web.jsfile
import React from 'react'
import { AppRegistry, StyleSheet, Text, View } from 'react-native'
import App from './App'
AppRegistry.registerComponent('App', () => App)
AppRegistry.runApplication('App', {
rootTag: document.getElementById('root'),
})- Update
.gitignore
.cache
dist
- Update the scripts in the
package.json
"scripts": {
...
"web": "parcel public/index.html",
"build": "parcel build index.web.js"
},
The expo-web library is in an earlier stage, but if you are using react-native-vector-icons or @expo/vector-icons, it is a good option to automatically inject the icon's fonts in your HTML page.
"alias": {
"@expo/vector-icons": "expo-web",
"react-native-vector-icons": "expo-web/dist/exports"
}