Function OptimizationNavigationContainer

OptimizationNavigationContainer(
props: OptimizationNavigationContainerProps,
): ReactNode

Wraps React Navigation's NavigationContainer to automatically track screen views when the active route changes.

Parameters

props: OptimizationNavigationContainerProps
Component props

Returns ReactNode

The rendered children with tracking callbacks injected

Remarks

Must be used within an OptimizationProvider. Uses a render prop pattern so that navigation props (ref, onReady, onStateChange) can be spread onto the NavigationContainer without requiring a direct dependency on @react-navigation/native.

Example

import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { OptimizationNavigationContainer, OptimizationProvider } from '@contentful/optimization-react-native'

const Stack = createNativeStackNavigator()

function App() {
  return (
    <OptimizationProvider instance={optimization}>
      <OptimizationNavigationContainer>
        {(navigationProps) => (
          <NavigationContainer {...navigationProps}>
            <Stack.Navigator>
              <Stack.Screen name="Home" component={HomeScreen} />
              <Stack.Screen name="Details" component={DetailsScreen} />
            </Stack.Navigator>
          </NavigationContainer>
        )}
      </OptimizationNavigationContainer>
    </OptimizationProvider>
  )
}