CODEWITHSUNDEEP
react-nativereact-navigation
Rohit Aggarwal
Rohit Aggarwal

Reputation: 1180

Change active and inactive icon color

I have a MaterialBottomNavigator and I want to change the color of icon on the basis of active tab. I used activeColor and inactiveColor but it does not changes the color.

const Navigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="About"
      activeColor="black"
      inactiveColor="#808080"
      barStyle={{backgroundColor: 'white'}}>
      <Tab.Screen
        name="About"
        component={About}
        options={{
          tabBarIcon: () => <Icon name="people" size={30} />,
        }}
      />
      <Tab.Screen name="Sketches" component={Sketches} />
    </Tab.Navigator>
  );
};

And if I does not pass color prop to icon it does not shows up. So how can I do this?

Upvotes: 1

Views: 2135

Answers (2)

PatyGaby
PatyGaby

Reputation: 11

It work for me change the svg color to #000 and add this on the line code:

tabBarIcon: ({ focused }) => (
    <Icon fill={focused ? "black" : "#808080"} name="people" size={30} />
  ),

Upvotes: 1

Hamas Hassan
Hamas Hassan

Reputation: 941

There is a focused property returned by tabBarIcon which will tell when the tab is active or not active. So you can use it like this

Example

tabBarIcon: ({ focused }) => (
    <Icon color={focused ? "black" : "#808080"} name="people" size={30} />
  ),

Complete Code:

   const Navigation = () => {
      return (
        <Tab.Navigator
          initialRouteName="About"
          activeColor="black"
          inactiveColor="#808080"
          barStyle={{backgroundColor: 'white'}}>
          <Tab.Screen
            name="About"
            component={About}
            options={{
            tabBarIcon: ({ focused }) => (
         <Icon color={focused ? "black" : "#808080"} name="people" size={30} />
      ),
            }}
          />
          <Tab.Screen name="Sketches" component={Sketches} />
        </Tab.Navigator>
      );
    };

Upvotes: 5

Related Questions