Remove pill shape when active material bottom tabs

Question

Im using @react-navigation/material-bottom-tabs and im experiencing an issue with the icons in the tab navigator. The problem is there is a weird background showing up right behind the icon and the padding is way too big, this is how it looks like:

Im trying to remove the background from the icon but so far no options seem to work.

import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { ColorCodes } from "../helper/palette";
import ViewHome from "../views/home";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

const Tab = createMaterialBottomTabNavigator();

export default function RouteTab() {
  return (
    <Tab.Navigator
      initialRouteName="ViewHome"
      barStyle={{
        backgroundColor: ColorCodes.backgroundDeepest,
      }}
      labeled={false}
      activeColor={ColorCodes.activeColor}
      inactiveColor={ColorCodes.inactiveColor}
    >
      <Tab.Screen
        name="ViewHome"
        component={ViewHome}
        options={{
          tabBarOptions: {
            style: {
              backgroundColor: "blue",
            },
          },
          tabBarLabel: "Home",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="qwwqdqwd"
        component={ViewHome}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

Answer 1

I had the same problem with Material Bottom Tabs Navigator v6.x and solution for me was to add this :

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

and in my bottom tab component :

const theme = useTheme();

theme.colors.secondaryContainer = "transparent"

Edit :

You can do this using a better way like this :

import {DefaultTheme, Provider as PaperProvider} from 'react-native-paper';

Then you can update the DefaultTheme using destructuration :

const myNavigationTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    notification: 'rgba(255, 255, 255, 0.5)',
    secondaryContainer: 'transparent',
  },
};

Finally, just wrap your app with the PaperProvider and your updated theme:

<PaperProvider theme={myNavigationTheme}>
  <App />
</PaperProvider>

Answer 2

The issue is coming from react-native-paper, You'll need to downgrade this package to version: ^4.12.5.

"react-native-paper": "^4.12.5",

Hope this helps.