react-native-tvos 0.72.6-1 → 0.73.0-0

package/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp

@@ -17,6 +17,7 @@
 #include <react/renderer/core/TraitCast.h>
 #include <react/renderer/debug/DebugStringConvertibleItem.h>
 #include <react/renderer/debug/SystraceSection.h>
+#include <react/utils/CoreFeatures.h>
 #include <yoga/Yoga.h>
 #include <algorithm>
 #include <limits>
@@ -25,10 +26,10 @@
 namespace facebook::react {
 
 static int FabricDefaultYogaLog(
-    const YGConfigRef /*unused*/,
-    const YGNodeRef /*unused*/,
+    const YGConfigConstRef /*unused*/,
+    const YGNodeConstRef /*unused*/,
     YGLogLevel level,
-    const char *format,
+    const char* format,
     va_list args) {
   va_list args_copy;
   va_copy(args_copy, args);
@@ -72,8 +73,8 @@ ShadowNodeTraits::Trait YogaLayoutableShadowNode::IdentifierTrait() {
 }
 
 YogaLayoutableShadowNode::YogaLayoutableShadowNode(
-    ShadowNodeFragment const &fragment,
-    ShadowNodeFamily::Shared const &family,
+    const ShadowNodeFragment& fragment,
+    const ShadowNodeFamily::Shared& family,
     ShadowNodeTraits traits)
     : LayoutableShadowNode(fragment, family, traits),
       yogaConfig_(FabricDefaultYogaLog),
@@ -81,7 +82,7 @@ YogaLayoutableShadowNode::YogaLayoutableShadowNode(
   yogaNode_.setContext(this);
 
   // Newly created node must be `dirty` just because it is new.
-  // This is not a default for `YGNode`.
+  // This is not a default for `yoga::Node`.
   yogaNode_.setDirty(true);
 
   if (getTraits().check(ShadowNodeTraits::Trait::MeasurableYogaNode)) {
@@ -99,31 +100,36 @@ YogaLayoutableShadowNode::YogaLayoutableShadowNode(
 }
 
 YogaLayoutableShadowNode::YogaLayoutableShadowNode(
-    ShadowNode const &sourceShadowNode,
-    ShadowNodeFragment const &fragment)
+    const ShadowNode& sourceShadowNode,
+    const ShadowNodeFragment& fragment)
     : LayoutableShadowNode(sourceShadowNode, fragment),
       yogaConfig_(FabricDefaultYogaLog),
-      yogaNode_(
-          static_cast<YogaLayoutableShadowNode const &>(sourceShadowNode)
-              .yogaNode_,
-          &initializeYogaConfig(yogaConfig_)) {
-  // Note, cloned `YGNode` instance (copied using copy-constructor) inherits
+      yogaNode_(static_cast<const YogaLayoutableShadowNode&>(sourceShadowNode)
+                    .yogaNode_) {
+  // Note, cloned `yoga::Node` instance (copied using copy-constructor) inherits
   // dirty flag, measure function, and other properties being set originally in
   // the `YogaLayoutableShadowNode` constructor above.
 
   react_native_assert(
-      static_cast<YogaLayoutableShadowNode const &>(sourceShadowNode)
+      static_cast<const YogaLayoutableShadowNode&>(sourceShadowNode)
               .yogaNode_.isDirty() == yogaNode_.isDirty() &&
       "Yoga node must inherit dirty flag.");
 
-  for (auto &child : getChildren()) {
-    if (auto layoutableChild = traitCast<YogaLayoutableShadowNode>(child)) {
-      yogaLayoutableChildren_.push_back(layoutableChild);
+  if (!getTraits().check(ShadowNodeTraits::Trait::LeafYogaNode)) {
+    for (auto& child : getChildren()) {
+      if (auto layoutableChild = traitCast<YogaLayoutableShadowNode>(child)) {
+        yogaLayoutableChildren_.push_back(layoutableChild);
+      }
     }
   }
 
+  YGConfigConstRef previousConfig =
+      &static_cast<const YogaLayoutableShadowNode&>(sourceShadowNode)
+           .yogaConfig_;
+
   yogaNode_.setContext(this);
   yogaNode_.setOwner(nullptr);
+  yogaNode_.setConfig(&initializeYogaConfig(yogaConfig_, previousConfig));
   updateYogaChildrenOwnersIfNeeded();
 
   // This is the only legit place where we can dirty cloned Yoga node.
@@ -134,6 +140,15 @@ YogaLayoutableShadowNode::YogaLayoutableShadowNode(
     yogaNode_.setDirty(true);
   }
 
+  // We do not need to reconfigure this subtree before the next layout pass if
+  // the previous node with the same props and children has already been
+  // configured.
+  if (!fragment.props && !fragment.children) {
+    yogaTreeHasBeenConfigured_ =
+        static_cast<const YogaLayoutableShadowNode&>(sourceShadowNode)
+            .yogaTreeHasBeenConfigured_;
+  }
+
   if (fragment.props) {
     updateYogaProps();
   }
@@ -167,7 +182,7 @@ void YogaLayoutableShadowNode::enableMeasurement() {
 }
 
 void YogaLayoutableShadowNode::appendYogaChild(
-    YogaLayoutableShadowNode::Shared const &childNode) {
+    const YogaLayoutableShadowNode::Shared& childNode) {
   // The caller must check this before calling this method.
   react_native_assert(
       !getTraits().check(ShadowNodeTraits::Trait::LeafYogaNode));
@@ -175,9 +190,7 @@ void YogaLayoutableShadowNode::appendYogaChild(
   ensureYogaChildrenLookFine();
 
   yogaLayoutableChildren_.push_back(childNode);
-  yogaNode_.insertChild(
-      &childNode->yogaNode_,
-      static_cast<uint32_t>(yogaNode_.getChildren().size()));
+  yogaNode_.insertChild(&childNode->yogaNode_, yogaNode_.getChildren().size());
 
   ensureYogaChildrenLookFine();
 }
@@ -190,8 +203,8 @@ void YogaLayoutableShadowNode::adoptYogaChild(size_t index) {
   react_native_assert(
       !getTraits().check(ShadowNodeTraits::Trait::LeafYogaNode));
 
-  auto &childNode =
-      traitCast<YogaLayoutableShadowNode const &>(*getChildren().at(index));
+  auto& childNode =
+      traitCast<const YogaLayoutableShadowNode&>(*getChildren().at(index));
 
   if (childNode.yogaNode_.getOwner() == nullptr) {
     // The child node is not owned.
@@ -204,14 +217,14 @@ void YogaLayoutableShadowNode::adoptYogaChild(size_t index) {
     auto clonedChildNode = childNode.clone({});
 
     // Replace the child node with a newly cloned one in the children list.
-    replaceChild(childNode, clonedChildNode, static_cast<int>(index));
+    replaceChild(childNode, clonedChildNode, static_cast<int32_t>(index));
   }
 
   ensureYogaChildrenLookFine();
 }
 
 void YogaLayoutableShadowNode::appendChild(
-    ShadowNode::Shared const &childNode) {
+    const ShadowNode::Shared& childNode) {
   ensureUnsealed();
   ensureConsistency();
 
@@ -245,16 +258,16 @@ void YogaLayoutableShadowNode::appendChild(
 }
 
 void YogaLayoutableShadowNode::replaceChild(
-    ShadowNode const &oldChild,
-    ShadowNode::Shared const &newChild,
-    size_t suggestedIndex) {
+    const ShadowNode& oldChild,
+    const ShadowNode::Shared& newChild,
+    int32_t suggestedIndex) {
   LayoutableShadowNode::replaceChild(oldChild, newChild, suggestedIndex);
 
   ensureUnsealed();
   ensureYogaChildrenLookFine();
 
   auto layoutableOldChild =
-      traitCast<YogaLayoutableShadowNode const *>(&oldChild);
+      traitCast<const YogaLayoutableShadowNode*>(&oldChild);
   auto layoutableNewChild = traitCast<YogaLayoutableShadowNode>(newChild);
 
   if (layoutableOldChild == nullptr && layoutableNewChild == nullptr) {
@@ -271,7 +284,7 @@ void YogaLayoutableShadowNode::replaceChild(
       : std::find_if(
             yogaLayoutableChildren_.begin(),
             yogaLayoutableChildren_.end(),
-            [&](YogaLayoutableShadowNode::Shared const &layoutableChild) {
+            [&](const YogaLayoutableShadowNode::Shared& layoutableChild) {
               return layoutableChild.get() == layoutableOldChild;
             });
   auto oldChildIndex =
@@ -299,14 +312,15 @@ void YogaLayoutableShadowNode::replaceChild(
 }
 
 bool YogaLayoutableShadowNode::doesOwn(
-    YogaLayoutableShadowNode const &child) const {
+    const YogaLayoutableShadowNode& child) const {
   return child.yogaNode_.getOwner() == &yogaNode_;
 }
 
 void YogaLayoutableShadowNode::updateYogaChildrenOwnersIfNeeded() {
-  for (auto &childYogaNode : yogaNode_.getChildren()) {
+  for (auto& childYogaNode : yogaNode_.getChildren()) {
     if (childYogaNode->getOwner() == &yogaNode_) {
-      childYogaNode->setOwner(reinterpret_cast<YGNodeRef>(0xBADC0FFEE0DDF00D));
+      childYogaNode->setOwner(
+          reinterpret_cast<yoga::Node*>(0xBADC0FFEE0DDF00D));
     }
   }
 }
@@ -321,7 +335,9 @@ void YogaLayoutableShadowNode::updateYogaChildren() {
   bool isClean = !yogaNode_.isDirty() &&
       getChildren().size() == yogaNode_.getChildren().size();
 
-  auto oldYogaChildren = isClean ? yogaNode_.getChildren() : YGVector{};
+  auto oldYogaChildren =
+      isClean ? yogaNode_.getChildren() : std::vector<yoga::Node*>{};
+
   yogaNode_.setChildren({});
   yogaLayoutableChildren_.clear();
 
@@ -333,8 +349,8 @@ void YogaLayoutableShadowNode::updateYogaChildren() {
 
       if (isClean) {
         auto yogaChildIndex = yogaLayoutableChildren_.size() - 1;
-        auto &oldYogaChildNode = *oldYogaChildren.at(yogaChildIndex);
-        auto &newYogaChildNode =
+        auto& oldYogaChildNode = *oldYogaChildren.at(yogaChildIndex);
+        auto& newYogaChildNode =
             yogaLayoutableChildren_.at(yogaChildIndex)->yogaNode_;
 
         isClean = isClean && !newYogaChildNode.isDirty() &&
@@ -352,7 +368,7 @@ void YogaLayoutableShadowNode::updateYogaChildren() {
 void YogaLayoutableShadowNode::updateYogaProps() {
   ensureUnsealed();
 
-  auto props = static_cast<YogaStylableProps const &>(*props_);
+  auto props = static_cast<const YogaStylableProps&>(*props_);
   auto styleResult = applyAliasedProps(props.yogaStyle, props);
 
   // Resetting `dirty` flag only if `yogaStyle` portion of `Props` was changed.
@@ -363,12 +379,27 @@ void YogaLayoutableShadowNode::updateYogaProps() {
   yogaNode_.setStyle(styleResult);
 }
 
-/*static*/ YGStyle YogaLayoutableShadowNode::applyAliasedProps(
-    const YGStyle &baseStyle,
-    const YogaStylableProps &props) {
-  YGStyle result{baseStyle};
+/*static*/ yoga::Style YogaLayoutableShadowNode::applyAliasedProps(
+    const yoga::Style& baseStyle,
+    const YogaStylableProps& props) {
+  yoga::Style result{baseStyle};
 
   // Aliases with precedence
+  if (!props.inset.isUndefined()) {
+    result.position()[YGEdgeAll] = props.inset;
+  }
+  if (!props.insetBlock.isUndefined()) {
+    result.position()[YGEdgeVertical] = props.insetBlock;
+  }
+  if (!props.insetInline.isUndefined()) {
+    result.position()[YGEdgeHorizontal] = props.insetInline;
+  }
+  if (!props.insetInlineEnd.isUndefined()) {
+    result.position()[YGEdgeEnd] = props.insetInlineEnd;
+  }
+  if (!props.insetInlineStart.isUndefined()) {
+    result.position()[YGEdgeStart] = props.insetInlineStart;
+  }
   if (!props.marginInline.isUndefined()) {
     result.margin()[YGEdgeHorizontal] = props.marginInline;
   }
@@ -395,6 +426,12 @@ void YogaLayoutableShadowNode::updateYogaProps() {
   }
 
   // Aliases without precedence
+  if (CompactValue(result.position()[YGEdgeBottom]).isUndefined()) {
+    result.position()[YGEdgeBottom] = props.insetBlockEnd;
+  }
+  if (CompactValue(result.position()[YGEdgeTop]).isUndefined()) {
+    result.position()[YGEdgeTop] = props.insetBlockStart;
+  }
   if (CompactValue(result.margin()[YGEdgeTop]).isUndefined()) {
     result.margin()[YGEdgeTop] = props.marginBlockStart;
   }
@@ -411,12 +448,94 @@ void YogaLayoutableShadowNode::updateYogaProps() {
   return result;
 }
 
+void YogaLayoutableShadowNode::configureYogaTree(
+    float pointScaleFactor,
+    YGErrata defaultErrata,
+    bool swapLeftAndRight) {
+  ensureUnsealed();
+
+  // Set state on our own Yoga node
+  YGErrata errata = resolveErrata(defaultErrata);
+  YGConfigSetErrata(&yogaConfig_, errata);
+  YGConfigSetPointScaleFactor(&yogaConfig_, pointScaleFactor);
+
+  // TODO: `swapLeftAndRight` modified backing props and cannot be undone
+  if (swapLeftAndRight) {
+    swapStyleLeftAndRight();
+  }
+
+  yogaTreeHasBeenConfigured_ = true;
+
+  // Recursively propagate the configuration to child nodes. If a child was
+  // already configured as part of a previous ShadowTree generation, we only
+  // need to reconfigure it if the context values passed to the Node have
+  // changed.
+  for (size_t i = 0; i < yogaLayoutableChildren_.size(); i++) {
+    const auto& child = *yogaLayoutableChildren_[i];
+    auto childLayoutMetrics = child.getLayoutMetrics();
+    auto childErrata =
+        YGConfigGetErrata(const_cast<yoga::Config*>(&child.yogaConfig_));
+
+    if (child.yogaTreeHasBeenConfigured_ &&
+        childLayoutMetrics.pointScaleFactor == pointScaleFactor &&
+        childLayoutMetrics.wasLeftAndRightSwapped == swapLeftAndRight &&
+        childErrata == child.resolveErrata(errata)) {
+      continue;
+    }
+
+    if (doesOwn(child)) {
+      auto& mutableChild = const_cast<YogaLayoutableShadowNode&>(child);
+      mutableChild.configureYogaTree(
+          pointScaleFactor, child.resolveErrata(errata), swapLeftAndRight);
+    } else {
+      cloneChildInPlace(i).configureYogaTree(
+          pointScaleFactor, errata, swapLeftAndRight);
+    }
+  }
+}
+
+YGErrata YogaLayoutableShadowNode::resolveErrata(YGErrata defaultErrata) const {
+  if (auto viewShadowNode = traitCast<const ViewShadowNode*>(this)) {
+    const auto& props = viewShadowNode->getConcreteProps();
+    switch (props.experimental_layoutConformance) {
+      case LayoutConformance::Classic:
+        return YGErrataAll;
+      case LayoutConformance::Strict:
+        return YGErrataNone;
+      case LayoutConformance::Undefined:
+        return defaultErrata;
+    }
+  }
+
+  return defaultErrata;
+}
+
+YogaLayoutableShadowNode& YogaLayoutableShadowNode::cloneChildInPlace(
+    size_t layoutableChildIndex) {
+  ensureUnsealed();
+
+  const auto& childNode = *yogaLayoutableChildren_[layoutableChildIndex];
+
+  // TODO: Why does this not use `ShadowNodeFragment::statePlaceholder()` like
+  // `adoptYogaChild()`?
+  auto clonedChildNode = childNode.clone(
+      {ShadowNodeFragment::propsPlaceholder(),
+       ShadowNodeFragment::childrenPlaceholder(),
+       childNode.getState()});
+
+  replaceChild(
+      childNode, clonedChildNode, static_cast<int32_t>(layoutableChildIndex));
+  return static_cast<YogaLayoutableShadowNode&>(*clonedChildNode);
+}
+
 void YogaLayoutableShadowNode::setSize(Size size) const {
   ensureUnsealed();
 
   auto style = yogaNode_.getStyle();
-  style.dimensions()[YGDimensionWidth] = yogaStyleValueFromFloat(size.width);
-  style.dimensions()[YGDimensionHeight] = yogaStyleValueFromFloat(size.height);
+  style.setDimension(
+      YGDimensionWidth, yoga::CompactValue::ofMaybe<YGUnitPoint>(size.width));
+  style.setDimension(
+      YGDimensionHeight, yoga::CompactValue::ofMaybe<YGUnitPoint>(size.height));
   yogaNode_.setStyle(style);
   yogaNode_.setDirty(true);
 }
@@ -426,19 +545,23 @@ void YogaLayoutableShadowNode::setPadding(RectangleEdges<Float> padding) const {
 
   auto style = yogaNode_.getStyle();
 
-  auto leftPadding = yogaStyleValueFromFloat(padding.left);
-  auto topPadding = yogaStyleValueFromFloat(padding.top);
-  auto rightPadding = yogaStyleValueFromFloat(padding.right);
-  auto bottomPadding = yogaStyleValueFromFloat(padding.bottom);
+  auto leftPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.left);
+  auto topPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.top);
+  auto rightPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.right);
+  auto bottomPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.bottom);
 
   if (leftPadding != style.padding()[YGEdgeLeft] ||
       topPadding != style.padding()[YGEdgeTop] ||
       rightPadding != style.padding()[YGEdgeRight] ||
       bottomPadding != style.padding()[YGEdgeBottom]) {
-    style.padding()[YGEdgeTop] = yogaStyleValueFromFloat(padding.top);
-    style.padding()[YGEdgeLeft] = yogaStyleValueFromFloat(padding.left);
-    style.padding()[YGEdgeRight] = yogaStyleValueFromFloat(padding.right);
-    style.padding()[YGEdgeBottom] = yogaStyleValueFromFloat(padding.bottom);
+    style.padding()[YGEdgeTop] =
+        yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.top);
+    style.padding()[YGEdgeLeft] =
+        yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.left);
+    style.padding()[YGEdgeRight] =
+        yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.right);
+    style.padding()[YGEdgeBottom] =
+        yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.bottom);
     yogaNode_.setStyle(style);
     yogaNode_.setDirty(true);
   }
@@ -449,7 +572,7 @@ void YogaLayoutableShadowNode::setPositionType(
   ensureUnsealed();
 
   auto style = yogaNode_.getStyle();
-  style.positionType() = positionType;
+  style.positionType() = yoga::scopedEnum(positionType);
   yogaNode_.setStyle(style);
   yogaNode_.setDirty(true);
 }
@@ -459,16 +582,19 @@ void YogaLayoutableShadowNode::layoutTree(
     LayoutConstraints layoutConstraints) {
   ensureUnsealed();
 
-  /*
-   * In Yoga, every single Yoga Node has to have a (non-null) pointer to
-   * Yoga Config (this config can be shared between many nodes),
-   * so every node can be individually configured. This does *not* mean
-   * however that Yoga consults with every single Yoga Node Config for every
-   * config parameter. Especially in case of `pointScaleFactor`,
-   * the only value in the config of the root node is taken into account
-   * (and this is by design).
-   */
-  yogaConfig_.pointScaleFactor = layoutContext.pointScaleFactor;
+  SystraceSection s1("YogaLayoutableShadowNode::layoutTree");
+
+  bool swapLeftAndRight = layoutContext.swapLeftAndRightInRTL &&
+      (layoutConstraints.layoutDirection == LayoutDirection::RightToLeft ||
+       !CoreFeatures::doNotSwapLeftAndRightOnAndroidInLTR);
+
+  {
+    SystraceSection s2("YogaLayoutableShadowNode::configureYogaTree");
+    configureYogaTree(
+        layoutContext.pointScaleFactor,
+        YGErrataAll /*defaultErrata*/,
+        swapLeftAndRight);
+  }
 
   auto minimumSize = layoutConstraints.minimumSize;
   auto maximumSize = layoutConstraints.maximumSize;
@@ -499,45 +625,43 @@ void YogaLayoutableShadowNode::layoutTree(
   // `ownerHeight` to allow proper calculation of relative (e.g. specified in
   // percents) style values.
 
-  auto &yogaStyle = yogaNode_.getStyle();
+  auto& yogaStyle = yogaNode_.getStyle();
 
   auto ownerWidth = yogaFloatFromFloat(maximumSize.width);
   auto ownerHeight = yogaFloatFromFloat(maximumSize.height);
 
-  yogaStyle.maxDimensions()[YGDimensionWidth] = std::isfinite(maximumSize.width)
-      ? yogaStyleValueFromFloat(maximumSize.width)
-      : YGValueUndefined;
+  yogaStyle.setMaxDimension(
+      YGDimensionWidth,
+      yoga::CompactValue::ofMaybe<YGUnitPoint>(maximumSize.width));
 
-  yogaStyle.maxDimensions()[YGDimensionHeight] =
-      std::isfinite(maximumSize.height)
-      ? yogaStyleValueFromFloat(maximumSize.height)
-      : YGValueUndefined;
+  yogaStyle.setMaxDimension(
+      YGDimensionHeight,
+      yoga::CompactValue::ofMaybe<YGUnitPoint>(maximumSize.height));
 
-  yogaStyle.minDimensions()[YGDimensionWidth] = minimumSize.width > 0
-      ? yogaStyleValueFromFloat(minimumSize.width)
-      : YGValueUndefined;
+  yogaStyle.setMinDimension(
+      YGDimensionWidth,
+      yoga::CompactValue::ofMaybe<YGUnitPoint>(minimumSize.width));
 
-  yogaStyle.minDimensions()[YGDimensionHeight] = minimumSize.height > 0
-      ? yogaStyleValueFromFloat(minimumSize.height)
-      : YGValueUndefined;
+  yogaStyle.setMinDimension(
+      YGDimensionHeight,
+      yoga::CompactValue::ofMaybe<YGUnitPoint>(minimumSize.height));
 
   auto direction =
       yogaDirectionFromLayoutDirection(layoutConstraints.layoutDirection);
 
   threadLocalLayoutContext = layoutContext;
 
-  if (layoutContext.swapLeftAndRightInRTL) {
-    swapLeftAndRightInTree(*this);
-  }
-
   {
-    SystraceSection s("YogaLayoutableShadowNode::YGNodeCalculateLayout");
+    SystraceSection s3("YogaLayoutableShadowNode::YGNodeCalculateLayout");
     YGNodeCalculateLayout(&yogaNode_, ownerWidth, ownerHeight, direction);
   }
 
+  // Update layout metrics for root node. Updated for children in
+  // YogaLayoutableShadowNode::layout
   if (yogaNode_.getHasNewLayout()) {
     auto layoutMetrics = layoutMetricsFromYogaNode(yogaNode_);
     layoutMetrics.pointScaleFactor = layoutContext.pointScaleFactor;
+    layoutMetrics.wasLeftAndRightSwapped = swapLeftAndRight;
     setLayoutMetrics(layoutMetrics);
     yogaNode_.setHasNewLayout(false);
   }
@@ -546,16 +670,16 @@ void YogaLayoutableShadowNode::layoutTree(
 }
 
 static EdgeInsets calculateOverflowInset(
-    Rect containerFrame,
-    Rect contentFrame) {
-  auto size = containerFrame.size;
+    Rect contentFrame,
+    Rect contentBounds) {
+  auto size = contentFrame.size;
   auto overflowInset = EdgeInsets{};
-  overflowInset.left = std::min(contentFrame.getMinX(), Float{0.0});
-  overflowInset.top = std::min(contentFrame.getMinY(), Float{0.0});
+  overflowInset.left = std::min(contentBounds.getMinX(), Float{0.0});
+  overflowInset.top = std::min(contentBounds.getMinY(), Float{0.0});
   overflowInset.right =
-      -std::max(contentFrame.getMaxX() - size.width, Float{0.0});
+      -std::max(contentBounds.getMaxX() - size.width, Float{0.0});
   overflowInset.bottom =
-      -std::max(contentFrame.getMaxY() - size.height, Float{0.0});
+      -std::max(contentBounds.getMaxY() - size.height, Float{0.0});
   return overflowInset;
 }
 
@@ -563,9 +687,8 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
   // Reading data from a dirtied node does not make sense.
   react_native_assert(!yogaNode_.isDirty());
 
-  auto contentFrame = Rect{};
   for (auto childYogaNode : yogaNode_.getChildren()) {
-    auto &childNode = shadowNodeFromContext(childYogaNode);
+    auto& childNode = shadowNodeFromContext(childYogaNode);
 
     // Verifying that the Yoga node belongs to the ShadowNode.
     react_native_assert(&childNode.yogaNode_ == childYogaNode);
@@ -585,6 +708,10 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
 
       auto newLayoutMetrics = layoutMetricsFromYogaNode(*childYogaNode);
       newLayoutMetrics.pointScaleFactor = layoutContext.pointScaleFactor;
+      newLayoutMetrics.wasLeftAndRightSwapped =
+          layoutContext.swapLeftAndRightInRTL &&
+          (newLayoutMetrics.layoutDirection == LayoutDirection::RightToLeft ||
+           !CoreFeatures::doNotSwapLeftAndRightOnAndroidInLTR);
 
       // Child node's layout has changed. When a node is added to
       // `affectedNodes`, onLayout event is called on the component. Comparing
@@ -601,76 +728,81 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
         childNode.layout(layoutContext);
       }
     }
+  }
+
+  if (yogaNode_.getStyle().overflow() == yoga::Overflow::Visible) {
+    // Note that the parent node's overflow layout is NOT affected by its
+    // transform matrix. That transform matrix is applied on the parent node as
+    // well as all of its child nodes, which won't cause changes on the
+    // overflowInset values. A special note on the scale transform -- the scaled
+    // layout may look like it's causing overflowInset changes, but it's purely
+    // cosmetic and will be handled by pixel density conversion logic later when
+    // render the view. The actual overflowInset value is not changed as if the
+    // transform is not happening here.
+    auto contentBounds = getContentBounds();
+    layoutMetrics_.overflowInset =
+        calculateOverflowInset(layoutMetrics_.frame, contentBounds);
+  } else {
+    layoutMetrics_.overflowInset = {};
+  }
+}
+
+Rect YogaLayoutableShadowNode::getContentBounds() const {
+  auto contentBounds = Rect{};
+
+  for (auto childYogaNode : yogaNode_.getChildren()) {
+    auto& childNode = shadowNodeFromContext(childYogaNode);
+
+    // Verifying that the Yoga node belongs to the ShadowNode.
+    react_native_assert(&childNode.yogaNode_ == childYogaNode);
 
     auto layoutMetricsWithOverflowInset = childNode.getLayoutMetrics();
     if (layoutMetricsWithOverflowInset.displayType != DisplayType::None) {
-      auto viewChildNode = traitCast<ViewShadowNode const *>(&childNode);
+      auto viewChildNode = traitCast<const ViewShadowNode*>(&childNode);
       auto hitSlop = viewChildNode != nullptr
           ? viewChildNode->getConcreteProps().hitSlop
           : EdgeInsets{};
 
-      // The contentFrame should always union with existing child node layout +
+      // The contentBounds should always union with existing child node layout +
       // overflowInset. The transform may in a deferred animation and not
       // applied yet.
-      contentFrame.unionInPlace(insetBy(
+      contentBounds.unionInPlace(insetBy(
           layoutMetricsWithOverflowInset.frame,
           layoutMetricsWithOverflowInset.overflowInset));
-      contentFrame.unionInPlace(
+      contentBounds.unionInPlace(
           outsetBy(layoutMetricsWithOverflowInset.frame, hitSlop));
 
       auto childTransform = childNode.getTransform();
       if (childTransform != Transform::Identity()) {
         // The child node's transform matrix will affect the parent node's
-        // contentFrame. We need to union with child node's after transform
+        // contentBounds. We need to union with child node's after transform
         // layout here.
-        contentFrame.unionInPlace(insetBy(
+        contentBounds.unionInPlace(insetBy(
             layoutMetricsWithOverflowInset.frame * childTransform,
             layoutMetricsWithOverflowInset.overflowInset * childTransform));
-        contentFrame.unionInPlace(outsetBy(
+        contentBounds.unionInPlace(outsetBy(
             layoutMetricsWithOverflowInset.frame * childTransform, hitSlop));
       }
     }
   }
 
-  if (yogaNode_.getStyle().overflow() == YGOverflowVisible) {
-    // Note that the parent node's overflow layout is NOT affected by its
-    // transform matrix. That transform matrix is applied on the parent node as
-    // well as all of its child nodes, which won't cause changes on the
-    // overflowInset values. A special note on the scale transform -- the scaled
-    // layout may look like it's causing overflowInset changes, but it's purely
-    // cosmetic and will be handled by pixel density conversion logic later when
-    // render the view. The actual overflowInset value is not changed as if the
-    // transform is not happening here.
-    layoutMetrics_.overflowInset =
-        calculateOverflowInset(layoutMetrics_.frame, contentFrame);
-  } else {
-    layoutMetrics_.overflowInset = {};
-  }
+  return contentBounds;
 }
 
 #pragma mark - Yoga Connectors
 
-YGNode *YogaLayoutableShadowNode::yogaNodeCloneCallbackConnector(
-    YGNode *oldYogaNode,
-    YGNode *parentYogaNode,
-    int childIndex) {
+YGNodeRef YogaLayoutableShadowNode::yogaNodeCloneCallbackConnector(
+    YGNodeConstRef /*oldYogaNode*/,
+    YGNodeConstRef parentYogaNode,
+    size_t childIndex) {
   SystraceSection s("YogaLayoutableShadowNode::yogaNodeCloneCallbackConnector");
 
-  // At this point it is guaranteed that all shadow nodes associated with yoga
-  // nodes are `YogaLayoutableShadowNode` subclasses.
-  auto &parentNode = shadowNodeFromContext(parentYogaNode);
-  auto &oldNode = shadowNodeFromContext(oldYogaNode);
-
-  auto clonedNode = oldNode.clone(
-      {ShadowNodeFragment::propsPlaceholder(),
-       ShadowNodeFragment::childrenPlaceholder(),
-       oldNode.getState()});
-  parentNode.replaceChild(oldNode, clonedNode, childIndex);
-  return &traitCast<YogaLayoutableShadowNode &>(*clonedNode).yogaNode_;
+  auto& parentNode = shadowNodeFromContext(parentYogaNode);
+  return &parentNode.cloneChildInPlace(childIndex).yogaNode_;
 }
 
 YGSize YogaLayoutableShadowNode::yogaNodeMeasureCallbackConnector(
-    YGNode *yogaNode,
+    YGNodeConstRef yogaNode,
     float width,
     YGMeasureMode widthMode,
     float height,
@@ -678,7 +810,7 @@ YGSize YogaLayoutableShadowNode::yogaNodeMeasureCallbackConnector(
   SystraceSection s(
       "YogaLayoutableShadowNode::yogaNodeMeasureCallbackConnector");
 
-  auto &shadowNode = shadowNodeFromContext(yogaNode);
+  auto& shadowNode = shadowNodeFromContext(yogaNode);
 
   auto minimumSize = Size{0, 0};
   auto maximumSize = Size{
@@ -716,43 +848,45 @@ YGSize YogaLayoutableShadowNode::yogaNodeMeasureCallbackConnector(
       yogaFloatFromFloat(size.width), yogaFloatFromFloat(size.height)};
 }
 
-YogaLayoutableShadowNode &YogaLayoutableShadowNode::shadowNodeFromContext(
-    YGNode *yogaNode) {
-  return traitCast<YogaLayoutableShadowNode &>(
-      *static_cast<ShadowNode *>(yogaNode->getContext()));
+YogaLayoutableShadowNode& YogaLayoutableShadowNode::shadowNodeFromContext(
+    YGNodeConstRef yogaNode) {
+  return traitCast<YogaLayoutableShadowNode&>(
+      *static_cast<ShadowNode*>(YGNodeGetContext(yogaNode)));
 }
 
-YGConfig &YogaLayoutableShadowNode::initializeYogaConfig(YGConfig &config) {
-  config.setCloneNodeCallback(
-      YogaLayoutableShadowNode::yogaNodeCloneCallbackConnector);
-  config.useLegacyStretchBehaviour = true;
+yoga::Config& YogaLayoutableShadowNode::initializeYogaConfig(
+    yoga::Config& config,
+    YGConfigConstRef previousConfig) {
+  YGConfigSetCloneNodeFunc(
+      &config, YogaLayoutableShadowNode::yogaNodeCloneCallbackConnector);
+  if (previousConfig != nullptr) {
+    YGConfigSetPointScaleFactor(
+        &config, YGConfigGetPointScaleFactor(previousConfig));
+    YGConfigSetErrata(&config, YGConfigGetErrata(previousConfig));
+  }
+
 #ifdef RN_DEBUG_YOGA_LOGGER
-  config.printTree = true;
+  YGConfigSetPrintTreeFlag(&config, true);
 #endif
   return config;
 }
 
 #pragma mark - RTL left and right swapping
 
-void YogaLayoutableShadowNode::swapLeftAndRightInTree(
-    YogaLayoutableShadowNode const &shadowNode) {
-  swapLeftAndRightInYogaStyleProps(shadowNode);
-  swapLeftAndRightInViewProps(shadowNode);
+void YogaLayoutableShadowNode::swapStyleLeftAndRight() {
+  ensureUnsealed();
 
-  for (auto &child : shadowNode.yogaLayoutableChildren_) {
-    if (!child->doesOwn(shadowNode)) {
-      swapLeftAndRightInTree(*child);
-    }
-  }
+  swapLeftAndRightInYogaStyleProps(*this);
+  swapLeftAndRightInViewProps(*this);
 }
 
 void YogaLayoutableShadowNode::swapLeftAndRightInYogaStyleProps(
-    YogaLayoutableShadowNode const &shadowNode) {
+    const YogaLayoutableShadowNode& shadowNode) {
   auto yogaStyle = shadowNode.yogaNode_.getStyle();
 
-  YGStyle::Edges const &position = yogaStyle.position();
-  YGStyle::Edges const &padding = yogaStyle.padding();
-  YGStyle::Edges const &margin = yogaStyle.margin();
+  const yoga::Style::Edges& position = yogaStyle.position();
+  const yoga::Style::Edges& padding = yogaStyle.padding();
+  const yoga::Style::Edges& margin = yogaStyle.margin();
 
   // Swap Yoga node values, position, padding and margin.
 
@@ -790,9 +924,9 @@ void YogaLayoutableShadowNode::swapLeftAndRightInYogaStyleProps(
 }
 
 void YogaLayoutableShadowNode::swapLeftAndRightInViewProps(
-    YogaLayoutableShadowNode const &shadowNode) {
-  auto &typedCasting = static_cast<ViewProps const &>(*shadowNode.props_);
-  auto &props = const_cast<ViewProps &>(typedCasting);
+    const YogaLayoutableShadowNode& shadowNode) {
+  auto& typedCasting = static_cast<const ViewProps&>(*shadowNode.props_);
+  auto& props = const_cast<ViewProps&>(typedCasting);
 
   // Swap border node values, borderRadii, borderColors and borderStyles.
 
@@ -836,7 +970,7 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps(
     props.borderStyles.right.reset();
   }
 
-  YGStyle::Edges const &border = props.yogaStyle.border();
+  const yoga::Style::Edges& border = props.yogaStyle.border();
 
   if (props.yogaStyle.border()[YGEdgeLeft] != YGValueUndefined) {
     props.yogaStyle.border()[YGEdgeStart] = border[YGEdgeLeft];
@@ -854,22 +988,6 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps(
 void YogaLayoutableShadowNode::ensureConsistency() const {
   ensureYogaChildrenLookFine();
   ensureYogaChildrenAlignment();
-  ensureYogaChildrenOwnersConsistency();
-}
-
-void YogaLayoutableShadowNode::ensureYogaChildrenOwnersConsistency() const {
-#ifdef REACT_NATIVE_DEBUG
-  // Checking that all Yoga node children have the same `owner`.
-  // The owner might be not equal to the `yogaNode_` though.
-  auto &yogaChildren = yogaNode_.getChildren();
-
-  if (!yogaChildren.empty()) {
-    auto owner = yogaChildren.at(0)->getOwner();
-    for (auto const &child : yogaChildren) {
-      react_native_assert(child->getOwner() == owner);
-    }
-  }
-#endif
 }
 
 void YogaLayoutableShadowNode::ensureYogaChildrenLookFine() const {
@@ -878,9 +996,9 @@ void YogaLayoutableShadowNode::ensureYogaChildrenLookFine() const {
   // This is the only heuristic that might produce false-positive results
   // (really broken dangled nodes might look fine). This is useful as an early
   // signal that something went wrong.
-  auto &yogaChildren = yogaNode_.getChildren();
+  auto& yogaChildren = yogaNode_.getChildren();
 
-  for (auto const &yogaChild : yogaChildren) {
+  for (const auto& yogaChild : yogaChildren) {
     react_native_assert(yogaChild->getContext());
     react_native_assert(yogaChild->getChildren().size() < 16384);
     if (!yogaChild->getChildren().empty()) {
@@ -897,8 +1015,8 @@ void YogaLayoutableShadowNode::ensureYogaChildrenAlignment() const {
   // - All Yoga children are owned/connected to corresponding children of
   //   this node.
 
-  auto &yogaChildren = yogaNode_.getChildren();
-  auto &children = yogaLayoutableChildren_;
+  auto& yogaChildren = yogaNode_.getChildren();
+  auto& children = yogaLayoutableChildren_;
 
   if (getTraits().check(ShadowNodeTraits::Trait::LeafYogaNode)) {
     react_native_assert(yogaChildren.empty());
@@ -908,11 +1026,11 @@ void YogaLayoutableShadowNode::ensureYogaChildrenAlignment() const {
   react_native_assert(yogaChildren.size() == children.size());
 
   for (size_t i = 0; i < children.size(); i++) {
-    auto &yogaChild = yogaChildren.at(i);
-    auto &child = children.at(i);
+    auto& yogaChild = yogaChildren.at(i);
+    auto& child = children.at(i);
     react_native_assert(
         yogaChild->getContext() ==
-        traitCast<YogaLayoutableShadowNode const *>(child.get()));
+        traitCast<const YogaLayoutableShadowNode*>(child.get()));
   }
 #endif
 }