I am trying to combine two navigation props But I am not sure how to do this. Earlier when I used to define only one route I used to do something like this.
export type MatrimonyStackRoutes = { Matrimony: undefined; GroomDetail: undefined; }; export type MatrimonyStackNavigationProps< T extends keyof MatrimonyStackRoutes> = { navigation: StackNavigationProp<MatrimonyStackRoutes, T>; route: RouteProp<MatrimonyStackRoutes, T>; };<Stack.Navigator><Stack.Screen name="Matrimony" component={MatrimonyTab} /><Stack.Screen name="GroomDetail" component={GroomDetail} /></Stack.Navigator>
And Inside component I used to declare like this
const Groom = ({ navigation }: MatrimonyStackNavigationProps<"Matrimony">) => { return ( ////////// );};
This works fine But Now I am in need to combine two routes stack and bottomTab props show that I can use in my component in similar way.I am not sure how to do that any help would be great.
Here Is my Complete Code of both Tab And stack navigation when it is not combined
export type MatrimonyTabRoutes = { Groom: undefined; Bride: undefined; Vendors: undefined; }; export type MatrimonyStackRoutes = { Matrimony: undefined; GroomDetail: undefined; }; export type MatrimonyStackNavigationProps< T extends keyof MatrimonyStackRoutes> = { navigation: StackNavigationProp<MatrimonyStackRoutes, T>; route: RouteProp<MatrimonyStackRoutes, T>; }; export type MatrimonyTabNavigationProps<T extends keyof MatrimonyTabRoutes> = { navigation: BottomTabNavigationProp<MatrimonyTabRoutes, T>; route: RouteProp<MatrimonyTabRoutes, T>; };const MatrimonyTab = ({}) => { const theme = useTheme(); return (<Tab.Navigator tabBarOptions={{ activeTintColor: theme.colors.primaryText, inactiveTintColor: theme.colors.grey, indicatorStyle: { backgroundColor: theme.colors.mainIconColor, }, }}><Tab.Screen name="Groom" component={Groom} /><Tab.Screen name="Bride" component={Bride} /><Tab.Screen name="Vendors" component={Vendors} /></Tab.Navigator> );};const MatrimonyStack = () => { return (<Stack.Navigator><Stack.Screen name="Matrimony" component={MatrimonyTab} /><Stack.Screen name="GroomDetail" component={GroomDetail} /></Stack.Navigator> );};