Type-safe navigation with TypeScript
typing navigation.
define a ParamList mapping screen names to param types, type Screen via NativeStackScreenProps, and type useNavigation with the navigation prop generic so route names and params autocomplete.
What's really being asked
Whether you can wire React Navigation's generics so that screen names, params, and the navigation object are all statically typed, catching wrong route names or missing params at compile time.
The full answer
Start by defining a ParamList type that maps each screen name to its params, using undefined for screens without params, for example Home: undefined and Post: { id: string }. Pass this ParamList to createNativeStackNavigator so the navigator's Screen names are checked. For each screen, type its props with NativeStackScreenProps so both route.params and the navigation prop are typed. To get a typed useNavigation in components that do not receive props, pass the navigation prop type, such as NativeStackNavigationProp of the ParamList, as the hook's generic, giving autocomplete for navigate names and enforcing the right param object. For convenience you can register a RootParamList by extending the global ReactNavigation namespace so the default useNavigation is typed app-wide without repeating the generic.
The mistakes people make
Casting navigation or route to any, which silences errors but removes all guarantees. Defining the ParamList but never passing it to the navigator or hooks, so nothing is actually checked. Using string literals for params with no shape type. Forgetting undefined for param-less screens, which forces callers to pass an empty object.
What usually comes next
How do you type nested navigators and composite navigation props? How does the global RootParamList registration differ from per-call generics? How do you type useRoute for a specific screen?
A concrete example
You declare type RootStackParamList = { Home: undefined; Post: { id: string } }. The navigator is createNativeStackNavigator with that generic. A reusable PostLink calls useNavigation typed as NativeStackNavigationProp of RootStackParamList; when it calls navigation.navigate('Post', { id }), TypeScript autocompletes 'Post' and errors if you forget id or pass a number. Misspelling 'Postt' or calling navigate('Home', {}) is rejected at compile time.
Interview question
What makes navigation.navigate('Post', { id }) statically checked for correct route name and params?
- a.Storing route names in a runtime enum without type annotations
- b.Casting the navigation object to any before calling navigate
- c.A ParamList passed to the navigator and to the typed useNavigation genericCorrect
- d.Wrapping every navigate call in a try/catch block
Why? this is the answer
The ParamList maps names to param shapes; supplying it to the navigator and the useNavigation generic lets TypeScript autocomplete names and enforce params. Casting to any discards all of that.
Just read this? Test yourself on what you have been reading.
Read the original → reactnavigation.org
- #react-native
- #react-navigation
- #typescript
- #type-safety
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles