Controlled Rollout with React Native and Feature Flags

Controlled rollouts, also called canary releases, or percentage rollouts, are a vital part of software releases. With controlled rollouts, you can release your new feature to a small subset of users, verify proper functionality, and then slowly roll the feature out to your entire user base once you know it is working properly. In this post, we’ll show you how to implement a controlled rollout with React Native and feature flags.

TL;DR — controlled rollouts provide a layer of risk mitigation for your application and organization.

The Benefits of Controlled Rollouts with Feature Flags

Let’s take a look at an example of how a controlled rollout can be beneficial for an agile dev team. Let’s say you are a web developer who has spent most of your career in JavaScript. You just recently joined a mobile team that uses React Native. You get assigned a feature, write the React Native code, get it reviewed, test it, push it to prod, and see that the new version gets uploaded to the app store. Then, the unthinkable happens, and there’s a problem with the code, and you break the entire app. To fix this, you have to release a fix to the app store, but due to app store regulations, you have to wait two weeks to do so. Waiting two weeks to release a fix is not acceptable, so another developer on your team suggests using codepush, which allows you to dynamically update the experience of your React Native app, without waiting for the app store. Problem solved!

A few weeks later, you are working on another feature that allows users to scan a barcode with their mobile device to find a specific item. Unfortunately, it breaks the app again.

However, you’re not worried because you think you can use codepush again, right? You do some digging and realize you can’t use codepush because the bug is in the React Native code that’s accessing the camera, and any changes that touch the native code cannot be distributed via codepush. Now, you are frantically searching for a solution because you can’t wait two weeks to release a fix. You figure out a hacky solution in JavaScript that allows you to temporarily disable the new barcode feature while you wait out the two weeks before you can release again.

The process of disabling, or “turning off” a feature is made possible with feature flags. Feature flags allow you to separate code deployment from feature release. They act as a safety net. You can turn on and off features without a lengthy release process. So your product owner or anyone on your team can turn on features, or kill them with the click of a button, without having to push up any new code and without having a stressful release process.

With feature flags, you can target your internal teammates for their review, test your code with a small number of known users in production, and then release it to the world once you know its working. Here’s how to set it up in Split:

Upon logging in to Split or your feature flagging management system, you should create a targeting rule, with the default treatment off, meaning that unless you are specifically targeted (listed in the UI), then you will not be able to interact with the feature. You should add yourself and other team members inside of the feature flag, while keeping the default off for the rest of the world, and test your code in production. This testing period will allow you to resolve any bugs or defects with your team. Then, you can release your code to production gradually with a controlled rollout, and you ensure a great user experience for a small subset of users before releasing the feature to your entire user base. In practice, this means you and your team can roll out the barcode feature to 5% of your users to make sure it works. If there are any other bugs, they can roll the feature back.

Set Up a Controlled Rollout with Feature Flags

For today, you’ll want to confirm that you have the following set up:

First, Install node and watchman with brew:

brew install node
brew install watchman

Then, install XCode from the App Store.

Then, install Cocoapods:

sudo gem install cocoapods

Lastly, sign up for a free developer account with Split.

Once you have the above setup, you can go ahead and generate a new React Native project called Scan Barcode:

npx react-native init ScanBarcode

Then, in your root folder, run npx react-native start, which will return a single JavaScript file that includes all your code and its dependencies.

In the root folder of a new terminal, enter the following to open an iOS simulator:

npx react-native run-ios

Now that you have successfully run your app, open App.js to modify/add your feature.

To demonstrate a controlled rollout, let’s set up feature flags with Split. To set up a controlled rollout, navigate to the feature flag configuration page, and set your targeting rules. Targeting rules define who sees a feature and who does not. Here, you are saying they want 5% of their users to see this new barcode feature, and the remaining 95% will see the existing or default behavior. As your confidence increases in the barcode feature, you can slowly move this to have 100% allocation to your user base.

Feature Flags and React Native

To use feature flags in React Native, in your render component, add the SplitTreatments component that returns the proper treatments based on the names prop value passed to it. The name of the feature flag here is enable-barcode-shopping. Then wrap the feature with <SplitTreatments>, and the code inside of that will then know whether the feature, show bar code experience, is on or off for the current user. If the flag is on for the user, they can see the barcode, and if it’s off, they do not get the barcode experience:

<SplitTreatments names={["enable-barcode-shopping"]}>
  {({ treatments }) => {
    const showBarcodeExperience = treatments["enable-barcode-shopping"];
    if (showBarcodeExperience) return <BarcodeShopping />;
    else return null;
  }}
</SplitTreatments>;

App Store Limitations of Controlled Rollouts

Mobile app store regulations (both Mac and Google Play) state that you can not make changes to your app more frequently than once every two weeks. So how is it possible to continuously release new features? Many top tech companies, like Uber, Twilio, and Okta, use feature flags in their codebase. Uber has thousands of feature flags just in its iOS codebase and even wrote an academic paper on the topic.

Always Use Controlled Rollouts

If something does end up going wrong with your feature in production, would you want 100% of your users to encounter the issue or 1%? Controlled rollouts provide this layer of risk mitigation that allows software development teams to move fast without worry. The benefits of Android and iOS caching enable users to receive the latest user experience, regardless of their connection speed. This means that you, as a developer, can release new features through your flags, and those will be automatically released to your mobile users — regardless of whether or not they have connectivity. So if you had to rollback or just kill a feature, the SDK will pick that up too, so next time the user opens the app, they won’t get access to the problematic feature.

Learn More About Controlled Rollout and Feature Flags

Controlled rollout with feature flags is the tool that gives software developers the ability to move quickly and efficiently throughout the software development lifecycle.

• Learn more about The Benefits of Feature Flags in Software Development
• Read about how to Cache Your Feature Flags for Offline Functionality on Android
• Learn about the Pros and Cons of Canary Release and Feature Flags in Continuous Delivery

To stay up to date on all things testing in production and feature flagging, follow us on Twitter @splitsoftware, and subscribe to our YouTube channel!

Get Split Certified

Split Arcade includes product explainer videos, clickable product tutorials, manipulatable code examples, and interactive challenges.

Switch It On With Split

The Split Feature Data Platform™ gives you the confidence to move fast without breaking things. Set up feature flags and safely deploy to production, controlling who sees which features and when. Connect every flag to contextual data, so you can know if your features are making things better or worse and act without hesitation. Effortlessly conduct feature experiments like A/B tests without slowing down. Whether you’re looking to increase your releases, to decrease your MTTR, or to ignite your dev team without burning them out–Split is both a feature management platform and partnership to revolutionize the way the work gets done. Switch on a free account today, schedule a demo, or contact us for further questions.