What is Ignite X?
Nearly a Decade of React Native — Here Comes X
This blog post has a companion episode of React Native Radio that will discuss Ignite X further. Click here to listen.
We all know what Ignite does for React Native.
We hear about Ignite constantly. It’s been the stalwart of opinionated React Native boilerplates for years. With over 17,000 stars and growing, hundreds of contributors, and years of conference and podcast mentions, Ignite is no stranger to React Native. The proven React Native starter kit has evolved yearly, providing a comprehensive foundation for building battle-tested apps. The boilerplate has come with pre-made UI components, built-in solutions, styling/theming, state management, internationalization, and testing for years.
Beyond the basics, it also provides generators for setting up screens, components, and models. The everlasting promise is to keep you focused on the app, not the startup costs.
🧑🍳 We even provide a Cookbook of amazing recipes to mix common technologies with Ignite if you want to add something special to your Sprint with minimal points. https://ignitecookbook.com/
Needless to say, hundreds of developer hours go into Ignite… and that brings us to Ignite X.
Welcome Ignite X
We teased the features that matter at our epic talk at Chain React, but we’ve got whole new tricks.
“Ignite 9 was cool and all, but have you heard of Ignite X?” - React Native Digest Weekly & Power Washing
Ignite X brings native platform changes, easy dark mode, experimental support for tools like Expo Router, and more. This isn’t just our latest Ignite release packed with upgrades and fixes for the next project — it’s Ignite X!
“How do I try this out now?”
It’s easy to start a new project with Ignite X:
npx ignite-cli@latest new OMGProjectLOLIf you’re new to Ignite’s features, don’t worry! The CLI will guide you step by step, helping you choose options like your preferred package manager, navigation library, and even the option to include a complete demo app. EZ PZ.
Linky-dink: Read more about how to get started in our easy-to-follow guide.
What’s new in Ignite X?
Ignite X builds on past releases with the updates and fixes our team relies on to ignite new React Native apps quickly and smoothly.
Ignite X adds:
- Expo Prebuild as default
- Dark mode support
- Static routing with Expo Router
- Flexible generator directory support
- Option to remove mobx-state-tree
- AsyncStorage->MMKV
- New i18n configuration with react-i18next
- Lint configuration updates
- Toggle component → Checkbox, Radio, and Switch
- Improved keyboard avoidance
- Component test example configuration
Goodbye Expo Go, Hello expo prebuild
Adding dependencies that require edits to native platform files has never been fun, and it can be very easy to make mistakes, especially if you’re not profoundly familiar with the native tools.
Continuous Native Generation (CNG) is a pattern introduced by the folks over at Expo to make this easier. Instead of manually editing your native code, you use scripts known as “config plugins”. These scripts can be included with libraries to do all the setup for you, and you can also write your own.
Native code is now generated by these plugins when you run yarn prebuild:clean in Ignite (which runs expo prebuild --clean). Then you can use yarn ios, etc, as usual.
For more information on using prebuild, see the Expo docs.
With CNG, managing native code is so easy that we’re removing support for Expo Go. Most apps we encounter want to customize the native code available, and CNG with expo prebuild is a better fit for our needs.
PR #2641 by @frankcalise.
Dark mode made easy
Dark and light mode are now supported by default in Ignite! Apply the themed function from useAppThemeto your styles to dynamically insert your theme’s colors, spacing, typography, animation timing… it’s easily extensible to whatever data you want!
PR #2636 by @markrickert.
Expo Router support
Ignite now includes experimental support for Expo Router, a file-based router system that offers a number of features, including automatic deep links, lazy evaluation of routes, while still being built on top of the React Navigation you know and love.
Give Expo Router a shot in a new app today:
npx ignite-cli@latest new ExpoRouterApp --workflow cng --experimental expo-routerPR #2727 by @frankcalise.
Flexible directory structure support
Since Expo Router requires a new directory structure, we’ve added some flags to the screen and component generators:
- pass the
--dirflag to specify where to generate your new file - use the
--case=noneflag to keep the file name exactly as input instead of transforming it to PascalCase.
In addition, we added the @ import alias, which allows you to refer to the base folder of the application, without needing to specify its name.
// Previously "app/utils/useAppTheme"
import { useAppTheme } from "@/utils/useAppTheme"PR #2726 by @frankcalise. PR #2772 by @lindboe.
Option to remove mobx-state-tree
We love mobx-state-tree at Infinite Red, but not every React Native project we work on uses it. To make Ignite easier to use for projects where you’d like to use a different state management solution, you can now generate a blank template by generating a new project with the --removeDemo --state=noneflags:
npx ignite-cli@latest new PizzaApp --removeDemo --state=nonePR #2647 by @jpoliachik. PR #2731 by @frankcalise.
AsyncStorage->MMKV
When we need a key-value store, we prefer using react-native-mmkv over AsyncStorage. It’s speedy and easy to use, so we think you’ll like it too.
PR #2660 by @frankcalise.
i18n, reloaded
We’ve changed Ignite’s internationalization library from i18n-js to react-i18next . We use react-i18next on most of our projects at Infinite Red. It provides improved support for pluralization, number/currency/date formatting, and complex string interpolation.
See more about this in Mazen Chami’s talk at Callstack’s conference.
Lint configuration updates
Ignite’s linting configuration has been updated! Here are the highlights:
- We’re now using
eslint-config-expoand will stay up-to-date with Expo’s linting changes. - Prettier is now run by eslint. Running
yarn lintwill behave like it always did: checking lint rules and then formatting according to prettier.yarn formatwas kept for backwards compatibility, and is the same asyarn lint. If you want to check for errors without auto-fixing them, runyarn lint:check. - Importing React is no longer required in JSX/TSX files. You do still have to import it if you want to use the React API directly, though.
Toggle → Checkbox, Radio, and Switch
We replaced the Toggle component, which had grown a little too large, with more specific components: Checkbox, Radio, and Switch.
PR #2667 by @frankcalise.
Improved keyboard avoidance
We’ve now integrated react-native-keyboard-controller to the Screen component, providing more reliable avoidance of text inputs when opening a device’s software keyboard. Check out the TextField section in the demo showroom for examples with a SectionList!
Component test configuration
Ignite is now pre-configured for React component testing with react-native-testing-library, including an example at @/components/Text.test.tsx.
Can You Try & Share Ignite X? — I don’t know…
Yes, you can watch Deadpool, do a wheelie, and order the latest VR goggles, but are you really cool if you haven’t built a project with Ignite X? We didn’t think so, either. Your favorite React Native Frenz, Infinite Red, wants to hear from you. Try utilizing the latest shipment of goodies. Let’s go!
WHO DECIDES THESE FEATURES? We all do.
We’re talking about Ignite in the Infinite Red community Slack!
Join us and let us know how you’re using Ignite. If you run into issues, file an issue.
Here’s a link to the release notes!
Acknowledgments
Community Contributions
- Shubh Porwal — Helping with Hindi translations
- Aniruddha Ganesh — Hindi translations
- Jose Mejia Munoz — Helping with documentation screenshots
- Kei Yamashita — Helping with Japanese support
Please hold that “Clap” button and ⭐️ star the Github repo to show support.
We’re excited to see what you build!
I hope you enjoyed reading about this initiative, and if you’re looking for the best place to get help with your React Native mobile app, don’t forget my company Infinite Red. See ya soon!
About Gant
Gant Laborde is a co-owner and Chief Innovation Officer at Infinite Red, published author, adjunct professor, worldwide public speaker, and mad scientist in training. Clap/follow/tweet or visit him at a conference.
