BottomNavigation SafeArea inconsistent

[hardcodet]

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

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-vector-icons (found: 0.0.0, latest: 7.1.0)
• expo (found: 40.0.0, latest: 39.0.5)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[hardcodet]

Found a workaround: react-navigation/react-navigation#8972 (comment)

That feels dirty though - as said, IMO, devs should be able and responsible to take care of safe areas themselves. That issues wouldn't even exist then. Just my 0.02$ of course 👍

[vtoupet]

@hardcodet This is a regression that came with 4.5.0 If you downgrade to 4.4.1 it works consistently out of the box (no need for additional SafeAreaView)

[hardcodet]

Hi @vtoupet

I'm afraid I actually am on 4.4.1. Here's my yarn.lock:

react-native-paper@^4.1.0:
  version "4.4.1"
  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.4.1.tgz#b2fb7c0889fd15d52d6fd5c27df13075104ef911"
  integrity sha512-c2+0XsTg6aAwyJNwumtZLPuFw72/kYyFS2vXDzWZddx5OYF052DbPPUhX4SVom2jxVaI1y9izx88RO5c4hGJEA==
  dependencies:
    "@callstack/react-theme-provider" "^3.0.5"
    color "^3.1.2"
    react-native-safe-area-view "^0.14.9"

[Trancever]

@hardcodet Could you try version v4.5.0? We migrated away from safe-are-view which seems to be buggy on the latest Iphone.

[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 }}

[JesusTectronic]

"react-native-paper": "^4.12.0"

<BottomNavigation
    safeAreaInsets={{ bottom: 35 }}
    ...
/>