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

user_7868565 0
Viewed 12318

I want the color to be the default gray color when the tab is not selected but to be my tabBarColor color when the tab is selected. I could not find a way to change the color of the title in the tab bar.

How can I do that?

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,
    }),
  },
}),
}
tabnavigator react-native
2 Answers
  1. Define variable route,
  2. Add props listeners to each <Tab.Screen>,
  3. Use variable route for change color of tabBarLabel.

Example :

const [route, setRoute] = useState('home');
 

        <Tab.Navigator>
           <Tab.Screen listeners={{
                  tabPress: (e) => {
                    setRoute('home');
                  },
                }}
                options={{
                  tabBarLabel: (
                    <Text
                      style={{
                        color: route === 'home' ? 'ACTIVE_COLOR' : 'INACTIVE_COLOR',
                      }}>
                      home
                    </Text>
                  ) />
    
    <Tab.Screen listeners={{
                  tabPress: (e) => {
                    setRoute('profile');
                  },
                }}
                options={{
                  tabBarLabel: (
                    <Text
                      style={{
                        color: route === 'profile' ? 'ACTIVE_COLOR' : 'INACTIVE_COLOR',
                      }}>
                      profile
                    </Text>
                  ) />
    </Tab.Navigator>

I hope I was able to help you

user_32383010
Related