Problem in Type checking screens, when using variable to address screen name

Current Behavior

I have created a variable to store screen name, and I want to use this variable everywhere when denoting this screen

export const NAVIGATION_TO_X_SCREEN = 'XScreen;

I’m using this variable in StackNavigation

type StackParamList = {
  [NAVIGATION_TO_X_SCREEN]: { name: string; };
const Stack = createStackNavigator<StackParamList>();

And I’m trying to type check my XScreen

interface Props {
  route: RouteProp<StackParamList, NAVIGATION_TO_X_SCREEN>; // <========== This is the problem

const XScreen = ({
  route: {
    params: { name, extraKey },
}: Props) => {}

But I’m not getting type check in screen when I use NAVIGATION_TO_X_SCREEN in RouteProp second variable in <> this

Screenshot from 2020-12-20 16-50-33

When I’m using this, then I am getting correct type check

interface Props {
  route: RouteProp<StackParamList, 'XScreen`>; // <========== Now Working fine
 // But I don't want to do this, I want to use the variable

Expected Behavior

TypeScript should have warned there is no key named extraKey inside params for XScreen, but instead I’m getting this

How to reproduce

If you want I can provide a workable code snippet

Your Environment

software version
Android 10
@react-navigation/native ^5.8.10
@react-navigation/stack ^5.12.8
react-native-gesture-handler ^1.9.0
react-native-safe-area-context ^3.1.9
react-native-screens ^2.15.0
react-native 0.63.3
node v10.19.0
yarn 1.22.4

1 possible answer(s) on “Problem in Type checking screens, when using variable to address screen name

  1. type StackParamList = {
      [NAV_SCREENS.NAVIGATION_TO_X_SCREEN]: { name: string; };

    In that type you declare that you will always provide an object with the property ‘name’ as the second argument to navigate(). So either change the type to (not tested):

    type StackParamList = {
      [NAV_SCREENS.NAVIGATION_TO_X_SCREEN]: { name: string; } | undefined;

    Or just include the name parameter:

    navigation.navigate(NAV_SCREENS.NAVIGATION_TO_X_SCREEN, { name: 'abc' })