@gerlison/rnn-boilerplate v0.0.1

REACT-NATIVE-NAVIGATION BOILERPLATE

A react-native template with essencial libraries, configurations and facilities for fresh projects.

iOS it's not configured properly on case of manual setup in Xcode, feel free to open a PR, I'll be glad to accept it.

Motivation

I've created this template to facilitate the creation of fresh react-native projects. Every time I need to create a project, I need to set a lot of repeatitive configuration, like setup for redux, installation of dependencies, folder structure (and how it sucks), babel module resolver and eslint. To resolve it all, I'm developing this project, with that things preconfigured.

Installing / Getting started

I'm considering that you have a fully configured react-native environment.

To create a project with this template just run the following on your terminal:

$ npx @react-native-community/cli init [ProjectName] --template @gerlison/rnn-boilerplate

or with react-native-cli if you prefer

$ npx react-native init [ProjectName] --template @gerlison/rnn-boilerplate

That's all. Now you just need to install the dependendices and start coding. Follow next step for instructions.

Initial Configuration

You've just created your project, now to install all dependencies it requires, run:

$ cd [ProjectName]/

// npm or yarn
$ [packagemanager] install

Ok, let's run the project

For project runs properly, it needs an emulator or device connected.

$ react-native run-android

Features

What's all the bells and whistles this project can perform?

• Folder structure built to grow
• Easy modules import with babel-module-resolver preconfigured
• Redux and redux-persist (with whitelist for default) ready to go.
• Theme provider integrated with styled-components, for easy theme management
• Typing with Flow
• Native Navigation setted up.

Folder structure

src 
│
└───assets
│   └───images/
│   └───icons/
│   └───fonts/
└───modules
│   └───ModuleName
│        └───api/
│        └───ducks/
│        └───components/
│        └───navigation/
│        └───screens/
└───navigation
│    │   layout.js
└───shared
│   └───components/
│   └───styles
│        │   colors.js
│        │   metrics.js
│        │   fonts.js
│        │   general.js
│   └───helpers/
└───store/

Built with

• React-Native - Build the native app using JavaScript and React
• React-Native-Navigation - Router by Wix
• Redux - React State Manager
• Redux-Thunk - Thunk middleware for Redux.
• Redux-Persist - Data persistor for Redux.
• Reselect - Simple “selector” library for Redux
• Axios - HTTP Client
• Moment - JavaScript date library
• ESlint - Linter
• Lodash - JavaScript Utility
• Flow - Static Type Checker
• Babel - JavaScript Compiler
• Styled-Components - Styles
• React-Native-Vector-Icons - Icons

Author

I don't have a lot of things to tell about myself. If you're curious about who I am, why don't you checkout my Linkedin and we can have a cup of coffe?

You can also email me in franciscojerlison1@gmail.com, or check my github profile

It will be a pleasure to exchange an idea with you :)