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