CODEWITHSUNDEEP
react-native
John Doah
John Doah

Reputation: 1999

Can't change tabbar label's color

I'm trying to change my active tab title color, I tried using tabBarOptions but It just won't work.

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 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.

What am I doing wrong?

Upvotes: 9

Views: 22334

Answers (3)

Onur Izmitlioglu
Onur Izmitlioglu

Reputation: 199

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 a 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.

Upvotes: 16

Imtee
Imtee

Reputation: 1393

In NavigationContainer V6

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

Upvotes: 4

Ravi Raj
Ravi Raj

Reputation: 6677

Looks like from the documentation to change tabBarLabel style, you need to provide custom component to tabBarLabel props and update based on focused.

try this

navigationOptions: () => ({
  tabBarLabel: ({focused}) => <MyTabBarLabel title={i18n.t('common.request')} focused={focused} />,
  tabBarIcon: ({focused}) => <MyTabBarIcon icon='requests' focused={focused}/>
})

Example for MyTabBarLabel component

export default function MyTabBarLabel (props) {

  return (
    <WFText style={[styles.tabBarLabel,  props.focused? styles.tabBarLabelActive : {}]} >{props.title}</WFText>
  );
}

const styles = StyleSheet.create({
  tabBarLabel: {
    paddingBottom: 6,
    fontSize: 10,
    textAlign: 'center'
  },
  tabBarLabelActive: {
    color: 'red'
  }
});

Replace with your components in place of MyTabBarLabel and MyTabBarIcon

Refer: https://reactnavigation.org/docs/navigators/tab#Screen-Navigation-Options

Upvotes: 7

Related Questions