React-Native How to change the overall background color of the Tabbar on the focused other tabs

Question

I want to change tabbar BackgroundColor.

I have 5 tabs on bottom navigation. first, When I touch home tab. I want to change Tabbar's backgroundcolor is 'transparent' second, When I touch others(four) tab. I want to change Tabbar's backgroundcolor is 'white' also I want to change activeTintColor By other tab.

Here is my Code, and Screen shot(I want to make this Screen shot).

Now my home screen. Home Screen shot

I want this other screen. screen shot

import { View } from 'react-native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import MyHomeStack from './HomeStack';
import MyProfileStack from './ProfileStack';

import InformScreen from '../screens/InformScreen';
import SearchScreen from '../screens/SearchScreen';
import UploadScreen from '../screens/UploadScreen';

import CustomIcon from '../components/CustomIcon';

const Tab = createBottomTabNavigator();

function MainTabStack(){
  return (
    <Tab.Navigator
      initialRouteName="Home"
      labelStyle={{ fontSize: 12 }}
      tabBarOptions={{
        style: {
          height: '9%',
          backgroundColor: 'transparent',
          position:'absolute',
          bottom:0,
          elevation:0
        },
        activeTintColor: '#000000',
        showLabel: false,
      }}>
      <Tab.Screen
        name="Home"
        component={MyHomeStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <CustomIcon name="nav_home" color={color} size={size}/>
          )
        }}
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          tabBarColor:'red',

          tabBarIcon: ({ color, size }) => (
            <CustomIcon name="nav_store" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Upload"
        component={UploadScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <CustomIcon name="nav_upload" color={color} size={28} />
          ),
        }}
        listeners={({ navigation }) => ({
          tabPress: event => {
            event.preventDefault();
            navigation.navigate('UploadScreen');
          },
        })}
      />
      <Tab.Screen
        name="Inform"
        component={InformScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <CustomIcon name="nav_closet" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="mypage"
        component={MyProfileStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <CustomIcon name="mypage" color={color} size={size} />
          ),
        }}
      />


    </Tab.Navigator>
  );
}

export default MainTabStack;

Answer 1

Inside the tabbar options, have you tried changing the backgroundColor to your desired color of choice dynamically.

constructor(props){
    this.tabIndex=0;
} 

<Tab.Navigator
    initialRouteName="Home"
    labelStyle={{ fontSize: 12 }}
    screenOptions={({ route }) => ({
        if (route.name === 'Home') {
          this.tabIndex=4;
        } else if (route.name === 'Settings') {
          this.tabIndex=5;
        }
    })}
    tabBarOptions={{
        style: {
        height: '9%',
        backgroundColor: this.tabIndex==4?"#fff":"transparent",
        //backgroundColor: 'transparent',
        position:'absolute',
        bottom:0,
        elevation:0
        },
        activeTintColor: '#000000',
        showLabel: false,
    }}>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>