Getting started

React Navigation

Track screens automatically in apps that use React Navigation.

3 min readSDK 0.5.0

ReactNavigationTracker follows the focused route of your NavigationContainer and records it as the current screen. It works with stack, tab and drawer navigators, and with nested navigators: the screen name is always the deepest focused route.

Setup

Create the ref in its own module so both the container and the tracker can import it.

src/navigationRef.tstsx

import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef();

Pass it to your NavigationContainer

src/navigation/RootNavigator.tsxtsx

import { navigationRef } from '../navigationRef';

<NavigationContainer ref={navigationRef}>
  <AppStack />
</NavigationContainer>

Mount the tracker inside the provider

App.tsxtsx

import { RiveoraProvider, ReactNavigationTracker } from '@riveora/react-native';
import { navigationRef } from './src/navigationRef';

<RiveoraProvider projectKey="pk_your_project_key" storage={storage} appVersion="1.4.0" consent="granted">
  <ReactNavigationTracker navigationRef={navigationRef} />
  <RootNavigator />
</RiveoraProvider>

Containers that mount later

Many apps show a login screen first and only mount the NavigationContainer after sign-in. The tracker handles this: it starts recording as soon as the container is ready, and picks up again if the container unmounts and remounts, for example after a sign-out.

Screens outside the container, like a login screen, have no route name. Call Riveora.screen('Login') when they appear if you want them in your journeys.

Every screen, from the start

In development builds, the tracker sends every screen name your navigators define, once per app version, so the dashboard lists screens nobody has opened yet. Screens in a nested navigator are added the first time that navigator is shown; list any you want up front with extraScreens. Production builds never send the list, and a screen that isn’t in it still shows up the first time someone opens it.

Options

Prop	Type	Description
`navigationRef`required	NavigationContainerRef	The same ref you pass to NavigationContainer.
`screenAlias`	Record<string, string>	Rename routes, e.g. `{ Settings: 'Profile' }`.
`ignoreScreens`	Array<string \| RegExp>	Route names to skip.
`reportScreens`	boolean	In development builds, send every screen your navigators know about, so the dashboard lists screens nobody has opened yet. Never sent from production builds. Default: `true`
`extraScreens`	string[]	Extra screens to list, for screens no navigator has shown yet.

Call Riveora.screen(name) whenever a screen becomes visible. Taps and other events that follow are tagged with that screen.

See Riveora.screen in the SDK reference

Something unclear or missing? Email us and we’ll improve this page.