I’m working on a React Native project with TypeScript, and I’m encountering an issue while setting up a BottomTabNavigator using React Navigation. Here is the relevant part of my code:

import { createBottomTabNavigator, type BottomTabScreenProps } from '@react-navigation/bottom-tabs';
import { StackScreenProps } from '@react-navigation/stack';

import { RootStackParamList } from '.';
import { HeaderButton } from '../components/HeaderButton';
import { TabBarIcon } from '../components/TabBarIcon';
import Two from '../screens/two';
import HomeScreen from '../screens/home';

const Tab = createBottomTabNavigator();

export type TabParamList = {
  TabNavigator: undefined;
  Home: undefined;
  Two: undefined;
};

type Props = BottomTabScreenProps<TabParamList, 'TabNavigator'>;

export default function TabLayout({ navigation }: Props) {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: 'black',
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}    //error on this line
        options={{
          headerShown: false,
          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
          headerRight: () => <HeaderButton onPress={() => navigation.navigate('Modal')} />,
        }}
      />
      <Tab.Screen
        name="Two"
        component={Two}
        options={{
          title: 'Agendamentos',
          tabBarIcon: ({ color }) => <TabBarIcon name="folder" color={color} />,
        }}
      />
    </Tab.Navigator>
  );
}

The HomeScreen component is defined as follows:

import { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
import type { TabParamList } from '../navigation';

type HomeScreenProps = BottomTabScreenProps<TabParamList, 'Home'>;

export default function HomeScreen({ route }: HomeScreenProps) {
  const [bookings, setBookings] = useState([]);

  useEffect(() => {
    const fetchBooking = async () => {
      try {
        const response = await fetch('http://example.com/booking/');
        const data = await response.json();
        setBookings(data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchBooking();
  }, []);

  return (
    <SafeAreaView style={styles.mainContainer}>
      <View>
        <Text>{route.name}</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: 'white',
  },
});

However, I get the following TypeScript error when using the HomeScreen component in the Tab.Navigator:

Type '({ route }: HomeScreenProps) => Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Home"> | undefined'.
  Type '({ route }: HomeScreenProps) => Element' is not assignable to type 'FunctionComponent<{}>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type '{}' is missing the following properties from type 'HomeScreenProps': navigation, route

I’ve confirmed that the TabParamList includes the “Home” route, and HomeScreenProps is correctly typed as BottomTabScreenProps<TabParamList, 'Home'>.

I’m not sure why the error says that navigation and route are missing when they are clearly included in the props.

Any suggestions on how to resolve this issue? Thanks in advance!