-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SafeAreaView not working on Android. Giving wrong paddings #17371
Comments
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. |
@waquidvp But if you try it out it gives bottom padding, which has an effect |
Currently Update: Still just returns a view on Android but everything lives in one component now. |
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. |
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. |
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. |
Hey, |
In the
So now I definitely use it in my project but I use |
@amalChandran I'm doing the same. This is a good example of how to adapt safeareaview: |
There's a new api for android devices called DisplayCutout that can be used for dealing with notches. We should consider using this with |
@sgtpepper43 start an issue as a discussion, see below |
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? |
@yodaheis |
There's already an API to get notches on Android, we don't need to do any weird hacks to do it. |
@sgtpepper43 notches API is available only in Android 9.0!! please tell me if I'm wrong? |
TL;DR
this gave me the following results on Android ===================================================================== Hope that makes sense ¯_(ツ)_/¯ |
@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 |
@sgtpepper43 Three is still too much... |
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? |
@sgtpepper43 Probably not a lot, but still some of them. |
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
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.)
The text was updated successfully, but these errors were encountered: