> ## Documentation Index
> Fetch the complete documentation index at: https://launchdarkly-preview.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native SDK reference

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

> For the complete documentation index, see [llms.txt](/llms.txt). For the full documentation snapshot, see [llms-full.txt](/llms-full.txt).

<Note title="Recent major versions">
  **Version 10 of the React Native SDK has been rewritten in pure TypeScript and is compatible with Expo**. Only iOS and Android platforms are supported. Web is not supported. Version 10 is a rewrite of the React Native SDK. It is based on the JavaScript SDK, and it replaces [launchdarkly-react-native-client-sdk](https://github.com/launchdarkly/react-native-client-sdk). To learn more about upgrading, read [React Native SDK 9.x to 10.0 migration guide](/sdk/client-side/react/migration-9-to-10-react-native).
</Note>

## Overview

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

<Note title="SDK quick links">
  LaunchDarkly's SDKs are open source. In addition to this reference guide, we provide source, API reference documentation, and sample applications:
</Note>

| Resource | Location |
| - | - |
| SDK API documentation | [SDK API docs](https://launchdarkly.github.io/js-core/packages/sdk/react-native/docs/) |
| Supported SDK Versions | [React Native SDK](../../concepts/supported-versions#react-native-sdk) |
| GitHub repository | [react-native](https://github.com/launchdarkly/js-core/tree/main/packages/sdk/react-native) |
| Sample Expo application | [React Native](https://github.com/launchdarkly/js-core/tree/main/packages/sdk/react-native/example) |
| Published module | [npm](https://www.npmjs.com/package/@launchdarkly/react-native-client-sdk) |

## Get started

After you complete the [Get started](/home/getting-started) process, follow these instructions to start using the LaunchDarkly SDK in your React Native code:

* [Understand version compatibility](#understand-version-compatibility)
* [Install the SDK](#install-the-sdk)
* [Initialize the client and identify a context](#initialize-the-client-and-identify-a-context)

### Understand version compatibility

<Warning title="Expo usage">
  The LaunchDarkly React Native client-side SDK version 10.x is compatible with Expo. Only iOS and Android platforms are supported. Web is not supported.

  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](https://docs.expo.dev/bare/overview/) instead.
</Warning>

The following table describes the LaunchDarkly React Native SDK version compatibility:

\| LaunchDarkly React Native SDK version

| Compatible with |
| - |

\| --- |
\| 10.x

\| React Native 0.72, 0.73, 0.74, 0.76; Expo 51, Expo 52 |
\| 9.x (EOL)

\| React Native 0.73 |
\| 8.x (EOL)

\| React Native 0.69 through 0.72 |
\| 7.x (EOL)

\| React Native 0.69 |
\| 6.x (EOL)

\| Xcode 12.2 or higher and React Native 0.64 |

To learn more, read [Releases](https://github.com/launchdarkly/react-native-client-sdk/releases).

### Install the SDK

To install the SDK:

1. Install the LaunchDarkly SDK as a dependency.

We recommend making the LaunchDarkly [observability plugin](/sdk/observability) available as well. This plugin collects and sends observability data to LaunchDarkly. This means you can review error monitoring and logs from within the LaunchDarkly UI. It requires the React Native SDK version 10.10 or later.

Here's how:

<CodeGroup>
  ```bash title="Installing, React Native SDK v10" theme={null}
      yarn add @launchdarkly/react-native-client-sdk

      # optional observability plugin, requires React Native SDK v10.10+
      yarn add @launchdarkly/observability-react-native
  ```
</CodeGroup>

2. The LaunchDarkly React Native SDK version 10 uses [`@react-native-async-storage/async-storage`](https://github.com/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.

<CodeGroup>
  ```bash title="Adding the async storage dependency" theme={null}
        yarn add @react-native-async-storage/async-storage
  ```
</CodeGroup>

3. Run `npx pod-install`.

4. Next, import the SDK into your project:

<CodeGroup>
  ```ts title="React Native SDK v10" theme={null}
      import { LDProvider, ReactNativeLDClient } from '@launchdarkly/react-native-client-sdk';

      // optional observability plugin, requires React Native SDK v10.10+
      import { Observability, LDObserve } from '@launchdarkly/observability-react-native';
  ```
</CodeGroup>

<Warning title="React Native SDK credentials">
  The React Native SDK uses a mobile key. Keys are specific to each project and environment. They are available from **Project settings**, on the **Environments** list. To learn more about key types, read [Keys](/sdk/concepts/client-side-server-side#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.
</Warning>

5. 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.

6. After you instantiate `ReactNativeLDClient`, pass it to `LDProvider`. `LDProvider` uses the React context API to store and pass data to child components through hooks. It requires the client.

### Initialize the client and identify a context

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. The `identify()` method returns a promise that can be awaited. End users will receive fallback values until you specify a context by calling `identify()`.

<Warning title="Always include a timeout parameter">
  Do not configure your SDK to initialize without a timeout parameter. Doing so will cause your app never to load if there is a connectivity problem. We recommend setting a timeout for no more than 1-5 seconds.

  In v10, the `identify` timeout defaults to 5 seconds. In older versions, the `client.configure` takes a timeout parameter.
</Warning>

The following example shows the simplest way to create a shared instance of `ReactNativeLDClient`, and identify a context:

<CodeGroup>
  ```ts title="React Native SDK v10.x" theme={null}
      const options = {
        // optional observability plugin, requires React Native SDK v10.10+
        plugins: [ new Observability() ],
        // other options
      }

      const client = new ReactNativeLDClient('example-mobile-key', AutoEnvAttributes.Enabled, options);

      const context = { kind: 'user', key: 'example-user-key' }

      const App = () => {
        // call identify on App mount or later in some other component
        useEffect(() => {
          client.identify(context).catch((e: any) => console.log(e));
        }, []);

        return (
          <LDProvider client={client}>
            {/* your application code here */}
            <YourComponent />
          </LDProvider>
        );
      };

      export default App;
  ```
</CodeGroup>

To learn more about the specific configuration options available in this SDK, read [`LDOptions`](https://launchdarkly.github.io/js-core/packages/sdk/react-native/docs/interfaces/LDOptions.html).

<Warning title="ReactNativeLDClient should be a singleton">
  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.
</Warning>

<Warning title="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 toggle on the option in the flag's right sidebar. To make all of a project's flags available to this SDK by default, check the **SDKs using Mobile key** checkbox on your project's [Flag settings page](/home/account/edit-project).
</Warning>

## 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](/sdk/features/offline-mode#react-native).

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](/sdk/features/shutdown#react-native).

## 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](/sdk/concepts/apple-app-store).

## Troubleshooting

If your application logs show the error `LaunchDarklyFlagFetchError: network error`, it may indicate a problem with network connectivity between your SDK and LaunchDarkly.

For steps to resolve this issue, read the LaunchDarkly Knowledge Base article [Error "LaunchDarklyFlagFetchError: network error"](https://support.launchdarkly.com/hc/en-us/articles/12998125691419-Error-LaunchDarklyFlagFetchError-network-error).

## Supported features

This SDK supports the following features:

* [Anonymous contexts and users](/sdk/features/anonymous#react-native)
* [Automatic environment attributes](/sdk/features/environment-attributes#react-native)
* [Configuration](/sdk/features/config#react-native), including
  * [Application metadata configuration](/sdk/features/app-config#react-native)
  * [Service endpoint configuration](/sdk/features/service-endpoint-configuration/client-side#react-native)
* [Context configuration](/sdk/features/context-config/client-side#react-native)
* [Evaluating flags](/sdk/features/evaluating#react-native)
* [Flag evaluation reasons](/sdk/features/evaluation-reasons/client-side#react-native)
* [Flushing events](/sdk/features/flush#react-native)
* [Getting all flags](/sdk/features/all-flags#react-native)
* [Hooks](/sdk/features/hooks#react-native)
* [Identifying and changing contexts](/sdk/features/identify#react-native)
* [Logging](/sdk/features/logging#react-native)
* [Monitoring SDK status](/sdk/features/monitoring#react-native)
* [Multiple environments](/sdk/features/multiple-environments#react-native)
* [Observability](/sdk/observability/react-native)
* [Offline mode](/sdk/features/offline-mode#react-native)
* [OpenTelemetry in client-side SDKs](/sdk/features/opentelemetry-client-side)
* [Private attributes](/sdk/features/private-attributes/client-side#react-native)
* [Relay Proxy configuration, using proxy mode](/sdk/features/relay-proxy-configuration/proxy-mode#react-native)
* [Sending custom events](/sdk/features/events#react-native)
* [Shutting down](/sdk/features/shutdown#react-native)
* [Subscribing to flag changes](/sdk/features/flag-changes#react-native)