Ignite Linnify Boilerplate

Once you've installed React Native and the Ignite CLI, you can get started with this boilerplate.

Includes:

• React Native
• React Navigation
• React Redux
• TypeScript
• And more!

Quick Start

First, install Ignite CLI:

$ yarn global add ignite-cli

Then spin up a new Linnify-powered React Native app:

$ ignite new MyApp -b ignite-boilerplate-linnify

cd into your new app and run react-native run-ios or react-native run-android (note: in Android you'll need an Android emulator running or an Android phone attached).

Explanation of folder structure

The Ignite Linnify boilerplate project's structure will look similar to this:

ignite-project
├── src
│   ├── components
│   ├── config
│   ├── containers
│   ├── images
│   ├── navigation
│   ├── services
│   ├── store
│   ├── themes
│   ├── transforms
│   └── types
├── README.md
├── android
├── ignite
│   ├── ignite.json
│   └── plugins
├── index.js
├── ios
├── tslint.json
├── tsconfig.json
└── package.json

./src directory

Included in an Ignite boilerplate project is the src directory. This is a directory you would normally have to create when using vanilla React Native.

The inside of the src directory looks similar to the following:

src
├── components
├── config
├── containers
├── images
├── navigation
├── services
├── store
├── themes
├── transforms
└── types

components

This is where your React components will live. Each component will have a directory containing the .tsx file, the style file and index.ts.

containers

This is where your screen containers will live. A screen is a React component which will take up the entire screen and be part of the navigation hierarchy. Each screen will have a directory containing the .tsx file, along with any assets or other helper files. The app contains by default RootContainer and a LaunchScreen.

navigation

This is where your react-navigation navigators will live.

services

Any services that interface with the outside world will live here (think REST APIs, Push Notifications, etc.).

themes

Here lives the theme for your application, including spacing, colors, and typography, etc. The app contains some of them by default.

transforms

This is a great place to put miscellaneous helpers and utilities. Things like date helpers, formatters, etc. are often found here. However, it should only be used for things that are truly shared across your application. If a helper or utility is only used by a specific component or model, consider co-locating your helper with that component or model.

types

This is where your classes and interfaces will live

Others

./ignite directory

The ignite directory stores all things Ignite, including CLI and boilerplate items. Here you will find generators, plugins and examples to help you get started with React Native.

Generators

Basics

Containers

This will generate in src/container the following:

name
├── name.tsx
├── nameStyle.tsx
└── index.ts

Call using:

ignite generate container name

Components

This will generate in src/components the following:

name
├── name.tsx
├── nameStyle.tsx
└── index.ts

Call using the following command. Will be asked to chose between pure or stateless component. Please match the case

ignite generate component name

Lists

This will generate in src/components the following:

NameList
├── NameList.tsx
├── NameListStyle.tsx
└── index.ts
NameListItem
├── NameListItem.tsx
├── NameListItemStyle.tsx
└── index.ts

Call using the following command. Please use small case for the name as it will be automatically transformed.

ignite generate component name

Redux

For every generator all the related files will be updated.

Store

This will generate a store with all the files for a given name. Please use plural and small case.

ignite generate store-basic name

Service

This will generate a service file with CRUD operations and a class with the given name. Please use plural and small case.

ignite generate service name

If you want to use pagination you should use:

ignite generate service-pagination name

Selector

This will add files to the selector. Please use singular and small case.

ignite generate selector name

Actions

1.Load Actions

Will create/update all the files needed for a load action. Please use plural and small case.

ignite generate action-load name

If you want to use pagination you should use:

ignite generate action-load-pagination name

2. Add Action

Will create/update all the files needed for an add action. Please use singular and small case.

ignite generate action-add name

3. Delete Action

Will create/update all the files needed for a delete action. Please use singular and small case.

ignite generate action-delete name