Skip to content

navigation.navigate() not enforcing params in TypeScript #7936

@oli-laban

Description

@oli-laban

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions