React Native SDK Reference
- Before You Begin
- Prerequisites
- Use Harness Feature Flags SDKs with React Native Applications
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
- Use Harness Feature Flags SDKs with React Native Applications
- Public API Methods
Before You Begin
- Feature Flags Overview
- Getting Started with Feature Flags
- Client-Side and Server-Side SDKs
- Communication Strategy Between SDKs and Harness Feature Flags
Prerequisites
- 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.
- Ensure that you have created your SDK Key. See Create an SDK Key.
- Download the Harness Feature Flag React Native client SDK.
- 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'))