react-navigation 5.x: TS2345: Argument of type ' ... ' is not assignable to parameter of type '... '

Question

I have migrated from react-navigation 4.x to 5.x. Since I am using typescript, I am trying to add the types. I should mention that the functionality works perfectly fine. However, I am getting this typescript error:

TS2345: Argument of type '["PaperPlaneDetails", { paperPlane: PaperPlaneInterface; returnRoute: string; }]' is not assignable to parameter of type '["PaperPlaneDetails"] | ["PaperPlaneDetails", undefined]'.   Type '["PaperPlaneDetails", { paperPlane: PaperPlaneInterface; returnRoute: string; }]' is not assignable to type '["PaperPlaneDetails", undefined]'.     Type '{ paperPlane: PaperPlaneInterface; returnRoute: string; }' is not assignable to type 'undefined'.

//OpenPaperPlaneModal.tsx located in ReceivePaperPlaneScreen.tsx

type AppStackParamList = {
  EditProfile: undefined;
  Introduction: undefined;
  PaperPlaneDetails: undefined;
  Logout: undefined;
  DebugScreen: undefined;
  PaperPlane: undefined;
  MyProfileScreen: undefined;
  FollowersScreen: undefined;
  FollowingScreen: undefined;
  UsersProfileScreen: undefined;
  SettingsScreen: undefined;
  CommentsScreen: undefined;
};

type PaperPlaneBottomTabNavigatorParamList = {
  TakePaperPlaneScreen: undefined;
  ReceivePaperPlaneScreen: undefined;
  NotificationScreen: undefined;
};

type OpenPaperPlaneModalNavigationProp = CompositeNavigationProp<
  BottomTabNavigationProp<
    PaperPlaneBottomTabNavigatorParamList,
    'ReceivePaperPlaneScreen'
  >,
  StackNavigationProp<AppStackParamList>
>;

export default function OpenPaperPlaneModal(props) {
  const navigation = useNavigation<OpenPaperPlaneModalNavigationProp>();
  navigation.navigate('PaperPlaneDetails', {
    paperPlane: props.paperPlane,
    returnRoute: 'ReceivePaperPlaneScreen',
  });
}

    "typescript": '3.8.3'
    "@react-navigation/bottom-tabs": "^5.3.1",
    "@react-navigation/native": "^5.2.1",
    "@react-navigation/stack": "^5.2.16",

To be honest, not sure if my config is correct. Should I mention the params I pass to each screen? (the ones I access using `route.params`). Or only `initialParams ` must be mentioned? — Kasra, May 17 '20 at 09:38
I think u have a syntax problem. U shouldn’t be able to call a function like `navigate(args: “something”)` unless this is a new TS feature i’m not aware of. i’d remove `args:` and try again. — Amiratak88, May 17 '20 at 15:53
@Amiratak88 Functionality works fine and there is no syntax error — Kasra, May 18 '20 at 09:41

score 0 · Answer 1 · answered Dec 09 '20 at 10:58

0

@kasra I was able to fix my issue. Make sure you don't have have any screens with the same name in both the routes, and paramList.

answered Dec 09 '20 at 10:58

Graeme Paul

1,143
1
16
30

react-navigation 5.x: TS2345: Argument of type ' ... ' is not assignable to parameter of type '... '

1 Answers1