Navigation

React Navigation Setup

Install @react-navigation/native with native-stack, bottom-tabs, or drawer packages. Wrap app in NavigationContainer.

Screens are components registered on navigators. navigate pushes routes; goBack pops stacks. Pass params as second argument to navigate.

TypeScript param lists document route names and payload shapes for autocomplete.

• Install react-native-screens and safe-area-context peers
• Hide headers with options={{ headerShown: false }}
• Reset navigation stacks after login/logout flows

const Stack = createNativeStackNavigator();

export function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Tabs and Drawers

Bottom tab navigators suit primary app sections. Material top tabs organize content within a screen.

Drawer navigators expose side menus—common for settings and secondary destinations. Combine navigators by nesting stack inside tabs.

Lazy load tab screens to defer mounting heavy tabs until first visit when performance requires.

• Icon libraries like @expo/vector-icons pair well with tabs
• Persist tab state with unmountOnBlur options consciously
• Use custom tab bar components for branded UX

Deep Linking

Linking configuration maps URL paths to screens for universal links and app links. Configure associated domains on iOS and intent filters on Android.

Handle cold start links in NavigationContainer linking prop and getInitialURL. Pass query params into screen route params.

Test deep links on physical devices—simulators miss some OS integration edge cases.

• Document URL schemes for QA and marketing teams
• Fallback to home when params invalid
• Analytics on link opens to measure campaigns

const linking = {
  prefixes: ['myapp://', 'https://example.com'],
  config: { screens: { Details: 'item/:id' } },
};