@datadog/mobile-react-navigation

React-Native Monitoring for react-navigation components

Datadog Real User Monitoring (RUM) enables you to visualize and analyze the real-time performance and user journeys of your application’s individual users. This specific package adds support to the react-navigation library.

Setup

Note: This package is an integration for react-navigation library, please make sure you first install and setup the core mobile-react-native SDK.

To install with NPM, run:

npm install @datadog/mobile-react-navigation

To install with Yarn, run:

yarn add @datadog/mobile-react-navigation

Track view navigation

To track changes in navigation as RUM Views, set the onready callback of your NavigationContainer component:

import * as React from 'react';
import { DdRumReactNavigationTracking } from '@datadog/mobile-react-navigation';

function App() {
  const navigationRef = React.useRef(null);
  return (
    <View>
      <NavigationContainer ref={navigationRef} onReady={() => {
        DdRumReactNavigationTracking.startTrackingViews(navigationRef.current)
      }}>
        // …
      </NavigationContainer>
    </View>
  );
}

Note: Only one NavigationContainer can be tracked at the time. If you need to track another container, stop tracking the previous one first, using DdRumReactNavigationTracking.stopTrackingViews().