docs

sidebar_position
1

Ignite - the battle-tested React Native boilerplate

With over seven years of active development, Ignite is the most popular React Native app starter boilerplate for both Expo and bare React Native.

This is the React Native stack 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 and improves their confidence over the lifetime of the entire project.

Getting Started

If you just want to kick off a new project, you can do that with the Ignite CLI:

npx ignite-cli@latest new pizza-app

Prerequisites:

• Node.js LTS release or greater
• Recommended: recent versions of Xcode and Android Studio
• Recommended: Yarn or Bun package manager
• Recommended: macOS (for iOS development)

Intro to Ignite

Resources

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

Getting Started with Ignite	Ignite talk at Chain React 2024 - Robin Heinze
What's new in Ignite 9	Intro to MobX-State-Tree

Boilerplate Guide

Check out our Guide for a walkthrough of the boilerplate project and how to use it

Background

Ignite was born in early 2016 when two teams at Infinite Red were building new React Native apps for clients. As we built the projects, we noticed we were running into similar problems on each app -- what navigation library should we use? What about folder structure? How could we make sure our stack aligns across many future projects?

We built Ignite as a CLI and boilerplate project based on our learnings, and have continuously improved it over the past seven years. Along the way, we've built up an amazing community of developers who use Ignite to build their apps, share techniques, and contribute back to the project.

The guiding philosophy behind Ignite is that nothing makes it into the stack unless it's been proven on projects that Infinite Red has built. This means it evolves a bit slower than other boilerplates, but unlike others, it's based on real-world experience and not the latest new thing. But we also are continuously developing and pushing the stack forward, so it never stagnates.

With Ignite, you get proven patterns, best practices, and a robust, seasoned community. Don't go alone!

Documentation

• Command-line Interface (CLI) - How to spin up a new Ignite app

  • CLI Generators - Generate components, screens, and more
  • Troubleshooting

• Components - Ignite's built-in UI components

  • AutoImage
  • Button
  • Card
  • EmptyState
  • Header
  • Icon
  • ListItem
  • ListView
  • Screen
  • Text
  • TextField

• Concepts - An overview of the concepts behind developing with Ignite

  • Expo and Ignite - How Expo fits in with Ignite, and whether you should use it
  • Folder Structure - An overview of the Ignite folder structure
  • Generators - Everything you need to know about Ignite generators
  • Generator Templates - Writing your own generator templates
  • Internationalization — How to Internationalize your app
  • Why MobX-State-Tree? - All about MobX-State-Tree, and why we use it instead of Redux
  • Navigation - How React Navigation is used to navigate through your screens
  • Styling - How we approach styling components in Ignite
  • Testing - How to test your Ignite app
  • TypeScript - An explanation of TypeScript in Ignite and lots of resources
  • Upgrades - How to upgrade your app to the latest and greatest Ignite patterns

• Theming - How to customize the look and feel of your app

  • Colors & Palettes - Explanation of our palette-based approach to colors
  • Fonts & Typography - How we define fonts in a semantic way
  • Spacing - How to approach consistent spacing throughout your Ignite app

• Utils - Collection of helpful utilities

  • useSafeAreaInsetsStyle
  • useHeader

Contributing

• Tour of Ignite - Tour of the Ignite code base for interested contributors
• Releasing Ignite - How we release Ignite