Tab label text is cut off with 5 tabs on iPhone X

timomeh / react-native-material-bottom-navigation

💅🔧👌 a beautiful, customizable and easy-to-use material design bottom navigation for react-native

MIT License

710 stars 127 forks source link

Tab label text is cut off with 5 tabs on iPhone X #113

Closed coderdave closed 6 years ago

coderdave commented 6 years ago

Question / Problem

I'm using 5 tabs. The label text however gets cut off on iPhone X layouts. It works fine for the other iOS devices.

Is there a way around this without using the ShiftingTab? Because I always want to see the label text.

Actual behavior

Far left label text is getting cut off.

Expected behavior

Tabs are adjusted accordingly so the label text isn't cut off for iPhone X devices.

Additional resources

tab

Environment

I'm using version 1.0.2 of this library.

fedeerbes commented 6 years ago

Hi @coderdave i had the same problem and added this style to < FullTab/ > component. { minWidth: null, maxWidth: null }, in order to make room for 5 tabs

coderdave commented 6 years ago

Ok, that will be a fine workaround for now.