• Home
  • Integrations
  • SDKs
  • Guides
  • API docs
No results for ""
EXPAND ALL

EDIT ON GITHUB

React Native SDK reference

Read time: 6 minutes
Last edited: Oct 10, 2023
Recent major versions

Version 8 of the React Native SDK introduces optional automatic collection of environment attributes. To learn more about upgrading, read React Native SDK 7.x to 8.0 migration guide.


Version 7 of the React Native SDK replaces users with contexts. A context is a generalized way of referring to the people, services, machines, or other resources that encounter feature flags in your product. Contexts replace another data object in LaunchDarkly: "users." To learn more about upgrading, read React Native SDK 6.x to 7.0 migration guide and Best practices for upgrading users to contexts.


Code samples on this page are from the three most recent SDK versions where they differ.

Overview

This topic documents how to get started with the React Native SDK, and links to reference information on all of the supported features.

SDK quick links

LaunchDarkly's SDKs are open source. In addition to this reference guide, we provide source, API reference documentation, and sample applications:

ResourceLocation
SDK API documentationSDK API docs
GitHub repositoryreact-native-client-sdk
Sample applicationReact Native
React Native, TypeScript
Published modulenpm

The sample code snippets for this SDK are available in both JavaScript and TypeScript, where the sample code differs. To learn more, read Using LaunchDarkly with TypeScript.

SDK version compatibility

The LaunchDarkly React Native SDK versions 8 and higher are compatible with React Native 0.72 and higher.

The LaunchDarkly React Native SDK versions 7 and higher are compatible with React Native 0.69 or higher.

The LaunchDarkly React Native SDK versions 6.x are compatible with Xcode 12.2 or higher and React Native 0.64 or higher.

If you need support for earlier versions of React Native, use older versions of the LaunchDarkly React Native SDK. To learn more, read Releases.

Getting started

Expo usage

The LaunchDarkly React Native client-side SDK is not compatible with the Expo managed workflow because the SDK uses native modules. Consider using the bare workflow instead.

After you complete the Getting Started process, follow these instructions to start using the LaunchDarkly SDK in your React Native code.

First, install the LaunchDarkly SDK as a dependency. Add the LaunchDarkly npm dependency to your project and link it to your React Native project.

To add the LaunchDarkly npm dependency:

npm install --save launchdarkly-react-native-client-sdk
npx pod-install

You must have a Podfile in your ios/ directory. After you write the Podfile, run pod install in the ios/ directory. This SDK requires Xcode 12.2 or higher and compiles against Swift 5.

After setting up the SDK, import the SDK into your project:

import LDClient from 'launchdarkly-react-native-client-sdk';
The React Native SDK uses a mobile key

The React Native SDK uses a mobile key. Your environment's mobile key is available in the Projects tab of your Account settings page. To learn more about key types, read Keys.

After the SDK is imported, create a single, shared instance of LDClient, passing in the client and context configuration objects. To create a client instance, you need your environment's mobile key. This authorizes your application to connect to a particular environment within LaunchDarkly.

Never embed a server-side SDK key into a client-side application

Mobile keys are not secret and you can expose them in your client-side code without risk. However, never embed a server-side SDK key into a client-side application.

LDClient must be a singleton

It's important to make LDClient a singleton for each LaunchDarkly project. The client instance maintains internal state that allows LaunchDarkly to serve feature flags without making any remote requests. Do not instantiate a new client with every request.

If you have multiple LaunchDarkly projects, you should use the multiple environments feature. To learn more, read Multiple environments.

The following example shows the simplest way to create a shared instance of LDClient, in TypeScript:

let client = new LDClient();
let config: ld.LDConfig = {
mobileKey: 'mobile-key-123abc',
enableAutoEnvAttributes: true
};
let context: ld.LDContext = { key: 'user-key-123abc', kind: 'user' };
await client.configure(config, context);

The following example shows the simplest way to create a shared instance of LDClient, in JavaScript:

let client = new LDClient();
let config = {
mobileKey: 'mobile-key-123abc',
enableAutoEnvAttributes: true
};
let context = { key: 'user-key-123abc', kind: 'user' };
await client.configure(config, context);

You can give .configure a timeout parameter. If it receives flag values before the timeout, the returned promise will resolve. Otherwise, it will be rejected.

Here is an example with a timeout of five seconds:

client.configure(config, context, 5)
Making feature flags available to this SDK

You must make feature flags available to mobile SDKs before the SDK can evaluate those flags. If an SDK tries to evaluate a feature flag that is not available, LaunchDarkly serves the fallback value for that flag.

To make a flag available to this SDK, check the SDKs using Mobile key checkbox during flag creation, or on the flag's Settings tab. To make all of a project's flags available to this SDK by default, check the SDKs using Mobile key checkbox in your project Settings.

Limitations on reloading native modules

The hot reloading behavior of the React Native SDK does not automatically reload React's native modules. Because hot reloading is not fully supported by the React Native SDK, in some cases performing a hot reload throws an error indicating that the LaunchDarkly SDK is already initialized. It is safe to catch this error and proceed, however, you must decide whether that is an appropriate behavior in your application.

Here's how:

let ldClient = new LDClient();
try {
await ldClient.configure(config, context);
} catch (err) {
console.log(err);
}

Background fetch

The React Native SDK defaults to the background fetch behavior for the platform it's running on.

Shut down the client

Shut down the client when your application terminates. To learn more, read Shutting down.

Data collection

To learn more about data collection within this SDK and implications on submissions to the Apple App Store, read Apple App Store data collection policy.

Supported features

This SDK supports the following features: