Fabric: Use padding instead of size for SafeAreaView

Summary:
Use padding instead of setting size of SafeAreaView, this should make it more consistent with Paper component.

changelog: [internal]

Reviewed By: shergin

Differential Revision: D18225793

fbshipit-source-id: 08dccbdae0e4f7a7847501a06e17d4c26473462a

React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.mm

@@ -13,27 +13,6 @@
 
 using namespace facebook::react;
 
-static UIScrollView *findScrollView(UIView *view, uint recursionDepth = 0)
-{
-  if (recursionDepth >= 3) {
-    return NULL;
-  }
-  if ([view isKindOfClass:[UIScrollView class]]) {
-    return (UIScrollView *)view;
-  }
-
-  if (view.subviews.count >= 1) {
-    for (UIView *subview in view.subviews) {
-      UIScrollView *scrollView = findScrollView(subview.subviews.firstObject, recursionDepth + 1);
-      if (scrollView) {
-        return scrollView;
-      }
-    }
-  }
-
-  return NULL;
-}
-
 @implementation RCTSafeAreaViewComponentView {
   SafeAreaViewShadowNode::ConcreteState::Shared _state;
 }
@@ -61,16 +40,14 @@ static UIScrollView *findScrollView(UIView *view, uint recursionDepth = 0)
 - (void)layoutSubviews
 {
   [super layoutSubviews];
-  UIScrollView *scrollView = findScrollView(self);
+}
-  if (scrollView && CGSizeEqualToSize(scrollView.bounds.size, self.bounds.size)) {
+
-    [scrollView setContentInset:self._safeAreaInsets];
+- (void)safeAreaInsetsDidChange
-  } else {
+{
-    if (_state != nullptr) {
+  [super safeAreaInsetsDidChange];
-      CGSize size = self.bounds.size;
+  if (_state != nullptr) {
-      size.height -= self._safeAreaInsets.bottom;
+    auto newState = SafeAreaViewState{RCTEdgeInsetsFromUIEdgeInsets(self._safeAreaInsets)};
-      auto newState = SafeAreaViewState{RCTSizeFromCGSize(size)};
+    _state->updateState(std::move(newState));
-      _state->updateState(std::move(newState));
-    }
   }
 }
 

ReactCommon/fabric/components/safeareaview/SafeAreaViewComponentDescriptor.h

@@ -35,12 +35,7 @@ class SafeAreaViewComponentDescriptor final
             shadowNode->getState());
     auto stateData = state->getData();
 
-    if (stateData.safeAreaSize.width != 0 &&
+    layoutableShadowNode->setPadding(stateData.padding);
-        stateData.safeAreaSize.height != 0) {
-      layoutableShadowNode->setSize(
-          Size{stateData.safeAreaSize.width, stateData.safeAreaSize.height});
-      layoutableShadowNode->setPositionType(YGPositionTypeAbsolute);
-    }
 
     ConcreteComponentDescriptor::adopt(shadowNode);
   }

ReactCommon/fabric/components/safeareaview/SafeAreaViewState.h

@@ -19,10 +19,10 @@ class SafeAreaViewState final {
  public:
   using Shared = std::shared_ptr<const SafeAreaViewState>;
 
-  SafeAreaViewState(){};
+  SafeAreaViewState() = default;
-  SafeAreaViewState(Size screenSize_) : safeAreaSize(screenSize_){};
+  SafeAreaViewState(EdgeInsets padding_) : padding(padding_){};
 
-  const Size safeAreaSize{};
+  const EdgeInsets padding{};
 
 #pragma mark - Getters
 };

ReactCommon/fabric/components/view/yoga/YogaLayoutableShadowNode.cpp

@@ -138,6 +138,18 @@ void YogaLayoutableShadowNode::setSize(Size size) const {
   yogaNode_.setDirty(true);
 }
 
+void YogaLayoutableShadowNode::setPadding(RectangleEdges<Float> padding) const {
+  ensureUnsealed();
+
+  auto style = yogaNode_.getStyle();
+  style.padding()[YGEdgeTop] = yogaStyleValueFromFloat(padding.top);
+  style.padding()[YGEdgeLeft] = yogaStyleValueFromFloat(padding.left);
+  style.padding()[YGEdgeRight] = yogaStyleValueFromFloat(padding.right);
+  style.padding()[YGEdgeBottom] = yogaStyleValueFromFloat(padding.bottom);
+  yogaNode_.setStyle(style);
+  yogaNode_.setDirty(true);
+}
+
 void YogaLayoutableShadowNode::setPositionType(
     YGPositionType positionType) const {
   ensureUnsealed();

ReactCommon/fabric/components/view/yoga/YogaLayoutableShadowNode.h

@@ -69,6 +69,8 @@ class YogaLayoutableShadowNode : public LayoutableShadowNode,
    */
   void setSize(Size size) const;
 
+  void setPadding(RectangleEdges<Float> padding) const;
+
   /**
    * Sets position type of Yoga node (relative, absolute).
    */