> ## 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.
# Add observability to your React Native application in 5 minutes
> See how your React Native iOS app is performing. Integrate LaunchDarkly’s new Observability SDK.
> For the complete documentation index, see [llms.txt](/llms.txt). For the full documentation snapshot, see [llms-full.txt](/llms-full.txt).
Published September 25, 2025
by Alexis Roberson
## Overview
In modern application development, feature flags are the guardrails that keep experiments controlled and rollbacks safe when conditions shift. If feature flags act as the guardrails, observability provides the visibility: the headlights (traces), mirrors (logs), and dashboard instruments (metrics) that reveal what’s happening in the environment and how well a feature is performing. Together, feature flags and observability unlock powerful insights by correlating code changes with real-time system behavior. This combination reduces time-to-diagnosis and builds greater confidence when rolling out new features.
In this post, we’ll walk through just how to add observability to a React Native application using LaunchDarkly’s observability SDK. To demonstrate the process, we’ll build on the PlusOne app, a simple counter app that includes increment (+1), reset, and error-triggering buttons. This lightweight demo provides a clean foundation to showcase how logs, traces, and errors can seamlessly flow into LaunchDarkly for monitoring and debugging.
## Prerequisites
* LaunchDarkly account. [Sign up for a free one here](https://app.launchdarkly.com/signup).
* Visual Studio or another code editor of choice.
All code from this tutorial can be found [on GitHub](https://github.com/arober39/PlusOne).
## Setting up your environment
Before running a React Native app, make sure your development environment is set up correctly. [You can find the full setup instructions for both Android and iOS here](https://reactnative.dev/docs/set-up-your-environment?platform=android#cocoapods).
In this tutorial, we'll be running iOS, but keep in mind Expo Orbit, the platform we'll be using to run our iOS simulator, requires both Xcode and Android Studio to be installed.
After going through the instructions you should have the following installed:
* Node JS (preferably via [nvm](https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/))
* Watchman for file monitoring
* JDK via zulu package manager.
* [Android Studio](https://developer.android.com/studio/index.html). Don’t forget to set your Android\_Home environment variables.
* \[Xcode]\([https://apps.apple.com/us/app/xcode/id497799835?mt=](https://apps.apple.com/us/app/xcode/id497799835?mt=)
12. for the iOS simulator.
* [Cocoapods](https://cocoapods.org/) for iOS dependency management.
* [Expo orbit](https://expo.dev/orbit) for running expo apps Android or iOS.
If you're using Android, don't forget to add your environment variables to bash or zsh profile.
```bash title="Android vars" for="android" theme={null}
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
```
## Starting up the Plus
One app
To get started, let’s clone the [repo](https://github.com/arober39/PlusOne#) for the PlusOne app and run `npm install` to ensure the proper dependencies are present in our node\_modules file.
```bash title="Cloning repo" for="git" theme={null}
git clone https://github.com/arober39/PlusOne
```
```bash title="Install using npm" for="npm" theme={null}
cd PlusOne
npm install
```
We’ll also need to run both the prebuild command to generate the ios file and the expo run command to run the iOS simulator.
```bash title="Prebuild for iOS" for="npx" theme={null}
npx expo prebuild
```
```bash title="Run expo app" for="npm" theme={null}
npm expo run:ios
```
Now we can view the iOS app in the iPhone simulator using npm.
```bash title="Install using npm" for="npm" theme={null}
# iOS
npm run ios
# Android
npm run android
```
The app should look something like this:
Feel free to interact with the app to ensure all is working as expected.
As you can see in the code, we have three buttons: one that adds one to the displayed number, one to bring the count back to zero and an intentional Error button to test error monitoring within the LaunchDarkly UI.
```javascript theme={null}
// app/index.tsx
import { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
export default function Index() {
const [count, setCount] = useState(0);
const handleReset = () => setCount(0);
const handleIncrement = () => setCount((prev) => prev + 1);
const triggerRecordedError = () => {
try {
throw new Error("Simulated controlled error from Plus One app")
} catch (e) {
alert("You intentionally threw an error")
}
};
return (
Plus One
{count}
);
}
type ButtonBoxProps = {
label: string;
onPress: () => void;
};
function ButtonBox({ label, onPress }: ButtonBoxProps) {
return (
{label}
);
}
/* The rest of the application code */
```
Now that we have verified a working app, we can add observability support by downloading the observability React Native [SDK](https://launchdarkly.com/docs/sdk/observability/react-native).
```bash title="Install using npm" for="npm" theme={null}
npm install @launchdarkly/react-native-client-sdk
npm install @launchdarkly/observability-react-native
```
Next, you’ll need to initialize the React Native LD client in the \_layout file. Replace the in the layout file by pasting the following code.
```javascript theme={null}
// app/_layout.tsx
import { Observability } from '@launchdarkly/observability-react-native';
import { AutoEnvAttributes, LDOptions, LDProvider, ReactNativeLDClient } from '@launchdarkly/react-native-client-sdk';
import { Stack } from 'expo-router';
import { useEffect, useState } from 'react';
const options: LDOptions = {
applicationInfo: {
id: 'Plus-One',
name: 'Sample Application',
version: '1.0.0',
versionName: 'v1',
},
debug: true,
plugins: [
new Observability({
serviceName: 'my-react-native-app',
serviceVersion: '1.0.0',
})
],
};
const userContext = { kind: 'user', key: 'test-hello' };
export default function RootLayout() {
const [client, setClient] = useState(null);
useEffect(() => {
// Initialize client
const featureClient = new ReactNativeLDClient(
'mob-abc123',
AutoEnvAttributes.Enabled,
options,
);
featureClient.identify(userContext).catch((e: any) => console.log(e));
setClient(featureClient);
// Cleanup function that runs when component unmounts
return () => {
featureClient.close();
};
}, []);
if (!client) {
return null;
}
return (
);
}
```
First, we’re importing the Observability SDK as well as a few LD libraries to add options and attributes to the LD client.
* Initialized the SDK and [plugin options](https://launchdarkly.github.io/observability-sdk/sdk/@launchdarkly/observability-react-native/interfaces/ReactNativeOptions.html).
- Defined the user [context](https://launchdarkly.com/docs/home/flags/contexts).
- Lastly, you initialized the client.
Now that you have defined your LD React Native client, you can implement different observability methods within your application logic.
We can do this by importing the LDObserve library in the app/\_layout.tsx file.
```javascript theme={null}
import { LDObserve } from '@launchdarkly/observability-react-native';
```
Then, add the recordError() method within the triggerRecordedError function inside the app/\_layout.tsx file. This will allow for error messages to be sent back to the LD UI.
```javascript theme={null}
const triggerRecordedError = () => {
try {
throw new Error("Simulated controlled error from Plus One app")
} catch (e) {
LDObserve.recordError(e as Error, {feature: "test-button"})
alert("You intentionally threw an error")
}
};
```
Before being able to receive data in the LD UI, you’ll need to add your mobile key to the React Native LD client, which can be found by logging in to the LD UI.
Once logged in, tap the settings button at the bottom left.
Navigate to the Projects page and click create to create a new project.
Define the new Project and click Create Project.
Then, define the environment where you would like your data to be sent.
Now, grab the mobile key by pressing the three dots for the environment and selecting the mobile key, which will copy the key to your keyboard.
Then, add it to the app/\_layout file.
```javascript theme={null}
const featureClient = new ReactNativeLDClient(
‘mob-abc123’,
AutoEnvAttributes.Enabled,
options,
);
```
Finally, you can generate data by interacting with your app in the iOS app simulator.
Feel free to restart the app to ensure data is displaying in real time.
```bash theme={null}
npm expo run:ios
```
Once you navigate back to the LD UI, you should be able to see the logs, traces, and errors under the Monitor section.
### Logs
### Traces
### Errors
## Conclusion
In just a few minutes, we’ve taken the PlusOne React Native app from a simple counter to a fully observable application connected to LaunchDarkly. By setting up the SDK, initializing observability plugins, and recording errors, we now have a live feedback loop where application behavior is visible in the LaunchDarkly UI. This makes it far easier to diagnose issues, validate feature flag rollouts, and ensure smooth user experiences.
## Next Steps
Looking ahead, there are many ways to expand on what we’ve built by including features like recording [custom metrics](https://launchdarkly.com/docs/sdk/features/observability-metrics) and [session replay](https://launchdarkly.com/docs/sdk/features/session-replay-config), which provide even deeper insights into app behavior. By integrating observability at the foundation of your React Native projects, you equip your team with the clarity needed to debug faster, ship features more confidently, and deliver reliable experiences to your users.
You can also read [this article](https://launchdarkly.com/blog/welcome-highlight-to-launchdarkly/) to learn more about observability and guarded releases.