No overload matches this call - reactjs

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"})}