React Navigation v5, как перемещаться между вкладками с машинописью

Question

Вот мой навигатор. У меня есть нижняя вкладка с 3 стековыми навигаторами в качестве экранов «Домашняя страница», «Профиль» «Обнаружение» и основной root стековый навигатор с навигатором нижней вкладки и несколькими модальными экранами. Я не могу понять, как сделать проверку типов с помощью TypeScript прямо из руководства в документации. Может кто-нибудь объяснить мне, что я делаю не так. На данный момент, если я хочу перейти от вкладки Home к вкладке Profile, я могу видеть только «Home» и все модальные экраны и сам tabNavigator, но не вкладки моего tabNavigator:

мой код mainNavigator:

export type TabParamList = {
  Home: undefined;
  Discover: undefined;
  Profile: undefined;
}

export type MainStackParamList = {
  TabNavigator: undefined;
  ModalStreamsPlayer: { streamsQualitys: ParsedStream[], stream: Stream} | undefined;
  ModalWebBrowser: { url: string, title: string } | undefined;
  ModalVideoPlayer: { video: Video } | undefined;
}

export type HomeStackParamList = {
  Home: undefined;
}

export type DiscoverStackParamList = {
  Discover: undefined;
}

export type ProfileStackParamList = {
  Profile: undefined;
}

const Tab = createBottomTabNavigator<TabParamList>();
const RootStack = createStackNavigator<MainStackParamList>();
const HomeStack = createStackNavigator<HomeStackParamList>();
const DiscoverStack = createStackNavigator<DiscoverStackParamList>();
const ProfileStack = createStackNavigator<ProfileStackParamList>();

const screenOptions = ({ route }): StackNavigationOptions => {
  return {
    title: route.name,
    headerTitleStyle: {
      fontFamily: 'ProximaNova-Semibold',
      fontSize: 18,
      textTransform: 'uppercase',
      lineHeight: 22,
      color: '#D6FFFD'
    },
    headerStyle: {
      backgroundColor: '#133740',
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0
    },
    headerTintColor: '#D6FFFD',
    headerTitleAlign: 'center',
  }
}

const TabHomeStack = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name='Home'
        component={HomeScreen}
        options={screenOptions}
      />
    </HomeStack.Navigator>
  );
};

const TabDiscoverStack = () => {
  return (
    <DiscoverStack.Navigator>
      <DiscoverStack.Screen
        name='Discover'
        component={DiscoverScreen}
        options={screenOptions}
      />
    </DiscoverStack.Navigator>
  );
}

const TabProfileStack = () => {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen
        name='Profile'
        component={ProfileScreen}
        options={screenOptions}
      />
    </ProfileStack.Navigator>
  )
}

const TabNavigator = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        showLabel: false,
        // activeTintColor: '#2F80ED',
        // inactiveTintColor: '#999999',
        style: {
          backgroundColor: '#133740',
          height: Platform.OS === 'ios' ? 94 : 60,
          borderTopWidth: 0
        }
      }}>
      <Tab.Screen
        name='Home'
        component={TabHomeStack}
        options={{ tabBarIcon: ({color, focused, size}) => (
          <Image
          source={ focused ? images.tabBarIconHomeActive : images.tabBarIconHomeNormal } 
          />
        )}}
      />
      <Tab.Screen
        name='Discover'
        component={TabDiscoverStack}
        options={{ tabBarIcon: ({color, focused, size}) => (
          <Image
          source={ focused ? images.tabBarIconDiscoverActive : images.tabBarIconDiscoverNormal } 
          />
        )}}
      />
      <Tab.Screen
        name='Profile'
        component={TabProfileStack}
        options={{ tabBarIcon: ({color, focused, size}) => (
          <Image
          source={ focused ? images.tabBarIconProfileActive : images.tabBarIconProfileNormal } 
          />
        )}}
      />
    </Tab.Navigator>
  );
};

const RootStackNavigator = () => {
  return (
    <RootStack.Navigator mode='modal'>
      <RootStack.Screen
        name='TabNavigator'
        component={TabNavigator}
        options={{ headerShown: false }}
      />
      <RootStack.Screen
        name='ModalStreamsPlayer'
        component={StreamsPlayer}
        options={{ headerShown: false }}
      />
      <RootStack.Screen
      name='ModalWebBrowser'
      component={WebScreen}
      options={{ headerShown: false }}
      />
      <RootStack.Screen
        name='ModalVideoPlayer'
        component={YoutubePlayer}
        options={{ headerShown: false }}
      />
    </RootStack.Navigator>
  );
}

export default RootStackNavigator;

Главный экран на вкладке Главная:

type HomeScreenNavigationProp = CompositeNavigationProp<
  BottomTabNavigationProp<HomeStackParamList, 'Home'>,
  StackNavigationProp<MainStackParamList>
>;

type HomeScreenRouteProp = RouteProp<
  HomeStackParamList, 'Home'
>;

export type HomeProps = {
  navigation: HomeScreenNavigationProp;
  route: HomeScreenRouteProp;
};

export default class HomeScreen extends React.Component<HomeProps> {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView style={styles.scrollView}>
          <View style={{ paddingBottom: 24 }}>
            <StreamsScreen navigation={this.props.navigation} />
            <View style={styles.separator}></View>
            <NewsScreen navigation={this.props.navigation} />
            <View style={styles.separator}></View>
            <VideosScreen navigation={this.props.navigation} />
            <View style={styles.separator}></View>
          </View>
        </ScrollView>
      </View>
    );
  }
}