|
| 1 | +# React Native + Web Boilerplate |
| 2 | +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. |
| 3 | +## Key Feature |
| 4 | +1. Clear project structure & dependencies using [lerna](https://github.com/lerna/lerna). |
| 5 | +2. React Native project support symlink and webpack ecosystem using [haul](https://github.com/callstack/haul). |
| 6 | +3. Build in Navigation ([react navigation](https://reactnavigation.org/) and [react-router](https://github.com/ReactTraining/react-router)). |
| 7 | +4. Web history API support. |
| 8 | +5. Same navigation API using [react navigation](https://reactnavigation.org/) API style. |
| 9 | +6. Wrap some react native component that currently not implemented yet on react-native web (Modal) |
| 10 | + |
| 11 | +## ⚡️ Get Started Immediately ⚡️ |
| 12 | +#### Clone this repository and install all dependencies |
| 13 | +``` |
| 14 | + git clone [email protected]:drgx/react-native-plus-web.git |
| 15 | + cd react-native-plus-web |
| 16 | + yarn |
| 17 | +
|
| 18 | + # bootstrap all package dependencies |
| 19 | + yarn bootstrap |
| 20 | +``` |
| 21 | + |
| 22 | +### Running Apps |
| 23 | +You need to start the server by following this commend: |
| 24 | +``` |
| 25 | +cd apps/ |
| 26 | +yarn haul |
| 27 | +#choose to run server between Ios, Android or Both Ios and Android |
| 28 | +``` |
| 29 | + |
| 30 | +#### For running android |
| 31 | +Open your [android emulator](https://medium.com/@deepak.gulati/running-react-native-app-on-the-android-emulator-11bf309443eb) or plug your android devices |
| 32 | + |
| 33 | +Simply run `react-native run-android`. |
| 34 | + |
| 35 | +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](https://github.com/callstack/haul#limitations). This issue is likely fix by haul team soon. |
| 36 | + |
| 37 | + |
| 38 | +#### For running ios |
| 39 | +Simply your [ios simulator](https://facebook.github.io/react-native/docs/running-on-simulator-ios.html) run `react-native run-ios`. |
| 40 | + |
| 41 | +### Running Web |
| 42 | +``` |
| 43 | +cd web/ |
| 44 | +yarn watch:web |
| 45 | +# open http://localhost:3000 on your browser |
| 46 | +``` |
| 47 | + |
| 48 | +## Folder structure |
| 49 | +``` |
| 50 | +distirct-traveloka |
| 51 | +├── README.md |
| 52 | +├── lerna.json |
| 53 | +├── package.json |
| 54 | +└── packages |
| 55 | + ├── apps <<<< React Native Project |
| 56 | + │ ├── android |
| 57 | + │ ├── app.json |
| 58 | + │ ├── index.js |
| 59 | + │ ├── ios |
| 60 | + │ ├── package.json |
| 61 | + │ ├── webpack.haul.js |
| 62 | + │ └── yarn.lock |
| 63 | + ├── shared <<<< Shared code between apps and web |
| 64 | + │ ├── components |
| 65 | + │ │ ├── Modal |
| 66 | + │ │ └── Navigator |
| 67 | + │ ├── constants |
| 68 | + │ │ └── routes.js |
| 69 | + │ ├── package-lock.json |
| 70 | + │ ├── package.json |
| 71 | + │ └── yarn.lock |
| 72 | + └── web <<<< React Native web Project |
| 73 | + ├── font.js |
| 74 | + ├── index.web.js |
| 75 | + ├── loaderConfiguration.js |
| 76 | + ├── package.json |
| 77 | + ├── template.html |
| 78 | + ├── webpack.common.js |
| 79 | + ├── webpack.dev.js |
| 80 | + ├── webpack.prod.js |
| 81 | + └── yarn.lock |
| 82 | +``` |
| 83 | + |
| 84 | + |
| 85 | +## Routes & Navigation |
| 86 | +For editing or adding new routes simply edit [`routes.js`](https://github.com/traveloka/district-template/blob/master/packages/shared/constants/routes.js) |
| 87 | + |
| 88 | +And for moving between screen simply use `this.props.navigation` to navigate based on routes definition on [`routes.js`](https://github.com/traveloka/district-template/blob/master/packages/shared/constants/routes.js) |
| 89 | + |
| 90 | +``` |
| 91 | +# Example to navigate to detail screen |
| 92 | + <Button |
| 93 | + title="Navigate to Detail Screen" |
| 94 | + onPress={() => { |
| 95 | + this.props.navigation.navigate("Detail"); |
| 96 | + }} |
| 97 | +/> |
| 98 | +
|
| 99 | +# Example to back |
| 100 | +<Button |
| 101 | + title="Back" |
| 102 | + onPress={() => { |
| 103 | + this.props.navigation.goBack(); |
| 104 | + }} |
| 105 | +/> |
| 106 | +``` |
| 107 | +## Contributing |
| 108 | +We'd ❤️ to have your helping hand on district-template! Feel free to PR's, add issues or give feedback! Happy Hacking!! 😎 |
0 commit comments