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?

Stephani Bishop · Answer 1 · 2022-03-14T18:38:50.227

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/

Guruparan Giritharan · Accepted Answer · 2021-03-11T11:01:55.333

3

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

edited Mar 11 '21 at 11:01

answered Mar 11 '21 at 08:24

Guruparan Giritharan

15,660
4
27
50

@AqsaMaan does the color have a value ? – Guruparan Giritharan Mar 11 '21 at 09:29
even if i type color manually it doesnot work – Aqsa Maan Mar 11 '21 at 09:31
where are you getting this Icon component from? whats the library – Guruparan Giritharan Mar 11 '21 at 09:32
react native vector icons using native base – Aqsa Maan Mar 11 '21 at 09:33
`` evn if i type like this it does not work – Aqsa Maan Mar 11 '21 at 09:34
it should work with color, can you try my updated answer? – Guruparan Giritharan Mar 11 '21 at 09:41
u just removed `focused ` variable which gives error. other than that code is same – Aqsa Maan Mar 11 '21 at 09:43
https://snack.expo.io/@guruparan/createbottomtabnavigator-|-react-navigation – Guruparan Giritharan Mar 11 '21 at 09:45
there is no parameter called focussed, let me fix this wait – Guruparan Giritharan Mar 11 '21 at 09:46
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229765/discussion-between-guruparan-giritharan-and-aqsa-maan). – Guruparan Giritharan Mar 11 '21 at 09:50

score 0 · Answer 3 · answered Jul 27 '22 at 16:06

add tabBarActiveTintColor on the screenOptions tabBarActiveTintColor: 'tomato' :

<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',enter code here
   tabBarActiveTintColor: 'tomato',
  }}>
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="Setting" component={Setting} />
</Tab.Navigator>

); }

Icon color not changing in bottom tab navigation

3 Answers3