React Native: Boilerplates overview

It can take a few weeks (if not months) getting started with React Native, can boilerplates give a jump start to mobile development? And if so, which are the best?

There are three boilerplates worth considering:

• Ignitee - 9,375 stars
• Pepperoni App Kit - 4,453 stars
• Snowflake - 4,399 stars

We will be taking a closer look at the most popular of them all, the ignite boilerplate.

Ignitee CLI

Ignite is now the 'hottest' CLI for React Native.

It includes boilerplates, plugins, generators and more.

Ignite requires a Node version of 7.6+ minimum, check your version by running:

node -v

Install Yarn for your system.

Then run the following commands to add the ignite-cli and to create your ignite boilerplate.

$ yarn global add ignite-cli

Ignite includes two primary boilerplates

Andross:

The tried and true (React Navigation, Redux, & Redux Saga)

It includes:

• React Native 0.57.7
• React Navigation 3.0.0
• Redux
• Redux Sagas
• And more!

Bowser:

The latest and greatest (React Navigation, MobX State Tree, & Typescript)

This boilerplate includes:

• React Native
• React Navigation
• MobX State Tree
• Typescript
• Reactotron (requires 2.x)
• And more!

I won't go into detail about these services in this post. I will choose a preferred boilerplate after testing and explain the services more in detail in a future post.

How to:

Lets choose ignites newest boilerplate bowser.

First of all to start of a bowser boilerplate, simply run the following command and choose bowser from the terminal menu:

$ ignite new MyNewAppName
-----------------------------------------------
  (                  )   (
  )\ )   (        ( /(   )\ )    *   )
 (()/(   )\ )     )\()) (()/(  ` )  /(   (
  /(_)) (()/(    ((_)\   /(_))  ( )(_))  )\
 (_))    /(_))_   _((_) (_))   (_(_())  ((_)
 |_ _|  (_)) __| | \| | |_ _|  |_   _|  | __|
  | |     | (_ | | .` |  | |     | |    | _|
 |___|     \___| |_|\_| |___|    |_|    |___|
-----------------------------------------------

An unfair headstart for your React Native apps.
https://infinite.red/ignite

-----------------------------------------------

🔥 igniting app BowserStyle
? Which boilerplate would you like to use? Bowser (React Navigation, MobX State Tree, & TypeScript)
> Bowser  *
> Andross

If you open your NewAppProject directory, you will see loads of files that come will the ignite boilerplate compared to the standard setup using react-native new or expo init command.

Run simulator:

For iOS:
  cd ProjectFolder
  react-native run-ios

For Android:
  cd ProjectFolder
  react-native run-android

To see what else Ignite CLI can do in the command line:

  cd ProjectFolder
  ignite

Project directory structure

The project structure is some more advanced that a simple react-native new / expo init default project structure.

The project structure will look similar to this:

ignite-project
├── app
│   ├── components
│   ├── i18n
│   ├── models
│   ├── navigation
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
│   ├── environment-variables.ts
├── 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
├── README.md
├── android
├── ignite
│   ├── ignite.json
│   └── plugins
├── index.js
├── ios
└── package.json

Lets go deeper into the directories included in Bowser.

The ./app directory:

Like when running the default structure commands, the app directory is present.

Inside the app directory, it will look similar to this:

app
│── components
│── i18n
├── models
├── navigation
├── screens
├── services
├── theme
├── utils
├── app.tsx
├── environment-variables.ts

components:
This is where your components live. Normally you would have components created with a .js file. Since bowser includes typescript, each component will have a directory containing a .tsx file, along with a story.tsx file. Optionally if the component is large, the component directory can include preset.ts, and props.ts files for better organisation.

i18n:
If you included the react-native-i18n service, this is where your translations live.

models:
This is where your models and model logic lives. Each model has a directory that contains the mobx-state-tree model file, test file, and other supported files like actions, types etc.

navigation:
Your react-navigation files live here.

screens:
The react screen component which takes up the entire screen and is part of the navigation hierarchy lives here. Each directory contains the .tsx file, assets or helper files.

services:
Services that interface with the outside world like REST APIs, Push Notifications etc, live here.

theme:
Your theme lives here, built including spacing, colors, typography, timing etc.

utils:
Shared files like helpers, utilities like date helpers, formatters etc are often placed here. If a helper or utility is only used by a specific component/model in your application the file should live with that component/model.

app.tsx:
Your entry point to your application. The main App component that renders the rest of the application. You can also choose if you would like to run the app in storybook mode.

The ./ignite directory:

This is where the ignite CLI and all things ignite live. Generators, plugins and examples are included to help you get started.

The ./storybook directory:

This is where stories will be registered and where the Storybook configs will live.

Storybook is a UI development environment for rapid iteration and testing of UI components. This allows you to visualise the different states of the individual components of your app and test the UI interactions.

The ./test directory:

This is where your Jest configs and mocks live. As well as storyshots test files.

Attaching to Expo

If you are like me and use the expo toolchain to kick of your project, and you would still like to use one of Ignites boilerplates simply use the command:

expo init <AppName>
cd <AppName>
ignite attach
// Then choose which boilerplate you would like to use

This also works for:

• create-react-native-app
• create-react-app
• normal Reach JS projects
• empty directories

Not all plugins work in all environments, but many features of Ignite CLI are available.

For more info check out their documentation at https://expo.io/ !