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 |