Having separate builds for dev, beta, and production environments is critical for most apps.
These environment specific builds give us a way to:
Let’s look at how to do that in React Native!
There are two main ways to configure environment-specific builds in your app, and neither of them are the following approach:
It would be nice to have a single place to do this, and ideally a way to do so without touching native code.
At Echobind, we follow the 12-factor approach for all of our web and mobile apps. Using this approach, you create a single version of your app configured differently via environment variables. We see multiple wins by taking this approach in React Native:
We need a way to add a suffix to the id for each release type:
Tools like PlistBuddy and Gradle scripts can help with this, but we’re trying to do things cross-platform in a unified way. Enter fastlane. To setup fastlane, follow the Getting Started section in the guides.
As of August, 1, 2018, this plugin doesn’t properly update values that contain empty strings (I have an open PR that fixes it). In the meantime, if you want to follow the same process here, you’ll need to point to a fork.
We then set a customizable suffix, which defaults to the release type.
You should see the following updates:
Remember, this is designed to be run on CI and discarded after build, so it’s fine that these values get overwritten.
Now that we’re able to install the different builds side-by-side we need to make the app icon visually distinctive so we know which one we’re opening.
Next install the badge plugin:
Now, we can re-run our previous command to produce some slick looking badges!
Note: Like the app id changes, it will modify the icon in place. If you’re testing this out locally, just discard the changes.
Now we can update our lane to change the display name on both platforms:
Welcome to a scalable, secure way to set up variables, icons, display names, and bundle suffixes for different environments your app needs. You should be able to set up any CI to run your Fastlane lane, overriding the defaults via ENV variables as needed.
Need help with your React Native app?
Say hello! We’d love to chat.
Chris is CTO at Echobind, a full-service agency specializing in custom web and mobile apps. When he’s not helping developers grow or creating amazing things for clients, you’re likely to find him playing music, cycling, or camping.