'React Navigation how to type TabNavigator with nested StackNavigators

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?

// Navigator
import 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>
  );
};
// Types
import 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 {}
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source