Label not showing in iPhone X/XR/XS

yjacobowitz commented 5 years ago

What kind of Issue is this?

Bug Report

Actual behavior

Label not showing in FullTab component in iPhone X + XR + XS

Expected behavior

See the label under the icon

Additional resources

XR simulator:

8 Plus simulator:

Environment

software	version
react-native-material-bottom-navigation	1.0.2
react-native or expo	0.58.3
node	10.13.0
npm or yarn	6.4.1

timomeh commented 5 years ago

Please provide a reproductible expo snack so I can check this.

yjacobowitz commented 5 years ago

https://snack.expo.io/Hko4mMD44

example without icons...I couldn't find a simulator for iphone XR in the link that you sent

timomeh commented 5 years ago

Thanks, but I can't reproduce your error. I ran your expo snack inside an iPhone XR Simulator and the label is visible, see this screenshot:

I also extended your expo snack to use an icon, and both the icon and the label is visible: https://snack.expo.io/@timomeh/d29ya2

But I noticed that you specified a height for the BottomNavigation:

<BottomNavigation
  style={{
    height: 56,
  // ...

This will most likely be your problem. The BottomNavigation on iPhone X/XR/XS get's some additional paddingBottom, because of the SafeArea of those devices. If you specify the height, this paddingBottom will cut off the bottom, and it looks like the labels aren't rendered.

I would advise you not to override the height.

yjacobowitz commented 5 years ago

Removing the height solved my problem! Thanks so much

timomeh / react-native-material-bottom-navigation