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.
- Clear project structure & dependencies using lerna.
- React Native project support symlink and webpack ecosystem using haul.
- Built-in Navigation (react navigation and react-router).
- Web history API support.
- Same navigation API using react navigation API style.
- Wrap some react native component that currently not implemented yet on react-native web (Modal)
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 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.
Simply your ios simulator run react-native run-ios.
cd 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!! 😎
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent