Making Ignite a multi-platform React Native boilerplate
Today, we’re announcing Ignite 7 with Expo Web (beta) support!
Ignite is the React Native boilerplate that we use at Infinite Red on a day-to-day basis to build client apps. It is a culmination of five years of constant React Native development and is the easiest way to start a React Native project. Ignite also happens to be the most popular React Native boilerplate on Github with over 12,000 stars!
TLDR: Igniting a new app with `npx ignite-cli new PizzaApp ––expo` will now support Expo Web (beta) by default!
run `expo start` in the new project directory and click “web” or simply run expo start:web to get the Infinite Red Ignite Bowser boilerplate running with zero configuration.
This means that you can now use Ignite to generate new React Native apps (using expo) that run on iOS, Android, and web… all from the same codebase!
It’s been about six months since we released Ignite 6.0.0 with basic Expo support for iOS and Android projects. Ignite 6 focused on slimming down the boilerplate and dependencies to what we actually use on client projects. We also moved the boilerplate into Ignite itself, making it easier for anyone to contribute to the project in the future.
Protip:
Did you know that the Ignite boilerplate can be compiled in-place? It’s a fully functional react-native app (non-Expo)Try it for yourself!
Clone the Ignite repo, cd into the boilerplate directory and run:
yarn && npx react-native run-ios
My desire to add web support to Ignite came from a deep dive into React Native multi-platform support harnessing the same shared codebase to output iOS, Android, and Web apps. I wanted to build a new project with web support, but I knew there had to be an easier way than configuring everything manually each time. Boilerplates are, at their core, meant to help speed up complex configurations and ease developer burden. Could I add expo web support to the Ignite boilerplate?
There’s no doubt that Expo has begun to differentiate itself in the React Native ecosystem as a great way to develop, build, and manage your React Native projects. Web support has been in beta for a while now, with a push at the beginning of 2020 to get web support out of beta status. It was possible to run the Expo web packager in Ignite 6 but you would be presented with a cryptic error message with not much to go on.
I’m happy to report that I did all the googling, stack-overflowing, and Github issue-searching so you don’t have to! The Ignite 7 boilerplate now supports Expo web by default, though it’s up to you to make sure that dependencies you add to your project are web-compatible.
After a few more cleared roadblocks and obscure error messages, I finally had it working! React Navigation, mobx-state-tree, data persistence, and all the other boilerplate features were working perfectly! Reactotron debugging works just like native and you can invoke storybook on web by appending “?storybook=true” to the URL.
The final challenge was getting bundled images to show properly on all platforms. The underlying tech behind how this all works, react-native-web, requires that all images are given width and height properties. This is a departure from the native experience where an image defined as <Image source={require(“./path/to/image.png”)}> would happily show the image at its native resolution.
After some back and forth with some colleagues, we settled on shipping a new component with Ignite called AutoImage. It’s a fairly simple React Native Image component wrapper that will set its own size automatically for both network and local (bundled) images on all platforms. We recommend you import { AutoImage as Image } and use it as a stand-in replacement for react-native’s Image component. You can always override this behavior and explicitly set your image’s dimensions and AutoImage will respect them.
Make sure you test this on all platforms you plan on shipping because specifying one dimension and relying on auto-height for the other can lead to some interesting layout issues. Here, you can see me manipulate an ImageStyle that is applied to all images on this screen. When I save the change, it fast reloads iOS, then Android, then web.
Ignite 7 now makes it even easier to harness the power of React Native and Expo to build applications that shine! ✨
We’re excited to see the multi-platform apps you build with Ignite!
If you’re interested in exactly what changed between Ignite 6.12.2 and 7.0.0, you can check out the full release notes and diff here.
And if you need any help, drop by our popular Infinite Red Community Slack to talk to thousands of other React Native and Ignite developers!
Mark Rickert is a Principal Software Engineer at Infinite Red, remote work expert, extreme sports enthusiast (doing, not watching), and traveling aerial sideshow.
