Home

Awesome

<p align="center"><img src="https://user-images.githubusercontent.com/1479215/206780298-2b98221d-9c57-4cd3-866a-cf85ec1ddd9e.jpg" alt="Ignite README Splash Image" /></p>

Ignite - the battle-tested React Native boilerplate

<a href="https://badge.fury.io/js/ignite-cli" target="_blank"><img src="https://badge.fury.io/js/ignite-cli.svg" alt="npm version" height="20"></a> GitHub Repo stars Twitter Follow CircleCI

Proven React Native boilerplate

The culmination of over seven years of constant React Native development, Ignite is the most popular React Native app boilerplate for both Expo and bare React Native.

This is the React Native boilerplate that the Infinite Red team uses on a day-to-day basis to build client apps. Developers who use Ignite report that it saves them two to four weeks of time on average off the beginning of their React Native project!

Intro Videos

Here are a few videos / talks that introduce Ignite and show off some of its features. Check them out!

<table> <tr> <td width="50%"> <figure> <a href="https://www.youtube.com/watch?v=KOSvDlFyg20"> <img src="https://img.youtube.com/vi/KOSvDlFyg20/sddefault.jpg" alt="Getting Started with Ignite" width="100%" /><br /> <figcaption><strong>Getting Started with Ignite</strong></figcaption> </a> </figure> </td> <td> <figure> <a href="https://www.youtube.com/watch?v=dNWkJOpD6YE&list=PLFHvL21g9bk0XOO9XK6d6S9w1jBU6Dz_U&index=16"> <img src="https://img.youtube.com/vi/dNWkJOpD6YE/sddefault.jpg" alt="Sweetening React Native Development With Ignite" width="100%" /><br /> <figcaption><strong>Ignite talk at Chain React 2024 - Robin Heinze</strong></figcaption> </a> </figure> </td> </tr> <tr> <td> <figure> <a href="https://www.youtube.com/watch?v=QmkMsUYrTlk"> <img src="https://img.youtube.com/vi/QmkMsUYrTlk/sddefault.jpg" alt="Jamon's Code Quest on Ignite 9" width="100%" /><br /> <figcaption><strong>What's new in Ignite 9</strong></figcaption> </a> </figure> </td> <td> <figure> <a href="https://www.youtube.com/watch?v=n_VjjJxyd8Q"> <img src="https://img.youtube.com/vi/n_VjjJxyd8Q/sddefault.jpg" alt="Jamon's Code Quest on MobX-State-Tree" width="100%" /><br /> <figcaption><strong>Intro to MobX-State-Tree</strong></figcaption> </a> </figure> </td> </tr> </table>

Full Documentation

We've put great effort into the documentation as a team, please read through it here. If you're unsure why a certain decision was made related to this boilerplate or how to proceed with a particular feature, it's likely documented. If it still isn't clear, go through the proper help channels and we always welcome PRs to improve the docs!

Tech Stack

Nothing makes it into Ignite unless it's been proven on projects that Infinite Red works on. Ignite apps include the following rock-solid technical decisions out of the box:

LibraryCategoryVersionDescription
React NativeMobile Frameworkv0.74The best cross-platform mobile framework
ReactUI Frameworkv18The most popular UI framework in the world
TypeScriptLanguagev5Static typechecking
React NavigationNavigationv6Performant and consistent navigation framework
MobX-State-TreeState Managementv5Observable state tree
MobX-React-LiteReact Integrationv3Re-render React performantly
ExpoSDKv51Allows (optional) Expo modules
Expo FontCustom Fontsv12Import custom fonts
Expo LocalizationInternationalizationv15i18n support (including RTL!)
Expo Status BarStatus Bar Libraryv1Status bar support
RN ReanimatedAnimationsv3Beautiful and performant animations
MMKVPersistencev2State persistence
apisauceREST clientv2Communicate with back-end
Reactotron RNInspector/Debuggerv3JS debugging
HermesJS engineFine-tuned JS engine for RN
JestTest Runnerv26Standard test runner for JS apps
MaestroTesting FrameworkAutomate end-to-end UI testing
date-fnsDate libraryv2Excellent date library
react-native-keyboard-controllerKeyboard libraryv1Great keyboard manager library
FlashListFlatList replacementv1A performant drop-in replacement for FlatList

Ignite also comes with a component library that is tuned for custom designs, theming support, testing, custom fonts, generators, and much, much more.

Quick Start

Prerequisites:

The Ignite CLI will walk you through the steps to ignite a new React Native app:

# Get walked through the prompts for the different options to start your new app
npx ignite-cli@latest new PizzaApp

# Accept all the recommended defaults and get straight to coding!
npx ignite-cli@latest new PizzaApp --yes

Once you're up and running, check out our Getting Started Guide.

If you'd like to follow a tutorial, check out this one from Robin Heinze.

Troubleshooting

The above commands may fail with various errors, depending on your operating system and dependency versions. Some troubleshooting steps to follow:

Reporting Bugs / Getting Help

If you run into problems, first search the issues and discussions in this repository. If you don't find anything, you can come talk to our friendly and active developers in the Infinite Red Community Slack (community.infinite.red).

If you still need help after reaching out to the proper channels, feel free to open a new GitHub issue via npx ignite-cli issue "Unable to Ignite new app" (as an example). This will help start writing your issue with the correct diagnostic information included.

Contributing to Ignite

Want to contribute to Ignite? Check out the contributing guide for more info on how to work with the codebase.

Need Inspiration?

If you need battle-tested solutions from Infinite Red experts on everything from Accessibility, to CI/CD configuration, head to Ignite Cookbook for code snippets from our team and the community!

No time to learn React Native? Hire Infinite Red for your next project

We get it – sometimes there just isn’t enough time on a project to learn the ins and outs of a new framework. Infinite Red’s here to help! Our experienced team of React Native engineers have worked with companies like Microsoft, GasBuddy, Zoom, and Mercari to bring some of the most complex React Native projects to life.

Whether it’s running a full project or training a team on React Native, we can help you solve your company’s toughest engineering challenges – and make it a great experience at the same time.

Ready to see how we can work together? Send us a message

Further Reading