Error passing tabBarOptions property of react navigation

Solution for Error passing tabBarOptions property of react navigation
is Given Below:

I’m creating an application and added React navigation, however when I try to pass the tabBarOptions it is showing the following error:

No overload matches this call.
  Overload 1 of 2, '(props: Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; } & { ...; } & BottomTabNavigationConfig, "initialRouteName" | ... 3 more ... | "defaultScreenOptions"> & DefaultRouterOptions<...> & { ...; }, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: Element; tabBarOptions: { activeTintColor: string; inactiveTintColor: string; showLabel: boolean; style: { paddingVertical: number; height: number; backgroundColor: string; }; }; }' is not assignable to type 'IntrinsicAttributes & Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: Bottom...'.
      Property 'tabBarOptions' does not exist on type 'IntrinsicAttributes & Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: Bottom...'.
  Overload 2 of 2, '(props: PropsWithChildren<Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; } & { ...; } & BottomTabNavigationConfig, "initialRouteName" | ... 3 more ... | "defaultScreenOptions"> & DefaultRouterOptions<...> & { ...; }>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: Element; tabBarOptions: { activeTintColor: string; inactiveTintColor: string; showLabel: boolean; style: { paddingVertical: number; height: number; backgroundColor: string; }; }; }' is not assignable to type 'IntrinsicAttributes & Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: Bottom...'.
      Property 'tabBarOptions' does not exist on type 'IntrinsicAttributes & Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: Bottom...'.ts(2769)
(JSX attribute) tabBarOptions: {
    activeTintColor: string;
    inactiveTintColor: string;
    showLabel: boolean;
    style: {
        paddingVertical: number;
        height: number;
        backgroundColor: string;
    };
}

I’m following the documentation correctly

https://reactnavigation.org/docs/bottom-tab-navigator/#example


Here’s how my route file is:


import React from 'react';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { AppStackRoutes } from './app.stack.routes';

import { useTheme } from 'styled-components';
import { Platform } from 'react-native';

const { Navigator, Screen } = createBottomTabNavigator();

export function AppTabRoutes() {
  const theme = useTheme();

  return (
    <Navigator
      tabBarOptions={{
        activeTintColor: theme.colors.main,
        inactiveTintColor: theme.colors.text_detail,
        showLabel: false,
        style: {
          paddingVertical: Platform.OS === 'ios' ? 20 : 0,
          height: 78,
          backgroundColor: theme.colors.background_primary
        }
      }}
    >
      <Screen
        name="Home"
        component={AppStackRoutes}
      />
    </Navigator>
  )
}

Any suggestion is welcome

The documentation you linked to doesn’t have these options. The tabBarOptions prop is deprecated in React Navigation 6, you should use screenOptions:

    <Navigator
      screenOptions={{
        tabBarActiveTintColor: theme.colors.main,
        tabBarInactiveTintColor: theme.colors.text_detail,
        tabBarShowLabel: false,
        tabBarStyle: {
          paddingVertical: Platform.OS === 'ios' ? 20 : 0,
          height: 78,
          backgroundColor: theme.colors.background_primary
        }
      }}
    >

You should also be getting deprecation warnings in the console when you run the app.