react-native-tvos 0.71.13-1 → 0.72.4-0rc1

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

@@ -12,9 +12,9 @@
 #include <react/renderer/components/view/conversions.h>
 #include <react/renderer/components/view/propsConversions.h>
 #include <react/renderer/core/CoreFeatures.h>
+#include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/core/propsConversions.h>
 #include <react/renderer/debug/debugStringConvertibleUtils.h>
-#include <react/renderer/graphics/conversions.h>
 
 namespace facebook::react {
 
@@ -369,17 +369,19 @@ ViewProps::ViewProps(
           sourceProps.trapFocusRight,
           false))
 #endif
-          {};
+{
+}
 
-#define VIEW_EVENT_CASE(eventType, eventString)     \
-  case CONSTEXPR_RAW_PROPS_KEY_HASH(eventString): { \
-    ViewEvents defaultViewEvents{};                 \
-    bool res = defaultViewEvents[eventType];        \
-    if (value.hasValue()) {                         \
-      fromRawValue(context, value, res);            \
-    }                                               \
-    events[eventType] = res;                        \
-    return;                                         \
+#define VIEW_EVENT_CASE(eventType)                      \
+  case CONSTEXPR_RAW_PROPS_KEY_HASH("on" #eventType): { \
+    const auto offset = ViewEvents::Offset::eventType;  \
+    ViewEvents defaultViewEvents{};                     \
+    bool res = defaultViewEvents[offset];               \
+    if (value.hasValue()) {                             \
+      fromRawValue(context, value, res);                \
+    }                                                   \
+    events[offset] = res;                               \
+    return;                                             \
   }
 
 void ViewProps::setProp(
@@ -393,72 +395,59 @@ void ViewProps::setProp(
   YogaStylableProps::setProp(context, hash, propName, value);
   AccessibilityProps::setProp(context, hash, propName, value);
 
+  static auto defaults = ViewProps{};
+
   switch (hash) {
-    RAW_SET_PROP_SWITCH_CASE_BASIC(opacity, (Float)1.0);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(foregroundColor, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundColor, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowColor, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOffset, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOpacity, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowRadius, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(transform, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(backfaceVisibility, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(shouldRasterize, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(zIndex, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(pointerEvents, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(hitSlop, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(onLayout, {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(collapsable, true);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(removeClippedSubviews, false);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(opacity);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(foregroundColor);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundColor);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowColor);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOffset);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOpacity);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowRadius);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(transform);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(backfaceVisibility);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(shouldRasterize);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(zIndex);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(pointerEvents);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(hitSlop);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(onLayout);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(collapsable);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(removeClippedSubviews);
     // events field
-    VIEW_EVENT_CASE(ViewEvents::Offset::PointerEnter, "onPointerEnter");
-    VIEW_EVENT_CASE(
-        ViewEvents::Offset::PointerEnterCapture, "onPointerEnterCapture");
-    VIEW_EVENT_CASE(ViewEvents::Offset::PointerMove, "onPointerMove");
-    VIEW_EVENT_CASE(
-        ViewEvents::Offset::PointerMoveCapture, "onPointerMoveCapture");
-    VIEW_EVENT_CASE(ViewEvents::Offset::PointerLeave, "onPointerLeave");
-    VIEW_EVENT_CASE(
-        ViewEvents::Offset::PointerLeaveCapture, "onPointerLeaveCapture");
-    VIEW_EVENT_CASE(ViewEvents::Offset::PointerOver, "onPointerOver");
-    VIEW_EVENT_CASE(ViewEvents::Offset::PointerOut, "onPointerOut");
-    VIEW_EVENT_CASE(
-        ViewEvents::Offset::MoveShouldSetResponder, "onMoveShouldSetResponder");
-    VIEW_EVENT_CASE(
-        ViewEvents::Offset::MoveShouldSetResponderCapture,
-        "onMoveShouldSetResponderCapture");
-    VIEW_EVENT_CASE(
-        ViewEvents::Offset::StartShouldSetResponder,
-        "onStartShouldSetResponder");
-    VIEW_EVENT_CASE(
-        ViewEvents::Offset::StartShouldSetResponderCapture,
-        "onStartShouldSetResponderCapture");
-    VIEW_EVENT_CASE(ViewEvents::Offset::ResponderGrant, "onResponderGrant");
-    VIEW_EVENT_CASE(ViewEvents::Offset::ResponderReject, "onResponderReject");
-    VIEW_EVENT_CASE(ViewEvents::Offset::ResponderStart, "onResponderStart");
-    VIEW_EVENT_CASE(ViewEvents::Offset::ResponderEnd, "onResponderEnd");
-    VIEW_EVENT_CASE(ViewEvents::Offset::ResponderRelease, "onResponderRelease");
-    VIEW_EVENT_CASE(ViewEvents::Offset::ResponderMove, "ResponderMove");
-    VIEW_EVENT_CASE(
-        ViewEvents::Offset::ResponderTerminate, "onResponderTerminate");
-    VIEW_EVENT_CASE(
-        ViewEvents::Offset::ResponderTerminationRequest,
-        "onResponderTerminationRequest");
-    VIEW_EVENT_CASE(
-        ViewEvents::Offset::ShouldBlockNativeResponder,
-        "onShouldBlockNativeResponder");
-    VIEW_EVENT_CASE(ViewEvents::Offset::TouchStart, "onTouchStart");
-    VIEW_EVENT_CASE(ViewEvents::Offset::TouchMove, "onTouchMove");
-    VIEW_EVENT_CASE(ViewEvents::Offset::TouchEnd, "onTouchEnd");
-    VIEW_EVENT_CASE(ViewEvents::Offset::TouchCancel, "onTouchCancel");
+    VIEW_EVENT_CASE(PointerEnter);
+    VIEW_EVENT_CASE(PointerEnterCapture);
+    VIEW_EVENT_CASE(PointerMove);
+    VIEW_EVENT_CASE(PointerMoveCapture);
+    VIEW_EVENT_CASE(PointerLeave);
+    VIEW_EVENT_CASE(PointerLeaveCapture);
+    VIEW_EVENT_CASE(PointerOver);
+    VIEW_EVENT_CASE(PointerOut);
+    VIEW_EVENT_CASE(MoveShouldSetResponder);
+    VIEW_EVENT_CASE(MoveShouldSetResponderCapture);
+    VIEW_EVENT_CASE(StartShouldSetResponder);
+    VIEW_EVENT_CASE(StartShouldSetResponderCapture);
+    VIEW_EVENT_CASE(ResponderGrant);
+    VIEW_EVENT_CASE(ResponderReject);
+    VIEW_EVENT_CASE(ResponderStart);
+    VIEW_EVENT_CASE(ResponderEnd);
+    VIEW_EVENT_CASE(ResponderRelease);
+    VIEW_EVENT_CASE(ResponderMove);
+    VIEW_EVENT_CASE(ResponderTerminate);
+    VIEW_EVENT_CASE(ResponderTerminationRequest);
+    VIEW_EVENT_CASE(ShouldBlockNativeResponder);
+    VIEW_EVENT_CASE(TouchStart);
+    VIEW_EVENT_CASE(TouchMove);
+    VIEW_EVENT_CASE(TouchEnd);
+    VIEW_EVENT_CASE(TouchCancel);
 #ifdef ANDROID
-    RAW_SET_PROP_SWITCH_CASE_BASIC(elevation, {});
-    RAW_SET_PROP_SWITCH_CASE(nativeBackground, "nativeBackgroundAndroid", {});
-    RAW_SET_PROP_SWITCH_CASE(nativeForeground, "nativeForegroundAndroid", {});
-    RAW_SET_PROP_SWITCH_CASE_BASIC(focusable, false);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(hasTVPreferredFocus, false);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(needsOffscreenAlphaCompositing, false);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(renderToHardwareTextureAndroid, false);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(elevation);
+    RAW_SET_PROP_SWITCH_CASE(nativeBackground, "nativeBackgroundAndroid");
+    RAW_SET_PROP_SWITCH_CASE(nativeForeground, "nativeForegroundAndroid");
+    RAW_SET_PROP_SWITCH_CASE_BASIC(focusable);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(hasTVPreferredFocus);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(needsOffscreenAlphaCompositing);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(renderToHardwareTextureAndroid);
 #endif
     // BorderRadii
     SET_CASCADED_RECTANGLE_CORNERS(borderRadii, "border", "Radius", value);

package/ReactCommon/react/renderer/components/view/ViewProps.h

@@ -14,7 +14,6 @@
 #include <react/renderer/core/Props.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/graphics/Color.h>
-#include <react/renderer/graphics/Geometry.h>
 #include <react/renderer/graphics/Transform.h>
 
 #include <optional>

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

@@ -12,7 +12,7 @@
 
 #include "viewPropConversions.h"
 
-#include <react/renderer/graphics/conversions.h>
+#include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/mapbuffer/MapBufferBuilder.h>
 
 namespace facebook {

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

@@ -10,9 +10,11 @@
 #include <react/debug/flags.h>
 #include <react/debug/react_native_assert.h>
 #include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/components/view/ViewShadowNode.h>
 #include <react/renderer/components/view/conversions.h>
 #include <react/renderer/core/LayoutConstraints.h>
 #include <react/renderer/core/LayoutContext.h>
+#include <react/renderer/core/TraitCast.h>
 #include <react/renderer/debug/DebugStringConvertibleItem.h>
 #include <react/renderer/debug/SystraceSection.h>
 #include <yoga/Yoga.h>
@@ -61,10 +63,14 @@ thread_local LayoutContext threadLocalLayoutContext;
 
 ShadowNodeTraits YogaLayoutableShadowNode::BaseTraits() {
   auto traits = LayoutableShadowNode::BaseTraits();
-  traits.set(ShadowNodeTraits::Trait::YogaLayoutableKind);
+  traits.set(IdentifierTrait());
   return traits;
 }
 
+ShadowNodeTraits::Trait YogaLayoutableShadowNode::IdentifierTrait() {
+  return ShadowNodeTraits::Trait::YogaLayoutableKind;
+}
+
 YogaLayoutableShadowNode::YogaLayoutableShadowNode(
     ShadowNodeFragment const &fragment,
     ShadowNodeFamily::Shared const &family,
@@ -74,7 +80,7 @@ YogaLayoutableShadowNode::YogaLayoutableShadowNode(
       yogaNode_(&initializeYogaConfig(yogaConfig_)) {
   yogaNode_.setContext(this);
 
-  // Newly created node must be `dirty` just becasue it is new.
+  // Newly created node must be `dirty` just because it is new.
   // This is not a default for `YGNode`.
   yogaNode_.setDirty(true);
 
@@ -110,6 +116,12 @@ YogaLayoutableShadowNode::YogaLayoutableShadowNode(
               .yogaNode_.isDirty() == yogaNode_.isDirty() &&
       "Yoga node must inherit dirty flag.");
 
+  for (auto &child : getChildren()) {
+    if (auto layoutableChild = traitCast<YogaLayoutableShadowNode>(child)) {
+      yogaLayoutableChildren_.push_back(layoutableChild);
+    }
+  }
+
   yogaNode_.setContext(this);
   yogaNode_.setOwner(nullptr);
   updateYogaChildrenOwnersIfNeeded();
@@ -154,17 +166,17 @@ void YogaLayoutableShadowNode::enableMeasurement() {
       YogaLayoutableShadowNode::yogaNodeMeasureCallbackConnector);
 }
 
-void YogaLayoutableShadowNode::appendYogaChild(ShadowNode const &childNode) {
+void YogaLayoutableShadowNode::appendYogaChild(
+    YogaLayoutableShadowNode::Shared const &childNode) {
   // The caller must check this before calling this method.
   react_native_assert(
       !getTraits().check(ShadowNodeTraits::Trait::LeafYogaNode));
 
   ensureYogaChildrenLookFine();
 
-  auto &layoutableChildNode =
-      traitCast<YogaLayoutableShadowNode const &>(childNode);
+  yogaLayoutableChildren_.push_back(childNode);
   yogaNode_.insertChild(
-      &layoutableChildNode.yogaNode_,
+      &childNode->yogaNode_,
       static_cast<uint32_t>(yogaNode_.getChildren().size()));
 
   ensureYogaChildrenLookFine();
@@ -178,47 +190,21 @@ void YogaLayoutableShadowNode::adoptYogaChild(size_t index) {
   react_native_assert(
       !getTraits().check(ShadowNodeTraits::Trait::LeafYogaNode));
 
-  auto &children = getChildren();
-
-  // Overflow checks.
-  react_native_assert(children.size() > index);
-  react_native_assert(children.size() >= yogaNode_.getChildren().size());
-
-  auto &childNode = *children.at(index);
-
-  auto &layoutableChildNode =
-      traitCast<YogaLayoutableShadowNode const &>(childNode);
+  auto &childNode =
+      traitCast<YogaLayoutableShadowNode const &>(*getChildren().at(index));
 
-  // Note, the following (commented out) assert is conceptually valid but still
-  // might produce false-positive signals because of the ABA problem (different
-  // objects with non-interleaving life-times being allocated on the same
-  // address). react_native_assert(layoutableChildNode.yogaNode_.getOwner() !=
-  // &yogaNode_);
-
-  if (layoutableChildNode.yogaNode_.getOwner() == nullptr) {
+  if (childNode.yogaNode_.getOwner() == nullptr) {
     // The child node is not owned.
-    layoutableChildNode.yogaNode_.setOwner(&yogaNode_);
+    childNode.yogaNode_.setOwner(&yogaNode_);
     // At this point the child yoga node must be already inserted by the caller.
     // react_native_assert(layoutableChildNode.yogaNode_.isDirty());
   } else {
     // The child is owned by some other node, we need to clone that.
+    // TODO: At this point, React has wrong reference to the node. (T138668036)
     auto clonedChildNode = childNode.clone({});
-    auto &layoutableClonedChildNode =
-        traitCast<YogaLayoutableShadowNode const &>(*clonedChildNode);
-
-    // The owner must be nullptr for a newly cloned node.
-    react_native_assert(
-        layoutableClonedChildNode.yogaNode_.getOwner() == nullptr);
-
-    // Establishing ownership.
-    layoutableClonedChildNode.yogaNode_.setOwner(&yogaNode_);
 
     // Replace the child node with a newly cloned one in the children list.
     replaceChild(childNode, clonedChildNode, static_cast<int>(index));
-
-    // Replace the Yoga node inside the Yoga node children list.
-    yogaNode_.replaceChild(
-        &layoutableClonedChildNode.yogaNode_, static_cast<int>(index));
   }
 
   ensureYogaChildrenLookFine();
@@ -229,7 +215,7 @@ void YogaLayoutableShadowNode::appendChild(
   ensureUnsealed();
   ensureConsistency();
 
-  // Calling the base class (`ShadowNode`) mehtod.
+  // Calling the base class (`ShadowNode`) method.
   LayoutableShadowNode::appendChild(childNode);
 
   if (getTraits().check(ShadowNodeTraits::Trait::LeafYogaNode)) {
@@ -237,33 +223,79 @@ void YogaLayoutableShadowNode::appendChild(
     return;
   }
 
-  // Here we don't have information about the previous structure of the node (if
-  // it that existed before), so we don't have anything to compare the Yoga node
-  // with (like a previous version of this node). Therefore we must dirty the
-  // node.
-  yogaNode_.setDirty(true);
+  if (auto yogaLayoutableChild =
+          traitCast<YogaLayoutableShadowNode>(childNode)) {
+    // Here we don't have information about the previous structure of the node
+    // (if it that existed before), so we don't have anything to compare the
+    // Yoga node with (like a previous version of this node). Therefore we must
+    // dirty the node.
+    yogaNode_.setDirty(true);
 
-  // All children of a non-leaf `YogaLayoutableShadowNode` must be a
-  // `YogaLayoutableShadowNode`s to be appended. This happens when invalid
-  // string/numeric child is passed which is not YogaLayoutableShadowNode
-  // (e.g. RCTRawText). This used to throw an error, but we are ignoring it
-  // because we want core library components to be fault-tolerant and degrade
-  // gracefully. A soft error will be emitted from JavaScript.
-  if (traitCast<YogaLayoutableShadowNode const *>(childNode.get()) != nullptr) {
     // Appending the Yoga node.
-    appendYogaChild(*childNode);
+    appendYogaChild(yogaLayoutableChild);
 
     ensureYogaChildrenLookFine();
-    ensureYogaChildrenAlighment();
+    ensureYogaChildrenAlignment();
 
     // Adopting the Yoga node.
     adoptYogaChild(getChildren().size() - 1);
 
     ensureConsistency();
+  }
+}
+
+void YogaLayoutableShadowNode::replaceChild(
+    ShadowNode const &oldChild,
+    ShadowNode::Shared const &newChild,
+    size_t suggestedIndex) {
+  LayoutableShadowNode::replaceChild(oldChild, newChild, suggestedIndex);
+
+  ensureUnsealed();
+  ensureYogaChildrenLookFine();
+
+  auto layoutableOldChild =
+      traitCast<YogaLayoutableShadowNode const *>(&oldChild);
+  auto layoutableNewChild = traitCast<YogaLayoutableShadowNode>(newChild);
+
+  if (layoutableOldChild == nullptr && layoutableNewChild == nullptr) {
+    // No need to mutate yogaLayoutableChildren_
+    return;
+  }
+
+  bool suggestedIndexAccurate = suggestedIndex >= 0 &&
+      suggestedIndex < yogaLayoutableChildren_.size() &&
+      yogaLayoutableChildren_[suggestedIndex].get() == layoutableOldChild;
+
+  auto oldChildIter = suggestedIndexAccurate
+      ? yogaLayoutableChildren_.begin() + suggestedIndex
+      : std::find_if(
+            yogaLayoutableChildren_.begin(),
+            yogaLayoutableChildren_.end(),
+            [&](YogaLayoutableShadowNode::Shared const &layoutableChild) {
+              return layoutableChild.get() == layoutableOldChild;
+            });
+  auto oldChildIndex =
+      static_cast<int32_t>(oldChildIter - yogaLayoutableChildren_.begin());
+
+  if (oldChildIter == yogaLayoutableChildren_.end()) {
+    // oldChild does not exist as part of our node
+    return;
+  }
+
+  if (layoutableNewChild) {
+    // Both children are layoutable, replace the old one with the new one
+    react_native_assert(layoutableNewChild->yogaNode_.getOwner() == nullptr);
+    layoutableNewChild->yogaNode_.setOwner(&yogaNode_);
+    *oldChildIter = layoutableNewChild;
+    yogaNode_.replaceChild(&layoutableNewChild->yogaNode_, oldChildIndex);
   } else {
-    react_native_log_error(
-        "Text strings must be rendered within a <Text> component.");
+    // Layoutable child replaced with non layoutable child. Remove the previous
+    // child from the layoutable children list.
+    yogaLayoutableChildren_.erase(oldChildIter);
+    yogaNode_.removeChild(oldChildIndex);
   }
+
+  ensureYogaChildrenLookFine();
 }
 
 bool YogaLayoutableShadowNode::doesOwn(
@@ -291,23 +323,28 @@ void YogaLayoutableShadowNode::updateYogaChildren() {
 
   auto oldYogaChildren = isClean ? yogaNode_.getChildren() : YGVector{};
   yogaNode_.setChildren({});
+  yogaLayoutableChildren_.clear();
 
   for (size_t i = 0; i < getChildren().size(); i++) {
-    appendYogaChild(*getChildren().at(i));
-    adoptYogaChild(i);
-
-    if (isClean) {
-      auto &oldYogaChildNode = *oldYogaChildren[i];
-      auto &newYogaChildNode =
-          traitCast<YogaLayoutableShadowNode const &>(*getChildren().at(i))
-              .yogaNode_;
-
-      isClean = isClean && !newYogaChildNode.isDirty() &&
-          (newYogaChildNode.getStyle() == oldYogaChildNode.getStyle());
+    if (auto yogaLayoutableChild =
+            traitCast<YogaLayoutableShadowNode>(getChildren()[i])) {
+      appendYogaChild(yogaLayoutableChild);
+      adoptYogaChild(i);
+
+      if (isClean) {
+        auto yogaChildIndex = yogaLayoutableChildren_.size() - 1;
+        auto &oldYogaChildNode = *oldYogaChildren.at(yogaChildIndex);
+        auto &newYogaChildNode =
+            yogaLayoutableChildren_.at(yogaChildIndex)->yogaNode_;
+
+        isClean = isClean && !newYogaChildNode.isDirty() &&
+            (newYogaChildNode.getStyle() == oldYogaChildNode.getStyle());
+      }
     }
   }
 
-  react_native_assert(getChildren().size() == yogaNode_.getChildren().size());
+  react_native_assert(
+      yogaLayoutableChildren_.size() == yogaNode_.getChildren().size());
 
   yogaNode_.setDirty(!isClean);
 }
@@ -316,13 +353,62 @@ void YogaLayoutableShadowNode::updateYogaProps() {
   ensureUnsealed();
 
   auto props = static_cast<YogaStylableProps const &>(*props_);
+  auto styleResult = applyAliasedProps(props.yogaStyle, props);
 
   // Resetting `dirty` flag only if `yogaStyle` portion of `Props` was changed.
-  if (!yogaNode_.isDirty() && (props.yogaStyle != yogaNode_.getStyle())) {
+  if (!yogaNode_.isDirty() && (styleResult != yogaNode_.getStyle())) {
     yogaNode_.setDirty(true);
   }
 
-  yogaNode_.setStyle(props.yogaStyle);
+  yogaNode_.setStyle(styleResult);
+}
+
+/*static*/ YGStyle YogaLayoutableShadowNode::applyAliasedProps(
+    const YGStyle &baseStyle,
+    const YogaStylableProps &props) {
+  YGStyle result{baseStyle};
+
+  // Aliases with precedence
+  if (!props.marginInline.isUndefined()) {
+    result.margin()[YGEdgeHorizontal] = props.marginInline;
+  }
+  if (!props.marginInlineStart.isUndefined()) {
+    result.margin()[YGEdgeStart] = props.marginInlineStart;
+  }
+  if (!props.marginInlineEnd.isUndefined()) {
+    result.margin()[YGEdgeEnd] = props.marginInlineEnd;
+  }
+  if (!props.marginBlock.isUndefined()) {
+    result.margin()[YGEdgeVertical] = props.marginBlock;
+  }
+  if (!props.paddingInline.isUndefined()) {
+    result.padding()[YGEdgeHorizontal] = props.paddingInline;
+  }
+  if (!props.paddingInlineStart.isUndefined()) {
+    result.padding()[YGEdgeStart] = props.paddingInlineStart;
+  }
+  if (!props.paddingInlineEnd.isUndefined()) {
+    result.padding()[YGEdgeEnd] = props.paddingInlineEnd;
+  }
+  if (!props.paddingBlock.isUndefined()) {
+    result.padding()[YGEdgeVertical] = props.paddingBlock;
+  }
+
+  // Aliases without precedence
+  if (CompactValue(result.margin()[YGEdgeTop]).isUndefined()) {
+    result.margin()[YGEdgeTop] = props.marginBlockStart;
+  }
+  if (CompactValue(result.margin()[YGEdgeBottom]).isUndefined()) {
+    result.margin()[YGEdgeBottom] = props.marginBlockEnd;
+  }
+  if (CompactValue(result.padding()[YGEdgeTop]).isUndefined()) {
+    result.padding()[YGEdgeTop] = props.paddingBlockStart;
+  }
+  if (CompactValue(result.padding()[YGEdgeBottom]).isUndefined()) {
+    result.padding()[YGEdgeBottom] = props.paddingBlockEnd;
+  }
+
+  return result;
 }
 
 void YogaLayoutableShadowNode::setSize(Size size) const {
@@ -398,7 +484,7 @@ void YogaLayoutableShadowNode::layoutTree(
   react_native_assert(minimumSize.height >= 0);
   react_native_assert(maximumSize.width >= 0);
   react_native_assert(maximumSize.height >= 0);
-  // Mimimum size cannot be infinity.
+  // Minimum size cannot be infinity.
   react_native_assert(!std::isinf(minimumSize.width));
   react_native_assert(!std::isinf(minimumSize.height));
 
@@ -479,8 +565,7 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
 
   auto contentFrame = Rect{};
   for (auto childYogaNode : yogaNode_.getChildren()) {
-    auto &childNode =
-        *static_cast<YogaLayoutableShadowNode *>(childYogaNode->getContext());
+    auto &childNode = shadowNodeFromContext(childYogaNode);
 
     // Verifying that the Yoga node belongs to the ShadowNode.
     react_native_assert(&childNode.yogaNode_ == childYogaNode);
@@ -519,12 +604,19 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
 
     auto layoutMetricsWithOverflowInset = childNode.getLayoutMetrics();
     if (layoutMetricsWithOverflowInset.displayType != DisplayType::None) {
+      auto viewChildNode = traitCast<ViewShadowNode const *>(&childNode);
+      auto hitSlop = viewChildNode != nullptr
+          ? viewChildNode->getConcreteProps().hitSlop
+          : EdgeInsets{};
+
       // The contentFrame should always union with existing child node layout +
       // overflowInset. The transform may in a deferred animation and not
       // applied yet.
       contentFrame.unionInPlace(insetBy(
           layoutMetricsWithOverflowInset.frame,
           layoutMetricsWithOverflowInset.overflowInset));
+      contentFrame.unionInPlace(
+          outsetBy(layoutMetricsWithOverflowInset.frame, hitSlop));
 
       auto childTransform = childNode.getTransform();
       if (childTransform != Transform::Identity()) {
@@ -534,6 +626,8 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
         contentFrame.unionInPlace(insetBy(
             layoutMetricsWithOverflowInset.frame * childTransform,
             layoutMetricsWithOverflowInset.overflowInset * childTransform));
+        contentFrame.unionInPlace(outsetBy(
+            layoutMetricsWithOverflowInset.frame * childTransform, hitSlop));
       }
     }
   }
@@ -564,17 +658,15 @@ YGNode *YogaLayoutableShadowNode::yogaNodeCloneCallbackConnector(
 
   // At this point it is guaranteed that all shadow nodes associated with yoga
   // nodes are `YogaLayoutableShadowNode` subclasses.
-  auto parentNode =
-      static_cast<YogaLayoutableShadowNode *>(parentYogaNode->getContext());
-  auto oldNode =
-      static_cast<YogaLayoutableShadowNode *>(oldYogaNode->getContext());
+  auto &parentNode = shadowNodeFromContext(parentYogaNode);
+  auto &oldNode = shadowNodeFromContext(oldYogaNode);
 
-  auto clonedNode = oldNode->clone(
+  auto clonedNode = oldNode.clone(
       {ShadowNodeFragment::propsPlaceholder(),
        ShadowNodeFragment::childrenPlaceholder(),
-       oldNode->getState()});
-  parentNode->replaceChild(*oldNode, clonedNode, childIndex);
-  return &static_cast<YogaLayoutableShadowNode &>(*clonedNode).yogaNode_;
+       oldNode.getState()});
+  parentNode.replaceChild(oldNode, clonedNode, childIndex);
+  return &traitCast<YogaLayoutableShadowNode &>(*clonedNode).yogaNode_;
 }
 
 YGSize YogaLayoutableShadowNode::yogaNodeMeasureCallbackConnector(
@@ -586,8 +678,7 @@ YGSize YogaLayoutableShadowNode::yogaNodeMeasureCallbackConnector(
   SystraceSection s(
       "YogaLayoutableShadowNode::yogaNodeMeasureCallbackConnector");
 
-  auto shadowNodeRawPtr =
-      static_cast<YogaLayoutableShadowNode *>(yogaNode->getContext());
+  auto &shadowNode = shadowNodeFromContext(yogaNode);
 
   auto minimumSize = Size{0, 0};
   auto maximumSize = Size{
@@ -618,13 +709,19 @@ YGSize YogaLayoutableShadowNode::yogaNodeMeasureCallbackConnector(
       break;
   }
 
-  auto size = shadowNodeRawPtr->measureContent(
+  auto size = shadowNode.measureContent(
       threadLocalLayoutContext, {minimumSize, maximumSize});
 
   return YGSize{
       yogaFloatFromFloat(size.width), yogaFloatFromFloat(size.height)};
 }
 
+YogaLayoutableShadowNode &YogaLayoutableShadowNode::shadowNodeFromContext(
+    YGNode *yogaNode) {
+  return traitCast<YogaLayoutableShadowNode &>(
+      *static_cast<ShadowNode *>(yogaNode->getContext()));
+}
+
 YGConfig &YogaLayoutableShadowNode::initializeYogaConfig(YGConfig &config) {
   config.setCloneNodeCallback(
       YogaLayoutableShadowNode::yogaNodeCloneCallbackConnector);
@@ -642,12 +739,9 @@ void YogaLayoutableShadowNode::swapLeftAndRightInTree(
   swapLeftAndRightInYogaStyleProps(shadowNode);
   swapLeftAndRightInViewProps(shadowNode);
 
-  for (auto &child : shadowNode.getChildren()) {
-    auto const yogaLayoutableChild =
-        traitCast<YogaLayoutableShadowNode const *>(child.get());
-    if ((yogaLayoutableChild != nullptr) &&
-        !yogaLayoutableChild->doesOwn(shadowNode)) {
-      swapLeftAndRightInTree(*yogaLayoutableChild);
+  for (auto &child : shadowNode.yogaLayoutableChildren_) {
+    if (!child->doesOwn(shadowNode)) {
+      swapLeftAndRightInTree(*child);
     }
   }
 }
@@ -701,6 +795,7 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps(
   auto &props = const_cast<ViewProps &>(typedCasting);
 
   // Swap border node values, borderRadii, borderColors and borderStyles.
+
   if (props.borderRadii.topLeft.has_value()) {
     props.borderRadii.topStart = props.borderRadii.topLeft;
     props.borderRadii.topLeft.reset();
@@ -758,7 +853,7 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps(
 
 void YogaLayoutableShadowNode::ensureConsistency() const {
   ensureYogaChildrenLookFine();
-  ensureYogaChildrenAlighment();
+  ensureYogaChildrenAlignment();
   ensureYogaChildrenOwnersConsistency();
 }
 
@@ -795,7 +890,7 @@ void YogaLayoutableShadowNode::ensureYogaChildrenLookFine() const {
 #endif
 }
 
-void YogaLayoutableShadowNode::ensureYogaChildrenAlighment() const {
+void YogaLayoutableShadowNode::ensureYogaChildrenAlignment() const {
 #ifdef REACT_NATIVE_DEBUG
   // If the node is not a leaf node, checking that:
   // - All children are `YogaLayoutableShadowNode` subclasses.
@@ -803,7 +898,7 @@ void YogaLayoutableShadowNode::ensureYogaChildrenAlighment() const {
   //   this node.
 
   auto &yogaChildren = yogaNode_.getChildren();
-  auto &children = getChildren();
+  auto &children = yogaLayoutableChildren_;
 
   if (getTraits().check(ShadowNodeTraits::Trait::LeafYogaNode)) {
     react_native_assert(yogaChildren.empty());