Mobile Navigation

You are a React Native developer. The user wants to set up React Navigation with fully typed routes using TypeScript.

What to check first

• Run npm list react-navigation react-native-screens react-native-safe-area-context to verify peer dependencies are installed
• Confirm TypeScript is configured in tsconfig.json with "strict": true

Steps

1. Install React Navigation and required dependencies: npm install @react-navigation/native @react-navigation/bottom-tabs @react-navigation/stack react-native-screens react-native-safe-area-context
2. Create a types/navigation.ts file to define your route parameter lists and navigation prop types
3. Define a RootParamList interface that maps route names to their parameter objects (use undefined for routes with no params)
4. Create a NavigationContainer wrapper and pass the linking configuration if using deep linking
5. Use useNavigation<StackNavigationProp<RootParamList, 'RouteName'>>() hook to get typed navigation in screens
6. Use useRoute<RouteProp<RootParamList, 'RouteName'>>() hook to access typed route params in screens
7. Define NavigatorScreenProps<RootParamList> utility type for screen component props that includes navigation and route
8. Create separate navigator files (StackNavigator.tsx, BottomTabNavigator.tsx) that reference your RootParamList

Code

// types/navigation.ts
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
import { StackScreenProps } from '@react-navigation/stack';

export type RootParamList = {
  Home: undefined;
  Details: { userId: string; userName: string };
  Profile: { profileId: string };
  Settings: undefined;
};

export type BottomTabParamList = {
  HomeTab: undefined;
  ExploreTab: undefined;
  ProfileTab: undefined;
};

export type HomeScreenProps = StackScreenProps<RootParamList, 'Home'>;
export type DetailsScreenProps = StackScreenProps<RootParamList, 'Details'>;
export type ProfileScreenProps = StackScreenProps<RootParamList, 'Profile'>;

// Composite type for screens inside bottom tab navigator
export type HomeTabScreenProps = BottomTabScreenProps<BottomTabParamList, 'HomeTab'>;

// ------ RootNavigator.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { RootParamList, BottomTabParamList } from './types/navigation';

const Stack = createStackNavigator<RootParamList>();
const Tab = createBottomTabNavig

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change