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

[julienR2]

Arf that's annoying when we can't rely on this value.. Specially on Android were there's a big range of different devices.

Does getStatusbar return always this same value ? If you run the function later, in a useEffect, or delayed in some way, does it still return the wrong value ?

Also side discovery, in android developer option, you can simulate different status bar height: search for Display cutout in the developer options, which let you simulate a notch, and different kind of cutout affecting the status bar height. Practical to debug on real device.

[jordimas96]

Sizes in Pixel 6 are (measured from a screenshot):
StatusBar: 136px
NavBar (pill): 42px

My functions to get them are:

fun getStatusBarHeight(): Int {
    val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
    return if (resourceId > 0) resources.getDimensionPixelSize(resourceId) else 0
}

fun getNavigationBarHeight(): Int {
    val resourceId = resources.getIdentifier("navigation_bar_height", "dimen", "android")
    return if (resourceId > 0) resources.getDimensionPixelSize(resourceId) else 0
}

But they return 63 and 42. I assume with a navbar (not the pill) the result would be correct too, so the main problem here is the statusbar.

I knew the Pixel 3XL had a huge notch (from a internet screenshot I calculated it was less than 140px).
For the moment I put this code:

if (Build.MANUFACTURER == "Google") lp.topMargin = -140;

That assigns the value as if it was 140, in case it's a Pixel. It would be amazing to get the exact value but it's not strictly necessary for my app. I just needto set the exact value or bigger, so this makes the trick in Pixels, for now.

[jordimas96]

Well finally I managed to get the exact value, using some deprecated functions. What I did was detect the full screen height (2400) and supress the innerheight (2222) from it and the navbar too (42) so I ended with the long awaited 136.

EDIT: Turns out this method only worked on Pixels, so the final result is a mix of those 2:

fun getStatusBarHeight(): Int {
    // Per a Pixels //
    val displayMetrics = DisplayMetrics()
    windowManager.defaultDisplay.getMetrics(displayMetrics)
    val innerHeight = displayMetrics.heightPixels
    windowManager.defaultDisplay.getRealMetrics(displayMetrics)
    val height = displayMetrics.heightPixels
    val statusbarHeight = height - (innerHeight + getNavigationBarHeight());

    if (statusbarHeight > 0) {
        return statusbarHeight;
    } else {
        // Per a no Pixels //
        val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
        return if (resourceId > 0) resources.getDimensionPixelSize(resourceId) else 0
    }
}

fun getNavigationBarHeight(): Int {
    val resourceId = resources.getIdentifier("navigation_bar_height", "dimen", "android")
    return if (resourceId > 0) resources.getDimensionPixelSize(resourceId) else 0
}

[github-actions]

It looks like your issue or the example you provided uses an unsupported version of React Native. Due to the amount of issues we receive, we're currently accepting only new issues against one of the supported version. Please open your issue on StackOverflow to get further community support.

[edstbbz]

`
Working solution for API 29+
It was with this version that Google introduced edge-to-edge

public void getStatusBarHeight(Promise promise) {

    final Activity curActivity = getCurrentActivity();
    if (curActivity == null) {
        return;
    }

    int topInset = 0;

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
        View decorView = getCurrentActivity().getWindow().getDecorView();
        WindowInsets windowInsets = decorView.getRootWindowInsets();
        Insets insets;

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            insets = windowInsets.getInsets(WindowInsets.Type.statusBars());
            topInset = insets.top;
        } else {
            topInset = windowInsets.getSystemWindowInsetTop();
        }

        Rect visibleRect = new Rect();
        decorView.getGlobalVisibleRect(visibleRect);
        final float height =
                topInset > 0
                        ?  PixelUtil.toDIPFromPixel(Math.max(topInset - visibleRect.top, 0))
                        : 0;
        promise.resolve(height);
    } else {
        promise.resolve(topInset);
    }
}`

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.

[artemis-prime]

Stop auto closing these! This is a bug! And why doesn't the RN team respond to something like this?

[its-clem-fandango]

still an issue. anyone figure it out?

[rahulthakurtorum]

Getting the Incorrect Status bar height on Google pixel 4a

[tonynecula]

still an issue, managed to find a workaround:

import { Platform, NativeModules } from 'react-native';
const { StatusBarManager } = NativeModules;

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;

[Abbondanzo]

👋 I've put a fix in #44697 that relies on window insets to determine status bar height, rather than reading from a potentially mismatched resource value. This should make its way into 0.75

[julienR2]

Thanks for tackling this long-lasting issue @Abbondanzo 🙌