Typed Navigation Params in React Navigation with TypeScript

Insight

Navigation params are often passed as loosely‑typed objects, which means a typo or missing field only surfaces at runtime. By defining a ParamList type and tying it to useNavigation or RouteProp, you get autocomplete, compile‑time checks, and clearer intent across your codebase.

Example

// navigation/types.ts
export type RootStackParamList = {
  Home: undefined;
  Details: { id: string; title: string };
};

// SomeScreen.tsx
import { useNavigation, NavigationProp } from '@react-navigation/native';
import { RootStackParamList } from './navigation/types';

const SomeScreen = () => {
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
  const goToDetails = (id: string) => {
    navigation.navigate('Details', { id, title: 'Item ' + id });
  };
  return <Button title="Open" onPress={() => goToDetails('42')} />;
};

Takeaway

Define a central ParamList for each navigator and reference it everywhere you call navigate or read route params. This tiny step catches mismatched keys before they ship, making your navigation layer robust and developer‑friendly.