---
description: Mobile Navigation
alwaysApply: false
---

# Mobile Navigation

Best practices for navigation in mobile applications.

## Navigation Patterns

- **Stack**: Hierarchical content flow (`createNativeStackNavigator`)
- **Tab**: Top-level app sections (`createBottomTabNavigator`)
- **Drawer**: App-wide menu access (`createDrawerNavigator`)
- Nest navigators: Tabs contain Stacks; Drawer wraps Tabs

## Type-Safe Navigation

```tsx
type RootStackParamList = {
  Home: undefined;
  Details: { id: string };
  Profile: { userId: string; initialTab?: string };
};

const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
navigation.navigate('Details', { id: '123' });  // ✓ type-checked
```

## Deep Linking

```tsx
const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: { Home: '', Details: 'details/:id', Profile: 'user/:userId' },
  },
};

// Wrap navigator
<NavigationContainer linking={linking}>
  <AppNavigator />
</NavigationContainer>
```

## Authentication Flow

```tsx
function RootNavigator() {
  const { user, isLoading } = useAuth();
  if (isLoading) return <SplashScreen />;
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {user ? (
        <Stack.Screen name="Main" component={MainNavigator} />
      ) : (
        <Stack.Screen name="Auth" component={AuthNavigator} />
      )}
    </Stack.Navigator>
  );
}
```

## Best Practices

- Use `useNavigation()` hook instead of prop drilling
- Persist nav state via `onStateChange` + AsyncStorage for restore
- Handle Android back button via `BackHandler` or `beforeRemove` listener
- Guard unsaved changes with `beforeRemove` event and confirmation alert

## Anti-Patterns

- **Prop drilling navigation** — use hooks (`useNavigation`, `useRoute`)
- **Untyped route params** — always define `ParamList` types
- **Ignoring platform back behavior** — Android hardware back needs explicit handling