activeTintColor changing text color but not icon color

[steve-else]

Having an issue with activeTintColor on iOS. Current code for tabBarOptions:

    tabBarOptions: {
      activeTintColor: '#81B247',
      showLabel: false,
      style: style.tabBar,
    },

This doesn't let me change the color of the icons when the tab is active. As you can see I have showLabel disabled because I just want to show icons and not text. However when I have showLabel enabled, it does change the color of the text correctly, but it still does not change the color of the icon. Isn't activeTintColor supposed to change both? Is anyone else having this issue?

[koenpunt]

For the icon to change color, you have to set the color to the icon yourself, since the icon is under your own control. How did you define the tabBarIcon option?

If you look in the documentation you'll see you have to pass the tintColor yourself:
https://reactnavigation.org/docs/navigators/tab#TabNavigator

[steve-else]

Ah thank you, don't know how I missed that.

[manuTro]

@steve-else Is it working to you? I passed the tintColor but is not working..

[whitefusion]

@manuTro It works for me:
tabBarIcon: ({tintColor}) => <MaterialIcons name='add-circle-outline' color={tintColor} size={25}/>
And then
tabBarOptions: { activeTintColor:'blue', }

The tab icon and label is original gray in IOS, it turns into blue when active.

[Luckygirlllll]

@whitefusion Hey, I'm trying to implement your example. but it didn't work for me. What can be wrong?

Here is my code:

 static navigationOptions = ({ navigation, screenProps }) => ({
    actionButton: {
      title: _('create'),
      icon: 'plus',
      onPress: () => navigation.navigate('EventCreate')
    },
    tabBarLabel: _('calendar'),
    tabBarIcon: ({focused}) => <Icon featherName="calendar" active={focused}/>,
    tabBarOptions: { activeTintColor:'red'}
  })  

[mattijauhiainen]

@Luckygirlllll you need to use the tintColor, not focused. So:
tabBarIcon: ({tintColor}) => <Icon featherName="calendar" active={tintColor === "red"}/>
Bit of an unfortunate API since it assumes the icon takes the tint color as parameter...

[Kitloo]

@whitefusion your code work perfectly!

[embashgit]

am using ionicon but active is not working for me

[MuhDur]

@embashgit you have to
import Icon from "react-native-vector-icons/Ionicons
and then
tabBarIcon: ({ tintColor }) => { (your other code - for example to evaluate iconName and so on)... return <Icon name={iconName} size={25} color={tintColor} />; }

this works perfectly fine. As mattijauhainainen has mentioned it is important to use the tintColor attribute, not focused

[eleallegue]

I have this code below, and I am gettin the icon the color I want but the tabBarOptions does not change the tabBarLabel which is now blue and the icon turquoise

ProfileStack.navigationOptions = {
  tabBarLabel: 'Profile',
  tabBarOptions: {
    activeTintColor: '#00E8AC',
  },
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-person' : 'md-person'}
    />
  ),
};

[steve-else]

@eleallegue work for you?

ProfileStack.navigationOptions = {
  tabBarLabel: 'Profile',
  tabBarOptions: {
    activeTintColor: '#00E8AC',
  },
  tabBarIcon: ({ tintColor }) => (
    <TabBarIcon
      active={tintColor}
      name={Platform.OS === 'ios' ? 'ios-person' : 'md-person'}
    />
  ),
};

[eleallegue]

The icon changes to the color I want, becuase I created the class TabBarIcon which insides changes the color if it is active. The thing is that the text of the option, the tabbarlabel doesn't change as well as the other, and so it stays blue...

[embashgit]

This is how I did it ..you can try it
@aleallegue

navigationOptions: ({ navigation }) => ({
tabBarOptions: {
activeTintColor: BaseColor.light,
inactiveTintColor: '#69f0ae',
style: {
backgroundColor: BaseColor.base,
borderTopColor: BaseColor.light,
borderTopWidth: 2,
},
showLabel: false,
animationEnabled: true,

        },
    }),

Then, where u need to use it you are to try:

ID: {
screen: MyCards,
navigationOptions: ({ navigation }) => ({
title: 'My Cards',
tabBarIcon: ({ tintColor }) => (
<>

<Text style={{color: tintColor }}>My Card
</>
),

    })
}

[embashgit]

Or this for icon...
you dont need any
focus...

tabBarIcon: ({tintColor})=> (

),

[eleallegue]

None of those worked for me... I am still having the same issue, and I don't want to remove the label, but as the label is blue and my icon is turquoise (which I want), I think I have no choice...

I have run out of options for this issue

[JamzWork]

How about using my custom image icon , ca we change the activeTintcolor then ?

[eleallegue]

I tried that too, but it does not work... (sorry for the late response, github just did not notify me).
I have no clue, and the problem is still there

[zachrnolan]

The activeTintColor was only working for the icon and not the text.

@eleallegue I ended up having to do this for it to work:

HomeTab: {
  screen: HomeStack,
  navigationOptions: {
    tabBarLabel: ({ tintColor }) => (
      <Text style={[styles.label, {color: tintColor}]}>
        Home
      </Text>
    ),
    tabBarIcon: ({ tintColor }) => (
      <Icon
        name='home-tab'
        size={21}
        color={tintColor}
      />
    )
  },
},

[hadpro24]

@whitefusion thank you it's works.

[devanshAppiness]

@manuTro It works for me:
tabBarIcon: ({tintColor}) => <MaterialIcons name='add-circle-outline' color={tintColor} size={25}/>
And then
tabBarOptions: { activeTintColor:'blue', }

The tab icon and label is original gray in IOS, it turns into blue when active.

U saved the day !! working flawlessly

[duong755]

Instead of using color props, I did this:

tabBarIcon: ({ tintColor }) => (
    <Icon type='Ionicons' name='home' style={{ color: tintColor }} />
),
tabBarOptions: {
    activeTintColor: 'somecolor'
}

[Rajdeepc]

how can i switch images on active and inactive?

[steve-else]

@Rajdeepc If you mean changing the icon, you can pass in a React element or function that knows when it's focused. Can read about it here.

ex:

function HomeTabIcon({ focused }) {
  return focused ? <FocusedHomeIcon /> : <NotFocusedHomeIcon />
}

HomeTab: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: HomeTabIcon,
      },
    },

[jusilo]

Thanks @steve-else yo save me from this problem

[kalideir]

I struggled with trying to figure out the solution with React Navigation 5.., now after using color prop instead of tintColor it wors fine.
<Tab.Screen name="Screen" options={{ tabBarLabel: 'Screen', tabBarIcon: ({color}) => <Icon name="favorite-border" type='material' color={color} size={25}/>

[malikgenius]

I struggled with trying to figure out the solution with React Navigation 5.., now after using color prop instead of tintColor it wors fine.
<Tab.Screen name="Screen" options={{ tabBarLabel: 'Screen', tabBarIcon: ({color}) => <Icon name="favorite-border" type='material' color={color} size={25}/>

was struggling for hours ... thanks a ton

[SamMakesThings]

I struggled with trying to figure out the solution with React Navigation 5.., now after using color prop instead of tintColor it wors fine.
<Tab.Screen name="Screen" options={{ tabBarLabel: 'Screen', tabBarIcon: ({color}) => <Icon name="favorite-border" type='material' color={color} size={25}/>

Facing the same problem - attempted this solution but my icons are always stuck at the inactiveTintColor... :(

Will update if I can get it working.

    <Tab.Navigator tabBarOptions={{
      activeTintColor: '#ffffff',
      inactiveTintColor: '#7FC0C4',
      style: {
        backgroundColor: '#00818A',
      },
    }}>
      <Tab.Screen
        name="Sleep"
        component={DiaryScreen}
        options={{
          tabBarLabel: 'Sleep',
          tabBarIcon: ({ color }) => (
            <TabBarIcon
              color={color}
              name={Platform.OS === 'ios' ? 'ios-journal' : 'md-journal'} />
          ),
        }} />

[SamMakesThings]

UPDATE: Got it working by adding the focused prop back. Code below:

    <Tab.Navigator tabBarOptions={{
      activeTintColor: '#ffffff',
      inactiveTintColor: '#7FC0C4',
      style: {
        backgroundColor: '#00818A',
      },
    }}>
      <Tab.Screen
        name="Sleep"
        component={DiaryScreen}
        options={{
          tabBarLabel: 'Sleep',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon
              focused={focused}
              color={color}
              name={Platform.OS === 'ios' ? 'ios-journal' : 'md-journal'} />
          ),
        }} />

[vasilced]

I struggled with trying to figure out the solution with React Navigation 5.., now after using color prop instead of tintColor it wors fine.
<Tab.Screen name="Screen" options={{ tabBarLabel: 'Screen', tabBarIcon: ({color}) => <Icon name="favorite-border" type='material' color={color} size={25}/>

Thanks dude! Was struggling for a while

[sometimescasey]

Slight tangent to the original question - but if it helps anyone else, I am configuring screenOptions at <Tab.Navigator (as opposed to options on each individual Tab.Screen). My mistake was adding tabBarOptions as an entry in the object passed to screenOptions.

According to the React Navigation 5 docs, tabBarOptions should be a parameter on <Tab.Navigator ... itself (at the same level as screenOptions).

Original code (not working):

export default function MainNavigator({ props }) {
    const screenOptionsConfig = ({route}) => ({
        tabBarIcon: ( { focused, color, size } ) => {
            let iconName;

            if (route.name === "Home") {
                iconName = 'ios-home';
                return <Ionicons name={iconName} size={size} color={color} />;
            } else if (route.name === "Settings") {
                iconName = 'ios-settings';
                return <Ionicons name={iconName} size={size} color={color}/>;
            }
        },
        tabBarOptions: {
            activeTintColor: '#788eec',
            inactiveTintColor: '#666666',
        },
    });

    return (
          <Tab.Navigator initialRouteName="Home"
          screenOptions={screenOptionsConfig}>
            <Tab.Screen name="Home" ...
            ...

Corrected (tint works for both text and icon):

export default function MainNavigator({ props }) {
    const screenOptionsConfig = ({route}) => ({
        tabBarIcon: ( { focused, color, size } ) => {
            let iconName;

            if (route.name === "Home") {
                iconName = 'ios-home';
                return <Ionicons name={iconName} size={size} color={color} />;
            } else if (route.name === "Settings") {
                iconName = 'ios-settings';
                return <Ionicons name={iconName} size={size} color={color}/>;
            }
        }
    });

    return (
          <Tab.Navigator initialRouteName="Home"
          screenOptions={screenOptionsConfig}
          tabBarOptions={{
            activeTintColor: '#788eec',
            inactiveTintColor: '#666666',
        }}
>
            <Tab.Screen name="Home" ...
             ...

[Arturasba]

I struggled with trying to figure out the solution with React Navigation 5.., now after using color prop instead of tintColor it wors fine.
<Tab.Screen name="Screen" options={{ tabBarLabel: 'Screen', tabBarIcon: ({color}) => <Icon name="favorite-border" type='material' color={color} size={25}/>

U are god

[parazitenew]

"react-navigation-tabs": "^2.10.1",
"react-navigation-stack": "^2.10.2",
"react-navigation": "^4.4.3",

We have to specify a key cause the variable "color" is an object. For example:

Contacts: { screen: ContactStackNavigator, navigationOptions: { tabBarIcon: (color) => { return <Icon name='users' type='font-awesome' color={color} size={25} /> } } }

will return this error:
Error: Unable to parse color from object: {"focused":false,"tintColor":"grey","horizontal":false}

Since color is an object, we need to replace color={color} by color={color.tintColor}

hope can help someone.

[krishnajhapate]

ProfileStack.navigationOptions = {
tabBarLabel: 'Profile',
tabBarInactiveTintColor: "black",
tabBarActiveTintColor: "white",
tabBarIcon: ({ color }) => (
<TabBarIcon
active={color}
name={Platform.OS === 'ios' ? 'ios-person' : 'md-person'}
/>
),
};

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[ghulamrasuldev]

Icons are not changing color when active it's all black

<NavigationContainer>
  <Tab.Navigator
    screenOptions={{
      headerShown: false,
      tabBarShowLabel: false,
      tabBarStyle: {backgroundColor: '#2FB7EC'},
      tabBarInactiveTintColor: '#ffffff',
      tabBarActiveTintColor: '#000000',
    }}>
    <Tab.Screen
      name="Home"
      component={Home}
      options={{
        tabBarIcon: color => <Feather name="home" size={24} />,
      }}
    />
    <Tab.Screen
      name="DeoptDoctors"
      component={DepotDoctors}
      options={{
        tabBarIcon: color => <Entypo name="add-to-list" size={24} />,
      }}
    />
    <Tab.Screen
      name="TeamCouncil"
      component={TeamCouncil}
      options={{
        tabBarIcon: color => <AntDesign name="team" size={24} />,
      }}
    />
    <Tab.Screen
      name="FAQs"
      component={FAQs}
      options={{
        tabBarIcon: color => <AntDesign name="questioncircleo" size={24} />,
      }}
    />
  </Tab.Navigator>
</NavigationContainer>

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[MechLocator]

Hi! In case somebody comes here in search of a drawer navigator solution for setting icon tint color when a certain route in a drawer navigator is active, here is how I solved this issue:
<Drawer.Screen name="FAQ" component={FAQScreen} options={{ drawerIcon: ({focused}) => focused ? ( <AntDesign name="questioncircleo" size={20} color={'#fff'} /> ) : ( <AntDesign name="questioncircleo" size={20} color={'#000'} /> ), }} />
I hope this helps somebody here. If it does, please consider following me in my GitHub account, https://github.com/Moses-Githinji. PS: Leave a star too. Thank you :) :) :)

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[Dhanushka-Sasanka]

<Tab.Screen name="home" component={HomeScreen} options={{
                tabBarLabel: 'Search',
                tabBarActiveTintColor: Colors.PRIMARY,
                tabBarIcon: ({ color, size }) => (
                    <EvilIcons name="search" size={35} color={color} />
                ),
                
            }} />

Try out this

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.