[iOS] Add additionalSafeAreaInsets prop for SafeAreaView

[iOS] Add additionalSafeAreaInsets prop for SafeAreaView

fix flow check

Add EdgeInsetsProp import

Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js

@@ -12,10 +12,12 @@ const requireNativeComponent = require('requireNativeComponent');
 
 import type {ViewProps} from 'ViewPropTypes';
 import type {NativeComponent} from 'ReactNative';
+import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
   emulateUnlessSupported?: boolean,
+  additionalSafeAreaInsets?: ?EdgeInsetsProp,
 |}>;
 
 type RCTSafeAreaViewNativeType = Class<NativeComponent<NativeProps>>;

Libraries/Components/SafeAreaView/SafeAreaView.js

@@ -13,12 +13,23 @@ const React = require('React');
 const View = require('View');
 
 import type {ViewProps} from 'ViewPropTypes';
+import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
 
 type Props = $ReadOnly<{|
   ...ViewProps,
   emulateUnlessSupported?: boolean,
 |}>;
 
+type IOSProps = $ReadOnly<{|
+  ...Props,
+  /**
+   * Custom insets that you specify to modify safe area.
+   *
+   * @platform ios
+   */
+  additionalSafeAreaInsets?: ?EdgeInsetsProp,
+|}>;
+
 let exported;
 
 /**
@@ -39,7 +50,7 @@ if (Platform.OS === 'android') {
   };
 } else {
   const RCTSafeAreaViewNativeComponent = require('RCTSafeAreaViewNativeComponent');
-  exported = class SafeAreaView extends React.Component<Props> {
+  exported = class SafeAreaView extends React.Component<IOSProps> {
     render(): React.Node {
       return (
         <RCTSafeAreaViewNativeComponent

React/Views/SafeAreaView/RCTSafeAreaView.h

@@ -18,6 +18,7 @@ NS_ASSUME_NONNULL_BEGIN
 - (instancetype)initWithBridge:(RCTBridge *)bridge;
 
 @property (nonatomic, assign) BOOL emulateUnlessSupported;
+@property (nonatomic, assign) UIEdgeInsets reactAdditionalSafeAreaInsets;
 
 @end
 

React/Views/SafeAreaView/RCTSafeAreaView.m

@@ -40,11 +40,11 @@ - (UIEdgeInsets)safeAreaInsetsIfSupportedAndEnabled
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
   if (self.isSupportedByOS) {
     if (@available(iOS 11.0, *)) {
-      return self.safeAreaInsets;
+      return [self totalSafeAreaInsetsWithInset:self.safeAreaInsets];
     }
   }
 #endif
-  return self.emulateUnlessSupported ? self.emulatedSafeAreaInsets : UIEdgeInsetsZero;
+  return self.emulateUnlessSupported ? [self totalSafeAreaInsetsWithInset:self.emulatedSafeAreaInsets] : [self totalSafeAreaInsetsWithInset:UIEdgeInsetsZero];
 }
 
 - (UIEdgeInsets)emulatedSafeAreaInsets
@@ -99,15 +99,28 @@ - (void)layoutSubviews
   }
 }
 
+- (UIEdgeInsets)totalSafeAreaInsetsWithInset:(UIEdgeInsets)insets
+{
+  UIEdgeInsets additionalSafeAreaInsets = self.reactAdditionalSafeAreaInsets;
+  if (UIEdgeInsetsEqualToEdgeInsets(additionalSafeAreaInsets, UIEdgeInsetsZero)) {
+    return insets;
+  }
+  return UIEdgeInsetsMake(additionalSafeAreaInsets.top + insets.top,
+                          additionalSafeAreaInsets.left + insets.left,
+                          additionalSafeAreaInsets.bottom + insets.bottom,
+                          additionalSafeAreaInsets.right + insets.right);
+}
+
 - (void)setSafeAreaInsets:(UIEdgeInsets)safeAreaInsets
 {
-  if (UIEdgeInsetsEqualToEdgeInsetsWithThreshold(safeAreaInsets, _currentSafeAreaInsets, 1.0 / RCTScreenScale())) {
+  UIEdgeInsets totalSafeAreaInsets = [self totalSafeAreaInsetsWithInset:safeAreaInsets];
+  if (UIEdgeInsetsEqualToEdgeInsetsWithThreshold(totalSafeAreaInsets, _currentSafeAreaInsets, 1.0 / RCTScreenScale())) {
     return;
   }
 
-  _currentSafeAreaInsets = safeAreaInsets;
+  _currentSafeAreaInsets = totalSafeAreaInsets;
 
-  RCTSafeAreaViewLocalData *localData = [[RCTSafeAreaViewLocalData alloc] initWithInsets:safeAreaInsets];
+  RCTSafeAreaViewLocalData *localData = [[RCTSafeAreaViewLocalData alloc] initWithInsets:totalSafeAreaInsets];
   [_bridge.uiManager setLocalData:localData forView:self];
 }
 

React/Views/SafeAreaView/RCTSafeAreaViewManager.m

@@ -16,6 +16,7 @@ @implementation RCTSafeAreaViewManager
 RCT_EXPORT_MODULE()
 
 RCT_EXPORT_VIEW_PROPERTY(emulateUnlessSupported, BOOL)
+RCT_REMAP_VIEW_PROPERTY(additionalSafeAreaInsets, reactAdditionalSafeAreaInsets, UIEdgeInsets)
 
 - (UIView *)view
 {