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.

Screenshots

iOS

Android

Included

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
ESDoc
Visual Studio Code Configurations

Installation

See Getting Started to install required tools.

$ npm install -g react-native-cli
$ npm install # install npm packages. Required for every package.json update

Development

Start local server

$ npm start

iOS

Run command to open iOS simulator and run app:

$ npm run ios

Android (5.0+)

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).

DevTools

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

File Convention

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).

Project Structure

The project is divided into two three parts: App/, Framework/, and Shared/:

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).

Testing

We used react-native-mock, and test with Jest, Enzyme.

$ 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

Running ESLint:

$ npm run lint

API Docs

Generate documentation with coverage

$ npm run esdoc

Local generated docs are at doc/.

Credits

react-native-boilerplate

LICENSE

MIT

psychobolt / react-native-boilerplate Goto Github PK