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

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.

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