No overload matches this call

Question

I'm currently working on a school project, and i have this error "No overload matches this call".

The whole error code is here:

No overload matches this call.
  Overload 1 of 2, '(props: Omit<any, "initialRouteName" | "children" | "screenOptions" | "defaultScreenOptions"> & DefaultRouterOptions<string> & { children: ReactNode; screenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; }, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '(route: {    name: string;}) => { tabBarIcon: (size: number, color: string) => JSX.Element; }' is not assignable to type 'BottomTabNavigationOptions | ((props: { route: RouteProp<ParamListBase, string>; navigation: any; }) => BottomTabNavigationOptions) | undefined'.
      Type '(route: {    name: string;}) => { tabBarIcon: (size: number, color: string) => JSX.Element; }' is not assignable to type '(props: { route: RouteProp<ParamListBase, string>; navigation: any; }) => BottomTabNavigationOptions'.
        Types of parameters 'route' and 'props' are incompatible.
          Property 'name' is missing in type '{ route: RouteProp<ParamListBase, string>; navigation: any; }' but required in type '{ name: string; }'.

This error came up when i had to fix some any type errors in CreateScreenOptions: Be aware that i have tsconfig.json sat to strict due to my teacher.

app.navigator.tsx:

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";

import { HomeNavigator } from "./home.navigator";

const Tab = createBottomTabNavigator();

const TAB_ICON: {[key: string]: any} = {
  Hjem: "md-home",
};

const createScreenOptions = (route: {name: string}) => {
  const iconName = TAB_ICON[route.name];
  return {
    tabBarIcon: ( size: number, color: string) => (
      <Ionicons name={iconName} size={size} color={color} />
    ),
  };
};

export const AppNavigator = () => (
      <Tab.Navigator
        screenOptions={createScreenOptions}
        tabBarOptions={{
          activeTintColor: "red",
          inactiveTintColor: "blue",
        }}
      >
        <Tab.Screen name="Hjem" component={HomeNavigator} />
      </Tab.Navigator>
);

home.navigator.tsx:

import React from "react";

import { createStackNavigator } from "@react-navigation/stack";

import { HomeScreen } from "../../features/home/home.screen";

const HomeStack = createStackNavigator();

export const HomeNavigator = () => {
  return (
    <HomeStack.Navigator headerMode="none">
      <HomeStack.Screen name="Home" component={HomeScreen} />
    </HomeStack.Navigator>
  );
};

home.screen.tsx:

import React from "react";
import { Text, StyleSheet } from "react-native";

export const HomeScreen = () => {
    return(
        <Text>Hello World!</Text>
    )
    }

Answer 1

The problem is here:

export const AppNavigator = () => (
      <Tab.Navigator
        screenOptions={createScreenOptions}
        tabBarOptions={{
          activeTintColor: "red",
          inactiveTintColor: "blue",
        }}
      >
        <Tab.Screen name="Hjem" component={HomeNavigator} />
      </Tab.Navigator>
);

More specifically here:

screenOptions={createScreenOptions}

If you check the issue is that the the type of screen options uses a string as key

Check this issue: https://github.com/react-navigation/react-navigation/issues/7855

Also here is another potential issue:

const createScreenOptions = (route: {name: string}) => {
  const iconName = TAB_ICON[route.name];
  return {
    tabBarIcon: ( size: number, color: string) => (
      <Ionicons name={iconName} size={size} color={color} />
    ),
  };
};

That function takes one parameter but you are calling it like this:

screenOptions={createScreenOptions}

And maybe you should be calling it like this:

screenOptions={createScreenOptions({name:"some name"})}