Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dalcib/parcel-plugin-react-native-web
Parcel plugin to bundler react-native-web projects
https://github.com/dalcib/parcel-plugin-react-native-web
Last synced: 3 months ago
JSON representation
Parcel plugin to bundler react-native-web projects
- Host: GitHub
- URL: https://github.com/dalcib/parcel-plugin-react-native-web
- Owner: dalcib
- License: mit
- Archived: true
- Created: 2018-02-18T18:44:27.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-28T11:34:41.000Z (almost 7 years ago)
- Last Synced: 2024-08-03T18:16:36.000Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 202 KB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-parcel - react-native-web - Plugin that enables [react-native-web](https://github.com/necolas/react-native-web) support. (Plugins / Other)
README
# parcel-plugin-react-native-web
Parcel plugin to build react-native-web projects without configuration.
## Quick start
#### yarn
```
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
```
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
```
## Features
* Alias `react-native` to `react-native-web`
* Enable the use of `.web.js` extensions
* Transpile react-native libraries in `node_modules` following this rules:
* There is a reference to `react-native` in the package.json at `dependencies`, `devDependencies`, `peerDependencies` or `keywords`
* In case that the rule above doesn't catch the react-native library to transpile, it can be included in the `parcel-rnw` field in the package.json.
```
"parcel-rnw" : ["react-native-xxx"],
```
* To alias one library, use the `alias` field 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',
],
}
```
## Getting started
1. 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
```
2. Install Parcel and the Plugin
```
yarn add parcel-bundler parcel-plugin-react-native-web
```
3. Create an `public/index.html` file
```html
React Native Web App
```
4. Create an `index.web.js` file
```js
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'),
})
```
5. Update `.gitignore`
```
.cache
dist
```
6. Update the scripts in the `package.json`
```
"scripts": {
...
"web": "parcel public/index.html",
"build": "parcel build index.web.js"
},
```
## Expo and vector-icons
The [`expo-web`](https://github.com/raarts/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"
}
```
## Examples
[react-native-material-ui-web-app](https://github.com/dalcib/react-native-material-ui-web-app)
[expo-react-native-web](https://github.com/dalcib/expo-react-native-web)