Track and name React Native screens

Name the screens in your React Native app so you can follow a journey in CUX. Connect your existing navigation after SDK initialization.

Package covered: @cuxio/react-native-sdk 1.0.22.

Connect React Navigation

The package exports createCUXNavigationProps() and getActiveScreenBreadcrumb(). Create the helper once for a navigation container. Its change handler sends a name built from the active route hierarchy.

This example belongs in the navigation component mounted after initialization:

import React, { useMemo } from 'react';
import {
  NavigationContainer,
  useNavigationContainerRef,
} from '@react-navigation/native';
import {
  CUX,
  createCUXNavigationProps,
  getActiveScreenBreadcrumb,
} from '@cuxio/react-native-sdk';
import RootNavigator from './RootNavigator';

export function AppNavigation() {
  const navigationRef = useNavigationContainerRef();
  const cuxNavigation = useMemo(() => createCUXNavigationProps(), []);

  return (
    <NavigationContainer
      ref={navigationRef}
      onStateChange={cuxNavigation.onStateChange}
      onReady={() => {
        const name = getActiveScreenBreadcrumb(navigationRef.getRootState());
        if (name) CUX.screen(name);
      }}
    >
      <RootNavigator />
    </NavigationContainer>
  );
}

RootNavigator is your existing navigator. The helper does not supply an onReady callback, so the example names the initial route explicitly using the real navigation state.

If your container already has readiness/state handlers, call both your existing handler and the CUX handler from the same callback. Preserve existing refs rather than replacing them without review. When collection resumes after consent, check the initial current route and send its name if your app needs it recorded.

For another navigation system, call CUX.screen('Checkout') from the point where your app confirms the active destination. Use stable names without account data or route arguments.

Understand interaction collection

Native collection owns screenshot and gesture behavior. The package also exports components such as CUXPressable and CUXTouchableOpacity for supported explicit interaction instrumentation. Check the recording before combining manual and native capture so you do not create duplicate events.

In 1.0.22, CUXGestureListener is a passthrough wrapper and CUXMaskedCompositionHost renders nothing. Adding them does not enable gestures or screenshot masking. They are not required setup steps for this version.

Verify screen names

Run a test journey on Android and iOS. Check the first route, a nested destination, Back navigation and the current route after collection resumes. Keep names stable and leave user IDs, search queries and route parameters out of them.

Send completed outcomes through custom events. If screens are missing, follow React Native troubleshooting.