# React Native Navigation V6

> Configure React Navigation 6+ stacks, tabs, and deep linking for React Native. Use when implementing React Navigation stacks, tabs, or deep linking in React Native.

- Skill: `hoangnguyen0403/react-native-navigation-v6` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add hoangnguyen0403/react-native-navigation-v6`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hoangnguyen0403/react-native-navigation-v6/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: HoangNguyen0403 (https://skillmd.com/u/hoangnguyen0403)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/hoangnguyen0403/react-native-navigation-v6

---

# React Native Navigation

## **Priority: P0 (CRITICAL)**

Use **React Navigation** for stack/tab/drawer setup and auth-flow structure. For **new Expo projects**, prefer **Expo Router** instead (file-based, built on React Navigation) — see [react-native-architecture](../react-native-architecture/SKILL.md) for the decision criteria. Deep-linking config detail lives in [react-native-navigation](../react-native-navigation/SKILL.md).

## Build Type-Safe Navigation Stacks

- **Architecture**: Use **Native Stack (`createNativeStackNavigator`)** by default for native performance. Only use **JS Stack** for custom transitions.
- **Typing**: Use **`NativeStackScreenProps`** for screens. **`CompositeScreenProps`** for nested Navigators.

See [deep linking reference](references/deep-linking.md) for typed param lists and stack navigator setup.

## Configure Deep Linking

- **Deep Linking**: Use **prefix arrays** in `linking` config. Validate **Universal Links (iOS)** and **App Links (Android)**. Handle **unrecognized paths** with 404 screen.

See [deep linking reference](references/deep-linking.md) for linking configuration with prefix arrays and fallback screens.

## Implement Auth Flow

- **Auth/App split**: Conditionally render Auth Stack vs App Stack in `NavigationContainer`. **Clear navigation state** after logout.
- **Logic**: Use **Tab Navigators** for bottom navigation. **Drawer** for side menus.
- **Transitions**: Native-like feel via **`presentation: 'modal'`**. Custom `headerLeft/Right` in `options`.
- **Data Flow**: Use `route.params` for small IDs only. Use **global state (Zustand/RTK)** for complex data objects.

## Anti-Patterns

- **No String Literals**: Use typed params.
- **No Navigation in Business Logic**: Pass callbacks from screens.
- **No Deep Nesting**: Max 2-3 levels of navigators.

## References

See [references/deep-linking.md](references/deep-linking.md) for typed param lists, Universal Links, Nested Navigators, and State Persistence.