React Native SDK Reference

Updated 1 month ago by Archana Singh

This topic explains how to use the Harness Feature Flags (FF) SDK in your React Native application. To learn more about using Feature Flags SDK with React Native application, clone and run a sample application from the React Native SDK GitHub repository.

In this topic:

Before You Begin

Prerequisites

  1. Create a feature flag in Harness Feature Flags. Feature flags wrap your code and allow you to manage the feature release in a controlled way. See Create a Feature Flag.
  2. Ensure that you have created your SDK Key. See Create an SDK Key.
  3. Download the Harness Feature Flag React Native client SDK.
  4. A React Native application to test your feature flag. If you do not have your React Native Application, you can download a sample application from the React Native SDK GitHub repository.

Use Harness Feature Flags SDKs with React Native Applications

Perform the following steps to get started with using the Feature Flags SDK in your React Native application:

Step 1: Add the FF Dependency to Your React Native Application

To install SDK, declare a dependency in the package.json file:

"ff-react-native-client-sdk": "1.0.1",

You can also use npm install:

$ npm install --save ff-react-native-client-sdk

For iOS, run the following commands from the project root folder:

$ cd ios
$ pod install

Step 2: Import the Feature Flag Client SDK

Import the client using the following command:

import cfClientInstance from 'ff-react-native-client-sdk';

Step 3: Initialize the SDK

Now that the SDK is imported, you can configure and initialize it. You should enter your SDK keys when configuring the SDK so that your application is authorized to connect to Harness Feature Flags and retrieve flags for your environment.

cfClientInstance is a base instance that provides all the features of SDK. It is initialized with instances of CfConfiguration and CfTarget. All configuration fields are optional and if omitted they will be populated with default values by SDK.

import cfClientInstance, {CfConfiguration, CfTarget} from 'ff-react-native-client-sdk';

const client = cfClientInstance;

const cfConfiguration = new CfConfiguration();
cfConfiguration.streamEnabled = true;

const cfTarget = new CfTarget();
cfTarget.identifier = 'Harness'

const apiKey = "YOUR_API_KEY";

const result = await cfClientInstance.initialize(apiKey, cfConfiguration, cfTarget);

cfTarget represents the desired target for which you want the features to be evaluated. identifier is a mandatory field.

Step 4: Evaluate Target for Your Feature Flag

Once you have initialized the Feature Flag client for a target, evaluate it for your feature flag. A feature flag is evaluated for a particular target.

Evaluation is performed based on the variation types. In case there is no evaluation with the provided ID, the default value is returned.

Boolean Variation

//get boolean evaluation
let evaluation = await client.boolVariation("demo_bool_evaluation", false)
Number Variation

//get number evaluation
let numberEvaluation = await client.numberVariation("demo_number_evaluation", 0)
String Variation

//get string evaluaation
let stringEvaluation = await client.stringVariation("demo_string_evaluation", "default");
JSON Variation

//get json evaluation
let jsonEvaluation = await client.jsonVariation("demo_json_evaluation", {});

Step 6: Add Method to Register the Events

This method provides a way to register a listener for different events that might be triggered by SDK, indicating a specific change in the SDK.

    client.registerEventsListener((type, flags) => {

    });

Each type returns a corresponding value as shown in the following table:

Event Type

Return Value

"start"

null

"end"

null

"evaluation_polling"

List

"evaluation_change"

EvaluationResponse

When the listener is not needed, you can remove the desired listener from the internal list to avoid unexpected behavior.

client.unregisterListener(eventsListener)

When SDK is not needed, for example, when the app is not running, you can shut down the SDK. This can avoid potential memory leaks.

client.destroy()

Step 7: Verify Your Feature Flag

Run the application from your IDE and verify whether the flag variation value displayed on your application page is consistent with the feature flag you created.

Toggle the flag on and off to verify if your application is getting updated.

Public API Methods

You can also use the public API methods to initialize and implement the Feature Flag React Native SDKs. The Public API exposes the following methods that you can utilize:

async initialize(apiKey: string, config: CfConfiguration, target:CfTarget)

boolVariation(evalutionId: string, defaultValue?: boolean)

stringVariation(evalutionId: string, defaultValue?:string)

numberVariation(evalutionId: string, defaultValue?:number)

jsonVariation(evalutionId: string, defaultValue: any)

registerEventsListener(listener: (type: string, flags: any) => void)

unregisterListener(listener: (type: string, flags: any) => void)

destroy()

Sample Code for React Application

Here is a sample code for using Harness Feature Flag SDKs with a React application. To learn more about using the sample React application, see the React Native SDK GitHub repository.

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
import { initialize, Event } from '@harnessio/ff-javascript-client-sdk'

const App = () => {
  const [featureFlags, setFeatureFlags] = useState({})

  useEffect(() => {
    const cf = initialize(
      '00000000-1111-2222-3333-444444444444',
      {
        identifier: 'Harness',
        attributes: {
          lastUpdated: Date(),
          host: window.location.href
        }
      },
      {
        debug: true,
        baseUrl: 'http://1.1.1.1/api/1.0', // QA
        eventUrl: 'http://2.2.2.2/api/1.0'
      }
    )

    cf.on(Event.READY, flags => {
      setFeatureFlags(flags)
    })

    cf.on(Event.CHANGED, flagInfo => {
      if (flagInfo.deleted) {
        setFeatureFlags(currentFeatureFlags => {
          delete currentFeatureFlags[flagInfo.flag]
          return { ...currentFeatureFlags }
        })
      } else {
        setFeatureFlags(currentFeatureFlags => ({ ...currentFeatureFlags, [flagInfo.flag]: flagInfo.value }))
      }
    })

    return () => {
      cf.close()
    }
  }, [])

  return <pre>{JSON.stringify(featureFlags, null, 2)}</pre>
}

ReactDOM.render(<App />, document.getElementById('root'))

Please Provide Feedback