Top React Native boilerplates for 2021

React Native is a framework developed by Facebook for building Android and iOS apps with React. If you’re familiar with React Native, you know that starting a project from scratch can be a very tedious, repetitive, and time-consuming process. For that reason, in this article, we will take a look at some of the most popular React Native boilerplates that will help you start a project much faster.

I believe these are some of the best boilerplates available today, and all were developed by amazing developers. To help you save time when choosing a boilerplate from this article, I will also talk about some of their features so you can discover which is the best fit for your project.

The criteria used to analyze the boilerplates that will soon be shown in this article is their UI design, navigation type, and testing ability.

I did not rank these projects because I believe that every single one of them is a useful tool. However, I used their number of stars on Github to decide the order in which they appear.

1. Ignite by Infinite Red

Ignite by Infinite Red is a cutting-edge React Native project boilerplate that includes a CLI, component/model generators, and more.

With 12.2K stars, Ignite is the most popular React Native app boilerplate for both Expo and bare React Native, and it supports Expo out of the box. This TypeScript-ready project uses MobX for state management, React navigation for routing and navigation, Apisauce for talking with REST servers, and the Jest framework for testing.

What I like about this boilerplate is that it is Flipper-ready, Reactotron-ready and supports Expo out of the box. Aside from that, this boilerplate uses MobX instead of Redux for state management, which is known to be much easier to understand when compared to Redux. It also comes with AsyncStorage integrated with MST for restoring state.

Ignite has a built-in command-line interface named ignite-cli. Rather than install and manage a specific version of the CLI globally, it is recommended that you access the current version at runtime using npx, which ships with Node.js.

After meeting all prerequisites listed on this project’s page, you should be able to create a new project with the following commands:

# for vanilla React Native
npx ignite-cli new PizzaApp

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

2. React Native Starter Kit by mcnamee

React Native Starter by mcnamee is a React Native boilerplate app to get you up and running very, very quickly. It has 3K stars on GitHub.

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

This project uses Redux for state management, React Native Router for routing and navigation, NativeBase for the UI design, React Native Vector Icons for the icons, Axios for talking with REST servers, and the Jest framework for testing.

The authors of this boilerplate made sure that it came with the batteries included. This boilerplate not only comes with NativeBase, which is a library the provides us with essential cross-platform UI components for React Native, but also with Redux persist, a library that allows us to save the redux store in the local storage of our browser.

You can create a new project using this boilerplate by simply cloning this project with the following command:

git clone https://github.com/mcnamee/react-native-starter-kit.git your_app_name

3. React Native Boilerplate by TheCodingMachine

React Native Boilerplate by TheCodingMachine is a React Native project template for building solid cross-platform mobile applications through a separation of concerns between the UI, state management, and business logic. It has 2k stars on Github.

This boilerplate uses Redux for state management, React Navigation for routing and navigation, Axios for talking with REST servers, and the Jest framework for testing.

This boilerplate is easy to install and comes with an Internationalization library named i18next out of the box.

Before using this project, go to the React Native environment setup, then select the React Native CLI Quickstart tab. Follow instructions for your given development OS and target OS.

After meeting all prerequisites listed on this project’s page, you should be able to create a new project with the following command:

npx react-native init MyApp --template @thecodingmachine/react-native-boilerplate

4. React Native Template TypeScript by the React Native community

React Native Template TypeScript is a 1.2K-star project by the React Native Community. This is a clean and minimalistic React Native template for a quick start with TypeScript.

This TypeScript-ready project aims to be modest, so it does not come with any library for state management, navigation, UI design, or talking with REST servers. However, it does come with the Jest framework for testing.

This boilerplate is a great fit for those who like to start a react native project with just the bare minimum.

After meeting all prerequisites listed on this project’s page, you should be able to create a new project with the following command:

npx react-native init MyApp --template react-native-template-typescript

Honorable mentions

The boilerplates in this section are projects that couldn’t quite make it to the the top four list but are great tools nonetheless.

Re-start by react-everywhere

Re-start by react-everywhere is a React Native template built to target multiple platforms, including web, mobile, and desktop with a single codebase.

With 1.3K stars, this boilerplate uses Redux for state management and React Router for routing and navigation. Unfortunately, this boilerplate doesn’t come with a library for UI design, talking with REST servers, or testing.

The great thing about this boilerplate is that it allows you to target multiple platforms (Android, iOS, Web, Windows, and Electron) with React Native APIs and a single codebase.

After meeting all prerequisites listed on this project’s page, you should be able to create a new project with the following.

Create a new react-native project using react-native-cli and specify re-base as a template:

react-native init <Your Project Name> --template re-base

React Native doesn’t support template inheritance. If you want to use a derived template like re-dux or re-route, install them directly on top of the newly created project. You’ll probably get a warning that the project already exists, just say yes to overwrite the required files:

react-native init <Your Project Name> --template re-dux
react-native init <Your Project Name> --template re-route
react-native init <Your Project Name> --template re-start

The re-start template depends on both re-route and re-dux, be sure to install them first in that order.

Since react-native-template doesn’t support adding custom scripts to package.json, execute ./finishInstall.js to finish the project configuration.

ReactNativeSeed by GeekyAnts

ReactNativeSeed, a project by GeekyAnts, provides you with a number of React Native boilerplates to choose from.

This project’s website allows you to select the features that you would like your boilerplate to have.

You can opt for MobX or Redux for state management, React Navigation for navigation and routing, TypeScript or Flow for static type checking, and Create React Native App (CRNA) or plain React Native for the stack.

In some of the boilerplates provided, you will also find NativeBase for the UI design, React Native Vector Icons, and the Jest framework for testing.

What I like about this entry is the ability to choose the components that you want your app to have before downloading the boilerplate.

Before you use this boilerplate generator please note that unfortunately, some of the repositories containing the boilerplates that you download based on your component choices are a bit outdated.

React Native Boilerplate by victorkvarghese

Reactive Native Boilerplate by victorkvarghese is a type-based architecture for developing React Native apps using React, Redux, Sagas, and hooks with authorization flow. It has 375 stars on GitHub.

This TypeScript ready project uses Redux for state management, React Navigation for routing and navigation, React Native Paper for the UI design, React Native Vector Icons, Axios for talking with REST servers, and the Jest framework for testing.

Some of the greatest selling points of this boilerplate are that the routing and navigation come with authentication flow baked in, and that it uses React Native Paper for the UI design. React Native Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.

After meeting all prerequisites listed on this project’s page, you should be able to create a new project with the following.

First, clone the boilerplate repository:

git clone https://github.com/victorkvarghese/react-native-boilerplate.git <your project name>

Go to the project’s root directory:

cd <your project name>

Remove the .git folder:

rm -rf .git

Use react-native-rename to update project name, and you should be good to go:

npx react-native-rename <newName>

React Native Template – TypeScript by AmitM30

React Native Template – TypeScript by AmitM30 is a boilerplate that allows you to jumpstart building robust apps using React Native and TypeScript with the most commonly needed tools already set up.

With 166+ stars, this boilerplate uses Redux for state management, React Native Navigation for routing and navigation, React Native Paper for the UI design, React Native Vector Icons, Axios for talking with the REST servers, and the Jest framework for testing.

What differentiates this boilerplate from the ones previously mentioned is the fact that it uses React Native Navigation for routing and navigation. React Native Navigation provides 100% native platform navigation on both iOS and Android, and makes your app more performant compared to the React Navigation library, which is used in some of the other boilerplates shown in this article.

You can create a new project using this boilerplate by simply cloning this project with the following command:

git clone https://github.com/AmitM30/react-native-typescript-boilerplate.git your_app_name

Conclusion

In this article, we talked about some React Native boilerplates that make our app development much easier.

In case you forgot what are strengths of these boilerplates, take a look at the following table to refresh your memory:

Regardless of which boilerplate you choose, hopefully after you start using one of them, your application development process will be smoother than it was before.