2

Really been trying to understand this and have been struggling in regards to React-Navigation with TypeScript (totally new to TypeScript as well)

I hope someone can help with my understanding while using code as well as I have spend hours while still being lost.

My Navigation currently looks like this:

Stack (Root) -> Drawer (for side menu) -> Tab (for bottom navigation) -> Stack (Main landing page)

When I try to navigate from one screen to another from the main landing page I am getting an error of: Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: HomeScreenNavigationProp

Below this I will post my type file. From my understanding so far, each screen needs all the props coming from the parent. With navigation that means a screen would need a Stack property -> moving up to the tab properties and lastly -> drawer properties if we are trying to navigate to other locations within the project as well.

I hope I can get some help in my understanding. Thanks

If more info is required on my end please feel free to ask.

<Pressable onPress={() => navigation.navigate("Saved")}>

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

export type RootStackParamList = {
  Root: NavigatorScreenParams<RootTabParamList> | undefined;
  Modal: undefined;
  NotFound: undefined;
};

export type LandingStackParamList = {
  Home: HomeScreenNavigationProp;
  Saved: HomeScreenNavigationProp;
};

export type RootDrawerParamList = {
  RootDrawer: DrawerScreenProps<LandingStackParamList>;
};

export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, Screen>;

export type RootTabParamList = {
  TabOne: undefined;
  TabTwo: undefined;
  TabThree: undefined;
};

export type HomeScreenNavigationProp = CompositeScreenProps<
  NativeStackScreenProps<LandingStackParamList, "Saved">,
  CompositeScreenProps<
    DrawerScreenProps<RootDrawerParamList, "RootDrawer">,
    BottomTabScreenProps<RootTabParamList>
  >
>;

export type RootTabScreenProps<Screen extends keyof RootTabParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<RootTabParamList, Screen>,
    NativeStackScreenProps<RootStackParamList>
  >;
Jake
  • 462
  • 1
  • 5
  • 13

0 Answers0