Criei um projeto com React-Native e TypeScritpt, importei os componentes do React-Navigation e ao usar a propriedade `screenOptions` dentro do Navigation ele apresenta o seguinte erro.

> ```
> 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.`
> ```

Acredito que o erro tenha algo a ver com o próprio TypeScript, pois se o arquivo esta com a extensão `.js` o erro some, mas com a extensão `.jsx` o erro aparece.

Segue o código da pagina.

```typescript
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;
```