Install the Splunk RUM React Native agent

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

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 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 application name, application version, and deployment environment should be non-identical strings.

Procedure

  1. Install the Splunk RUM React Native agent:

    1. Add the SDK to your React Native project:

      Bare React Native
      BASH 
      npm install @splunk/otel-react-native
# or
yarn add @splunk/otel-react-native
      Expo (development builds)
      BASH 
      npx expo install @splunk/otel-react-native

    2. Add the configuration plugin to your app.json or app.config.js:

      BASH 
      {
  "expo": {
    "plugins": ["@splunk/otel-react-native"]
  }
}

  2. Set up the "native" side:

    Android

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

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

      JSON 
      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")
}
    2. Ensure minSdkVersion is 24 or higher.
    3. Save and sync your project.
    iOS

    1. Add USE_FRAMEWORKS=dynamic to your ios/Podfile:

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

    2. Run this command:

      BASH 
      cd ios && pod install && cd ..

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

    Use SplunkRumProvider
    BASH 
    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
    BASH 
    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');

  4. Generate some user activity in your application. To see your application in Splunk Observability Cloud, select Explore RUM.