SafeAreaView not working on Android. Giving wrong paddings

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

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

[burkeshartsis]

Currently SafeAreaView on android just returns a View 😢

~~https://github.com/facebook/react-native/blob/master/Libraries/Components/SafeAreaView/SafeAreaView.android.js~~

Update: Still just returns a view on Android but everything lives in one component now.

https://github.com/facebook/react-native/blob/master/Libraries/Components/SafeAreaView/SafeAreaView.js#L37