Announcing Ignite 8.0: “Maverick”

A fresh new take on the battle-tested React Native boilerplate

We’re delighted to announce that Ignite 8.0 (code-named “Maverick”) is now released on NPM!

This release is the largest one in Ignite’s history since 2.0 (“Bowser”). With 110+ pull requests containing over 600 commits, 400+ files changed, +14k lines -22k lines (yes, a net reduction of lines of code), and roughly 800 developer-hours spent, we’re finally ready to unveil it.

If you just want to read the release notes without the details, get started here.

One-sentence TL;DR: The world’s best React Native starter kit just got incredibly better, via months of active contributions!

What’s Ignite?

Ignite is Infinite Red’s battle-tested React Native project starter kit / boilerplate, along with a CLI, component/model generators, and more. We like to say it cuts two to three weeks or more of development time off the front of a project. It’s been in continuous development since early 2016 and is the most widely-used project boilerplate for serious React Native apps worldwide.

Quick Start

Spin up a brand-new React Native app with this command.

npx ignite-cli new PizzaApp

Ignite will walk you through the rest!

What’s New in Maverick?

It might be easier to start with what’s not new in Maverick. But let’s give this a shot. Strap in, folks!

• Massively Expanded Documentation
• Redesign
• Revamped Components
• Expo & Vanilla Unification
• Enhanced Internationalization Support
• New Splash Screen Generator
• New Icon Generator
• New Component Showroom
• New Drawer and Tab Bar Navigators
• New Login Screen / Auth Flow
• New Demo Podcast Screen
• New Debug Screen
• New Crash Reporting Interface
• Updated Error Boundary Component
• Updated MobX-State-Tree and Reactotron Integrations
• Added Reanimated
• New Ignite CLI Walkthrough
• Enhanced Ignite CLI Experience
• New “Remove Demo” CLI Command
• Upgraded React Native and Expo
• Enabled Hermes by Default
• React Navigation Cleanup
• Faster CI / Tests
• Many bugfixes and DX improvements

Expanded Documentation

Ignite’s documentation in the past has always been pretty ad-hoc and underwhelming. In this version, we focused a ton on expanding our documentation coverage and added docs for all of our new components, navigation, testing, styling, troubleshooting, generators, and much, much more.

Check out the new docs here!

Special thanks to Silas Matson, Yulian Glukhenko, and Frank Calise!

Redesign

The previous design for Ignite hasn’t changed substantially for over four years, so it was time for something new.

Our amazing designers at Infinite Red redesigned every default screen in Ignite, giving it a fresh new look!

Special thanks to Jenna Fucci!

Completely Revamped Components

Ignite comes with a set of components that are designed for maximum flexibility. They work best with custom designs rather than trying to be a pre-built UI kit system like React Native Elements or UI Kitten.

We went through all of these and refactored them, replacing a few that we don’t really use anymore, and adding a few others that we have found useful in projects.

The revamped components are: TextField, Toggle, Header, Screen, Button, ListItem, Card, AutoImage, Text, Icon, and EmptyState.

You can learn more about all of the components in our new docs!

Special thanks to Yulian Glukhenko!

Expo & Vanilla Unification

In previous versions of Ignite, you had to specify whether you wanted Ignite to be Expo-compatible or if you were going to use the React Native CLI to run your project.

Ignite’s boilerplate is now compatible with Expo Go and React Native CLI out of the box. To run either, just run yarn ios or yarn expo:ios (or android ) after spinning up your project!

To learn more about how we use Expo in Ignite, check out the new documentation.

Special thanks to Frank Calise!

Enhanced Internationalization (i18n) Support

While internationalization (i18n) tends to not be quite as splashy of a feature, this enhancement is really great! We added right-to-left (RTL) language support, which involves more than just switching the text direction. The new drawer menu shifts to the other side, icons point the other way, gestures are managed differently … it’s a whole thing!

To learn more about the new internationalization features, check out the docs.

Special thanks to Mazen Chami and Leon Kim.

New Translations: Arabic and Korean

To get the full flavor of the RTL language support, and because we have two Arabic speakers on the team, we added Arabic translations to all of the demo screens. And since we also have two Korean-speakers on the team, we added Korean as well!

Special thanks to Leon Kim and Kate Kim for Korean and Mazen Chami and Mazen’s mom Zeina Baassiri for Arabic.

New Splash Screen Generator

Speaking of “splashy” features, we’ve implemented react-native-bootsplash and added default splash screens for iOS, Android, and Expo. To customize the splash screen, we added a ridiculously useful new generator called splash-screen.

New splash screen!

You can generate all the different splash screen sizes and formats with a single command:

npx ignite-cli generate splash-screen FF0000

You can read all about the new splash screen generator in the new documentation.

Special thanks to Yulian Glukhenko!

New Icon Generator

Similar to the splash screen generator, the new icon generator comes with default icons and a handy icon generator.

You can generate all the different icon sizes and formats with a single command:

npx ignite-cli generate app-icon all

You can read all about the new app icon generator in the new documentation.

Special thanks to Yulian Glukhenko!

New Component Showroom

We’ve used React Native Storybook for quite a while to develop and demo components. While it is a powerful system, it didn’t quite capture what we were trying to do with Ignite Maverick.

So, we built our own lightweight version! It’s called Ignite’s Component “Showroom”, and it’s awesome.

Read the docs on the components in the Showroom here.

Special thanks to Kate Kim and Yulian Glukhenko!

New Drawer and Tab Bar Navigators

The Component Showroom needed easy navigation, so we built-in a drawer navigator and a tab bar. You can see them in action in the GIF in the previous section.

Special thanks to Kate Kim, Yulian Glukhenko, and Frank Calise!

New Login Screen / Auth Flow

Most apps have login screens and authentication! We decided to include a demo login screen and app flow to model how we build these screens ourselves. This includes error states and validations, too!

Special thanks to Yulian Glukhenko and Robin Heinze!

New Demo Podcast Screen

Almost every app features lists of data, fetched from an external source, so we added a new demo screen showing how we do this. We used the React Native Radio recent episodes list.

We also integrated a “favorites” feature to show how to manipulate data locally — and show off Robin’s animation skills, naturally!

Special thanks to Robin Heinze and Jamon Holmgren!

New Debug Screen

We added a new debug screen that gives info about the app, device, and allows you to try out Reactotron!

Special thanks to Kate Kim and Lizzi Lindboe!

New Crash Reporting Interface

Every app needs crash reporting, and yet there are a number of different services to provide that.

We included a new common interface for crash reporting and included (commented-out) boilerplate code for the three most common services: BugSnag, Sentry, and Crashlytics. Additionally, in development mode we report those crashes to Reactotron.

Special thanks to Frank Calise!

Updated Error Boundary Component

The old ErrorBoundary component needed a refresh, and we gave it one! Not only the look and feel, but also the code itself is now a more modern style.

Special thanks to Yulian Glukhenko!

Updated MobX-State-Tree and Reactotron Integrations

MobX-State-Tree is still our state management system of choice, but Maverick comes with an updated and cleaner integration. We’ve removed the provider and revamped where the RootStore is instantiated.

While we were in there, we also revamped the Reactotron initialization and simplified the API service.

You can read more about why we use MST here: https://github.com/infinitered/ignite/blob/master/docs/MobX-State-Tree.md

Special thanks to Jamon Holmgren! (ahem)

Added Reanimated

We tend to add Reanimated to every project for better animation support, so we added it to Ignite as well, and integrated some animations here and there as a demo.

Special thanks to Frank Calise!

New Ignite CLI Walkthrough

In early versions of Ignite, we asked the user a lot of questions to help guide them through creating an app. In more recent versions, we instead used a series of assumptions/defaults. We’re back to asking the user questions, and you have much more control over what you generate!

When you’re done, we even prompt with the command to run to avoid having to answer those questions in the future.

For next time: here are the Ignite options you picked!
      npx ignite-cli new Maverick \
        --bundle=com.maverick \
        --git \
        --install-deps \
        --packager=yarn \
        --target-path=/Users/jh/Code/Temp/MaverickTemp/Maverick

We intend to do even more with this in the future, so stay tuned. We love making the developer experience delightful from the very start!

Special thanks to Josh Yoes!

Enhanced Ignite CLI Experience

While Josh was in the CLI adding the walkthrough, he also enhanced various outputs and made the experience nicer in general.

Josh has been moving the CLI forward and we’re excited about where it can go!

Special thanks to Josh Yoes!

New “Remove Demo” CLI Command

When we start a new project, we usually don’t want all the demo code in there — we want it to just be a nice, tight Ignite app, ready to rock and roll.

We added a CLI command to strip out all the demo code!

npx ignite-cli remove-demo

The way this works is pretty clever. Check out the docs here!

Special thanks to Josh Yoes and Jamon Holmgren!

Upgraded React Native and Expo

It’s important to stay on top of your React Native and Expo SDK versions! We got the boilerplate upgraded to React Native 0.69.x and Expo SDK 46. In the future, we intend to keep pace with Expo SDK version releases, and upgrade React Native versions in parallel with the Expo SDK required version. This isn’t quite “bleeding edge” on purpose — we find that following just a tiny bit behind is the best developer experience.

Special thanks to Frank Calise!

Enabled Hermes by Default

React Native’s barebones template comes with Hermes enabled by default, so we matched this. Hermes gives much better startup and runtime performance for React Native apps, especially in Android.

Special thanks to Frank Calise!

React Navigation Cleanup

While we were making changes, I went in and cleaned up the navigation structure, made them into MobX observers, and documented things a bit better. They now align better with how we like to structure things in real-world projects.

Special thanks to … me, I guess!

Faster CI / Tests

We spent a lot of time improving Ignite’s CI test suite and speed. We were hitting up against CircleCI’s 5 minute run time limit, and were able to get it down to under 3 minutes — and the entire suite runs in under a minute on my M1 Max Mac Studio. This helps contributors turn around changes faster (and makes them less grumpy when things fail).

Special thanks to Josh Yoes!

Soooo Many Bugfixes/Small Improvements

This blog post is already ridiculously long. I’ll spare you the nitty-gritty details!

What didn’t make it into this release?

The primary changes that didn’t make it into version 8 (but are planned for a future release) are:

• React Native 0.70 — we decided we will follow the latest Expo SDK’s React Native version rather than staying on the bleeding edge. When Expo’s next SDK version lands, we’ll update accordingly.
• Major New Architecture Changes — the New Architecture is really exciting, but third-party libraries we use aren’t all ready to go yet, so we’re holding off on anything too big until we’ve used it in client projects and gained more experience. Expect this to land sometime in 2023.
• Monorepo Improvements — this is in the works, but won’t make it into this release. You can definitely still use Ignite in a monorepo (we do when the client needs it) but there are some additional improvements we’d like to make to make it easier.

Upgrading your Ignite v7 app to v8

Ignite is generally designed to be “create and diverge” — that is, you initially create your app with the latest Ignite, and then you don’t necessarily need to keep it up-to-date with our latest changes.

However, a lot of Ignite users have told us that they like the improvements we’ve brought to Ignite over the years.

Niclas Söderström created the very useful Ignite Diff Purge tool which can be helpful. But, with over 400 files changed, this could be pretty tedious.

For a change like this, we recommend spinning up a brand-new Ignite app and porting over your code. This is a fair amount of work, so only do so if you feel that the new patterns we’re using in Maverick are worth the effort. (Or hire us to do it!)

Come join the discussion!

We’re talking about Ignite in the Infinite Red community Slack!

https://community.infinite.red

Come join us and let us know how you’re using Ignite.

If you run into issues, file an issue:

https://github.com/infinitered/ignite/issues/new

Looking forward to getting community feedback!

Acknowledgements

Ignite v8: Maverick was a huge effort, impacted by a lot of people at Infinite Red, including:

• Yulian Glukhenko
• Simran Kaur
• Robin Heinze
• Mazen Chami
• Lizzi Lindboe
• Leon Kim
• Kate Kim
• Justin Huskey
• Josh Yoes
• Jenna Fucci
• Jamon Holmgren
• Frank Calise
• Dan Edwards

Apologies if I missed anyone — you know where to find me, and I’ll add your name. Thanks all of you!