react-native-safe-area-context

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

I am using the latest version of react-native-safe-area-context 3.02 with react-navigation 5.1.6. I am unable to set the background or image cover the entire top status bar on Android phone with Notch. Using in emulator Pixel 3 XL in a Class Component.

The code i am using is :

<SafeAreaView edges={['top', 'bottom']} style={styles.container}> <StatusBar barStyle="dark-content" backgroundColor="transparent" /> <Image source={require('../assets/images/loginPhone.jpg')} style={{ width: '100%', height: '100%', position: 'absolute', resizeMode: 'cover' }} /> </Statusbar> </SafeAreaView>

Why are you using safe are view if you don't want to avoid going under the safe area?

@satya164 In react navigation example this is documented and safe area view will also manage the bottom inset so that it does not overlap in bottom in ios:

https://reactnavigation.org/docs/handling-safe-area/

Safe area applies insets on all sides and you can customize it with the edges prop. You don't want your image to avoid the safe area, so don't put it inside safe area view.

@satya164 Thanks a lot. Let me check

@satya164 The problem without SafeAreaView is that the bottom notch is also getting covered. When we use it, the bottom notch is creating a problem.

You need to modify some xml files in your android folder to get the app to draw under the status bar. The default behaviour is the app is drawn below the status bar, which is what you're seeing