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