Question 33469 in React native Question posted in
The official React Native documentation can be found here.

Remove pill shape when active material bottom tabs – React native

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:

enter image description here

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>
  );
}
Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    This worked for me. @Julien Lamalle answer in detail. Wrap your app using PaperProvider and the use useTheme to provide colors of your choice.

    import { useTheme } from 'react-native-paper';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {Provider as PaperProvider} from 'react-native-paper';
import {useTheme} from 'react-native-paper';

export default function Main() {
 const theme = useTheme();

 theme.colors.secondaryContainer = 'transparent';
 return (
 <PaperProvider>
  <App />
</PaperProvider>
);
}

AppRegistry.registerComponent(appName, () => Main);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search