I started to learn ReactNative and I'm trying to change bottom tab navigation color according to active route but I couldn't find how I can make it. I tried setting state but I couldn't find where I can get focused route to set a state variable.

const Tab = createMaterialBottomTabNavigator();
const MyTabs = () => { 

  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#f0edf6"
      inactiveColor="#3e2465"
      tabBarOptions={{
        style: {
          backgroundColor: "red",
        }
      }}
    >
      <Tab.Screen
        name="Home"
        component={WelcomePage}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Account"
        component={AuthScreen}
        options={{
          tabBarLabel: "Account",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

} 

I found how to change background:

      <Tab.Screen
        name="Home"
        component={WelcomePage}
        options={({route}) => ({
          tabBarStyle: {
            backgroundColor: "#fc03cf" 
          },
          tabBarIcon: ({ color, size }) => (
             <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        })}
      />

CodePudding user response：

Try this.

const Tab = createMaterialBottomTabNavigator();
    const MyTabs = () => { 
    
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#f0edf6"
      inactiveColor="#3e2465"
      tabBarOptions={{
        style: {
          backgroundColor: "red",
        }
      }}
    >
      <Tab.Screen
        name="Home"
        component={WelcomePage}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color,focused }) => (
            <MaterialCommunityIcons name="home" color={focused?'red':'blue'} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Account"
        component={AuthScreen}
        options={{
          tabBarLabel: "Account",
          tabBarIcon: ({ color,focused }) => (
            <MaterialCommunityIcons name="account" color={focused?'red':'blue'} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

} 

CodePudding user response：

You can simpy do this also

tabBarOptions={{
activeTintColor: 'red',
inactiveTintColor: 'green',}}