I'm trying to properly type the following navigator. I have one successfully setup when it had a root StackNavigator, but I'm running into troubles when it has a BottomTabNavigator for the root. The intellisense for the types is not correct.
When I use navigator.navigate('...') // The only suggestion is 'Home', but they should be 'HomeTab' and 'MapTab'.
Any suggestions where I went wrong?
// Navigatorimport React from 'react';import { NavigationContainer } from '@react-navigation/native';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { createNativeStackNavigator } from '@react-navigation/native-stack';import HomeScreen from '@/scenes/Home/HomeScreen';import MappingScreen from '@/scenes/Mapping/MappingScreen';import type { TabParamList, HomeStackParamList, MapStackParamList,} from './types';const Tab = createBottomTabNavigator<TabParamList>();const HomeStackNavigator = createNativeStackNavigator<HomeStackParamList>();const MapStackNavigator = createNativeStackNavigator<MapStackParamList>();const HomeStack = () => (<HomeStackNavigator.Navigator><HomeStackNavigator.Screen name="Home" component={HomeScreen} /></HomeStackNavigator.Navigator>);const MapStack = () => (<MapStackNavigator.Navigator><MapStackNavigator.Screen name="Map" component={MappingScreen} /></MapStackNavigator.Navigator>);export default () => { return (<NavigationContainer><Tab.Navigator screenOptions={{ headerShown: false }}><Tab.Screen name="HomeTab" component={HomeStack} /><Tab.Screen name="MapTab" component={MapStack} /></Tab.Navigator></NavigationContainer> );};
// Typesimport type { NavigatorScreenParams,} from '@react-navigation/native';import type { NativeStackScreenProps } from '@react-navigation/native-stack';import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs';export type RootTabParamList = { Home: NavigatorScreenParams<TabParamList>;};export type RootTabScreenProps<T extends keyof TabParamList> = BottomTabScreenProps<TabParamList, T>;export type TabParamList = { HomeTab: NativeStackScreenProps<HomeStackParamList>; MapTab: NativeStackScreenProps<MapStackParamList>;};export type HomeStackParamList = { Home: undefined;};export type MapStackParamList = { Map: undefined;};declare global { namespace ReactNavigation { interface RootParamList extends RootTabParamList {} }}