[Alpha] Install the Splunk RUM React Native agent

Use the Splunk RUM React Native agent to instrument your React Native applications.

Attention:

Alpha features described in this document are provided by Splunk to you "as is" without any warranties, maintenance and support, or service-level commitments. Splunk makes this alpha feature available in its sole discretion and may discontinue it at any time. These documents are not yet publicly available and we ask that you keep such information confidential. Use of alpha features is subject to the Splunk Pre-Release Agreement for Hosted Services.

Alpha documentation links

Tip:

Use these links to navigate through the documentation for this alpha release. These links aren't visible in the left nav.

To instrument a new React Native application with the new Splunk RUM React Native agent, follow the instructions on this page. To migrate an already-instrumented application see [Alpha] Upgrade the Splunk RUM React Native agent instead.

Check compatibility and requirements

React Native 0.75.0 and higher
React 18.2.0 and higher
Android API 24 and above
iOS 15 and above with USE_FRAMEWORKS=dynamic in your Podfile

This combination of minimum versions allows you to instrument your React Native applications running on both Android and iOS.

Note: Splunk APM is not required to use Splunk RUM for React Native applications.

Before you begin

Get this information:

Your Splunk access token: See Generate your RUM access token in Splunk Observability Cloud.
The name of the application that you're instrumenting.
(Optional) The version number of the application that you're instrumenting.
A name for the environment where the application will run.

Your application name, application version, and deployment environment should be non-identical strings.

Procedure

Install the Splunk RUM React Native agent:
1. Add the SDK to your React Native project:
  Bare React Native
```
npm install @splunk/otel-react-native
# or
yarn add @splunk/otel-react-native
```
  Expo (development builds)
```
npx expo install @splunk/otel-react-native
```
2. Add the configuration plugin to your app.json or app.config.js:
```
{
  "expo": {
    "plugins": ["@splunk/otel-react-native"]
  }
}
```

Set up the "native" side:

Android

Enable core library desugaring in your android/app/build.gradle:

In your application module's build.gradle file, update the compileOptions and dependencies sections as in the following examples:

android {
  compileOptions {
    // Flag to enable support for the new language APIs

    // For AGP 4.1+
    isCoreLibraryDesugaringEnabled = true
    // For AGP 4.0
    // coreLibraryDesugaringEnabled = true
    
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
  kotlinOptions {
    // If this setting is present, jvmTarget must be "1.8"
    jvmTarget = "1.8"
  }
}

dependencies {
  // For AGP 8+
  coreLibraryDesugaring "com.android.tools:desugar_jdk_libs:2.1.5"

  // For AGP 7.4+
  // coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.1.3")
  // For AGP 7.3
  // coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:1.2.3")
  // For AGP 4.0 to 7.2
  // coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:1.1.9")
}

Ensure minSdkVersion is 24 or higher.
Save and sync your project.

iOS

Add USE_FRAMEWORKS=dynamic to your ios/Podfile:

# Required for SPM dependencies
ENV['USE_FRAMEWORKS'] = 'dynamic'

Run this command:
```
cd ios && pod install && cd ..
```

Initialize the agent in your App component using either method below:

Use SplunkRumProvider

import { SplunkRumProvider } from '@splunk/otel-react-native';

export default function App() {
  return (
    <SplunkRumProvider
      agentConfiguration={{
        endpoint: {
          realm: 'your-splunk-realm',
          rumAccessToken: 'your-splunk-rum-access-token',
        },
        appName: 'your-application-name',
        deploymentEnvironment: 'your-environment-name',
        appVersion: '1.0.0',
      }}
    >
      <AppRoot />
    </SplunkRumProvider>
  );
}

Install imperatively

import { SplunkRum } from '@splunk/otel-react-native';

await SplunkRum.install({
  endpoint: {
    realm: 'your-splunk-realm',
    rumAccessToken: 'your-splunk-rum-access-token',
  },
  appName: 'your-application-name',
  deploymentEnvironment: 'your-environment-name',
});

const rum = SplunkRum.instance;
await rum.globalAttributes.setString('app.version', '1.0.0');

Generate some user activity in your application. To see your application in Splunk Observability Cloud, select Digital Experience > Real user monitoring > Overview.