React Navigation Bottom TabBar Icon Spacing

Question

I am using React Navigation with React Native. This is on Android.

1. I am trying to add some spacing between the icon and the top of the tab bar and reduce the spacing between icon and the label.

2. I am trying to change the bottom border color ie Yellow line.

3. I am trying to reduce the spacing, padding left and right inside each cell.

Any idea how I can achieve this?

{
    tabBarPosition: 'bottom',
    animationEnabled: true,
    swipeEnabled: true,
    tabBarOptions: {
      showIcon: true,
      labelStyle: {
        fontSize: 8
      },
      style: {
        backgroundColor: 'grey',
      },
      tabStyle: {
        height: 49
      },
      iconStyle: {
        flexGrow: 0,
        marginTop: 1.5
      }
    }
  }

Answer 1

Regarding the first problem about the spacing between the icon and the top of the tab bar you can add padding to the tabStyle property in tabBarOptions:

tabBarOptions: {
    tabStyle: {
        paddingVertical: 5
    }
}

For reducing the space between the icon and the label, you can add some padding or margin to your Icon object:

tabBarIcon: ({ tintColor }) => {
    return <Icon containerStyle={{ marginTop: 6 }} name="map" size={25} color={tintColor} />;
},

About the problem with the active Yellow line on Android, you can change the background color property to be transparent or set 0 for height:

tabBarOptions: {
    indicatorStyle: {
        height: 0
    }
}

And for the last problem about the problem about the space between the cells, I don't think that there is a solution for now.

You can try to make the navigation smaller ( for example: width: '80%' )... this will set the cells closer to each other... but I have never tried that and I am not sure is it a good solution ;)

Answer 2

To change the distance between the icon and the top of the bar (Question 1 as of react-navigation 4.x), add padding to tabStyle inside tabBarOptions:

tabBarOptions: {
    tabStyle: {
      paddingBottom: 8,
      paddingTop: 8,
    }
}

Answer 3

Try the indicatorStyle config option:

tabBarOptions: {

    indicatorStyle: {
      backgroundColor: 'transparent'
    }
}