generator-rn-tools

Yeoman generator for React Native, to install npm dependencies and generator file structure in project which created by react-native-cli or create-react-native-app and generator component, container and reducer.

Installation

npm install -g yo
npm install -g generator-rn-tools

Usage

Create project.

create-react-native-app appname
# or
react-native init appname

cd appname

Create file structure.

yo rn-tools

Generator will ask you project name (Only in standard project) and which version of react-native-router-flux to use. Then install dependencies and create file structure in this project.

Run packager server

yarn start

Included dependencies

• immutable
• prop-types
• react-native-router-flux (v4, v3)
• react-redux
• redux
• redux-immutable
• redux-thunk

File structure

normal babel project

├─src/
│   ├─components/
│   ├─constants/
│   │    ├─ActionTypes.js
│   │    └─StorageKey.js
│   ├─containers/
│   │    ├─AppRoot/
│   │    │    └─index.js
│   │    ├─AppRouter/
│   │    │    └─index.js
│   │    └─Main/
│   │         └─index.js
│   ├─images/
│   ├─lib/
│   ├─models/
│   ├─redux/
│   │    ├─main/
│   │    │    ├─mainActions.js
│   │    │    └─mainReducers.js
│   │    ├─actions.js
│   │    └─reducers.js
│   └─Styles/
│        ├─Colors.js
│        └─Styles.js
├─.eslintrc
├─App.js
├─app.json	<-- Write default androidStatusBar setting into app.json in Expo project
└─index.js  <-- Only in Standard App

Other Generator

Component

Create a component in src/components/index.js.

yo rn-tools:component componentName

Container

Create a component in src/containers/containerName/index.js, export with react-redux connect().

yo rn-tools:container containerName

Reducer

Create a actions, reducers in src/redux/reducerName, and auto import in src/redux/actions last line, so file must follow eol-last rule (end with a newline).

yo rn-tools:reducer reducerName

After file created, need to manually add reducer to src/redux/reducers.