Upgrade the Splunk RUM React Native agent

Migrate existing deployments to the new Splunk RUM React Native agent.

Note: If you don't have existing React Native instrumentation, skip this page. Go directly to Install the Splunk RUM React Native agent.

If you're using the old Splunk RUM React Native agent in your React Native applications, follow these steps to migrate your applications to the new Splunk RUM React Native agent.

  1. Update platform requirements:

    • React Native must be 0.75.0+ and React 18.2.0+.

    • iOS must target 15.0+ and use dynamic frameworks for Pod dependencies linking:

      TYPESCRIPT 
      # ios/Podfile
ENV['USE_FRAMEWORKS'] = 'dynamic'

    • Android must target minSdkVersion 24+ and have core library desugaring enabled:

      TYPESCRIPT 
      android {
  compileOptions {
    isCoreLibraryDesugaringEnabled = true
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
  kotlinOptions {
    // Optional
    jvmTarget = "1.8"
  }
}
dependencies {
  coreLibraryDesugaring "com.android.tools:desugar_jdk_libs:2.1.5"
}
  2. Update the initialization functions.

    Replace the legacy SplunkRum.init() and OtelWrapper with SplunkRum.install() or SplunkRumProvider.

    • Before (legacy):

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

SplunkRum.init({
  realm: 'your-splunk-realm',
  applicationName: 'your-application-name',
  rumAccessToken: 'your-splunk-rum-access-token',
});

    • After (new):

      TYPESCRIPT 
      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',
});

    • Recommended (provider):

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

<SplunkRumProvider
  agentConfiguration={{
    endpoint: { realm: 'your-splunk-realm', rumAccessToken: 'your-splunk-rum-access-token' },
    appName: 'your-application-name',
    deploymentEnvironment: 'your-environment-name',
  }}
>
  <App />
</SplunkRumProvider>;
  3. Update your configuration object to match AgentConfiguration and EndpointConfiguration:
    Legacy New

    applicationName

    appName (required)

    deploymentEnvironment (now required)

    realm , rumAccessToken

    endpoint: { realm, rumAccessToken }

    beaconEndpoint

    endpoint: { trace: "<https://...>" } (optional sessionReplay)

    debug

    enableDebugLogging

    globalAttributes

    No change needed but can be updated at runtime through SplunkRum.instance.globalAttributes

    ignoreUrls

    new NetworkInstrumentationModuleConfiguration(true, patterns) (iOS only)

    appStartEnabled

    new StartupModuleConfiguration(true|false)

    allowInsecureBeacon, enableDiskBuffering, limitDiskUsageMegabytes,truncationCheckpoint, bufferTimeout, bufferSize

    Removed these
  4. Remove or replace these legacy APIs:
    Legacy New

    OtelWrapper

    SplunkRumProvider

    SplunkRum.setGlobalAttributes()

    SplunkRum.instance.globalAttributes.setAll()

    startNavigationTracking()

    NavigationModuleConfiguration and/or manual tracking

    SplunkRum.finishAppStart()

    Use StartupModuleConfiguration (no manual finish API)

    SplunkRum.reportError()

    No direct replacement (use automatic error capture)

    SplunkRum.updateLocation()

    No direct replacement (set custom attributes if needed)

    Manual navigation example:

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

await SplunkRum.install(config, [
  new NavigationModuleConfiguration(true, true),
]);

await SplunkRum.instance.navigation.track('Home');
  5. Configure modules explicitly:

    Features are now controlled via module configurations. Add only what you need:

    TYPESCRIPT 
    import {
  CrashReportsModuleConfiguration,
  InteractionsModuleConfiguration,
  NetworkMonitorModuleConfiguration,
  StartupModuleConfiguration,
} from '@splunk/otel-react-native';

await SplunkRum.install(config, [
  new CrashReportsModuleConfiguration(true),
  new InteractionsModuleConfiguration(true),
  new NetworkMonitorModuleConfiguration(true),
  new StartupModuleConfiguration(true),
]);