8 minute read
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
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.
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
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.
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.
Deliver Features That Matter, Faster. And Exhale.
Split is a feature management platform that attributes insightful data to everything you release. Whether your team is looking to test in production, perform gradual rollouts, or experiment with new features–Split ensures your efforts are safe, visible, and highly impactful. What a Release. Get going with a free account, schedule a demo to learn more, or contact us for further questions and support.