-
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 backward support(ios 9 & 10) #18255
Comments
See #17638 |
It's still a problem in RN 0.54, but according to this, writing ios-only version-specific code is a reasonable workaround to SafeAreaView not always being safe. |
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions. |
The stale tag on this issue can be removed |
I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while. If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here. |
Summary: Currently `SafeAreaView` works only on iOS 11, because implemented in terms of native safeArea API, that not exists in older iOS versions. But this make it hard to use the component in real applications, because content will be under top bars on older versions of iOS and no reliable way to workaround this in js. More motivation in #17638 This changeset emulate safe area in terms of `UIViewController` layout guides API if safeArea not available. Fixes #17638, #18255 I run RNTester with these simulators: iPhone6 (9.3), iPhone6 (10.0), iPhone6 (11.2), iPhoneX (11.2) - Start RNTester application - Look on top header, it should not overlap status bar - Go to the `<SafeAreaView>` example, open modal - Modal area should not overlap status bar <img src="http://vovkasm.skitch.vovkasm.org/iPhone6_10_20662C5B.png" width="40%"> <img src="http://vovkasm.skitch.vovkasm.org/iPhone6_11_20662CC8.png" width="40%"> <img src="http://vovkasm.skitch.vovkasm.org/iPhone6_10_pr_20662DE6.png" width="40%"> <img src="http://vovkasm.skitch.vovkasm.org/iPhone6_11_pr_20662DA8.png" width="40%"> [IOS] [BUGFIX] [SafeAreaView] - Make SafeAreaView to work on iOS < 11 Pull Request resolved: #18534 Reviewed By: PeteTheHeat, shergin Differential Revision: D9166052 Pulled By: hramos fbshipit-source-id: c086e1ae4af13110a7453b770ca75b6e0d5321ea
Summary: Currently `SafeAreaView` works only on iOS 11, because implemented in terms of native safeArea API, that not exists in older iOS versions. But this make it hard to use the component in real applications, because content will be under top bars on older versions of iOS and no reliable way to workaround this in js. More motivation in facebook#17638 This changeset emulate safe area in terms of `UIViewController` layout guides API if safeArea not available. Fixes facebook#17638, facebook#18255 I run RNTester with these simulators: iPhone6 (9.3), iPhone6 (10.0), iPhone6 (11.2), iPhoneX (11.2) - Start RNTester application - Look on top header, it should not overlap status bar - Go to the `<SafeAreaView>` example, open modal - Modal area should not overlap status bar <img src="http://vovkasm.skitch.vovkasm.org/iPhone6_10_20662C5B.png" width="40%"> <img src="http://vovkasm.skitch.vovkasm.org/iPhone6_11_20662CC8.png" width="40%"> <img src="http://vovkasm.skitch.vovkasm.org/iPhone6_10_pr_20662DE6.png" width="40%"> <img src="http://vovkasm.skitch.vovkasm.org/iPhone6_11_pr_20662DA8.png" width="40%"> [IOS] [BUGFIX] [SafeAreaView] - Make SafeAreaView to work on iOS < 11 Pull Request resolved: facebook#18534 Reviewed By: PeteTheHeat, shergin Differential Revision: D9166052 Pulled By: hramos fbshipit-source-id: c086e1ae4af13110a7453b770ca75b6e0d5321ea
I am using SafeAreaView in my project, its working fine in ios 11, But in ios 10 the content going behind Status bar, How to make SafeAreaView backward compatibility.
Environment
OS: macOS High Sierra 10.13.1
Node: 9.4.0
Yarn: 1.3.2
npm: 4.6.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0 => 0.51.0
Expected Behavior
SafeAreaView Should start its content after status bar
Actual Behavior
The content going behind Status bar
Steps to Reproduce
(Link to Snack, or steps to reproduce.)
The text was updated successfully, but these errors were encountered: