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;

Vijay122 · Accepted Answer · 2020-09-03T13:32:56.960

5

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>

edited Sep 03 '20 at 13:32

answered Sep 03 '20 at 08:43

Vijay122

884
8
12

Thank you Vijay122! I need more question. – uarounddf Sep 03 '20 at 09:41
Where can I add That code??? Can't find variable: tabindex... T.T – uarounddf Sep 03 '20 at 09:42
Hi, that is derived from the screenOptions. i have modified it based on your case. let me know if that doesnt works. – Vijay122 Sep 03 '20 at 11:29
Vijay122~ I understand your Code logic. but My Code is functional code... so I don't know how to add constructor(props)... Do You know how Can I add that code? And, I add ({route})=> ... But It have error T,T – uarounddf Sep 04 '20 at 07:42
Oh Vijay122 I have succeeded in applying!! Thankyou! have a nice day~~~~~ – uarounddf Sep 04 '20 at 08:37
@uarounddf .. please can you share your code ? – FaISalBLiNK Jul 01 '21 at 16:54
tabBarOptions={{ style: { height: '9%', backgroundColor: this.tabIndex==4?"#fff":"transparent", //backgroundColor: 'transparent', position:'absolute', bottom:0, elevation:0 }, activeTintColor: '#000000', showLabel: false, }}> This code works for me, Thanks dude – Kishan Barmawala Jul 08 '22 at 11:16

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

1 Answers1