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