I've been looking at the documentation for type checking navigation screen props, but can't seem to figure out how to write my types.ts file given my nested navigation structure (shown below). Any help would be much appreciated.
Navigation structure:
- Root Stack
- Login Screen
- NotFound Screen
- Main Stack
- Library Tab
- My Shows
- Friend Details
- Show Details
- Explore Tab
- Search
- Friend Details
- Show Details
- Friends Tab
- Friends
- Friend Details
- Show Details
- Library Tab
My navigation file:
export default function Navigation() { return (<NavigationContainer> <RootNavigator /></NavigationContainer> );}const RootStack = createNativeStackNavigator();function RootNavigator() { return (<RootStack.Navigator><Stack.Screen name="Login" component={Login} /> <RootStack.Screen name="Main" component={BottomTabNavigator} /><Stack.Screen name="NotFound" component={NotFound} /></RootStack.Navigator> );}const BottomTab = createBottomTabNavigator();function BottomTabNavigator() { return (<BottomTab.Navigator><BottomTab.Screen name="LibraryTab" component={LibraryStackScreen} /><BottomTab.Screen name="ExploreTab" component={ExploreStackScreen} /><BottomTab.Screen name="FriendsTab" component={FriendsStackScreen} /></BottomTab.Navigator> );}const LibraryStack = createNativeStackNavigator();function LibraryStackScreen() { return (<LibraryStack.Navigator><LibraryStack.Screen name="My Shows" component={MyShows} /><LibraryStack.Screen name="Friend Details" component={FriendDetails} /><LibraryStack.Screen name="Show Details" component={ShowDetails} /></LibraryStack.Navigator> );}const ExploreStack = createNativeStackNavigator();function ExploreStackScreen() { return (<ExploreStack.Navigator><ExploreStack.Screen name="Search" component={Search} /><ExploreStack.Screen name="Friend Details" component={FriendDetails} /><ExploreStack.Screen name="Show Details" component={ShowDetails} /></ExploreStack.Navigator> );}const FriendsStack = createNativeStackNavigator();function FriendsStackScreen() { return (<FriendsStack.Navigator><FriendsStack.Screen name="Friends" component={Friends} /><FriendsStack.Screen name="Friend Details" component={FriendDetails} /><FriendsStack.Screen name="Show Details" component={ShowDetails} /></FriendsStack.Navigator> );}
For simplicity, just assume that if a component isn't shown above, it would look something like this:
import { LibraryTabScreenProps } from "../navigation/types";const MyShows = ({ navigation }: LibraryTabScreenProps<"MyShows">["navigation"]) => { //returns some JSX and makes use of navigation prop};export default MyShows;
My current types.ts file (which I need help with):
import type { BottomTabScreenProps } from "@react-navigation/bottom-tabs";import type { CompositeScreenProps, NavigatorScreenParams } from "@react-navigation/native";import { NativeStackScreenProps } from "@react-navigation/native-stack";declare global { namespace ReactNavigation { interface RootParamList extends RootStackParamList {} }}export type RootStackParamList = { Main: NavigatorScreenParams<MainStackParamList>; Login: undefined; NotFound: undefined;};export type MainStackParamList = { LibraryTab: NavigatorScreenParams<LibraryTabParamList>; ExploreTab: NavigatorScreenParams<ExploreTabParamList>; FriendsTab: NavigatorScreenParams<FriendsTabParamList>;};export type RootStackScreenProps<T extends keyof RootStackParamList> = NativeStackScreenProps<RootStackParamList, T>;export type MainStackScreenProps<T extends keyof MainStackParamList> = CompositeScreenProps< NativeStackScreenProps<MainStackParamList, T>, RootStackScreenProps<keyof RootStackParamList>>;export type LibraryTabScreenProps<T extends keyof LibraryTabParamList> = CompositeScreenProps< BottomTabScreenProps<LibraryTabParamList, T>, CompositeScreenProps< MainStackScreenProps<keyof MainStackParamList>, RootStackScreenProps<keyof RootStackParamList>>>;//same logic would apply to ExploreTabScreenProps and FriendsTabScreenPropsexport type LibraryTabParamList = { MyShows: undefined; FriendDetails: undefined; ShowDetails: undefined;};export type ExploreTabParamList = { Search: undefined; FriendDetails: undefined; ShowDetails: undefined;};export type FriendsTabParamList = { Friends: undefined; FriendDetails: undefined; ShowDetails: undefined;};