React Native + Web Boilerplate
Ultimate React Native + Web Boilerplate. This boilerplate is created on top of React Native and React Native Web. The idea is create project with seamless development experience and shareable codebase for both react native and react native web.
git clone [email protected]:drgx/react-native-plus-web.git
cd react-native-plus-web
yarn
# bootstrap all package dependencies
yarn bootstrap
You need to start the server by following this commend:
cd packages/apps/
yarn haul
#choose to run server between Ios, Android or Both Ios and Android
Open your android emulator or plug your android devices
Simply run react-native run-android
.
Since react-native v0.52+ to be able to start using haul
you need to disable delta (cmd+m -> dev setting, uncheck use js deltas) and debug JS remotely on our emulator or devices. See haul limitation & issue. This issue is likely fix by haul team soon.
Open your ios simulator. Simply run react-native run-ios
on your terminal.
cd packages/web/
yarn watch:web
# open http://localhost:3000 on your browser
react-native-plus-web
βββ README.md
βββ lerna.json
βββ package.json
βββ packages
βββ apps <<<< React Native Project
βΒ Β βββ android
βΒ Β βββ app.json
βΒ Β βββ index.js
βΒ Β βββ ios
βΒ Β βββ package.json
βΒ Β βββ webpack.haul.js
βΒ Β βββ yarn.lock
βββ shared <<<< Shared code between apps and web
βΒ Β βββ components
βΒ Β βΒ Β βββ Modal
βΒ Β βΒ Β βββ Navigator
βΒ Β βββ constants
βΒ Β βΒ Β βββ routes.js
βΒ Β βββ package-lock.json
βΒ Β βββ package.json
βΒ Β βββ yarn.lock
βββ web <<<< React Native web Project
βββ font.js
βββ index.web.js
βββ loaderConfiguration.js
βββ package.json
βββ template.html
βββ webpack.common.js
βββ webpack.dev.js
βββ webpack.prod.js
βββ yarn.lock
For editing or adding new routes simply edit routes.js
And for moving between screen simply use this.props.navigation
to navigate based on routes definition on routes.js
# Example to navigate to detail screen
<Button
title="Navigate to Detail Screen"
onPress={() => {
this.props.navigation.navigate("Detail");
}}
/>
# Example to back
<Button
title="Back"
onPress={() => {
this.props.navigation.goBack();
}}
/>
We'd β€οΈ to have your helping hand on react-native-plus-web! Feel free to PR's, add issues or give feedback! Happy Hacking!! π