react-native-safe-area-context

react-native-safe-area-context copied to clipboard

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>
    )
}

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

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

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

@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.

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

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.

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

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.

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

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

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 ?

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.