Screen and Navigation Tracking in React Native

A mobile app has no URL. Without navigation tracking a session is one long unnamed screen; with it, each screen change is a page view with a name you recognise, a fresh snapshot of the new screen, and a marker a reviewer can jump to.

React Navigation

import { NavigationContainer } from '@react-navigation/native';
import { AnyReplay, init, trackNavigation } from '@anyreplay/react-native';

init({ projectKey: 'YOUR_PROJECT_KEY' });

export default function Root() {
  return (
    <AnyReplay>
      <NavigationContainer ref={(ref) => { if (ref) trackNavigation(ref); }}>
        <App />
      </NavigationContainer>
    </AnyReplay>
  );
}

trackNavigation reads the current route name straight away, then listens to the container's state event and reports the route name each time it changes. Consecutive duplicates are dropped: a navigator emits state changes when a keyboard opens or a param changes, and none of those is a new screen. It returns a function that stops tracking; calling trackNavigation again replaces the previous container.

It is written against the shape of the container — getCurrentRoute() and addListener('state', …) — rather than against the library, so it adds no dependency and works with any navigator that offers those two methods.

Calling screen() yourself

For Expo Router, a custom navigator, or tabs you manage in state, report screens directly:

import { screen } from '@anyreplay/react-native';

screen('Checkout');

Unlike trackNavigation, screen() does not filter duplicates: every call is recorded as a screen change and increases the page count. Call it when the screen actually changes — from a navigation listener or an effect keyed on the route.

What a screen change does

• Records a marker with the screen name, which the player shows on the timeline.
• Increases the session's page count in the session list.
• Starts the next tick from a full snapshot, since almost nothing on the new screen matches the old one.
• The screen the app starts on is counted once, and a name given before recording starts — before init has finished, or while waiting for consent — is remembered and the recording opens on it. (0.1.4 counted the first screen twice and ignored an early name.)

Naming screens well

• Route names are what reviewers read. ProductDetail is more useful than Screen3.
• Avoid putting personal data into names — Profile, not Profile of [email protected]. Screen names are not masked.
• With Expo Router, the path (/orders/[id] rendered as /orders/123) includes ids; if they are sensitive, report the route pattern instead.