0

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;
1
  • 1
    Boa noite André, os arquivos em typescript são .tsx, jsx é a sintaxe utilizada para desenvolver usando o React, Segue o Link do post onde é abordado o uso do TypeScript com React Native caso você tenha alguma duvida.
    – Joaogma1
    Commented 18/06/2020 às 1:21

1 Resposta 1

0

O problema ocorre pois a prop screenOptions.tabBarIcon é uma função que recebe { focused: boolean, color: string } e retorna um React.Node, enquanto a sua função não está retornando nada.

Veja um exemplo da documentação:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .