# Mobile Navigation

> React Navigation patterns for mobile apps including stack, tab, drawer navigators, deep linking, and typed navigation with TypeScript. Use when building navigation structure, handling deep links, or implementing authentication flows.

- Skill: `vanman2024/mobile-navigation` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add vanman2024/mobile-navigation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vanman2024/mobile-navigation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: vanman2024 (https://skillmd.com/u/vanman2024)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/vanman2024/mobile-navigation

---


# Mobile Navigation

Comprehensive skill for implementing navigation in React Native/Expo apps.

## Overview

React Navigation provides flexible navigation for mobile:

- Stack, Tab, and Drawer navigators
- Deep linking and universal links
- Type-safe navigation with TypeScript
- Authentication flow handling

## Use When

This skill is automatically invoked when:

- Setting up app navigation structure
- Implementing authentication flows
- Configuring deep linking
- Building complex nested navigators

## Available Scripts

| Script                        | Description                          |
| ----------------------------- | ------------------------------------ |
| `scripts/setup-navigation.sh` | Install navigation dependencies      |
| `scripts/generate-types.sh`   | Generate TypeScript navigation types |

## Available Templates

| Template                        | Description                 |
| ------------------------------- | --------------------------- |
| `templates/root-layout.tsx`     | Root layout with auth flow  |
| `templates/tabs-layout.tsx`     | Tab navigator layout        |
| `templates/navigation-types.ts` | TypeScript type definitions |
| `templates/linking-config.ts`   | Deep linking configuration  |

## Navigation Structure

```
app/
├── _layout.tsx           # Root (auth check)
├── (tabs)/
│   ├── _layout.tsx       # Tab navigator
│   ├── index.tsx         # Home tab
│   └── profile.tsx       # Profile tab
├── auth/
│   ├── login.tsx
│   └── register.tsx
└── [id].tsx              # Dynamic route
```

## Best Practices

1. Use expo-router for file-based routing
2. Keep navigation types in dedicated file
3. Implement auth at root level
4. Configure deep links for both schemes