`StatusBar.currentHeight` gives incorrect height on Google Pixel 5a (Android 12)

[ly-martin]

Description

StatusBar.currentHeight provides an incorrect value for the height of the status bar on a Google Pixel 5a with Android 12. From basic testing, this does not seem to be an issue on other devices or on an older OS (Android 11)

Screenshot when using StatusBar.currentHeight as the top margin

Expected:

Version

0.66.0

Output of npx react-native info

example on Expo, this is occurring in multiple versions of react native, notably tested on 0.66.0 and 0.64.2

Steps to reproduce

1. use StatusBar.currentHeight
2. compare calculated height on Google Pixel 5a (Android 12) to other Android devices - the height for Pixel 5a Android 12 does not match the full height as it appears on the device while other devices do still work

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/qXx7COUDg

[cristianoccazinsp]

Not just Pixel 5a, but many devices that may have a notch.

[markholland]

This started happening for me on my Pixel 4a after the 5 March 2022 Android security update. Before this it was not an issue on Android 12 for me.

[Javierd]

I'm also running into this issue

[julienR2]

Our users also experiences this issue in our app running on an Android 12. After looking a bit around, this is probably not a React Native issue, but most likely a Android 12 issue.

It seems they when through their beta without realising that the native function returning the status bar height, was giving back a wrong value/

Hopefully Android 12 issues a fix soon, in the meantime you'll have to either:

• add an exception when getting StatusBar.currentHeight when running on Android 12 (although I didn't manage to find the precise height of this Status Bar)
• wait for an Android fix..
• some other solution I haven't think of ?

[shmkane]

Bump? Has anyone found a solution for this?

[cristianoccazinsp]

For me, StatusBar ended up being totally unreliable. The only thing that worked was to listen to layout events with a root view; however, that also needed extra care with the keyboard height on android which also needs to be listened to so the screen height is compensated.

[shmkane]

For me, StatusBar ended up being totally unreliable. The only thing that worked was to listen to layout events with a root view; however, that also needed extra care with the keyboard height on android which also needs to be listened to so the screen height is compensated.

Would you be willing to share your implantation for this. Me and others who stumble on this would appreciate it 🙂

[cristianoccazinsp]

It's actually a really ugly work around, shouldn't really share something that ugly!.

Either way, the idea is simple:

• Wrap your app in a <View this.onRootLayout>....</View> or similar
• On the onRootLayout just set a global variable, something like:

      let kbHeight = IS_ANDROID
        ? global.keyboardVisible?.endCoordinates?.height
        : 0;
      global.Dimensions = {
        width: e.nativeEvent.layout.width,
        height: e.nativeEvent.layout.height + (kbHeight ? kbHeight : 0),
      };

• You will notice I'm also globally listening to the keyboard and setting it in another global variable with Keyboard.addListener so for Android I can add the keyboard height as the layout height would otherwise not include it.
• Lastly, the status bar height could be just the difference between this calculated height and the original's Dimensions height.

[julienR2]

We ended up using react-native-safe-area-context which were luckily already using (I hate adding lib to palliate a bug in a native function)..

It gives the insets of the devices, with the correct value for the top inset (the status bar). They probably don't rely on StatusBar.currentHeight, but on the native function instead, which makes it perfectly reliable.

It also enforces a better usage of this value which can actually change when rotating the screen. So we shouldn't get it statically, but react to its changes instead. And react-native-safe-area-context provides the tools for it.

Again, not the best solution as it requires to add a lib, but at least the lib provides the right values !

Hope it can help until it's fix on React-Native side !

[JosephVasse]

We ended up using react-native-safe-area-context which were luckily already using (I hate adding lib to palliate a bug in a native function)..

It gives the insets of the devices, with the correct value for the top inset (the status bar). They probably don't rely on StatusBar.currentHeight, but on the native function instead, which makes it perfectly reliable.

It also enforces a better usage of this value which can actually change when rotating the screen. So we shouldn't get it statically, but react to its changes instead. And react-native-safe-area-context provides the tools for it.

Again, not the best solution as it requires to add a lib, but at least the lib provides the right values !

Hope it can help until it's fix on React-Native side !

Do you have any code snippet that you could share ? I tried to use react-native-safe-area-context (SafeAreaProvider & SafeAreaView) but it does not seems to work

Thanks

[julienR2]

Hi !
We quick fixed it statically until we have time to tackle it properly or it gets fixed. It look like this:

import { initialWindowMetrics } from 'react-native-safe-area-context'
import { hasNotch } from 'react-native-device-info'

const getStatusBarHeight = () => {
  if (isIos) {
    return hasNotch() ? 44 : 20
  }
  return initialWindowMetrics?.insets.top || 0
}

The initialWindowMetrics?.insets.top actually returns the correct insets. (Obviously it would be better to use a useInsets and the context to be sure to have it updated in case it change dynamically)

Let me know if it's unclear !

[jordimas96]

I'm programming an app with Android Studio and testing it in a virtual Pixel 6, and the functions to get statusbar height return something like 60px, but the real bar is at least 125px