react-navigation / react-navigation/react-navigation
navigation.navigate() not enforcing params in TypeScript
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
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 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the navigate method typing shown in the issue and reproduce it using the RootStackParamList from rootStackNavigator.tsx and the Login example in screens/Login/index.ts. Verify how the conditional check handles WebView's { url: string } params. Done means navigation.navigate('WebView') is rejected unless the required url object is supplied.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- developer-experience, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100