Repository navigation
navigation.navigate() not enforcing params in TypeScript #7936
Description
Current Behavior
I've followed the guide here to set up type checking, but navigation.navigate() isn't enforcing that the params are passed to the screen.
// rootStackNavigator.tsx
export type RootStackParamList = {
Login: undefined;
Leads: undefined;
WebView: { url: string };
};
...
// screens/Login/index.ts
interface Props {
navigation: StackNavigationProp<RootStackParamList, 'Login'>;
}
class Login extends Component<Props> {
...
}
Calling navigation.navigate('WebView') in the above component does not error.
Expected Behavior
navigation.navigate('WebView') should error if the param { url: 'something' } is not passed.
Typing for the navigate method:
navigate<RouteName extends keyof ParamList>(...args: ParamList[RouteName] extends undefined | any ? [RouteName] | [RouteName, ParamList[RouteName]] : [RouteName, ParamList[RouteName]]): void;
The ParamList[RouteName] extends undefined | any conditional check in the typing is obviously returning true and the type that is being enforced on the call is:
navigate<"WebView">(...args: ["WebView"] | ["WebView", {
url: string;
}]): void
I would expect the resulting type to be:
navigate<"WebView">(...args: ["WebView", {
url: string;
}]): void
Your Environment
| software | version |
|---|---|
| iOS or Android | iOS 13.3 |
| @react-navigation/native | 5.1.3 |
| @react-navigation/stack | 5.2.8 |
| react-native-gesture-handler | 1.6.1 |
| react-native-safe-area-context | 0.7.3 |
| react-native-screens | 2.4.0 |
| react-native | 0.61.5 |
| node | 12.12.0 |
| npm or yarn | yarn 1.19.1 |
| typescript | 3.8.3 |
Reacted by Olivier, Sebastian Trebunak, Michael Young, Marek Lisik , Saravanakumar, Vladimir Kurchatkin, Jayme Deffenbaugh, Richard Trembecký, Metehan Gülaç, Finnian Anderson and 8 more
Reacted by Sudiddo
Activity
Miyou commentedon Apr 15, 2020
I had the same issue. Solved it by changing the typing for the navigate method to:
navigate<RouteName extends keyof ParamList>(...args: ParamList[RouteName] & undefined extends never ? [RouteName, ParamList[RouteName]] : [RouteName] | [RouteName, ParamList[RouteName]]): void;I'm very new to typescript and I would have thought that simply removing the
| anyin the original typing would have worked, but it seems that for examplestring | undefineddoes not extend undefined for some reason.So the way I solved it was by doing an intersection with undefined and seeing if that extends never. If the type we intersect with undefined is not undefined or a union with undefined the result will be never. Since no type extends never except itself, this should work. It seems right to me, and some simple testing confirms it, but I'm still not 100% sure since I'm so new to Typescript. If someone can confirm that this is correct I'm happy to create a PR.
Miyou commentedon Apr 15, 2020
Ah, so apparently undefined extends a type which is a union with undefined. So a simpler solution is:
navigate<RouteName extends keyof ParamList>(...args: undefined extends ParamList[RouteName] ? [RouteName] | [RouteName, ParamList[RouteName]] : [RouteName, ParamList[RouteName]]): void;Again, it would be good if someone with more experience with Typescript could confirm that this is the right way to do it.
satya164 commentedon Apr 16, 2020
Duplicate of #6931
Miyou commentedon Apr 16, 2020
Sorry but it's not a duplicate. That issue refers to a problem with the other function overload of navigate. It would be great if you could confirm that my solution would be a good way to fix this issue. In that case I'd be happy to submit a PR.
[Wallet] Type safe navigate (#3880)
rtrembecky commentedon Jun 4, 2020
@Miyou maybe you have better chance of having this fixed by submitting a PR right away 😄 I'd like to see some movement here too 🙏
fix: catch missing params when they are required in navigate
fix: catch missing params when they are required in navigate (#8389)
Miyou commentedon Jun 3, 2021
@satya164 This can be closed now that @jeanregisser PR was merged
fix: catch missing params when they are required in navigate (#8389)
fix: catch missing params when they are required in navigate (#8389)
fix: catch missing params when they are required in navigate (#8389)
fix: catch missing params when they are required in navigate (#8389)
[Wallet] Type safe navigate (#3880)
fix: catch missing params when they are required in navigate (react-n…
[Wallet] Type safe navigate (#3880)
satya164 commentedon Oct 25, 2026
This should be fixed in fix: catch missing params when they are required in navigate (#8389) (available in @react-navigation/core@5.10.0). Please open a new issue if this is still happening
github-actions commentedon Oct 25, 2026
Hey @oli-laban! Thanks for opening the issue. It seems that the issue doesn't contain a link to a repro, or the provided repro is not valid (e.g. broken link, private repo, code doesn't run etc.).
The best way to get attention to your issue is to provide an easy way for a developer to reproduce the issue.
You can provide a repro using any of the following:
Try to keep the repro as small as possible by narrowing down the minimal amount of code needed to reproduce the issue. See "How to create a Minimal, Reproducible Example" for more information.
Don't:
You can edit your original issue to include a link to the repro, or leave it as a comment. The issue will be closed automatically after a while if you don't provide a valid repro.
github-actions commentedon Oct 25, 2026
Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.