5th item goes out of screen

[renishdeveloper]

This issue is on Android, I don't test it on IOS.

Expected behavior

I'm using If 4 items then it's ok, but when I add 5th item the last item goes out of the screen. I need 5 item that is set properly in the screen width. How to reduce the margin between items ?

Environment

software	version
react-native-material-bottom-navigation	^1.0.4
react-native	0.59.9
node	v10.16.0
npm or yarn	npm

[timomeh]

You must provide a Screenshot and Code. I can't comprehend your issue without those informations.

[IrynaBt]

[timomeh]

Please prodive a full code example to reproduce it, otherwise i can't help you

[timomeh]

I'm going to close this issue due to inactivity. If it's still a problem, please provide a code example to reproduce it, for example with https://snack.expo.io/

[HZSamir]

Having the exact same issue as @IrynaBt with the content of the BottomNavigation spilling to either side. Only happens when I have 5 items or more.

[timomeh]

Please prodive a full code example to reproduce it, otherwise i can't help you

[jcargilo]

I know this is a little older, but I just ran into this issue as well trying to have 6 tabs (similar to FB). If anyone else stumbles on this, my solve was to lookup the default styles and discovered that the tabs have a minimum width defaulted to 80.

https://github.com/timomeh/react-native-material-bottom-navigation/blob/ae325eb468cad26e8089e81f2b0ddfcc50858a33/lib/IconTab.js#L153

So I just reduced this to make room for the additional tabs:

<IconTab style={{ minWidth: 60, }} ... />

Before:

After: