React Native Boilerplate
The React Native, Redux boilerplate for personal usage. It also includes a example app which utilizes React Navigation, Native Base, Redux, and supports Remote Redux DevTools control.
- React & React Native v0.42
- React Navigation
- Redux & Remote Redux DevTools & On Debugger
- Redux Observable
- Immutable & Immutable DevTools
- Babel & Plugins: transform-decorators-legacy
- Native Base
- React Intl
- Visual Studio Code Configurations
See Getting Started to install required tools.
$ npm install -g react-native-cli $ npm install # install npm packages. Required for every package.json update
Start local server
$ npm start
Run command to open iOS simulator and run app:
$ npm run ios
Open Android emulator and run command: (Or connect real device via USB)
$ npm run android
For Windows with Hyper-V enabled, download and install Visual Studio Android Emulator. You should run a Android device Marshmallow (6.0.0) API Level 23. Next, configure Internet Connection for the device. See Enable Internet Connection for instructions. For network access to debugger, you also need to install and configure Telerik Fiddler. After setup, shake the emulator to display the Developer Menu (Tools > Shake > Play).
In development mode, you can install React Native Debugger as default debugger. if not install, it will use Remote Redux DevTools and On Debugger. As an alternative, you can install Visual Studio Code with Extensions.
Remote JS Debuggging and Hot Reload
Don't forget to Enable Remote JS Debugging and Hot Reload in your application running in the Device Emulator. This can be configued from the Developer Menu (Command+D on Mac).
Visual Studio Code
It might be better to debug in a lightweight IDE. Visual Studio Code provides a few extensions to debug React Native applications. Under extensions, install Flow Language Support, ESLint, React Native Tools, and Redux DevTools. Make sure to configure local (custom) server for Redux DevlTools (host: localhost, port: 5678)
You may need to install Flow globally:
npm install -g flow-bin
This project is organized using conventions borrowed from Angular Seed Advanced. Most specifically, filenames are postfixed before the file extension e.g.:
- *.i18n.js - *.style.js - *.theme.js - *.container.js - *.component.js - *.reducers.js - *.[_type_].js - *.[_type_]-test.js
To support a clean hiearchy and easy search, "*" is replaced with component name and all associated files placed in a directory with the compoennt name, along with the
index.js(JS module export file).
The project is divided into two three parts:
- App - Code that handles interaction and display of the mobile app.
- Framework - Independent code, where you will be mainly be concern with your projects.
- Shared - Any code that is shared between App and Framework (usually utility classes or functions).
$ npm test
Updating Snapshot tests
$ npm test -- -u
When appropriate, you should commit and push the new snapshots
Running Tests w/ coverage report:
$ npm test -- --coverage
$ npm run lint
Generate documentation with coverage
$ npm run esdoc
Local generated docs are at