TabNavigator extra padding

Question

How to style the TabNavigator Tab's height and padding? Im doing the following:

import Icon from "react-native-vector-icons/MaterialIcons";
const tabNav = TabNavigator({
  TabItem1: {
      screen: MainScreen,
      navigationOptions: {
          tabBarLabel:"Home",
          tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={20} color={tintColor} />
      }
    },
    TabItem2: {
      screen: MainScreen,
      navigationOptions: {
        tabBarLabel:"Home",
        tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={30} color={tintColor}  />
      }
    },
    TabItem3: {
      screen: MainScreen,
      navigationOptions: {
        tabBarLabel:"Browse",
        tabBarIcon: ({ tintColor }) => <Icon name={"home"} color={tintColor} />
      }
    }
}, {
    tabBarPosition: 'bottom',
    tabBarOptions: {
        activeTintColor: '#222',
        activeBackgroundColor :'yellow',  //Doesn't work
        showIcon: true,
        tabStyle: {
            padding: 0, margin:0,   //Padding 0 here
        },
    iconStyle: {
        width: 30,
        height: 30,
        padding:0       //Padding 0 here
    },
    }
});

How do I get rid of the padding between the icon and the label? I did padding:0 in iconStyle and also in tabStyle but no luck. I want no padding below the label too. How do I do that? Thanks.

Found the extra padding is caused by View:

How do i get rid of that?

score 9 · Answer 1 · answered Mar 16 '18 at 09:40

9

Solved by setting:

tabBarOptions: {
  labelStyle: {
    margin: 0
  },
}

answered Mar 16 '18 at 09:40

Denis

300
2
10

`Bottom Tab Navigator: 'tabBarOptions' is deprecated. Migrate the options to 'screenOptions' instead.` – Pavol Travnik Oct 06 '22 at 11:31
My solution worked with react-navigation 3 or 4 i don't remember exactly... – Denis Oct 30 '22 at 14:49

score 5 · Answer 2 · answered Oct 20 '17 at 15:11

5

Try just style under tabBarOptions

  tabBarOptions: {
    style: {
      height: 45
    }
  }

answered Oct 20 '17 at 15:11

Rami Enbashi

3,526
1
19
21

That reduced the height and shifted the TabBar to the bottom. The tabbar is now cut. The extra padding is still there. I also tried: `paddingHorizontal:0, paddingVertical:0` but doesn't work. – Somename Oct 21 '17 at 10:39
5 years later and now it just needs to be screenOptions, otherwise this is the only thing on this page that worked. And you can just do a dynamic height if you needed. Thanks – Hugobop Aug 14 '23 at 22:35

score 3 · Answer 3 · answered Dec 19 '17 at 16:06

Unfortunately plenty of layout settings are hardcoded in this lib (like padding: 12 for tab which comes by default from elsewhere).

The only option is to look in node_modules\react-navigation\lib\views\TabView\ files and adjust as needed to your requirements.

Right now I'm hacking those sourses to find a quick-n-dirty way to allow rectangular (x>y), not only square (x=y, as defaulted) tab icons.

Other option is to create your custom tabBar component as maintainers suggest

score 2 · Answer 4 · answered Aug 21 '18 at 18:25

I just did it by looking at this page https://reactnavigation.org/docs/en/material-top-tab-navigator.html

my TabStack looks like this:

const tabBarOptions = {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    paddingTop: 50,
    backgroundColor: 'red',
  },
}

export const TabStack = createMaterialTopTabNavigator({
  History: History,
  Current: Current,
  Settings: Settings,
}, {
    tabBarOptions: tabBarOptions
});

score 2 · Answer 5 · answered Feb 11 '22 at 09:14

2

Ran into a similar problem today and came across this post. My issue however had a - paddingBottom: 30 - being applied to the tabBarStyle.

I did not want to overwrite the package files since it could either lead to unforeseen issues elsewhere or it will be overwritten in future updates.

I simply set the value to it's negative to bring the overall padding being applied to 0 - ie. paddingBottom: -30

Not sure if it'll help someone but it helped me.

answered Feb 11 '22 at 09:14

BrandonWMA

47
2
7

NOTE - Setting paddingBottom to 0 does not remove the problem for me. I had to set it to a negative value. – BrandonWMA Feb 11 '22 at 09:15

score 1 · Answer 6 · answered Dec 29 '21 at 07:58

1

If you are using SafeAreaView inside your screen, remove it from root and you will be fine

answered Dec 29 '21 at 07:58

Guvanch

838
7
10

score 1 · Answer 7 · answered Jun 04 '22 at 14:50

1

This is the actual way how you style your tab navigator

 const screenOptions = {
    tabBarStyle:{
      height:50,
    },
    tabBarItemStyle:{
      margin:5,
    }
  };

  <Tab.Navigator {...{ screenOptions }}>
  //Tabs Here
  </Tab.Navigator >

answered Jun 04 '22 at 14:50

Badal S

507
1
3
20

TabNavigator extra padding

7 Answers7

Linked