vanman2024 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
- Use expo-router for file-based routing
- Keep navigation types in dedicated file
- Implement auth at root level
- Configure deep links for both schemes