BottomNavigation SafeArea inconsistent

Current behaviour

My bottom navigation has inconsistent padding at the bottom depending on whether it runs on an iPhone 11 or iPhone 12 Max simulator:

• if enclosed in a SaveAreaView, it looks good on the 12 Max, but has a huge bottom-padding on the 11
• without a SaveAreaView, it looks good on the 11, but is placed outside the safe area on the 12

It appears that the component tries to do some safe area calculations by itself, but fails at the more recent and bigger 12 Max.

Expected behaviour

This should be consistent. I would prefer it to not try and be smart about safe areas. After all, I have to take care of those on every screen, whether it contains a bottom navigation or not.

Code sample

Really just a simple bottom navigation. Every other control aligns properly on the bottom (if I use a SaveAreaView).

                <BottomNavigation shifting={false}
                                  style={{position: "absolute", bottom: 0, left: 0, right: 0,}}
                                  navigationState={{index: viewModel.pageIndex, routes}}
                                  onIndexChange={changePageIndex}
                                  renderScene={renderScene}

Screenshots (if applicable)

Without a SafeArewView around. 11 left, 12 Pro Max on the right:

Your Environment

react-native: 0.63.4 react-native-paper: 4.4.1 react-native-vector-icons: 0.0.0 expo: 40.0.0

[hardcodet]

yup, 4.5.0 seems to fix the issue, thanks! Good timing! 😉

[reimibeta]

style={{position: “absolute”, bottom: 0, left: 0, right: 0,}}

add this one to your BottomNavigation, you will love it.

safeAreaInsets={{ bottom: 0 }}