Ignite — React Native Boilerplate

Discover Ignite — React Native Boilerplate for Expo & React Native, explore pre-setup libraries like React Navigation, MobX, APISauce, Flipper, Reactotron, i18N-js Localisation, Themes and many more.

Quick Highlights — Ignite is popular React Native Boilerplate for Expo & React Native. Ignite saved two to four weeks time of React Native project creation, project setup, required dependency installation like Navigation, MobX, API Call, Utility and many more.

Ignite — Boilerplate Includes -

• React Navigation (Native)
• MobX State Tree (State Management)
• TypeScript
• APISauce (REST API Interaction)
• Storybook
• i18N-JS Localisation
• Themes
• Reactotron Ready
• Flipper

Take away -

• What is React Native Navigation?
• What is MobX — MobX State Tree?
• What is TypeScript in React Native?
• What is APISauce in React Native?
• What is Flipper in React Native?
• What is Storybook in React Native?

Create App With Ignite Boilerplate —

Create React Native App with Ignite is quite simple

# for vanilla React Native
npx ignite-cli new PizzaApp

# or for Expo-powered:
npx ignite-cli new PizzaApp --expo

Ignite Boilerplate — Folder Hierarchy —

ignite-project
├── android (if not Expo)
├── ios (if not Expo)
├── app
│   ├── components
│   ├── i18n
│   ├── models
│   ├── navigators
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
|   ├── assets/fonts/
├── storybook
│   ├── views
│   ├── index.ts
│   ├── storybook-registry.ts
│   ├── storybook.ts
├── test
│   ├── __snapshots__
│   ├── storyshots.test.ts.snap
│   ├── mock-i18n.ts
│   ├── mock-reactotron.ts
│   ├── setup.ts
│   ├── storyshots.test.ts
├── e2e
│   └── config.json
├── ignite
│   └── templates
├── index.js
├── package.json
└── README.md

React Navigation —

React Navigation is popular library for Navigating between multiple components. React Navigation manage your application navigational stack. React Navigation has three libraries StackNavigator, Drawer Navigator, TabNavigator.

# npm 

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

StackNavigator - Use while navigating from one component to another component. You can use push, pop, goBack, many more actions while you want navigation functionality between screens.

Drawer Navigator - Drawer Navigator helps while you have multiple menu on side menu and each menu has multiple screens. So you can shift all your main menus into Drawer and press on any Drawer Option it will open specific screen/component.

Tab Navigator - Tab Navigator helps while you want to give multiple menu option at bottom and each menu has multiple screens. Each Bottom Menu option has specific screen/component.

You can do additional steps over here, Instead of giving Component/Screen to specific TabNavigator option, you can assign StackNavigator so you can manage your state of each TabNavigator option independently. Advantage of doing this, if you traverse 1..3 Screen in TabNavigatorMenuOption1, and you change to TabNavigatorMenuOption2 and traverse to 1…5 Screen and go back to TabNavigatorMenuOption1 then you can see 3 Screen which you left in TabNavigatorMenuOption1, instead of Starting from Screen1.

MobX State Tree —

MobX is a popular state management library in React Native. MobX store feature allow to save, update and restore application state that uses by react component.

// import observable from mobx
import { observable } from "mobx";

//create a store with count observable
class Store {
  @observable
  count = 0;
}

//export Store
export default new Store();

Typescript —
Typescript is widely used programming language next to Javascript. Many of popular libraries are now available in Typescript because of simplified experience of type checking, error checking before developer run the code and help to reduce the code errors.

i18N, React Native Localisation —

i18n-js is popular localisation library with various features like, Pluralization, Date/Time localisation, Number Localisation, Local fallback, Asset pipeline support and more.

APISauce —

APISauce is a JavaScript library for REST API Integration. Ignite has well-framed structure for APISauce. Ignite Boilerplate simplified API Call by dividing business logic among multiple files.

api-config.js This file contain BaseURL definition, APIConfig Interface and Export Of API Configuration.

api-problem.js This file contain code logic for various errors management along with custom messages, like 401, 402, 404. You can also customised according your need and set error message accordingly.

api.ts This file contain apisauce instance setup, apiconfig and business login for API Call. You can create multiple various of same file as per your modules, like Home, Settings, Menu, etc.

api.types.ts This file contain List of interface used by various modules for API call. This will help developers to define api response along with data types at central place.

If you prefer Axios/Fetch, then checkout Axiox vs Fetch for more detail.

Theme | Fonts | Color —

This folder hierarchy contain common initialisation for color, spacing, timing, fonts and all. You can create your own file for common theme related constants.

Storybook —

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

Connect Us —
KPITENG - DIGITAL TRANSFORMATION
www.kpiteng.com | hello@kpiteng.com
Facebook | Linkedin