Posted in Uncategorized

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

   March 23, 2021  1 Comment on 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>();
//...
<Stack.Navigator>
    <Stack.Screen
      name={NAVIGATION_TO_X_SCREEN}
      component={XScreen}
    />
</Stack.Navigator>

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
Full dicussion on github.com

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' })