React Native Navigation Skill

Learn production-ready navigation patterns using React Navigation v6+ and Expo Router.

Prerequisites React Native basics (components, styling) TypeScript fundamentals Understanding of React context Learning Objectives

After completing this skill, you will be able to:

Set up React Navigation with TypeScript Implement Stack, Tab, and Drawer navigators Configure deep linking and universal links Handle authentication flows Pass params between screens type-safely Topics Covered 1. Installation npm install @react-navigation/native @react-navigation/native-stack npm install react-native-screens react-native-safe-area-context

For tabs

npm install @react-navigation/bottom-tabs

For drawers

npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

1. Stack Navigator import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = { Home: undefined; Details: { id: string }; };

const Stack = createNativeStackNavigator();

function RootNavigator() { return ( ); }

1. Tab Navigator import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MainTabs() { return ( ); }

1. Deep Linking const linking = { prefixes: ['myapp://', 'https://myapp.com'], config: { screens: { Home: 'home', Details: 'details/:id', }, }, };

{/ navigators /}

1. Type-Safe Navigation import { useNavigation } from '@react-navigation/native'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

type NavigationProp = NativeStackNavigationProp;

function HomeScreen() { const navigation = useNavigation();

return ( navigation.navigate('Details', { id: '123' })} /> ); }

Quick Start Example import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = { Home: undefined; Details: { id: string; title: string }; };

const Stack = createNativeStackNavigator();

export default function App() { return ( ); }

Common Errors & Solutions Error Cause Solution "Navigator not found" Missing NavigationContainer Wrap app in NavigationContainer Params undefined Type mismatch Check ParamList types Deep link not working Config mismatch Verify linking paths Validation Checklist Navigation works on both platforms Deep links open correct screens TypeScript catches param errors Auth flow protects routes Usage Skill("react-native-navigation")

Bonded Agent: 02-react-native-navigation