SafeAreaView backward support(ios 9 & 10) #18255
Labels
Platform: iOS
iOS applications.
Ran Commands
One of our bots successfully processed a command.
Resolution: Locked
This issue was locked by the bot.
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. |
stale
bot
added
the
Stale
|
The stale tag on this issue can be removed |
stale
bot
removed
the
Stale
react-native-bot
added
the
Ran Commands
|
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. |
facebook-github-bot
pushed a commit
that referenced
this issue
Aug 23, 2018
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
t-nanava
pushed a commit
to microsoft/react-native-macos
that referenced
this issue
Jun 17, 2019
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
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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: