{"id":13782496,"url":"https://github.com/dalcib/parcel-plugin-react-native-web","last_synced_at":"2025-05-11T15:32:32.942Z","repository":{"id":145700286,"uuid":"121979634","full_name":"dalcib/parcel-plugin-react-native-web","owner":"dalcib","description":"Parcel plugin to bundler react-native-web projects","archived":true,"fork":false,"pushed_at":"2018-04-28T11:34:41.000Z","size":207,"stargazers_count":10,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-17T17:43:20.577Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dalcib.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-18T18:44:27.000Z","updated_at":"2023-01-28T17:30:52.000Z","dependencies_parsed_at":"2023-04-07T23:47:25.355Z","dependency_job_id":null,"html_url":"https://github.com/dalcib/parcel-plugin-react-native-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dalcib%2Fparcel-plugin-react-native-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dalcib%2Fparcel-plugin-react-native-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dalcib%2Fparcel-plugin-react-native-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dalcib%2Fparcel-plugin-react-native-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dalcib","download_url":"https://codeload.github.com/dalcib/parcel-plugin-react-native-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253588746,"owners_count":21932316,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T18:01:38.018Z","updated_at":"2025-05-11T15:32:32.596Z","avatar_url":"https://github.com/dalcib.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Other"],"readme":"# parcel-plugin-react-native-web\n\nParcel plugin to build react-native-web projects without configuration.\n\n## Quick start\n\n#### yarn\n\n```\nyarn [global] add parcel-bundler       // Install Parccel (local or global)\nyarn add parcel-plugin-react-native-web    // Install the plugin\nyarn parcel public/index.html          // Run the server or\nyarn parcel build src/index.js         // Compile the App\n```\n\n#### npm\n\n```\nnpm i [-g] parcel-bundler               // Install Parccel (local or global)\nnpm i parcel-plugin-react-native-web    // Install the plugin\nnpx parcel public/index.html            // Run the sever or\nnpx parcel build src/index.js           // Compile the App\n```\n\n## Features\n\n* Alias `react-native` to `react-native-web`\n* Enable the use of `.web.js` extensions\n* Transpile react-native libraries in `node_modules` following this rules:\n  * There is a reference to `react-native` in the package.json at `dependencies`, `devDependencies`, `peerDependencies` or `keywords`\n  * 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.\n  ```\n  \"parcel-rnw\" : [\"react-native-xxx\"],\n  ```\n  * To alias one library, use the `alias` field in package.json.\n  ```\n  \"alias\": {\n    \"expo\": \"expo-web\",\n    \"victory-native\": \"victory\"\n  },\n  ```\n  * 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):\n  ```\n  {\n    presets: ['env', 'react-native'],\n    plugins: [\n      require('./babel-plugin'),  //internal plugin to .web.js\n      'react-native-web',\n      'expo-web',\n      'transform-dev',\n    ],\n  }\n  ```\n\n## Getting started\n\n1.  You can start creating a react-native project, with\n\n* react-native,\n\n```\nreact-native --init MyApp\n```\n\n* or Expo\n\n```\nexp --init MyApp\n```\n\n* or create-react-native-app\n\n```\ncreate-react-native-app MyApp\n```\n\n2.  Install Parcel and the Plugin\n\n```\nyarn add parcel-bundler parcel-plugin-react-native-web\n```\n\n3.  Create an `public/index.html` file\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eReact Native Web App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n  \u003cscript src=\"./../index.web.js\"\u003e\u003c/script\u003e\n\u003c/html\u003e\n```\n\n4.  Create an `index.web.js` file\n\n```js\nimport React from 'react'\nimport { AppRegistry, StyleSheet, Text, View } from 'react-native'\nimport App from './App'\n\nAppRegistry.registerComponent('App', () =\u003e App)\nAppRegistry.runApplication('App', {\n  rootTag: document.getElementById('root'),\n})\n```\n\n5.  Update `.gitignore`\n\n```\n.cache\ndist\n```\n\n6.  Update the scripts in the `package.json`\n\n```\n  \"scripts\": {\n    ...\n    \"web\": \"parcel public/index.html\",\n    \"build\": \"parcel build index.web.js\"\n  },\n```\n\n## Expo and vector-icons\n\nThe [`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.\n\n```\n\"alias\": {\n  \"@expo/vector-icons\": \"expo-web\",\n  \"react-native-vector-icons\": \"expo-web/dist/exports\"\n}\n```\n\n## Examples\n[react-native-material-ui-web-app](https://github.com/dalcib/react-native-material-ui-web-app)\n\n[expo-react-native-web](https://github.com/dalcib/expo-react-native-web)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdalcib%2Fparcel-plugin-react-native-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdalcib%2Fparcel-plugin-react-native-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdalcib%2Fparcel-plugin-react-native-web/lists"}