react-navigation / react-navigation/react-navigation

navigation.navigate() not enforcing params in TypeScript

Open
#7,936 6 comments 19 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug package:stack
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.