react-native: 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
- Add view setup like this
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }} onLayout={this.onLayout} />
</SafeAreaView>
- 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.)
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 4
- Comments: 20 (3 by maintainers)
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.Currently
SafeAreaView
on android just returns aView
😢~~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
Hey, this issue becomes more relevant as the notched Android devices are spreading - OP6, Huawei Pro 20, LG G7 etc.
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.
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.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.