[Android] SafeAreView is not working on Android with notch, tested on Pixel 7 emulator

[nazmeln]

Hey,
I've noticed that the SafeAreaView is not working on the Pixel 7 emulator. Any ideas on how it might be fixed? :)

Here's a screenshot:

Code:

import React from 'react'
import { SafeAreaProvider, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
import { Text, View } from 'react-native'

const TestComponent = () => {
    const insets = useSafeAreaInsets()

    console.log('insets', insets)   // LOG  insets {"bottom": 0, "left": 0, "right": 0, "top": 0}
    
    return (
        <SafeAreaView>
            <View>
                <Text>Here Android notch Pixel 7 Here Android notch Pixel 7 Here Android notch Pixel 7</Text>
            </View>
        </SafeAreaView>
    )
}

export const App = (): JSX.Element => {
    return (
        <SafeAreaProvider>
            <TestComponent />
        </SafeAreaProvider>
    )
}

[akuul]

I have the same issue on all Android devices I have tested.

During reload I can see that it actually initialises correct insets, but then it nullifies. It seems on onInsetsChange nextInsets returned from event are 0s what makes it pass the setInsets() check and sets our insets to nextInsets (which are 0)

Current workaround for me is to import initialWindowMetrics

[nazmeln]

Hey @akuul,
Just to confirm, have you tested it on physical devices?

[akuul]

Hey @akuul, Just to confirm, have you tested it on physical devices?

I did, on Pixel 7 Pro and Pixel 3a. Both of them returns 0s, but I can see that initially they return correct value

[nazmeln]

@akuul
Aa okay, then it's not only on the emulator. I'll check with package older versions, maybe some of them working.
Also, as a workaround, you can use status bar height to tackle it on Android devices for now.

[geekynasir]

did anybody find a workaround? for me, the status bar height is also not correct on android devices.

[Garrett-Afloat]

Any update on this issue?

We are also seeing this problem on emulators and physical devices.

We are using a SafeAreaProvider -> SafeAreaView to house an Expo Drawer. The drawer has a navigation bar as the header. Regardless, the insets are not respected on Android but are on iOS. The app crashes as a result.

[jacobp100]

What’s the expected behaviour here? What do other apps do? Seems odd that the status bar covers half the safe area

In terms of fixes, this most likely won’t get fixed without a community PR. Were very good at merging and releasing PRs if someone wants to take a shot at it

[akuul]

Actually, it is working as expected. The confusion happened on my end due to us drawing under iOS status bar while not under Android. Therefore it returns 0s since, well, it just perfectly aligns with the Android status bar. It just didn't click me immediately since I intuitively expected it return status bar " height " as it did for iOS.

Status bar in the picture might be inaccurate, probably due to it being simulator. My physical Pixel 7 status bar does cover the punch hole camera.

[jacobp100]

Can I close this? Or is there still an issue?

[kbkmn]

Getting similar results on my physical Pixel 7 Pro. Code is simple

const safeInsets = useSafeAreaInsets();

useEffect(() => {
 console.log(safeInsets.top);
}, [safeInsets.top]);

Logs 0 and then 48.53932189941406, so layout jumps to normal position on second render.
<SafeAreaProvider> is the first component in the App.tsx

[geekynasir]

Can I close this? Or is there still an issue?

I'm not sure if it's fixed in a newer version or if there is a workaround for it .What's the current status of it? Is this the default behavior ?

[ddnzcn]

Can I close this? Or is there still an issue?

I'm not sure if it's fixed in a newer version or if there is a workaround for it .What's the current status of it? Is this the default behavior ?

I currently have this issue on the android emulator. Tested both in 4.9.0 and 4.8.2.

[TechWiz93]

currently have the same issue, been throwing every resource at it, even asked AI to generate 3 different simple code to wrap around this emulator and it does not work

[martipello]

i see this same issue, i have a pixel 7a emulator and a pixel 7a device, the issue is only on the emulator for me

[icastillejogomez]

Same error here

[JuanFCVal]

I have the same Issue in my Pixel 7 emulator & physical device Android 35

[CharcoalStyles]

Same issue on a physical Pixel 7.

I've set the minimum height of the SafeAreaView to be the view height and a background colour. There is a white section beneath the backgroun colour of what looks like the hright that should eb at the top for the status bar.

[ryanbrink]

I think I'm running into the same issue, specifically on Android 35: the bottom safe area inset is zero when it shouldn't be, causing content to be clipped off the bottom of the screen.

[DomoApp]

I have the same issue for top and bottom edges on android

[melyux]

Bottom looks okay on Pixel 8 emulator, but the top edge is wrong for me too. Good on the real device, completely fail on the emulator. It makes using the emulator basically useless

[geneshairzan]

me too, experience same things.. cannot render on navbar area or safe area view ..

try both import from 'react-native-safe-area-context' or 'react-native'

in all enviroment , emulator, dev-build, or production build

:(

[johnnywang]

I was debugging a separate issue where my bottom buttons kept rendering under the keyboard, and came across this same issue, while trying to figure out what the offset should be. On a Pixel 8 emulator, and on a Pixel 6 Pro physical device, both of which have top and bottom notches that appear like they would render content, the top and bottom insets are returning 0.

Now, that said, my content IS rendering correctly, and is not bleeding into the top or bottom notch areas, while they do in iOS if the safe area insets are not set. I'm not sure if the Android system is just intentionally disallowing rendering into those areas while in the app, in which case, the insets being 0 would be correct (though I then need to rely on Constants.statusBarHeight to get the status bar height since insets.top is 0)

[irisjae]

@ryanbrink We're facing this issue. Any advice on how you worked around it? Would be very grateful.

[VimukthiShohan]

+1

[giantslogik]

The fix for me was to

import { SafeAreaView } from 'react-native-safe-area-context'; Used version ^5.2.0
instead of
import { SafeAreaView } from 'react-native';

[Silverun]

Indeed in useEffect the value for inset top while using SafeAreaView component from react-native-safe-area-context is jumping from 0 to different value and on some devices.

Don't forget to add StatusBar from Expo fixed issue for me on Pixel 6.
On older phones still the same problem.