CODEWITHSUNDEEP
javascriptreactjsreact-nativeuser-interfacereact-native-navigation
richard59897
richard59897

Reputation: 93

How to change color of icon as well as text when changing screen in bottom tab navigator in react native?

I am working on an app and it has three screens in the bottom tab navigator. When I go from one screen to a different screen, I've been able to change the label color, however, I've been unable to change the color of the icon as well. Here's an example of what it looks like so far. the home icon doesn't change with the label color.

Here is my App.js code where I control this. I would really appreciate any help or direction on this. Thanks in advance for any help!

App.js:

function MainTabNavigator() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#e64951',
      }}
    >
      <Tab.Screen options={{
        headerShown: false, tabBarIcon: ({ tintColor }) => (
          <Entypo name="home" size={30} color={tintColor} />
        )
      }} name="home" component={Home} />
      <Tab.Screen options={{
        headerShown: false, tabBarIcon: () => (
          <FontAwesome5 name="plus" size={30} color="black" />
        )
      }} name="Add Friends" component={AddFriends} />
      <Tab.Screen options={{
        headerShown: false, tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="user" size={30} color={tintColor} />
        )
      }} name="Profile" component={Profile} />
    </Tab.Navigator>
  )
}

Upvotes: 3

Views: 1089

Answers (1)

Sagar Shakya
Sagar Shakya

Reputation: 654

You are passing the wrong argument to tabBarIcon prop. You should pass color instead of tintColor.

tabBarIcon: ({ color }) => (
    <Entypo name="home" size={30} color={color} />
)

Upvotes: 4

Related Questions