React Native SDK reference
Read time: 6 minutes
Last edited: Mar 04, 2024
Version 10 of the React Native SDK has been rewritten in pure TypeScript and is compatible with Expo. Version 10 is a complete rewrite of the React Native SDK and replaces launchdarkly-react-native-client-sdk. Version 10 APIs are based on the JavaScript SDK rather than the iOS and Android SDKs. It is not a wrapper of the iOS and Android SDKs. To learn more about upgrading, read React Native SDK 9.x to 10.0 migration guide.
Version 9 of the React Native SDK includes updated dependencies. If you are upgrading from version 8 or below, we recommend upgrading directly to version 10. To learn more about version 9 specifically, read React Native SDK 8.x to 9.0 migration guide.
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.
Code samples on this page are from the currently supported 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.
LaunchDarkly's SDKs are open source. In addition to this reference guide, we provide source, API reference documentation, and sample applications:
Resource | Location |
---|---|
SDK API documentation | SDK API docs |
GitHub repository | react-native |
Sample Expo application | React Native |
Published module | npm |
The following table describes the LaunchDarkly React Native SDK version compatibility:
LaunchDarkly React Native SDK version | Compatible with |
---|---|
10.x | React Native 0.72 and 0.73, Expo 49 and 50 |
9.x | React Native 0.73 |
8.x | React Native 0.69 through 0.72 |
7.x | React Native 0.69 |
6.x | Xcode 12.2 or higher and React Native 0.64 |
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
The LaunchDarkly React Native client-side SDK version 10.x is compatible with Expo.
Earlier versions of the LaunchDarkly React Native SDK are not compatible with the Expo managed workflow because they use native modules. Consider upgrading to the 10.x version of the LaunchDarkly SDK, or 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:
- Install the LaunchDarkly SDK as a dependency.
yarn add @launchdarkly/react-native-client-sdk
- The LaunchDarkly React Native SDK version 10 uses
@react-native-async-storage/async-storage
for bootstrapping:
-
If you are using Expo, skip this step and continue to step 3.
-
If you are not using Expo, you must explicitly add
@react-native-async-storage/async-storage
as a dependency to your project.yarn add @react-native-async-storage/async-storage
-
Run
npx pod-install
. -
Next, import the SDK into your project:
import { LDProvider, ReactNativeLDClient } from '@launchdarkly/react-native-client-sdk';
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.
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.
We recommend making ReactNativeLDClient
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.
-
After the SDK is imported, create a single, shared instance of
ReactNativeLDClient
. To create this, you need your environment's mobile key. This authorizes your application to connect to a particular environment within LaunchDarkly. -
After you instantiate
ReactNativeLDClient
, pass it toLDProvider
.LDProvider
uses the React context API to store and pass data to child components through hooks. It requires the client.
In version 10 of the SDK, you do not specify a context when you initialize the client. Instead, you must provide the context in an identify()
call, for example on application mount. End users will receive fallback values until you specify a context by calling identify()
.
The following example shows the simplest way to create a shared instance of ReactNativeLDClient
, and identify a context:
const client = new ReactNativeLDClient('mobile-key-123abc', AutoEnvAttributes.Enabled, options);const context = { kind: 'user', key: 'user-key-123abc' }const App = () => {// call identify on App mount or later in some other componentuseEffect(() => {client.identify(context).catch((e: any) => console.log(e));}, []);return (<LDProvider client={client}>/* your application code here */<YourComponent /></LDProvider>);};export default App;
To learn more about the specific configuration options available in this SDK, read LDOptions
.
Expand Example for v9 and earlier
In versions 9 and earlier, you must explicitly await
the client.configure()
call. Additionally, 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)
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.
Background fetch
In version 10, the React Native SDK defaults to a streaming
connection mode. In this mode, your application receives updates when it is in the foreground and does not when it is in the background. To learn more, read Offline mode.
In previous versions, the SDK defaulted to the background fetch behavior for the platform it was 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:
- Anonymous contexts and users
- Automatic environment attributes
- Configuration, including
- Evaluating flags
- Flag evaluation reasons
- Flushing events
- Getting all flags
- Identifying and changing contexts
- Logging
- Monitoring SDK status
- Multiple environments
- Offline mode
- Private attributes
- Relay Proxy configuration, using proxy mode
- Sending custom events
- Shutting down
- Subscribing to flag changes
- User and context configuration