---
title: React Native Monitoring Setup
description: Collect RUM and Error Tracking data from your React Native projects.
breadcrumbs: >-
  Docs > RUM & Session Replay > Application Monitoring > React Native Monitoring
  > React Native Monitoring Setup
---

# React Native Monitoring Setup

This page describes how to instrument your applications for [Real User Monitoring (RUM)](https://docs.datadoghq.com/real_user_monitoring.md) with the React Native SDK. RUM includes Error Tracking by default, but if you have purchased Error Tracking as a standalone product, see the [Error Tracking setup guide](https://docs.datadoghq.com/error_tracking.md) for specific steps.

The minimum supported version for the React Native SDK is React Native v0.65+. Compatibility with older versions is not guaranteed out-of-the-box.

## Setup{% #setup %}

{% section displayed-if="Setup Method is React Native" %}
This section only applies to users who meet the following criteria: Setup Method is React Native

### Step 1 - Install the SDK{% #step-1--install-the-sdk %}

To install with npm, run:

```
npm install @datadog/mobile-react-native
```

To install with Yarn, run:

```
yarn add @datadog/mobile-react-native
```

### Install dependencies for iOS{% #install-dependencies-for-ios %}

Install the added pod:

```
(cd ios && pod install)
```

### Android{% #android %}

If you use a React Native version strictly over 0.67, make sure to use Java version 17. If you use React Native version equal or below 0.67, make sure to use Java version 11.

In your `android/build.gradle` file, specify the `kotlinVersion` to avoid clashes among kotlin dependencies:

```
buildscript {
    ext {
        // targetSdkVersion = ...
        kotlinVersion = "1.8.21"
    }
}
```

The minimum supported Android SDK version is API level 23. Make sure to set `minSdkVersion` to 23 (or higher) in your Android configuration.

The Datadog React Native SDK requires you to have `compileSdkVersion = 31` or higher in the Android application setup, which implies that you should use Build Tools version 31 or higher, Android Gradle Plugin version 7, and Gradle version 7 or higher. To modify the versions, change the values in the `buildscript.ext` block of your application's top-level `build.gradle` file. Datadog recommends using a React Native version that's actively supported.

### Step 2 - Specify application details in the UI{% #step-2--specify-application-details-in-the-ui %}

1. In Datadog, navigate to [**Digital Experience** > **Add an Application**](https://app.datadoghq.com/rum/application/create).
1. Choose `react-native` as the application type.
1. Provide an application name to generate a unique Datadog application ID and client token.
1. To disable automatic user data collection for client IP or geolocation data, uncheck the boxes for those settings.

{% alert level="info" %}
If you've purchased Error Tracking as a standalone product (without RUM), navigate to [**Error Tracking** > **Settings** > **Browser and Mobile** > **Add an Application**](https://app.datadoghq.com/error-tracking/settings/setup/client/) instead.
{% /alert %}

For data security, you must use a client token. If you used only [Datadog API keys](https://docs.datadoghq.com/account_management/api-app-keys.md#api-keys) to configure the `@datadog/mobile-react-native` library, they would be exposed client-side in the React Native application's code.

For more information about setting up a client token, see the [Client Token documentation](https://docs.datadoghq.com/account_management/api-app-keys.md#client-tokens).

### Step 3 - Initialize the library with application context{% #step-3--initialize-the-library-with-application-context %}

{% callout %}
# Important note for users on the following Datadog sites: app.datadoghq.com

```
import {
    SdkVerbosity,
    DatadogProvider,
    DatadogProviderConfiguration,
    PropagatorType,
    TrackingConsent
} from '@datadog/mobile-react-native';

// Configure Datadog SDK
const config = new DatadogProviderConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    TrackingConsent.GRANTED,
    {
        // Optional: Configure the Datadog Site to target. Default is 'US1'.
        site: 'US1',
        // Optional: Set the reported service name (by default, it uses the package name or bundleIdentifier of your Android or iOS app respectively)
        service: 'com.example.reactnative',
        // Optional: Let the SDK print internal logs above or equal to the provided level. Default is undefined (meaning no logs)
        verbosity: SdkVerbosity.WARN,
        // Enable RUM
        rumConfiguration: {
            // Required: RUM Application ID
            applicationId: '<APPLICATION_ID>',
            // Track user interactions (set to false if using Error Tracking only)
            trackInteractions: true,
            // Track XHR resources (set to false if using Error Tracking only)
            trackResources: true,
            // Track errors
            trackErrors: true,
            // Optional: Sample sessions, for example: 80% of sessions are sent to Datadog. Default is 100%.
            sessionSampleRate: 80,
            // Optional: Enable or disable native crash reports.
            nativeCrashReportEnabled: true,
            // Optional: Sample tracing integrations for network calls between your app and your backend
            // (in this example, 80% of calls to your instrumented backend are linked from the RUM view to
            // the APM view. Default is 20%).
            // You need to specify the hosts of your backends to enable tracing with these backends
            resourceTraceSampleRate: 80,
            firstPartyHosts: [
                {
                    match: 'example.com',
                    propagatorTypes: [
                        PropagatorType.DATADOG,
                        PropagatorType.TRACECONTEXT
                    ]
                }
            ]
        },
        // Enable Logs with default configuration
        logsConfiguration: {},
        // Enable Trace with default configuration
        traceConfiguration: {}
    }
);

// Wrap the content of your App component in a DatadogProvider component, passing it your configuration:
export default function App() {
    return (
        <DatadogProvider configuration={config}>
            <Navigation />
        </DatadogProvider>
    );
}

// Once the Datadog React Native SDK for RUM is initialized, you need to setup view tracking to be able to see data in a dashboard
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: us3.datadoghq.com

```
import {
    SdkVerbosity,
    DatadogProvider,
    DatadogProviderConfiguration,
    PropagatorType,
    TrackingConsent
} from '@datadog/mobile-react-native';

// Configure Datadog SDK
const config = new DatadogProviderConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    TrackingConsent.GRANTED,
    {
        // Optional: Configure the Datadog Site to target. Default is 'US1'.
        site: 'US3',
        // Optional: Set the reported service name (by default, it uses the package name or bundleIdentifier of your Android or iOS app respectively)
        service: 'com.example.reactnative',
        // Optional: Let the SDK print internal logs above or equal to the provided level. Default is undefined (meaning no logs)
        verbosity: SdkVerbosity.WARN,
        // Enable RUM
        rumConfiguration: {
            // Required: RUM Application ID
            applicationId: '<APPLICATION_ID>',
            // Track user interactions (set to false if using Error Tracking only)
            trackInteractions: true,
            // Track XHR resources (set to false if using Error Tracking only)
            trackResources: true,
            // Track errors
            trackErrors: true,
            // Optional: Sample sessions, for example: 80% of sessions are sent to Datadog. Default is 100%.
            sessionSampleRate: 80,
            // Optional: Enable or disable native crash reports.
            nativeCrashReportEnabled: true,
            // Optional: Sample tracing integrations for network calls between your app and your backend
            // (in this example, 80% of calls to your instrumented backend are linked from the RUM view to
            // the APM view. Default is 20%).
            // You need to specify the hosts of your backends to enable tracing with these backends
            resourceTraceSampleRate: 80,
            firstPartyHosts: [
                {
                    match: 'example.com',
                    propagatorTypes: [
                        PropagatorType.DATADOG,
                        PropagatorType.TRACECONTEXT
                    ]
                }
            ]
        },
        // Enable Logs with default configuration
        logsConfiguration: {},
        // Enable Trace with default configuration
        traceConfiguration: {}
    }
);

// Wrap the content of your App component in a DatadogProvider component, passing it your configuration:
export default function App() {
    return (
        <DatadogProvider configuration={config}>
            <Navigation />
        </DatadogProvider>
    );
}

// Once the Datadog React Native SDK for RUM is initialized, you need to setup view tracking to be able to see data in a dashboard
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: app.datadoghq.eu

```
import {
    SdkVerbosity,
    DatadogProvider,
    DatadogProviderConfiguration,
    PropagatorType,
    TrackingConsent
} from '@datadog/mobile-react-native';

// Configure Datadog SDK
const config = new DatadogProviderConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    TrackingConsent.GRANTED,
    {
        // Optional: Configure the Datadog Site to target. Default is 'US1'.
        site: 'EU1',
        // Optional: Set the reported service name (by default, it uses the package name or bundleIdentifier of your Android or iOS app respectively)
        service: 'com.example.reactnative',
        // Optional: Let the SDK print internal logs above or equal to the provided level. Default is undefined (meaning no logs)
        verbosity: SdkVerbosity.WARN,
        // Enable RUM
        rumConfiguration: {
            // Required: RUM Application ID
            applicationId: '<APPLICATION_ID>',
            // Track user interactions (set to false if using Error Tracking only)
            trackInteractions: true,
            // Track XHR resources (set to false if using Error Tracking only)
            trackResources: true,
            // Track errors
            trackErrors: true,
            // Optional: Sample sessions, for example: 80% of sessions are sent to Datadog. Default is 100%.
            sessionSampleRate: 80,
            // Optional: Enable or disable native crash reports.
            nativeCrashReportEnabled: true,
            // Optional: Sample tracing integrations for network calls between your app and your backend
            // (in this example, 80% of calls to your instrumented backend are linked from the RUM view to
            // the APM view. Default is 20%).
            // You need to specify the hosts of your backends to enable tracing with these backends
            resourceTraceSampleRate: 80,
            firstPartyHosts: [
                {
                    match: 'example.com',
                    propagatorTypes: [
                        PropagatorType.DATADOG,
                        PropagatorType.TRACECONTEXT
                    ]
                }
            ]
        },
        // Enable Logs with default configuration
        logsConfiguration: {},
        // Enable Trace with default configuration
        traceConfiguration: {}
    }
);

// Wrap the content of your App component in a DatadogProvider component, passing it your configuration:
export default function App() {
    return (
        <DatadogProvider configuration={config}>
            <Navigation />
        </DatadogProvider>
    );
}

// Once the Datadog React Native SDK for RUM is initialized, you need to setup view tracking to be able to see data in a dashboard
```

{% /callout %}

{% callout %}
# Important note for users on the following Datadog sites: app.ddog-gov.com

```
import {
    SdkVerbosity,
    DatadogProvider,
    DatadogProviderConfiguration,
    PropagatorType,
    TrackingConsent
} from '@datadog/mobile-react-native';

// Configure Datadog SDK
const config = new DatadogProviderConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    TrackingConsent.GRANTED,
    {
        // Optional: Configure the Datadog Site to target. Default is 'US1'.
        site: 'US1_FED',
        // Optional: Set the reported service name (by default, it uses the package name or bundleIdentifier of your Android or iOS app respectively)
        service: 'com.example.reactnative',
        // Optional: Let the SDK print internal logs above or equal to the provided level. Default is undefined (meaning no logs)
        verbosity: SdkVerbosity.WARN,
        // Enable RUM
        rumConfiguration: {
            // Required: RUM Application ID
            applicationId: '<APPLICATION_ID>',
            // Track user interactions (set to false if using Error Tracking only)
            trackInteractions: true,
            // Track XHR resources (set to false if using Error Tracking only)
            trackResources: true,
            // Track errors
            trackErrors: true,
            // Optional: Sample sessions, for example: 80% of sessions are sent to Datadog. Default is 100%.
            sessionSampleRate: 80,
            // Optional: Enable or disable native crash reports.
            nativeCrashReportEnabled: true,
            // Optional: Sample tracing integrations for network calls between your app and your backend
            // (in this example, 80% of calls to your instrumented backend are linked from the RUM view to
            // the APM view. Default is 20%).
            // You need to specify the hosts of your backends to enable tracing with these backends
            resourceTraceSampleRate: 80,
            firstPartyHosts: [
                {
                    match: 'example.com',
                    propagatorTypes: [
                        PropagatorType.DATADOG,
                        PropagatorType.TRACECONTEXT
                    ]
                }
            ]
        },
        // Enable Logs with default configuration
        logsConfiguration: {},
        // Enable Trace with default configuration
        traceConfiguration: {}
    }
);

// Wrap the content of your App component in a DatadogProvider component, passing it your configuration:
export default function App() {
    return (
        <DatadogProvider configuration={config}>
            <Navigation />
        </DatadogProvider>
    );
}

// Once the Datadog React Native SDK for RUM is initialized, you need to setup view tracking to be able to see data in a dashboard
```

{% /callout %}

#### Sample session rates{% #sample-session-rates %}

To control the data your application sends to Datadog RUM, you can specify a sampling rate for RUM sessions while initializing the RUM React Native SDK as a percentage between 0 and 100. You can specify the rate with the `config.sessionSamplingRate` parameter.

#### Set tracking consent (GDPR compliance){% #set-tracking-consent--gdpr-compliance %}

To be compliant with the GDPR regulation, the React Native SDK requires the tracking consent value at initialization.

The `trackingConsent` setting can be one of the following values:

1. `.PENDING`: The React Native SDK starts collecting and batching the data but does not send it to Datadog. The React Native SDK waits for the new tracking consent value to decide what to do with the batched data.
1. `.GRANTED`: The React Native SDK starts collecting the data and sends it to Datadog.
1. `.NOTGRANTED`: The React Native SDK does not collect any data. No logs, traces, or RUM events are sent to Datadog.

To change the tracking consent value after the React Native SDK is initialized, use the `Datadog.set(trackingConsent:)` API call. The React Native SDK changes its behavior according to the new value.

For example, if the current tracking consent is `.PENDING`:

- If you change the value to `.GRANTED`, the React Native SDK sends all current and future data to Datadog;
- If you change the value to `.NOTGRANTED`, the React Native SDK wipes all current data and does not collect future data.

### User interactions tracking{% #user-interactions-tracking %}

The preferred way to set up interaction tracking is by using the Datadog React Native Babel Plugin (`@datadog/mobile-react-native-babel-plugin`). This plugin automatically enriches React components with contextual metadata, improving interaction tracking accuracy and enabling a range of configuration options.

#### Installation{% #installation %}

To install with npm, run:

```
npm install @datadog/mobile-react-native-babel-plugin
```

To install with Yarn, run:

```
yarn add @datadog/mobile-react-native-babel-plugin
```

#### Configure Babel{% #configure-babel %}

Add the plugin to your Babel configuration file (`babel.config.js`, `.babelrc`, or similar):

```
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['@datadog/mobile-react-native-babel-plugin']
};
```

After the plugin is installed and configured, it automatically tracks interactions on standard React Native components. No additional code changes are required for basic usage.

### CodePush integration (optional){% #codepush-integration--optional %}

If you're deploying updates with [CodePush](https://docs.microsoft.com/en-us/appcenter/distribution/codepush/), see the [CodePush setup documentation](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/react_native/setup/codepush.md) for additional configuration steps.
{% /section %}

{% section displayed-if="Setup Method is Expo" %}
This section only applies to users who meet the following criteria: Setup Method is Expo

### Step 1 - Install the SDK{% #step-1--install-the-sdk-2 %}

The RUM React Native SDK supports Expo and Expo Go. To use it, install `expo-datadog` and `@datadog/mobile-react-native`.

`expo-datadog` supports Expo starting from SDK 45 and the plugin's versions follow Expo versions. For example, if you use Expo SDK 45, use `expo-datadog` version `45.x.x`. Datadog recommends using **Expo SDK 45** as a minimum version; previous versions may require manual steps.

To install with npm, run:

```
npm install expo-datadog @datadog/mobile-react-native
```

To install with Yarn, run:

```
yarn add expo-datadog @datadog/mobile-react-native
```

### Step 2 - Specify application details in the UI{% #step-2--specify-application-details-in-the-ui-2 %}

1. In Datadog, navigate to [**Digital Experience** > **Add an Application**](https://app.datadoghq.com/rum/application/create).
1. Choose `react-native` as the application type.
1. Provide an application name to generate a unique Datadog application ID and client token.
1. To disable automatic user data collection for client IP or geolocation data, uncheck the boxes for those settings.

{% alert level="info" %}
If you've purchased Error Tracking as a standalone product (without RUM), navigate to [**Error Tracking** > **Settings** > **Browser and Mobile** > **Add an Application**](https://app.datadoghq.com/error-tracking/settings/setup/client/) instead.
{% /alert %}

For data security, you must use a client token. For more information about setting up a client token, see the [Client Token documentation](https://docs.datadoghq.com/account_management/api-app-keys.md#client-tokens).

### Step 3 - Initialize the library with application context{% #step-3--initialize-the-library-with-application-context-2 %}

Add the following code snippet to your initialization file:

```
import {
    SdkVerbosity,
    DatadogProvider,
    DatadogProviderConfiguration,
    PropagatorType,
    TrackingConsent
} from 'expo-datadog';

const config = new DatadogProviderConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    TrackingConsent.GRANTED,
    {
        // Optional: Configure the Datadog Site to target. Default is 'US1'.
        site: 'US1',
        // Optional: Set the reported service name (by default, it uses the package name or bundleIdentifier of your Android or iOS app respectively)
        service: 'com.example.reactnative',
        // Optional: Let the SDK print internal logs above or equal to the provided level. Default is undefined (meaning no logs)
        verbosity: SdkVerbosity.WARN,
        // Enable RUM
        rumConfiguration: {
            // Required: RUM Application ID
            applicationId: '<APPLICATION_ID>',
            // Track user interactions (set to false if using Error Tracking only)
            trackInteractions: true,
            // Track XHR resources (set to false if using Error Tracking only)
            trackResources: true,
            // Track errors
            trackErrors: true,
            // Optional: Sample sessions, for example: 80% of sessions are sent to Datadog. Default is 100%.
            sessionSampleRate: 80,
            // Optional: Enable or disable native crash reports.
            nativeCrashReportEnabled: true,
            // Optional: Sample tracing integrations for network calls between your app and your backend
            // (in this example, 80% of calls to your instrumented backend are linked from the RUM view to
            // the APM view. Default is 20%).
            // You need to specify the hosts of your backends to enable tracing with these backends
            resourceTraceSampleRate: 80,
            firstPartyHosts: [
                {
                    match: 'example.com',
                    propagatorTypes: [
                        PropagatorType.DATADOG,
                        PropagatorType.TRACECONTEXT
                    ]
                }
            ]
        },
        // Enable Logs with default configuration
        logsConfiguration: {},
        // Enable Trace with default configuration
        traceConfiguration: {}
    }
);

// Wrap the content of your App component in a DatadogProvider component, passing it your configuration:
export default function App() {
    return (
        <DatadogProvider configuration={config}>
            <Navigation />
        </DatadogProvider>
    );
}

// Once the Datadog React Native SDK for RUM is initialized, you need to setup view tracking to be able to see data in a dashboard
```

#### Sample session rates{% #sample-session-rates-2 %}

To control the data your application sends to Datadog RUM, you can specify a sampling rate for RUM sessions. To set this rate, use the `config.sessionSamplingRate` parameter and specify a percentage between 0 and 100.

### Upload source maps on EAS builds{% #upload-source-maps-on-eas-builds %}

To enable crash reporting and error symbolication, add `expo-datadog` to your plugins in the `app.json` file:

```
{
    "expo": {
        "plugins": ["expo-datadog"]
    }
}
```

This plugin takes care of uploading the dSYMs, source maps and Proguard mapping files on every EAS build.

Add `@datadog/datadog-ci` as a development dependency. This package contains scripts to upload the source maps. You can install it with npm:

```
npm install @datadog/datadog-ci --save-dev
```

or with Yarn:

```
yarn add -D @datadog/datadog-ci
```

Run `eas secret:create` to set `DATADOG_API_KEY` to your Datadog API key, and `DATADOG_SITE` to the host of your Datadog site (for example, `datadoghq.com`).

### User interactions tracking{% #user-interactions-tracking-2 %}

Datadog recommends setting up interaction tracking by using the Datadog React Native Babel Plugin (`@datadog/mobile-react-native-babel-plugin`). This plugin automatically enriches React components with contextual metadata, improving interaction tracking accuracy and enabling a range of configuration options.

To install with npm, run:

```
npm install @datadog/mobile-react-native-babel-plugin
```

To install with Yarn, run:

```
yarn add @datadog/mobile-react-native-babel-plugin
```

Add the plugin to your Babel configuration file (`babel.config.js`, `.babelrc`, or similar):

```
module.exports = {
  presets: ["babel-preset-expo"],
  plugins: ['@datadog/mobile-react-native-babel-plugin']
};
```

After the plugin is installed and configured, it automatically tracks interactions on standard React Native components. No additional code changes are required for basic usage.

### CodePush integration (optional){% #codepush-integration--optional-2 %}

If you're deploying updates with [CodePush](https://docs.microsoft.com/en-us/appcenter/distribution/codepush/), see the [CodePush setup documentation](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/react_native/setup/codepush.md) for additional configuration steps.
{% /section %}

## Sending data when device is offline{% #sending-data-when-device-is-offline %}

The React Native SDK helps make data available when your user device is offline. In cases of low-network areas, or when the device battery is too low, all events are first stored on the local device in batches. They are sent as soon as the network is available, and the battery is high enough so the React Native SDK does not impact the end user's experience. If the network is not available with your application running in the foreground, or if an upload of data fails, the batch is kept until it can be sent successfully.

This means that even if users open your application while offline, no data is lost.

**Note**: The data on the disk is automatically deleted if it gets too old so the React Native SDK does not use too much disk space.

## Track background events{% #track-background-events %}

{% alert level="info" %}
Tracking background events may lead to additional sessions, which can impact billing. For questions, [contact Datadog support](https://docs.datadoghq.com/help/).
{% /alert %}

You can track events such as crashes and network requests when your application is in the background (for example, when no active view is available).

Add the following snippet during initialization in your Datadog configuration:

```
rumConfiguration.trackBackgroundEvents = true;
```

## Further reading{% #further-reading %}

- [RUM React Native Advanced Configuration](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/react_native/advanced_configuration.md)
- [Source code for dd-sdk-reactnative](https://github.com/DataDog/dd-sdk-reactnative)
- [Monitor React Native applications](https://www.datadoghq.com/blog/react-native-monitoring/)
- [Monitor hybrid React Native applications](https://docs.datadoghq.com/real_user_monitoring/guide/monitor-hybrid-react-native-applications.md)
- [Learn how to explore your RUM data](https://docs.datadoghq.com/real_user_monitoring/explorer.md)