Bottom Navigation active background visible for multiple screens.

Current behaviour

When I click on a different screen I get Navigated to that page and it’s background becomes highlighted, however, the background of the previous tab is still highlighted.

Expected behaviour

The background of non active tabs should not be highlighted.

Code sample

import React from 'react';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import {Dashboard} from '../pages/Dashboard';
import {Statistics} from '../pages/Statistics';
import {Settings} from '../pages/Settings';

const Tab = createMaterialBottomTabNavigator();

export const NavigationBar = () => {
  return (
    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen
        name="Home"
        component={Dashboard}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({color}) => (
            <MaterialIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Statistics"
        component={Statistics}
        options={{
          tabBarLabel: 'Statistics',
          tabBarIcon: ({color}) => (
            <MaterialIcons name="bar-chart" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={Settings}
        options={{
          tabBarLabel: 'Settings',
          tabBarIcon: ({color}) => (
            <MaterialIcons name="settings" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

Screenshots (if applicable)

What have you tried

I have tried testing the code given in snack, but it didn’t worked

Your Environment

software	version
ios or android	ios 16.0
react-native	v0.70.0
react-native-paper	v5.0.0-rc.5
node	v16.17.0
npm or yarn	v1.22.19
expo sdk	Using native cli

[rakshit087]

Okay, I will create one.

[abdullahkhan70]

I hope it will fix your problem.

import React from 'react';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const Tab = createMaterialBottomTabNavigator();

 <NavigationContainer independent={true}>
      <Tab.Navigator
        initialRouteName={screen.HOME}
        activeColor={colors.offWhite}
        inactiveColor={colors.primaryDarkColor}
        barStyle={{backgroundColor: '#694fad', }}
        backBehavior={'history'}>
        <Tab.Screen
          name={screen.HOME}
          component={Home}
          options={({navigation}) => ({
            tabBarColor: colors.homeScreenColor,
            tabBarLabel: tabNames.homeTabName,
            tabBarIcon: ({color, focused}) => (
        <MaterialIcons name="bar-chart" color={color} size={26} />
            ),
          })}
        />
</Tab.Navigator>
</NavigationContainer>

You just need to add a “tabBarColor” props in the “Tab.Screen” component. This will dynamically, change the background color of the selected Bottom Tab item.

By the way, which “@react-navigation/material-bottom-tabs” version are you using in your application?