How to change the color of the active / selected tab?

Refresh

November 2018

Views

5k time

1

I could not find a way to change the color of the title in the tab bar. 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}}
        />
      ),
      //headerStyle: {backgroundColor: "#553A91"},
      //headerTitleStyle: {color: "#FFFFFF"},
      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 }}
        />
      ),
      //headerStyle: {backgroundColor: "#553A91"},
      //headerTitleStyle: {color: "#FFFFFF"},
      header: null,
    }),
  },
}),
}

I searched but couldn't find a way to do so. I want the color to be the default grey color when the tab is not selected but to be my tabBarColor color when the tab is selected.

How can I do that?

Thanks in advance!

1 answers

4

Not sure where were you searching, but it took me 30 seconds to see it.

In TabNavigator Docs, it is clear that you need to use activeTintColor

activeTintColor: label and icon color of the active tab

Example:

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  navigationOptions: ({navigation}) => ({
        tabBarIcon: ({focused}) => {
            ...
        }
  }),
  tabBarOptions: {
        activeTintColor: '#ffffff',
  },
});