Rollout.io - Documentation

React Native SDK

This section describes how to set up and install the React Native SDK and how to deploy a feature flag.

Getting started with React Native SDK

Step 1 - Setting up

To setup React Native SDK, follow these steps:

  1. A Rollout account. See Signup Page to create an account.

  2. An Application created in the Rollout dashboard.

    • The first time you log into your account, click the Create New App button to create a new app.
  1. An environment key.
    • Get the key from App Settings > Environment > Key

Step 2 - Installing the React Native SDK

Add the CloudBees Rollout React Native package to your application

To add the Rollout React Native library to your application, run the following npm commands:

# Add the Rollout SDK to your application
$ npm i rox-react-native --save

// For TypeScript application, also add the corresponding types:
npm i @types/rox-react-native --save




Add the following lines of code to your application

// Import Rollout SDK
import Rox from 'rox-react-native';

// Create a Roxflag in the flags container class
const flags = {
  // Define the feature flags
  enableTutorial: new Rox.Flag(false),
  titleColors: new Rox.Variant('White', ['White', 'Blue', 'Green', 'Yellow'])
};

// Register the flags container with Rollout
Rox.register('', flags);

// Setup the Rollout environment key
await Rox.setup("<ROLLOUT_ENV_KEY>");

// Boolean flag example
if (flags.enableTutorial.isEnabled()) {
   // TODO:  Put your code here that needs to be gated
}

// Multivariant flag example
if (flags.titleColors.getValue() === 'Blue') {
  console.log('Title color is blue');
} else if (flags.titleColors.getValue() === 'Green') {
  console.log('Title color is green');
} else if (flags.titleColors.getValue() === 'Yellow') {
  console.log('Title color is yellow');
} else if (flags.titleColors.getValue() === 'White') {
  console.log('Title color is white');
}

Container class registration and environment key setup

  • The Rox.register() function must be called before the Rox.setup() function.

  • You can not call Rox.setup() twice in the same runtime.

Run your application

The Flag name is automatically added to the Rollout dashboard. You can see the flags by clicking Flags on the left side of the navigation panel.

Running the project

Once you run the application, the SDK would report the flags to the dashboard.

Step 3 - Deploying a feature flag

Finding your flags in the Rollout dashboard

After creating feature flags and running your feature code, you can find your flags in the Rollout dashboard.

To find your flags in the Rollout dashboard:

  1. Find your app in the Rollout dashboard
    To switch between apps, click on the app name in the top-left corner of the screen and select the app you want from the pulldown.

  2. Click on Flags on the left side of the navigation panel.

  3. Confirm that your flag is listed in the flag view.

Configuring deployment rules

  1. Go to Rollout's dashboard.
  2. Click on Experiments on the left panel.
  3. Click the Create Experiment button to create a new experiment.
  4. In the New Experiment window:
    • Find the Flag name from the menu, choose it.
    • Click the Set Audience button to continue. The Experiment Details view appears.
  5. Select either True, False, Split or Scheduled. Split allows you to select the percentage of the target group that you want to deploy. Scheduled allows you to schedule a deployment date.
  1. Click Update Audience.

Note:

  • You can not delete the default condition.
  • You can click the Reset link to go back to the state from before you started making changes. Reset only appears when you've made saved modifications.

See Audience for more detailed information.

Updated 2 months ago

React Native SDK


This section describes how to set up and install the React Native SDK and how to deploy a feature flag.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.