search

th3rdwave / react-native-safe-area-context

A flexible way to handle safe area insets in JS. Also works on Android and Web!
MIT License
2.08k stars 191 forks source link

Doesn't account for notch on Pixel 7 in landscape mode #470

Closed NiGhTTraX closed 4 months ago

NiGhTTraX commented 4 months ago

Code

<SafeAreaProvider>
  <SafeAreaView style={{ flex: 1, backgroundColor: "blue" }}>
    <View>
      <Text>Hello world</Text>
    </View>
  </SafeAreaView>
</SafeAreaProvider>
"expo": "50.0.7",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.73.4",
"react-native-safe-area-context": "4.8.2",

Result

I tested it in the emulator and on the real device:

image
balazsgerlei commented 4 months ago

I think this is an emulator problem as I was able to test your sample code on both a Pixel 7 emulator with device skin enabled and a real Pixel 7 (running Android 14) and I only experience what you screenshot with the emulator. Also, on the emulator, pre-installed and system apps like Messages and Settings demonstrate the same issue.

Are you sure you experience the same on a real device? Also, would you look at pre-installed apps on the emulator, are they displayed incorrect too?

NiGhTTraX commented 4 months ago

You're right, I can't reproduce it anymore on the real device. I must have been doing something else wrong and then simplified my example too much. Sorry for the trouble.

balazsgerlei commented 4 months ago

There is defintely something weird going on with the Pixel 7 emulator I think its display cutout emulation is buggy. The same worked fine on a Pixel 6 even though it has a similar cutout, but content goes under it on the Pixel 7.

balazsgerlei commented 4 months ago

Interesting, I tried out other emulator variants and the only incorrect one I found is the Pixel 7 image with Android 13 (API 33) with Google Play. Both the Android 14 Google Play image and the Android 13 image without Google Play simulates the cutout correctly... I might report this to Google if I find time for it.