React Native Integrated Libraries
React Navigation
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 as follow. You can use the optional ViewNamePredicate parameter to replace the automatically detected View name with something more relevant to your use case.
Returning null in the ViewNamePredicate prevents the new RUM View from being created. The previous RUM View remains active.
import * as React from 'react';
import { DdRumReactNavigationTracking, ViewNamePredicate } from '@datadog/mobile-react-navigation';
import { Route } from "@react-navigation/native";
const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(route: Route<string, any | undefined>, trackedName: string) {
return "My custom View Name"
}
function App() {
const navigationRef = React.useRef(null);
return (
<View>
<NavigationContainer ref={navigationRef} onReady={() => {
DdRumReactNavigationTracking.startTrackingViews(navigationRef.current, viewNamePredicate)
}}>
// …
</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().
React Native Navigation
Note: This package is an integration for react-native-navigation library, please make sure you first install and setup the core mobile-react-native SDK.
Setup
To install with NPM, run:
npm install @datadog/mobile-react-native-navigation
To install with Yarn, run:
yarn add @datadog/mobile-react-native-navigation
Track view navigation
In order to start tracking your navigation events, simply call the add the following lines before setting up your navigation. You can use the optional ViewNamePredicate callback to replace the automatically detected View name with something more relevant to your use case, based on the ComponentDidAppearEvent.
Returning null in the ViewNamePredicate prevents the new RUM View from being created. The previous RUM View remains active.
import { DdRumReactNativeNavigationTracking, ViewNamePredicate } from '@datadog/mobile-react-native-navigation';
import { ComponentDidAppearEvent } from 'react-native-navigation';
const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(event: ComponentDidAppearEvent, trackedName: string) {
return "My custom View Name"
}
DdRumReactNativeNavigationTracking.startTracking(viewNamePredicate);
RUM Integrations
Integrate with React Navigation
Datadog provides automatic integration for React Navigation (minimum supported version is react-navigation/native@5.6.0). Add the following in your source code:
const navigationRef:React.RefObject<NavigationContainerRef> = React.createRef();
// ...
<NavigationContainer ref={navigationRef} onReady={
()=>{DdRumReactNavigationTracking.startTrackingViews(navigationRef.current)}}>
// ...
</NavigationContainer>
Further reading
Additional helpful documentation, links, and articles:
