How do you implement fully type-safe navigation in React Navigation with TypeScript?

Short answer

Define RootStackParamList to specify every route name and the accepted parameter types, then use it with NativeStackScreenProps or the useNavigation hook.

Explanation

This pattern prevents misspelled route names and missing or invalid parameters between screens. A global type augmentation of ReactNavigation.RootParamList enables automatic navigation autocomplete throughout the app.

Code example

export type RootStackParamList = {
  Feed: undefined;
  Profile: { userId: string; source?: string };
};

// Inside the screen component:
import type { NativeStackScreenProps } from '@react-navigation/native-stack';

type Props = NativeStackScreenProps<RootStackParamList, 'Profile'>;

function ProfileScreen({ route, navigation }: Props) {
  const { userId } = route.params; // Strict parameter-type validation
  return <Text>User ID: {userId}</Text>;
}

Common mistakes

• Using useNavigation<any>(), which removes all TypeScript benefits and allows undetected runtime errors.

Follow-up questions

• What is the Expo Router architecture, and how does file-based routing differ from traditional React Navigation?
• What is the key difference between Native Stack Navigator and Stack Navigator in React Navigation?

Sources

• React Navigation docs — Type checking with TypeScript