React Navigation with Typescript

Question

I created a project with React-Native and Typescritpt, imported the components from React-Navigation, and when using the property screenOptions inside Navigation it shows the following error.

No overload matches this call.
Overload 1 of 2, '(props: Pick<Props, "children" | "backBehavior" | "lazy" | "tabBar" | "tabBarOptions"> & { initialRouteName?: string; screenOptions?: BottomTabNavigationOptions | ((props: { ...; }) => BottomTabNavigationOptions); }, context?: any): ReactElement<...> | Component<...>', gave the following error.`

I believe the error has something to do with Typescript itself, because if the file is with the extension .js the error is missing, but with the extension .jsx the error appears.

Follow the page code.

import 'react-native-gesture-handler';
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import AntDesign from 'react-native-vector-icons/AntDesign';
import IconI from 'react-native-vector-icons/Ionicons';
import Home from '../pages/Home';
import Wallet from '../pages/Wallet';
import Pay from '../pages/Pay';

const Routes:React.FC = () => {
    const Tab = createBottomTabNavigator();

    const icons = {
        Home: {
            lib: AntDesign,
            name: 'home'
        },
        Wallet: {
            lib: AntDesign,
            name: 'creditcard'
        },
        Pay: {
            lib: AntDesign,
            name: 'home'
        },
        Notifications: {
            lib: IconI,
            name:'ios-notificaions-outline'
        },
        Config: {
            lib: AntDesign,
            name: 'setting'
        }
    }
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                tabBarIcon: ({color, size}) => {
                    const {} = icons[route.name];
                }
            })}
         >
             <Tab.Screen options={{title:'Inicio'}} name="Home" component={Home} />
             <Tab.Screen options={{title:'Carteira'}} name="Wallet" component={Wallet} />
             <Tab.Screen options={{title:'Pagar'}} name="Pay" component={Pay} />
             <Tab.Screen options={{title:'Notificações'}} name="Notifications" component={Pay} />
             <Tab.Screen options={{title:'Ajustes'}} name="Config" component={Pay} />
         </Tab.Navigator>
     )
}

export default Routes;

Answer 1

The problem occurs because the prop screenOptions.tabBarIcon is a function that receives { focused: boolean, color: string } and returns a React.Node, while its function is not returning anything.

See a example of documentation:

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ color, size }) => {
      const icons = {
        Home: 'home',
        Profile: 'account',
      };

      return (
        <MaterialCommunityIcons
          name={icons[route.name]}
          color={color}
          size={size}
        />
      );
    },
  })}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>