CloudBees Feature Management Tutorial: Feature Flagging in your React Native App in 5 minutes

The following is a guest blog post from Evan Glazer .

CloudBees Feature Management is an advanced feature flagging solution that lets your development teams quickly build and deploy applications without compromising on safety. By providing a gradual release mechanism and a simple way to define target audiences, CloudBees Feature Management allows developers and product managers to optimize features releases and customize the user experience. CloudBees Feature Management gives teams control over features that are in staging, production or any environment you have in your deployment pipeline.

Have you ever added a new feature to your mobile application and only wanted to distribute and test it with a percentage or designated segment of users? Or have you ever had the issue where a feature you just released has a defect and you need to hide it immediately from your user base? These are common development considerations that can boost end user satisfaction and drastically speed up release cycle time if managed correctly.

This blog will show you how to create Feature Flags in the React Native app. We will go through the setup, installation and implementation processes in a detailed format to demonstrate how to set up a basic boolean flag on our component using CloudBees Feature Management in React Native. While these are a few feature flag cases that can help avoid potential conflicts, the approach is used in many large applications including Reddit, Gmail, Netflix, Google Chrome Canary, etc.

Here is an overview of what we'll cover in this post:

• Pre-Development Setup

• Installation

• Build a CloudBees Feature Management Service

• Feature Flagging Example

Let's get started.

Let's go to the CloudBees Feature Management website and sign up here . After logging in, click on All Apps and then on Create App.

Set our application name used on CloudBees Feature Management:

Then, click on Go to installation instructions. Choose Production as the environment, then pick JavaScript as the platform, making sure also to select React Native:

Time to cd into our project.

Now we can install the CloudBees Feature Management SDK to our React Native application using npm :

npm install rox-react-native --save 

In our project, first, let's create a folder called services by running mkdir services in our console. Let's navigate into the services directory by running cd services and create our rollout service by running touch flagService.js.

Now let's write some code for our service:

import Rox from 'rox-react-native';
import AsyncStorage from '@react-native-community/async-storage';

class FlagService {
  constructor() {
    Rox.setup('XXXXXXXXX', this._options());
    this.isBooted = false
  }

  register() {
    if (!this.isBooted) {
      Rox.register('', this._flags());
      this.isBooted = true
    } else {
      // sync with saved feature flags?
    }
  }

  endSession() {
    if (this.isBooted) {
      this.isBooted = false
    }
  }

  enableHiddenFeature() {
    this._ensureBooted()
    return this._flags.showHiddenFeatures.isEnabled()
  }

  _flags() {
    return {
      showHiddenFeatures: new Rox.Flag(),
      titleColors: new Rox.Variant('White', ['White', 'Blue', 'Green', 'Yellow']),
    }
  }

  _options() {
    return {
      version: '1.0.0',
      AsyncStorage: AsyncStorage,
      debugLevel: 'verbose',
      freeze: Rox.FreezeOptions.freezeOptionNone
    }
  }

  _boot() {
    if (this._isProperlyImplemented() && !this.isBooted) {
      this.setup()
      this.register()
    }
  }

  _isProperlyImplemented() {
    return typeof (Rox) === 'object'
  }

  _ensureBooted() {
    if (!this.isBooted) { return }
    this._boot()
  }
}

export default FlagService 

The FlagService will have rollouts module imported so we can begin to create a wrapper around it. The service begins by registering the CloudBees Feature Management application Rox.setup('XXXXXXXXX', this._options()); (make sure to change XXXXXX to your API Key specified).

We've created a boot method that will ensure for every flag check we validate, everything is properly implemented and booted before running the flag check.

This service only contains one flag for the meantime -showHiddenFeatures - which we will use in the feature flagging example section to toggle a hidden component. Per CloudBees Feature Management options, we'll set up the registration using the asyncstorage implementation for storing/getting keys on/from as a caching mechanism, alongside including the version of our application and setting the freeze options to none.

You can view further API documentation here .

Now that we created the service, it is time to register the service on application launch. Then in our application render method, we added a condition statement to test the flag by toggling two different views. Finally, make sure you import the FlagService into the Launch Container; then register it to ensure the correct targeted values are displayed on the application.

....
import FlagService from './services/flagService'
const RolloutFlagService = new FlagService()

export default class LaunchContainer extends Component {
	componentDidMount() {
   	 RolloutFlagService.register()
 	}
 	
	render() {    
	    if (RolloutFlagService.enableHiddenFeature()) {
		    return (
		      <Container style={styles.container}>
			<Header />
			<NewFeature />
		      </Container>
		    )
	     } else {
		    return (
		      <Container style={styles.container}>
			<Header />
		      </Container>
		    )
	    }
	}
 }
 
 export default LaunchContainer; 

You did it!

Once you load up the application with this implementation, CloudBees Feature Management will automatically detect the registration of the application and you should see the message below! Now you're ready to start adding more flags to your application. Please be on the look out for the next article where we will go through gaining insights on the application with CloudBees Feature Managements Launch, Experiment and Insight features.