I’m using React Navigation and would like to achieve type safety for navigating between screens.
I have multiple tabs in a tab navigator, each tab is a stack navigator. Each stack navigator may share common screens such as Profile
or Post
. I want to navigate between these two screens, but stay in the appropriate tab.
My current code, which works, but is not type safe, is as follows:
// Create two stack navigator types, representing the two tabs of my tab navigator
export type SearchStackParamList = {
PostScreen: PostScreenParams;
ProfileScreen: ProfileScreenParams;
};
export type NewsfeedStackParamList = {
PostScreen: PostScreenParams;
ProfileScreen: ProfileScreenParams;
};
// Create my tab navigator
export type RootTabParamList = {
NewsfeedStainck: NavigatorScreenParams<NewsfeedStackParamList>;
SearchStack: NavigatorScreenParams<SearchStackParamList>;
};
const Tab = createBottomTabNavigator<RootTabParamList>();
Now I can navigate from one screen to another with navigation.navigate('Post')
. The desired behavior of staying within the current stack navigator is also achieved.
However, I’ve been unable to figure out how to achieve type safety for this. How can I do that?