Navigation Tracking

Use the useAdoptureNavigationTracking hook to automatically track screen views when using React Navigation:

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { AdoptureProvider, useAdoptureNavigationTracking } from '@adopture/react-native/react';

function AppNavigator() {
  const navigationRef = useNavigationContainerRef();
  useAdoptureNavigationTracking(navigationRef);

  return (
    <NavigationContainer ref={navigationRef}>
      {/* your screens */}
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <AdoptureProvider appKey="ak_your_app_key_here">
      <AppNavigator />
    </AdoptureProvider>
  );
}

The hook:

Listens to navigation state changes automatically
Tracks a screen event for each route change
Deduplicates rapid route changes
Cleans up on unmount

Screen Name Formatting

Route names and paths are automatically cleaned up:

Raw route	Tracked as
`/`	`home`
`/settings?tab=privacy`	`settings`
`/users/a1b2c3d4e5f6g7h8`	`users/detail`
`/shopping-list`	`shopping-list`

The SDK strips query parameters, fragments, and trailing slashes. Long alphanumeric IDs (20+ characters) and UUIDs are replaced with detail.

Expo Router

If you're using Expo Router, screen tracking works automatically when autoCapture is enabled (which is the default). No additional setup is needed.

For more control, you can track screens manually:

import { useScreen } from '@adopture/react-native/react';
import { usePathname } from 'expo-router';

function TrackScreens() {
  const screen = useScreen();
  const pathname = usePathname();

  useEffect(() => {
    screen(pathname);
  }, [pathname, screen]);

  return null;
}

Imperative API

If you're not using React hooks, create a navigation tracker directly:

import { Adopture } from '@adopture/react-native';

const navigationRef = createNavigationContainerRef();
const tracking = Adopture.createNavigationTracking(navigationRef);

// Start tracking
tracking.enable();

// Stop tracking
tracking.disable();

Disabling Auto Screen Tracking

If you want to track screens manually and disable automatic tracking:

<AdoptureProvider appKey="ak_..." options={{ autoCapture: false }}>

Then call Adopture.screen() or use the useScreen() hook wherever needed.

React Navigation

Screen Name Formatting

Expo Router

Imperative API

Disabling Auto Screen Tracking

On this page