How to remove background color of active tab in @react-navigation/material-bottom-tabs

[transli]

I am using @react-navigation/material-bottom-tabs and I would like to remove background color of active tab. Which props should I use? I tried almost everything from documentation.

[lukewalczak]

I am using @react-navigation/material-bottom-tabs and I would like to remove background color of active tab. Which props should I use? I tried almost everything from documentation.

Hey @transli I would suggest then checking which theme color is used for a specific element, in your case outline pill. Its background color is theme.colors.secondaryContainer which you should be able to easily override using the theme prop:

theme={{colors: {secondaryContainer: 'transparent'}}}

[mehul2013]

@lukewalczak
theme={{colors: {secondaryContainer: 'transparent'}}}.This solution is not working. Let me know if any other solution you have.

[lukewalczak]

Please attach the screenshot with the mark which color you want to change.

[mehul2013]

@lukewalczak
I want to remove highlighted background color of specific tab. Please see the attachment:

[vivekbw]

import { useTheme } from 'react-native-paper';

const theme = useTheme();
theme.colors.secondaryContainer = "transperent"

should do the trick

[samkevin1]

@vivekbw this works, thanks!

[shahnawaz-pabon]

@vivekbw, Thank you so much. You've rescued me.

[VictorVMHC]

thanks vivekbw I had been looking for this solution for days

[0xrasla]

@vivekbw Nice thanks for this!

[gabriel-brito]

@vivekbw life saver!

[ritik2727]

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

const Tab = createMaterialBottomTabNavigator();

// Inside your component
<Tab.Navigator
tabBarOptions={{
activeBackgroundColor: 'transparent', // Set the background color of active tab to transparent
}}

{/* Add your tab screens */}
</Tab.Navigator>

[kholood-ea]

import { useTheme } from 'react-native-paper';

const theme = useTheme();
theme.colors.secondaryContainer = "transperent"

should do the trick

Thank YOU!!

[htthecool]

{secondaryContainer: 'transparent'}

this worked perfectly, thanks :)

[AjmirSarker]

@vivekbw thank you for your answer.
Now., I have a problem with tabBarColor, it is not changing after giving different tabBarColor in each screen. Can you suggest any solution, Thanks.

[sheikhshab]

What if want to change the color of this background?

[AlModutram]

Using these lines:

`
import { useTheme } from 'react-native-paper';

const theme = useTheme();
theme.colors.secondaryContainer = "transperent"`

I'm getting this error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Also using this:
theme={{colors: {secondaryContainer: 'transparent'}}}
doesn't work.

Please, can you help me!

This is my code:

`import { faBars } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import * as React from 'react';
import * as colors from '../../../../colors';
import { AppTexts } from '../../../assets/languages/ES/AppTexts';
import { ClearProps } from '../../Props';

const Tab = createMaterialBottomTabNavigator();

export default class BottomAction extends React.Component {
constructor(props: ClearProps) {
super(props);
}

render() {
    return (
        <Tab.Navigator
            activeColor={colors["secondary-03"]}
            inactiveColor={colors["secondary-03"]}
            barStyle={{ backgroundColor: colors["secondary-15"] }}>
            <Tab.Screen
                name={AppTexts.BUTTON_BOTTOM_01}
                component={this.BookingScreen}
                options={{
                    tabBarIcon: ({ color }) => (
                        <FontAwesomeIcon
                            icon={faBars}
                            size={20}
                            color={color} />
                    ),
                }}/>
            <Tab.Screen 
                name={AppTexts.BUTTON_BOTTOM_02} 
                component={this.MyCheckInSceen} 
                options={{
                    tabBarIcon: ({ color }) => (
                        <FontAwesomeIcon
                            icon={faBars}
                            size={20}
                            color={color} />
                    ),
                }}/>
            <Tab.Screen 
                name={AppTexts.BUTTON_BOTTOM_03} 
                component={this.QRCodeScreen} 
                options={{
                    tabBarIcon: ({ color }) => (
                        <FontAwesomeIcon
                            icon={faBars}
                            size={20}
                            color={color} />
                    ),
                }}/>
            <Tab.Screen 
                name={AppTexts.BUTTON_BOTTOM_04} 
                component={this.MyTravelScreen} 
                options={{
                    tabBarIcon: ({ color }) => (
                        <FontAwesomeIcon
                            icon={faBars}
                            size={20}
                            color={color} />
                    ),
                }}/>
        </Tab.Navigator>
    );
}`

[gonsals]

Now how can I change the padding of the background pill

[angelilton]

just for update is the new one to v5
activeIndicatorStyle={{backgroundColor: 'transparent'}}

[Sakib-203-15-3883]

Thanks, bro , it's work