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.
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
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.
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
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
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
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 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, 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.
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 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
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:
Features/Product | Ignite by Infinite Red (12.2K⭐) | React Native Starter Kit by mcnamee (3K⭐) | React Native Boilerplate by TheCodingMachine (2K⭐) | React Native Template TypeScript by the React Native Community (1.2K⭐) |
---|---|---|---|---|
State management | MobX | Redux | Redux | ❌ |
Navigation | React navigation | React Native Router | React navigation | ❌ |
UI components | ❌ | NativeBase, React Native Vector Icons | ❌ | ❌ |
HTTP client | Apisauce | Axios | Axios | ❌ |
TypeScript | ✔️ | ❌ | ❌ | ✔️ |
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.
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowLearn how to manage memory leaks in Rust, avoid unsafe behavior, and use tools like weak references to ensure efficient programs.
Bypass anti-bot measures in Node.js with curl-impersonate. Learn how it mimics browsers to overcome bot detection for web scraping.
Handle frontend data discrepancies with eventual consistency using WebSockets, Docker Compose, and practical code examples.
Efficient initializing is crucial to smooth-running websites. One way to optimize that process is through lazy initialization in Rust 1.80.
3 Replies to "Top React Native boilerplates for 2021"
None that use GraphQL, just REST?
It’s not just for websites anymore and it can be secured in the same ways as REST. For me it was key to use GraphQL with the Apollo client for subscriptions inside my React Native apps, especially when we’re also using it for React.
The GraphQL client is available in any language besides C++ which just has a parse. So you can even use it cleanly with ejected apps, on gaming consoles etc.
It’s easy to have one url endpoint for mobile and one for more powerful clients or just stack them if your role/auth pattern allows. You can even add a public read only one like Gatsby does to the same data source.
Anoher nice thing is you can query your local cache (that has an identical shcema as the server) and manage app state in the Apollo client rather than bothering with ModX or React, and no need for caching in MongoDB or JSON for app state at all.
Really good boilerplates in one article 🚀 !!! A little mistake by the way the react-native-boilerplate by TheCodingMachine includes typescript support : during the installation you can choose between JavaScript and Typescript, your project your choices ! Take a look : https://thecodingmachine.github.io/react-native-boilerplate/docs/Installation#running-with-typescript-
Seems this my favorite boilerplate is missing to be included in this post.. https://github.com/handi-dev/react-native-boilerplate
it is react native boilerplate by handidev. includes core library ( react navigation, redux toolkit, react native vector icons)
npm: https://www.npmjs.com/package/@handidev/react-native-boilerplate