React-native: SafeAreaView not working on Android. Giving wrong paddings

[rogerkerse]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 9.3.0
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0 => 0.51.0

Target Platform: Android (8.1.0) Pixel 2 XL

Steps to Reproduce

1. Add view setup like this

<SafeAreaView style={{ flex: 1 }}>
    <View style={{ flex: 1 }} onLayout={this.onLayout} />
</SafeAreaView>

1. Add onLayout function like this

onLayout = (event) => {
    const { y: top, height } = event.nativeEvent.layout
    const { height: screenHeight } = Dimensions.get('window')

    const safeAreaBottomPadding = screenHeight - height - top

    console.log(top, safeAreaBottomPadding) // prints 0, 27.9999.
}

Expected Behavior

Bottom padding should be calculated 0.

Actual Behavior

The bottom padding comes out 27.9999 which is half the size of bottom soft navigation bar so it does not make sense. (Top status bar seems about 28 pixels, but y gets value of 0).

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[waquidvp]

The way SafeAreaView is set up, on Android it shouldn't have any affect. SafeAreaView only has affect on iOS, specifically on the iPhone X. It is created so that your view doesn't get in the way of the top notch and the home indicator.

[rogerkerse]

@waquidvp But if you try it out it gives bottom padding, which has an effect

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[hramos]

It does not look like this has been reproduced in 0.54 or later. There has been no follow up from the author in over seven days, so we're closing this issue.

Furthermore, SAV is just a View on Android.

[Thomas-Calliweb]

Hi, i've got this kind of issue, i'm testing my app on my android phone and it has a notch (one plus 6) at the top.

SafeAreaView will be usefull to be effective on android too, and if it is not possible, what is the solution to prevent absolute element to be under the topbar ?

Thanks.

[szemannp]

Hey,
this issue becomes more relevant as the notched Android devices are spreading - OP6, Huawei Pro 20, LG G7 etc.

[amerllica]

In the SafeAreaView Docs was told:

It is currently only applicable to iOS devices with iOS version 11 or later.

So now I definitely use it in my project but I use Platform to recognize device platform and for Android, I make a manual safe area for the status bar.

[pribeh]

@amalChandran I'm doing the same. This is a good example of how to adapt safeareaview:

https://stackoverflow.com/questions/51289587/react-native-how-to-use-safeareaview-for-android-notch-devices

[sgtpepper43]

There's a new api for android devices called DisplayCutout that can be used for dealing with notches. We should consider using this with SafeAreaView. I would post this in a new issue or feature request but I honestly cannot figure out where I'm supposed to do that.

[morenoh149]

@sgtpepper43 start an issue as a discussion, see below

[yodaheis]

Can we use the difference between Dimensions.get('screen') and Dimensions.get('window') to calculate status bar height and set safe margin according to the orientation?

[AhmedMKamal]

@yodaheis Dimensions.get('screen') returns the width/height of the entire screen without status bar, soft menu bar or navigation bar while Dimensions.get('window')returns the width/height of the application view "screen size without status bar, soft menu bar or navigation bar while" but when it comes to notches I'm not sure but your suggestion makes sense for me I may give it a try.

[sgtpepper43]

There's already an API to get notches on Android, we don't need to do any weird hacks to do it. SafeAreaView just needs to be updated to use it.

[AhmedMKamal]

@sgtpepper43 notches API is available only in Android 9.0!! please tell me if I'm wrong?

[AhmedMKamal]

TL;DR
I tested this out and what I ended up with is that the notch in Android is just a part of the status bar so dealing with StatusBar.currentHeight makes your life easier when dealing with notches, StatusBar.currentHeight on a normal device returns 24 while on a notched device it returns 48 keep in mind this is the behavior I got on a simulated devices running Android 9.0 so I'm not sure if it's the default behavior.
But, SafeAreaView adds some extra padding on Android so I ended up with something like that

<SafeAreaView 
    style={styles.container}
    forceInset={Platform.OS === 'android' && { vertical: 'never' }}>
        <StatusBar />{/* this is a custom StatusBar component */}
        <AppNavigator />
</SafeAreaView>

this gave me the following results on Android

=====================================================================

Hope that makes sense ¯_(ツ)_/¯

[sgtpepper43]

@AhmedMKamal yeah, the API is only available on Android 9, but almost all phones with notches are brand new and running Android 9. There are at most a small handful of phones you'd have to worry about that don't support the API and also have notches. Like literally three phones probably

[sbatezat]

@sgtpepper43 Three is still too much...
I've got the issue on a Huawei p20 pro which has not installed the update to Android 9. We need to think about these users too.

[sgtpepper43]

Sure we need to think about these users, but by the time React Native gets updated with _any_ fixes how many notched phones will still be on Android 8?

[sbatezat]

@sgtpepper43 Probably not a lot, but still some of them.
For the time being, I'm hardcoding a paddingTop on containers (see https://stackoverflow.com/a/51427630)