I'm building a React Native app and I'm handling my navigation using React Navigation V2.
I literally copy pasted the following code from the documentation:
const MainTabs = createBottomTabNavigator( { Home: HomeStack, Settings: SettingsStack }, { navigationOptions: ({ navigation }: NavigationScreenProps) => ({ tabBarIcon: ({ focused, tintColor }) => { const { routeName } = navigation.state; let iconName; if (routeName === "Home") { iconName = `ios-information-circle${focused ? "" : "-outline"}`; } else if (routeName === "Settings") { iconName = `ios-options${focused ? "" : "-outline"}`; } // You can return any component that you like here! We usually use an // icon component from react-native-vector-icons return <Ionicons name={iconName} size={25} color={tintColor} />; } }), tabBarOptions: { activeTintColor: "tomato", inactiveTintColor: "gray" } })For some reason typescript throws the following error:
[ts]Argument of type '{ navigationOptions: ({ navigation }: any) => { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) => Icon; }; }' is not assignable to parameter of type 'BottomTabNavigatorConfig'. Types of property 'navigationOptions' are incompatible. Type '({ navigation }: any) => { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) => Icon; }' is not assignable to type 'NavigationBottomTabScreenOptions | ((navigationOptionsContainer: NavigationScreenConfigProps & { navigationOptions: NavigationScreenProp<NavigationRoute<NavigationParams>, NavigationParams>; }) => NavigationBottomTabScreenOptions) | undefined'.How can that be? What am I doing wrong?