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>
>;