Icon color not changing in bottom tab navigation

Question

Active tint color is not working in react native bottom tab navigator. color of name does change when focused but icon color is not changing. here is my navigator

<Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, tintColor, size}) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused
              ? 'chatbubble-ellipses-sharp'
              : 'chatbubble-ellipses-outline';
          } else if (route.name === 'Setting') {
            iconName = focused ? 'settings-sharp' : 'settings-outline';
          }

          // You can return any component that you like here!
          return (
            <Icon
              name={iconName}
              size={size}
              color={tintColor}
              type={'Ionicons'}
            />
          );
        },
      })}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      }}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Setting" component={Setting} />
    </Tab.Navigator>
  );
}

even if i type color manually like <Icon name={iconName} size={size} color={'red'} type={'Ionicons'} /> this it does not work. any help?

Answer 1

You are using 'tintcolor'

but as per documentation it should be color

Change it like below and it should be done at screen level not at navigator level.

  <Tab.Screen
    name="Notifications"
    component={Notifications}
    options={{
      tabBarLabel: 'Updates',
      tabBarIcon: ({ focused,color, size }) => {
        const icon=focused?"bell":"home";
        return (
        <MaterialCommunityIcons name={icon} color={color} size={size} />
      )
      },
    }}
  />

And you can simply pass the colors you need like this

 tabBarOptions={{
    activeTintColor: 'red',
    inactiveTintColor: 'green',
  }}>

You can check out the sample snack here (You will have to change the icon to the ones you use) https://snack.expo.io/@guruparan/createbottomtabnavigator-|-react-navigation

And for the color of the icon in native base use the option like below answer https://stackoverflow.com/a/48062357/1435722

Answer 2

In react navigation 6, these options are now screen options.

Before (v5)

<Tab.Navigator
  tabBarOptions={{
    inactiveTintColor: 'green',
    activeTintColor: 'red',
    style: {
      position: 'absolute',
      borderTopColor: 'rgba(0, 0, 0, .2)',
    },
  }}
>

After (v6)

<Tab.Navigator
  screenOptions={{
    tabBarInactiveTintColor: 'green',
    tabBarActiveTintColor: 'red',
    tabBarStyle: {
      position: 'absolute',
      borderTopColor: 'rgba(0, 0, 0, .2)',
    },
  }}
>

Then on your icon you can do the following:

  <BottomTab.Screen
    name="Home"
    component={HomeScreen}
    options={({ navigation }) => ({
      title: "Home",
      tabBarIcon: ({ focused, color }) => (
        <Feather name="home" size={24} color={focused ? "red" : "green"} />
      ),
    })}
  />
 

View official docs with the documented changes here: https://reactnavigation.org/blog/2021/08/14/react-navigation-6.0/