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
