mirror of
https://github.com/status-im/react-native.git
synced 2025-01-15 03:56:03 +00:00
3949e937cc
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: https://github.com/facebook/react-native/pull/18534 Reviewed By: PeteTheHeat, shergin Differential Revision: D9166052 Pulled By: hramos fbshipit-source-id: c086e1ae4af13110a7453b770ca75b6e0d5321ea
94 lines
2.7 KiB
Objective-C
94 lines
2.7 KiB
Objective-C
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
#import "RCTSafeAreaView.h"
|
|
|
|
#import <React/RCTBridge.h>
|
|
#import <React/RCTUIManager.h>
|
|
|
|
#import "RCTSafeAreaViewLocalData.h"
|
|
|
|
@implementation RCTSafeAreaView {
|
|
__weak RCTBridge *_bridge;
|
|
UIEdgeInsets _currentSafeAreaInsets;
|
|
}
|
|
|
|
- (instancetype)initWithBridge:(RCTBridge *)bridge
|
|
{
|
|
if (self = [super initWithFrame:CGRectZero]) {
|
|
_bridge = bridge;
|
|
}
|
|
|
|
return self;
|
|
}
|
|
|
|
RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)decoder)
|
|
RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame)
|
|
|
|
static BOOL UIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIEdgeInsets insets2, CGFloat threshold) {
|
|
return
|
|
ABS(insets1.left - insets2.left) <= threshold &&
|
|
ABS(insets1.right - insets2.right) <= threshold &&
|
|
ABS(insets1.top - insets2.top) <= threshold &&
|
|
ABS(insets1.bottom - insets2.bottom) <= threshold;
|
|
}
|
|
|
|
#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
|
|
|
|
- (void)safeAreaInsetsDidChange
|
|
{
|
|
if (![self respondsToSelector:@selector(safeAreaInsets)]) {
|
|
return;
|
|
}
|
|
|
|
[self setSafeAreaInsets:self.safeAreaInsets];
|
|
}
|
|
|
|
#endif
|
|
|
|
// Emulate safe area for iOS < 11
|
|
- (void)layoutSubviews
|
|
{
|
|
[super layoutSubviews];
|
|
if ([self respondsToSelector:@selector(safeAreaInsets)]) {
|
|
return;
|
|
}
|
|
UIViewController* vc = self.reactViewController;
|
|
if (!vc) {
|
|
return;
|
|
}
|
|
CGFloat topLayoutOffset = vc.topLayoutGuide.length;
|
|
CGFloat bottomLayoutOffset = vc.bottomLayoutGuide.length;
|
|
CGRect safeArea = vc.view.bounds;
|
|
safeArea.origin.y += topLayoutOffset;
|
|
safeArea.size.height -= topLayoutOffset + bottomLayoutOffset;
|
|
CGRect localSafeArea = [vc.view convertRect:safeArea toView:self];
|
|
UIEdgeInsets safeAreaInsets = UIEdgeInsetsMake(0, 0, 0, 0);
|
|
if (CGRectGetMinY(localSafeArea) > CGRectGetMinY(self.bounds)) {
|
|
safeAreaInsets.top = CGRectGetMinY(localSafeArea) - CGRectGetMinY(self.bounds);
|
|
}
|
|
if (CGRectGetMaxY(localSafeArea) < CGRectGetMaxY(self.bounds)) {
|
|
safeAreaInsets.bottom = CGRectGetMaxY(self.bounds) - CGRectGetMaxY(localSafeArea);
|
|
}
|
|
|
|
[self setSafeAreaInsets:safeAreaInsets];
|
|
}
|
|
|
|
- (void)setSafeAreaInsets:(UIEdgeInsets)safeAreaInsets
|
|
{
|
|
if (UIEdgeInsetsEqualToEdgeInsetsWithThreshold(safeAreaInsets, _currentSafeAreaInsets, 1.0 / RCTScreenScale())) {
|
|
return;
|
|
}
|
|
|
|
_currentSafeAreaInsets = safeAreaInsets;
|
|
|
|
RCTSafeAreaViewLocalData *localData = [[RCTSafeAreaViewLocalData alloc] initWithInsets:safeAreaInsets];
|
|
[_bridge.uiManager setLocalData:localData forView:self];
|
|
}
|
|
|
|
@end
|