Can't change tabbar label's color

user_7868565 0
Viewed 16426

I'm trying to change my active tab title color, I tried using tabBarOptions but It just won't work, what am I doing wrong? This is my code:

  Home:{
screen: TabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
        name={focused ? 'ios-home' : 'ios-home-outline'}
        size={26}
        style={{ color: focused ? `${tabBarColor}` : tintColor}}
        />
      ),
      header: null,
    }),
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Profile',
      tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
        name={focused ? 'ios-people' : 'ios-people-outline'}
        size={26}
        style={{ color: focused ? `${tabBarColor}` : tintColor }}
        />
      ),
      header: null,
    }),
  },
}),
tabBarOptions:{
  activeTintColor: `${tabBarColor}`,
}
}

I read I the documentation and searched for examples but couldn't find anything that worked for me. It's like the app is just ignoring the tabBarOptions.

Thanks in advance!

react-native
3 Answers

Maybe a little bit late to answer, but here is another valid solution for the problem, since the link in the already existing answer is broken.

You do not need to create the custom component to change the text color in the tab bar.

navigationOptions = {
    tabBarLabel: 'Navigation Title',
    tabBarOptions: { 
        activeTintColor: '#000',
        inactiveTintColor: '#fff',
},
tabBarIcon: ({ focused }) => (
    <TabBarIcon
        focused={focused} /* Change the icon */
        name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}/>
    ),
};

By using the activeTintColor and inactiveTintColor props in tabBarOptions, you can manipulate the color of the text in the tab bar. As @Ravi Raj mentioned in the last comment, you should do it for each of the tabs in the tab bar.

user_112793920

In NavigationContainer V6

<Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarActiveTintColor: 'tomato',
      tabBarInactiveTintColor: 'gray',
    })}
  >
user_8374470
Related