Navigation Tracking

The SDK includes a built-in NavigationTracker for automatic screen tracking with React Navigation v5+.

Setup

import { useRef } from 'react'
import { NavigationContainer, NavigationContainerRef } from '@react-navigation/native'
import { NavigationTracker } from '@attributehq/react-native-sdk'
 
export default function App() {
  const navigationRef = useRef<NavigationContainerRef<any>>(null)
 
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        NavigationTracker.enable(navigationRef.current!)
      }}
    >
      <YourNavigator />
    </NavigationContainer>
  )
}

How It Works

When enabled, the NavigationTracker:

1. Reads the initial route name from navigationRef.getCurrentRoute()
2. Subscribes to navigation state change events
3. On each state change, resolves the active route name (handles nested navigators)
4. If the route name changed, tracks a screen_view event:

{
  "event_name": "screen_view",
  "properties": {
    "screen_name": "ProfileScreen"
  }
}

Nested Navigators

The tracker handles nested navigation states (Tab Navigator inside Stack Navigator, etc.). It recursively finds the active route from the deepest nested state.

For example, with this navigation structure:

Stack (index: 0)
  └── Tab (index: 1)
      ├── Home
      └── Settings ← active

The tracked screen name would be "Settings".

Disable Tracking

NavigationTracker.disable()

Check Status

const isTracking = NavigationTracker.isEnabled()

Deduplication

The tracker keeps track of the current screen name and only fires screen_view events when the route actually changes. Navigating to the same screen (e.g., pulling to refresh) does not trigger a duplicate event.