Skip to content

Commit 08fa9ff

Browse files
author
Ryan Nixon Salim
committed
add readme.md
1 parent 1f63958 commit 08fa9ff

File tree

1 file changed

+108
-0
lines changed

1 file changed

+108
-0
lines changed

README.md

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
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

Comments
 (0)