From c73e021a4b11bbae3a7868670d140fe3d5dac6ae Mon Sep 17 00:00:00 2001 From: Ken Tominaga Date: Mon, 16 May 2022 09:27:43 -0700 Subject: [PATCH] Remove iOS 11 deprecation warnings around SafeArea (#32851) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: We don't have to check or emulate the safe area for iOS 11 above. I deleted the unnecessary check for the safe area. This is a continuation pull request of these iOS 11 availability check. * [Remove iOS 11 version check by ken0nek · Pull Request https://github.com/facebook/react-native/issues/32151 · facebook/react-native](https://github.com/facebook/react-native/pull/32151) * [Remove iOS 11 availability check by ken0nek · Pull Request https://github.com/facebook/react-native/issues/32488 · facebook/react-native](https://github.com/facebook/react-native/pull/32488) ----- - Stop using layout guide (`topLayoutGuide`, `bottomLayoutGuide`) - Refactor `RCTSafeAreaView` - Delete `emulateUnlessSupported` property Docs PR: https://github.com/facebook/react-native-website/pull/2919 ## Changelog [iOS] [Removed] - Remove `emulateUnlessSupported` Pull Request resolved: https://github.com/facebook/react-native/pull/32851 Reviewed By: philIip, sammy-SC Differential Revision: D33586023 Pulled By: cortinico fbshipit-source-id: 75fc1037141f71d9340c7b875a6bf86f9cfd6a02 --- .../RCTSafeAreaViewNativeComponent.js | 4 +- .../Components/SafeAreaView/SafeAreaView.js | 33 +-------- .../__snapshots__/SafeAreaView-test.js.snap | 16 ++--- .../RCTSafeAreaViewComponentView.mm | 11 +-- React/Views/RCTWrapperViewController.m | 19 +++-- React/Views/SafeAreaView/RCTSafeAreaView.h | 2 - React/Views/SafeAreaView/RCTSafeAreaView.m | 72 +------------------ .../SafeAreaView/RCTSafeAreaViewManager.m | 2 - .../SafeAreaView/SafeAreaViewExample.js | 21 +----- 9 files changed, 23 insertions(+), 157 deletions(-) diff --git a/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js b/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js index 86b1d7edb6cd54..8cf1333d136097 100644 --- a/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js +++ b/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js @@ -9,7 +9,6 @@ */ import type {ViewProps} from '../View/ViewPropTypes'; -import type {WithDefault} from '../../Types/CodegenTypes'; import codegenNativeComponent from '../../Utilities/codegenNativeComponent'; import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes'; @@ -17,8 +16,7 @@ import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes'; type NativeProps = $ReadOnly<{| ...ViewProps, - // Props - emulateUnlessSupported?: WithDefault, + // No props |}>; export default (codegenNativeComponent('SafeAreaView', { diff --git a/Libraries/Components/SafeAreaView/SafeAreaView.js b/Libraries/Components/SafeAreaView/SafeAreaView.js index 20c05774ed4138..1cb0004a38a7df 100644 --- a/Libraries/Components/SafeAreaView/SafeAreaView.js +++ b/Libraries/Components/SafeAreaView/SafeAreaView.js @@ -12,18 +12,9 @@ import Platform from '../../Utilities/Platform'; import * as React from 'react'; import View from '../View/View'; -import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes'; import type {ViewProps} from '../View/ViewPropTypes'; -type Props = $ReadOnly<{| - ...ViewProps, - emulateUnlessSupported?: boolean, -|}>; - -let exported: React.AbstractComponent< - Props, - React.ElementRef>, ->; +let exported: React.AbstractComponent>; /** * Renders nested content and automatically applies paddings reflect the portion @@ -35,27 +26,9 @@ let exported: React.AbstractComponent< * sensor housing area on iPhone X). */ if (Platform.OS === 'android') { - exported = React.forwardRef>>( - function SafeAreaView(props, forwardedRef) { - const {emulateUnlessSupported, ...localProps} = props; - return ; - }, - ); + exported = View; } else { - const RCTSafeAreaViewNativeComponent = - require('./RCTSafeAreaViewNativeComponent').default; - - exported = React.forwardRef>>( - function SafeAreaView(props, forwardedRef) { - return ( - - ); - }, - ); + exported = require('./RCTSafeAreaViewNativeComponent').default; } export default exported; diff --git a/Libraries/Components/SafeAreaView/__tests__/__snapshots__/SafeAreaView-test.js.snap b/Libraries/Components/SafeAreaView/__tests__/__snapshots__/SafeAreaView-test.js.snap index b23f900172c9f6..a7fc900fbc99c2 100644 --- a/Libraries/Components/SafeAreaView/__tests__/__snapshots__/SafeAreaView-test.js.snap +++ b/Libraries/Components/SafeAreaView/__tests__/__snapshots__/SafeAreaView-test.js.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` should render as expected: should deep render when mocked (please verify output manually) 1`] = ` - + Hello World! @@ -13,9 +11,7 @@ exports[` should render as expected: should deep render when moc `; exports[` should render as expected: should deep render when not mocked (please verify output manually) 1`] = ` - + Hello World! @@ -25,21 +21,21 @@ exports[` should render as expected: should deep render when not `; exports[` should render as expected: should shallow render as when mocked 1`] = ` - + Hello World! - + `; exports[` should render as expected: should shallow render as when not mocked 1`] = ` - + Hello World! - + `; diff --git a/React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.mm b/React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.mm index 31ae9ecd96cc37..d91e406ab37517 100644 --- a/React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.mm +++ b/React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.mm @@ -30,15 +30,6 @@ - (instancetype)initWithFrame:(CGRect)frame return self; } -- (UIEdgeInsets)_safeAreaInsets -{ - if (@available(iOS 11.0, *)) { - return self.safeAreaInsets; - } - - return UIEdgeInsetsZero; -} - - (void)safeAreaInsetsDidChange { [super safeAreaInsetsDidChange]; @@ -52,7 +43,7 @@ - (void)_updateStateIfNecessary return; } - UIEdgeInsets insets = [self _safeAreaInsets]; + UIEdgeInsets insets = self.safeAreaInsets; insets.left = RCTRoundPixelValue(insets.left); insets.top = RCTRoundPixelValue(insets.top); insets.right = RCTRoundPixelValue(insets.right); diff --git a/React/Views/RCTWrapperViewController.m b/React/Views/RCTWrapperViewController.m index 25f325b970ebf2..6719783277d358 100644 --- a/React/Views/RCTWrapperViewController.m +++ b/React/Views/RCTWrapperViewController.m @@ -16,11 +16,11 @@ @implementation RCTWrapperViewController { UIView *_wrapperView; UIView *_contentView; - CGFloat _previousTopLayoutLength; - CGFloat _previousBottomLayoutLength; + CGFloat _previousTopInset; + CGFloat _previousBottomInset; - id _currentTopLayoutGuide; - id _currentBottomLayoutGuide; + CGFloat _currentTopInset; + CGFloat _currentBottomInset; } - (instancetype)initWithContentView:(UIView *)contentView @@ -41,8 +41,8 @@ - (void)viewWillLayoutSubviews { [super viewWillLayoutSubviews]; - _currentTopLayoutGuide = self.topLayoutGuide; - _currentBottomLayoutGuide = self.bottomLayoutGuide; + _currentTopInset = self.view.safeAreaInsets.top; + _currentBottomInset = self.view.safeAreaInsets.bottom; } static BOOL RCTFindScrollViewAndRefreshContentInsetInView(UIView *view) @@ -63,11 +63,10 @@ - (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; - if (_previousTopLayoutLength != _currentTopLayoutGuide.length || - _previousBottomLayoutLength != _currentBottomLayoutGuide.length) { + if (_previousTopInset != _currentTopInset || _previousBottomInset != _currentBottomInset) { RCTFindScrollViewAndRefreshContentInsetInView(_contentView); - _previousTopLayoutLength = _currentTopLayoutGuide.length; - _previousBottomLayoutLength = _currentBottomLayoutGuide.length; + _previousTopInset = _currentTopInset; + _previousBottomInset = _currentBottomInset; } } diff --git a/React/Views/SafeAreaView/RCTSafeAreaView.h b/React/Views/SafeAreaView/RCTSafeAreaView.h index c0fea6b7bacfc4..4817b68d5272d3 100644 --- a/React/Views/SafeAreaView/RCTSafeAreaView.h +++ b/React/Views/SafeAreaView/RCTSafeAreaView.h @@ -17,8 +17,6 @@ NS_ASSUME_NONNULL_BEGIN - (instancetype)initWithBridge:(RCTBridge *)bridge; -@property (nonatomic, assign) BOOL emulateUnlessSupported; - @end NS_ASSUME_NONNULL_END diff --git a/React/Views/SafeAreaView/RCTSafeAreaView.m b/React/Views/SafeAreaView/RCTSafeAreaView.m index 89efb7ff585284..41dc74b06b66be 100644 --- a/React/Views/SafeAreaView/RCTSafeAreaView.m +++ b/React/Views/SafeAreaView/RCTSafeAreaView.m @@ -21,7 +21,6 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge { if (self = [super initWithFrame:CGRectZero]) { _bridge = bridge; - _emulateUnlessSupported = YES; // The default. } return self; @@ -41,48 +40,10 @@ - (NSString *)description return [NSString stringWithFormat:@"%@; safeAreaInsets = %@; appliedSafeAreaInsets = %@>", superDescription, - NSStringFromUIEdgeInsets([self safeAreaInsetsIfSupportedAndEnabled]), + NSStringFromUIEdgeInsets(self.safeAreaInsets), NSStringFromUIEdgeInsets(_currentSafeAreaInsets)]; } -- (BOOL)isSupportedByOS -{ - return [self respondsToSelector:@selector(safeAreaInsets)]; -} - -- (UIEdgeInsets)safeAreaInsetsIfSupportedAndEnabled -{ - if (self.isSupportedByOS) { - return self.safeAreaInsets; - } - return self.emulateUnlessSupported ? self.emulatedSafeAreaInsets : UIEdgeInsetsZero; -} - -- (UIEdgeInsets)emulatedSafeAreaInsets -{ - UIViewController *vc = self.reactViewController; - - if (!vc) { - return UIEdgeInsetsZero; - } - - 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); - } - - return safeAreaInsets; -} - static BOOL UIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIEdgeInsets insets2, CGFloat threshold) { return ABS(insets1.left - insets2.left) <= threshold && ABS(insets1.right - insets2.right) <= threshold && @@ -91,21 +52,7 @@ static BOOL UIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIE - (void)safeAreaInsetsDidChange { - [self invalidateSafeAreaInsets]; -} - -- (void)invalidateSafeAreaInsets -{ - [self setSafeAreaInsets:self.safeAreaInsetsIfSupportedAndEnabled]; -} - -- (void)layoutSubviews -{ - [super layoutSubviews]; - - if (!self.isSupportedByOS && self.emulateUnlessSupported) { - [self invalidateSafeAreaInsets]; - } + [self setSafeAreaInsets:self.safeAreaInsets]; } - (void)setSafeAreaInsets:(UIEdgeInsets)safeAreaInsets @@ -120,19 +67,4 @@ - (void)setSafeAreaInsets:(UIEdgeInsets)safeAreaInsets [_bridge.uiManager setLocalData:localData forView:self]; } -- (void)setEmulateUnlessSupported:(BOOL)emulateUnlessSupported -{ - if (_emulateUnlessSupported == emulateUnlessSupported) { - return; - } - - _emulateUnlessSupported = emulateUnlessSupported; - - if ([self isSupportedByOS]) { - return; - } - - [self invalidateSafeAreaInsets]; -} - @end diff --git a/React/Views/SafeAreaView/RCTSafeAreaViewManager.m b/React/Views/SafeAreaView/RCTSafeAreaViewManager.m index 01c24f4f29139d..284500455da21a 100644 --- a/React/Views/SafeAreaView/RCTSafeAreaViewManager.m +++ b/React/Views/SafeAreaView/RCTSafeAreaViewManager.m @@ -15,8 +15,6 @@ @implementation RCTSafeAreaViewManager RCT_EXPORT_MODULE() -RCT_EXPORT_VIEW_PROPERTY(emulateUnlessSupported, BOOL) - - (UIView *)view { return [[RCTSafeAreaView alloc] initWithBridge:self.bridge]; diff --git a/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js b/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js index 42902ec996ff2b..ad75dac32b7bbc 100644 --- a/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js +++ b/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js @@ -18,7 +18,6 @@ const { Modal, SafeAreaView, StyleSheet, - Switch, Text, View, } = require('react-native'); @@ -27,12 +26,10 @@ class SafeAreaViewExample extends React.Component< {...}, {| modalVisible: boolean, - emulateUnlessSupported: boolean, |}, > { state = { modalVisible: false, - emulateUnlessSupported: true, }; _setModalVisible = visible => { @@ -48,21 +45,12 @@ class SafeAreaViewExample extends React.Component< animationType="slide" supportedOrientations={['portrait', 'landscape']}> - +