Getting started with React Native SDK

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

Step 1 - Setting up

To setup React Native SDK, follow these steps:

Create a CloudBees Feature Management account. See Signup Page to create an account.
Get your environment key. Copy your environment key from App settings > Environments > Key.

Step 2 - Installing the React Native SDK

Add the CloudBees Feature Management React Native library to your application by running the following npm commands:

# Add the 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 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.RoxString('White', ['White', 'Blue', 'Green', 'Yellow']),
  titleSize: new Rox.RoxNumber(12, [14, 18, 24])
};

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

// Setup the 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
}

// RoxString flag example
console.log('Title color is ' + flags.titleColors.getValue());

// RoxNumber flag example
console.log('Title size is ' + flags.titleSize.getValue());▼

Container class registration and environment key setup

You cannot call Rox.setup() twice in the same runtime.

Run your application

Running the application

The flag name is automatically added to the CloudBees Feature Management dashboard after running the application.