react-native 0.70.6 → 0.71.0-rc.1

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

@@ -0,0 +1,202 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#ifdef ANDROID
+
+#include "ViewPropsMapBuffer.h"
+#include "ViewProps.h"
+
+#include "viewPropConversions.h"
+
+#include <react/renderer/graphics/conversions.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+
+namespace facebook {
+namespace react {
+
+// TODO: Currently unsupported: nextFocusForward/Left/Up/Right/Down
+void ViewProps::propsDiffMapBuffer(
+    Props const *oldPropsPtr,
+    MapBufferBuilder &builder) const {
+  // Call with default props if necessary
+  if (oldPropsPtr == nullptr) {
+    ViewProps defaultProps{};
+    propsDiffMapBuffer(&defaultProps, builder);
+    return;
+  }
+
+  // Delegate to base classes
+  YogaStylableProps::propsDiffMapBuffer(oldPropsPtr, builder);
+  AccessibilityProps::propsDiffMapBuffer(oldPropsPtr, builder);
+
+  ViewProps const &oldProps = *(static_cast<const ViewProps *>(oldPropsPtr));
+  ViewProps const &newProps = *this;
+
+  if (oldProps.backfaceVisibility != newProps.backfaceVisibility) {
+    int value;
+    switch (newProps.backfaceVisibility) {
+      case BackfaceVisibility::Auto:
+        value = 0;
+        break;
+      case BackfaceVisibility::Visible:
+        value = 1;
+        break;
+      case BackfaceVisibility::Hidden:
+        value = 2;
+        break;
+    }
+    builder.putInt(VP_BACKFACE_VISIBILITY, value);
+  }
+
+  if (oldProps.backgroundColor != newProps.backgroundColor) {
+    builder.putInt(VP_BG_COLOR, toAndroidRepr(newProps.backgroundColor));
+  }
+
+  if (oldProps.foregroundColor != newProps.foregroundColor) {
+    builder.putInt(VP_FG_COLOR, toAndroidRepr(newProps.foregroundColor));
+  }
+
+  if (oldProps.borderCurves != newProps.borderCurves) {
+    builder.putMapBuffer(
+        VP_BORDER_CURVES, convertCascadedCorners(newProps.borderCurves));
+  }
+
+  if (oldProps.borderColors != newProps.borderColors) {
+    builder.putMapBuffer(
+        VP_BORDER_COLOR, convertBorderColors(newProps.borderColors));
+  }
+
+  if (oldProps.borderRadii != newProps.borderRadii) {
+    builder.putMapBuffer(
+        VP_BORDER_RADII, convertCascadedCorners(newProps.borderRadii));
+  }
+
+  if (oldProps.borderStyles != newProps.borderStyles) {
+    builder.putMapBuffer(
+        VP_BORDER_STYLE, convertCascadedEdges(newProps.borderStyles));
+  }
+
+  if (oldProps.elevation != newProps.elevation) {
+    builder.putDouble(VP_ELEVATION, newProps.elevation);
+  }
+
+  if (oldProps.focusable != newProps.focusable) {
+    builder.putBool(VP_FOCUSABLE, newProps.focusable);
+  }
+
+  if (oldProps.hasTVPreferredFocus != newProps.hasTVPreferredFocus) {
+    builder.putBool(VP_HAS_TV_FOCUS, newProps.hasTVPreferredFocus);
+  }
+
+  if (oldProps.hitSlop != newProps.hitSlop) {
+    builder.putMapBuffer(VP_HIT_SLOP, convertEdgeInsets(newProps.hitSlop));
+  }
+
+  if (oldProps.nativeBackground != newProps.nativeBackground) {
+    builder.putMapBuffer(
+        VP_NATIVE_BACKGROUND,
+        convertNativeBackground(newProps.nativeBackground));
+  }
+
+  if (oldProps.nativeForeground != newProps.nativeForeground) {
+    builder.putMapBuffer(
+        VP_NATIVE_FOREGROUND,
+        convertNativeBackground(newProps.nativeForeground));
+  }
+
+  if (oldProps.needsOffscreenAlphaCompositing !=
+      newProps.needsOffscreenAlphaCompositing) {
+    builder.putBool(
+        VP_OFFSCREEN_ALPHA_COMPOSITING,
+        newProps.needsOffscreenAlphaCompositing);
+  }
+
+  if (oldProps.opacity != newProps.opacity) {
+    builder.putDouble(VP_OPACITY, newProps.opacity);
+  }
+
+  if (oldProps.pointerEvents != newProps.pointerEvents) {
+    int value;
+    switch (newProps.pointerEvents) {
+      case PointerEventsMode::Auto:
+        value = 0;
+        break;
+      case PointerEventsMode::None:
+        value = 1;
+        break;
+      case PointerEventsMode::BoxNone:
+        value = 2;
+        break;
+      case PointerEventsMode::BoxOnly:
+        value = 3;
+        break;
+    }
+
+    builder.putInt(VP_POINTER_EVENTS, value);
+  }
+
+  if (oldProps.events != newProps.events) {
+    builder.putBool(
+        VP_POINTER_ENTER, newProps.events[ViewEvents::Offset::PointerEnter]);
+    builder.putBool(
+        VP_POINTER_LEAVE, newProps.events[ViewEvents::Offset::PointerLeave]);
+    builder.putBool(
+        VP_POINTER_MOVE, newProps.events[ViewEvents::Offset::PointerMove]);
+
+    builder.putBool(
+        VP_POINTER_ENTER_CAPTURE,
+        newProps.events[ViewEvents::Offset::PointerEnterCapture]);
+    builder.putBool(
+        VP_POINTER_LEAVE_CAPTURE,
+        newProps.events[ViewEvents::Offset::PointerLeaveCapture]);
+    builder.putBool(
+        VP_POINTER_MOVE_CAPTURE,
+        newProps.events[ViewEvents::Offset::PointerMoveCapture]);
+    builder.putBool(
+        VP_POINTER_OVER, newProps.events[ViewEvents::Offset::PointerOver]);
+    builder.putBool(
+        VP_POINTER_OVER_CAPTURE,
+        newProps.events[ViewEvents::Offset::PointerOverCapture]);
+
+    builder.putBool(
+        VP_POINTER_OUT, newProps.events[ViewEvents::Offset::PointerOut]);
+    builder.putBool(
+        VP_POINTER_OUT_CAPTURE,
+        newProps.events[ViewEvents::Offset::PointerOutCapture]);
+  }
+
+  if (oldProps.removeClippedSubviews != newProps.removeClippedSubviews) {
+    builder.putBool(VP_REMOVE_CLIPPED_SUBVIEW, newProps.removeClippedSubviews);
+  }
+
+  if (oldProps.renderToHardwareTextureAndroid !=
+      newProps.renderToHardwareTextureAndroid) {
+    builder.putBool(
+        VP_RENDER_TO_HARDWARE_TEXTURE, newProps.renderToHardwareTextureAndroid);
+  }
+
+  if (oldProps.shadowColor != newProps.shadowColor) {
+    builder.putInt(VP_SHADOW_COLOR, toAndroidRepr(newProps.shadowColor));
+  }
+
+  if (oldProps.testId != newProps.testId) {
+    builder.putString(VP_TEST_ID, newProps.testId);
+  }
+
+  if (oldProps.transform != newProps.transform) {
+    builder.putMapBuffer(VP_TRANSFORM, convertTransform(newProps.transform));
+  }
+
+  if (oldProps.zIndex != newProps.zIndex) {
+    builder.putInt(VP_ZINDEX, newProps.zIndex.value_or(0));
+  }
+}
+
+} // namespace react
+} // namespace facebook
+
+#endif

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

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/mapbuffer/MapBuffer.h>
+
+namespace facebook {
+namespace react {
+
+#ifdef ANDROID
+constexpr MapBuffer::Key VP_BACKFACE_VISIBILITY = 9;
+constexpr MapBuffer::Key VP_BG_COLOR = 10;
+constexpr MapBuffer::Key VP_BORDER_COLOR = 11;
+constexpr MapBuffer::Key VP_BORDER_RADII = 12;
+constexpr MapBuffer::Key VP_BORDER_STYLE = 13;
+constexpr MapBuffer::Key VP_COLLAPSABLE = 14;
+constexpr MapBuffer::Key VP_ELEVATION = 15;
+constexpr MapBuffer::Key VP_FOCUSABLE = 16;
+constexpr MapBuffer::Key VP_HAS_TV_FOCUS = 17;
+constexpr MapBuffer::Key VP_HIT_SLOP = 18;
+constexpr MapBuffer::Key VP_NATIVE_BACKGROUND = 20;
+constexpr MapBuffer::Key VP_NATIVE_FOREGROUND = 21;
+constexpr MapBuffer::Key VP_OFFSCREEN_ALPHA_COMPOSITING = 23;
+constexpr MapBuffer::Key VP_OPACITY = 24;
+constexpr MapBuffer::Key VP_POINTER_EVENTS = 25;
+constexpr MapBuffer::Key VP_POINTER_ENTER = 26;
+constexpr MapBuffer::Key VP_POINTER_LEAVE = 27;
+constexpr MapBuffer::Key VP_POINTER_MOVE = 28;
+constexpr MapBuffer::Key VP_REMOVE_CLIPPED_SUBVIEW = 29;
+constexpr MapBuffer::Key VP_RENDER_TO_HARDWARE_TEXTURE = 30;
+constexpr MapBuffer::Key VP_SHADOW_COLOR = 31;
+constexpr MapBuffer::Key VP_TEST_ID = 32;
+constexpr MapBuffer::Key VP_TRANSFORM = 33;
+constexpr MapBuffer::Key VP_ZINDEX = 34;
+constexpr MapBuffer::Key VP_POINTER_ENTER_CAPTURE = 38;
+constexpr MapBuffer::Key VP_POINTER_LEAVE_CAPTURE = 39;
+constexpr MapBuffer::Key VP_POINTER_MOVE_CAPTURE = 40;
+constexpr MapBuffer::Key VP_POINTER_OVER = 41;
+constexpr MapBuffer::Key VP_POINTER_OVER_CAPTURE = 42;
+constexpr MapBuffer::Key VP_POINTER_OUT = 43;
+constexpr MapBuffer::Key VP_POINTER_OUT_CAPTURE = 44;
+constexpr MapBuffer::Key VP_BORDER_CURVES = 45;
+constexpr MapBuffer::Key VP_FG_COLOR = 46;
+
+// Yoga values
+constexpr MapBuffer::Key YG_BORDER_WIDTH = 100;
+constexpr MapBuffer::Key YG_OVERFLOW = 101;
+#endif
+
+} // namespace react
+} // namespace facebook

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

@@ -8,33 +8,12 @@
 #include "ViewShadowNode.h"
 #include <react/config/ReactNativeConfig.h>
 #include <react/renderer/components/view/primitives.h>
+#include <react/renderer/core/CoreFeatures.h>
 
-namespace facebook {
-namespace react {
+namespace facebook::react {
 
 char const ViewComponentName[] = "View";
 
-static inline bool keepRawValuesInViewProps(PropsParserContext const &context) {
-  static bool shouldUseRawProps = true;
-
-#ifdef ANDROID
-  static bool initialized = false;
-
-  if (!initialized) {
-    auto config =
-        context.contextContainer.find<std::shared_ptr<const ReactNativeConfig>>(
-            "ReactNativeConfig");
-    if (config.has_value()) {
-      initialized = true;
-      shouldUseRawProps = !config.value()->getBool(
-          "react_native_new_architecture:use_mapbuffer_for_viewprops");
-    }
-  }
-#endif
-
-  return shouldUseRawProps;
-}
-
 ViewShadowNodeProps::ViewShadowNodeProps(
     PropsParserContext const &context,
     ViewShadowNodeProps const &sourceProps,
@@ -43,7 +22,7 @@ ViewShadowNodeProps::ViewShadowNodeProps(
           context,
           sourceProps,
           rawProps,
-          keepRawValuesInViewProps(context)){};
+          !CoreFeatures::enableMapBuffer){};
 
 ViewShadowNode::ViewShadowNode(
     ShadowNodeFragment const &fragment,
@@ -106,7 +85,10 @@ void ViewShadowNode::initialize() noexcept {
   } else {
     traits_.unset(ShadowNodeTraits::Trait::FormsStackingContext);
   }
+
+#ifdef ANDROID
+  traits_.set(ShadowNodeTraits::Trait::AndroidMapBufferPropsSupported);
+#endif
 }
 
-} // namespace react
-} // namespace facebook
+} // namespace facebook::react

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

@@ -20,12 +20,11 @@
 #include <limits>
 #include <memory>
 
-namespace facebook {
-namespace react {
+namespace facebook::react {
 
 static int FabricDefaultYogaLog(
-    const YGConfigRef,
-    const YGNodeRef,
+    const YGConfigRef /*unused*/,
+    const YGNodeRef /*unused*/,
     YGLogLevel level,
     const char *format,
     va_list args) {
@@ -250,7 +249,7 @@ void YogaLayoutableShadowNode::appendChild(
   // (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())) {
+  if (traitCast<YogaLayoutableShadowNode const *>(childNode.get()) != nullptr) {
     // Appending the Yoga node.
     appendYogaChild(*childNode);
 
@@ -507,7 +506,7 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
       // `newLayoutMetrics.frame` with `childNode.getLayoutMetrics().frame` to
       // detect if layout has not changed is not advised, please refer to
       // D22999891 for details.
-      if (layoutContext.affectedNodes) {
+      if (layoutContext.affectedNodes != nullptr) {
         layoutContext.affectedNodes->push_back(&childNode);
       }
 
@@ -646,7 +645,8 @@ void YogaLayoutableShadowNode::swapLeftAndRightInTree(
   for (auto &child : shadowNode.getChildren()) {
     auto const yogaLayoutableChild =
         traitCast<YogaLayoutableShadowNode const *>(child.get());
-    if (yogaLayoutableChild && !yogaLayoutableChild->doesOwn(shadowNode)) {
+    if ((yogaLayoutableChild != nullptr) &&
+        !yogaLayoutableChild->doesOwn(shadowNode)) {
       swapLeftAndRightInTree(*yogaLayoutableChild);
     }
   }
@@ -822,5 +822,4 @@ void YogaLayoutableShadowNode::ensureYogaChildrenAlighment() const {
 #endif
 }
 
-} // namespace react
-} // namespace facebook
+} // namespace facebook::react

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

@@ -9,6 +9,7 @@
 
 #include <react/renderer/components/view/conversions.h>
 #include <react/renderer/components/view/propsConversions.h>
+#include <react/renderer/core/CoreFeatures.h>
 #include <react/renderer/core/propsConversions.h>
 #include <react/renderer/debug/debugStringConvertibleUtils.h>
 #include <yoga/YGNode.h>
@@ -16,8 +17,7 @@
 
 #include "conversions.h"
 
-namespace facebook {
-namespace react {
+namespace facebook::react {
 
 YogaStylableProps::YogaStylableProps(
     const PropsParserContext &context,
@@ -26,7 +26,7 @@ YogaStylableProps::YogaStylableProps(
     bool shouldSetRawProps)
     : Props(context, sourceProps, rawProps, shouldSetRawProps),
       yogaStyle(
-          Props::enablePropIteratorSetter
+          CoreFeatures::enablePropIteratorSetter
               ? sourceProps.yogaStyle
               : convertRawProp(context, rawProps, sourceProps.yogaStyle)){};
 
@@ -50,7 +50,8 @@ static inline T const getFieldValue(
     return;                                                              \
   }
 
-#define REBUILD_FIELD_SWITCH_CASE(field) \
+// @lint-ignore CLANGTIDY cppcoreguidelines-macro-usage
+#define REBUILD_FIELD_SWITCH_CASE_YSP(field) \
   REBUILD_FIELD_SWITCH_CASE2(field, #field)
 
 #define REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, index, fieldName) \
@@ -64,6 +65,11 @@ static inline T const getFieldValue(
   REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGDimensionWidth, widthStr); \
   REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGDimensionHeight, heightStr);
 
+#define REBUILD_FIELD_YG_GUTTER(field, rowGapStr, columnGapStr, gapStr)      \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterRow, rowGapStr);       \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterColumn, columnGapStr); \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterAll, gapStr);
+
 #define REBUILD_FIELD_YG_EDGES(field, prefix, suffix)                          \
   REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(                                        \
       field, YGEdgeLeft, prefix "Left" suffix);                                \
@@ -99,21 +105,22 @@ void YogaStylableProps::setProp(
   Props::setProp(context, hash, propName, value);
 
   switch (hash) {
-    REBUILD_FIELD_SWITCH_CASE(direction);
-    REBUILD_FIELD_SWITCH_CASE(flexDirection);
-    REBUILD_FIELD_SWITCH_CASE(justifyContent);
-    REBUILD_FIELD_SWITCH_CASE(alignContent);
-    REBUILD_FIELD_SWITCH_CASE(alignItems);
-    REBUILD_FIELD_SWITCH_CASE(alignSelf);
-    REBUILD_FIELD_SWITCH_CASE(flexWrap);
-    REBUILD_FIELD_SWITCH_CASE(overflow);
-    REBUILD_FIELD_SWITCH_CASE(display);
-    REBUILD_FIELD_SWITCH_CASE(flex);
-    REBUILD_FIELD_SWITCH_CASE(flexGrow);
-    REBUILD_FIELD_SWITCH_CASE(flexShrink);
-    REBUILD_FIELD_SWITCH_CASE(flexBasis);
+    REBUILD_FIELD_SWITCH_CASE_YSP(direction);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flexDirection);
+    REBUILD_FIELD_SWITCH_CASE_YSP(justifyContent);
+    REBUILD_FIELD_SWITCH_CASE_YSP(alignContent);
+    REBUILD_FIELD_SWITCH_CASE_YSP(alignItems);
+    REBUILD_FIELD_SWITCH_CASE_YSP(alignSelf);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flexWrap);
+    REBUILD_FIELD_SWITCH_CASE_YSP(overflow);
+    REBUILD_FIELD_SWITCH_CASE_YSP(display);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flex);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flexGrow);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flexShrink);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flexBasis);
     REBUILD_FIELD_SWITCH_CASE2(positionType, "position");
-    REBUILD_FIELD_SWITCH_CASE(aspectRatio);
+    REBUILD_FIELD_YG_GUTTER(gap, "rowGap", "columnGap", "gap");
+    REBUILD_FIELD_SWITCH_CASE_YSP(aspectRatio);
     REBUILD_FIELD_YG_DIMENSION(dimensions, "width", "height");
     REBUILD_FIELD_YG_DIMENSION(minDimensions, "minWidth", "minHeight");
     REBUILD_FIELD_YG_DIMENSION(maxDimensions, "maxWidth", "maxHeight");
@@ -162,6 +169,18 @@ SharedDebugStringConvertibleList YogaStylableProps::getDebugProps() const {
           "flex", yogaStyle.flex(), defaultYogaStyle.flex()),
       debugStringConvertibleItem(
           "flexGrow", yogaStyle.flexGrow(), defaultYogaStyle.flexGrow()),
+      debugStringConvertibleItem(
+          "rowGap",
+          yogaStyle.gap()[YGGutterRow],
+          defaultYogaStyle.gap()[YGGutterRow]),
+      debugStringConvertibleItem(
+          "columnGap",
+          yogaStyle.gap()[YGGutterColumn],
+          defaultYogaStyle.gap()[YGGutterColumn]),
+      debugStringConvertibleItem(
+          "gap",
+          yogaStyle.gap()[YGGutterAll],
+          defaultYogaStyle.gap()[YGGutterAll]),
       debugStringConvertibleItem(
           "flexShrink", yogaStyle.flexShrink(), defaultYogaStyle.flexShrink()),
       debugStringConvertibleItem(
@@ -192,5 +211,4 @@ SharedDebugStringConvertibleList YogaStylableProps::getDebugProps() const {
 }
 #endif
 
-} // namespace react
-} // namespace facebook
+} // namespace facebook::react

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

@@ -31,6 +31,11 @@ class YogaStylableProps : public Props {
       const char *propName,
       RawValue const &value);
 
+#ifdef ANDROID
+  void propsDiffMapBuffer(Props const *oldProps, MapBufferBuilder &builder)
+      const override;
+#endif
+
 #pragma mark - Props
 
   YGStyle yogaStyle{};
@@ -39,7 +44,7 @@ class YogaStylableProps : public Props {
 
 #pragma mark - DebugStringConvertible (Partial)
 
-  SharedDebugStringConvertibleList getDebugProps() const;
+  SharedDebugStringConvertibleList getDebugProps() const override;
 
 #endif
 };

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

@@ -0,0 +1,87 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#ifdef ANDROID
+
+#include "ViewProps.h"
+#include "ViewPropsMapBuffer.h"
+
+#include "viewPropConversions.h"
+
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+
+namespace facebook {
+namespace react {
+
+MapBuffer convertBorderWidths(YGStyle::Edges const &border) {
+  MapBufferBuilder builder(7);
+  putOptionalFloat(
+      builder, EDGE_TOP, optionalFloatFromYogaValue(border[YGEdgeTop]));
+  putOptionalFloat(
+      builder, EDGE_RIGHT, optionalFloatFromYogaValue(border[YGEdgeRight]));
+  putOptionalFloat(
+      builder, EDGE_BOTTOM, optionalFloatFromYogaValue(border[YGEdgeBottom]));
+  putOptionalFloat(
+      builder, EDGE_LEFT, optionalFloatFromYogaValue(border[YGEdgeLeft]));
+  putOptionalFloat(
+      builder, EDGE_START, optionalFloatFromYogaValue(border[YGEdgeStart]));
+  putOptionalFloat(
+      builder, EDGE_END, optionalFloatFromYogaValue(border[YGEdgeEnd]));
+  putOptionalFloat(
+      builder, EDGE_ALL, optionalFloatFromYogaValue(border[YGEdgeAll]));
+  return builder.build();
+}
+
+// TODO: Currently unsupported: nextFocusForward/Left/Up/Right/Down
+void YogaStylableProps::propsDiffMapBuffer(
+    Props const *oldPropsPtr,
+    MapBufferBuilder &builder) const {
+  // Call with default props if necessary
+  if (oldPropsPtr == nullptr) {
+    YogaStylableProps defaultProps{};
+    propsDiffMapBuffer(&defaultProps, builder);
+    return;
+  }
+
+  // Delegate to base classes
+  Props::propsDiffMapBuffer(oldPropsPtr, builder);
+
+  YogaStylableProps const &oldProps =
+      *(static_cast<const YogaStylableProps *>(oldPropsPtr));
+  YogaStylableProps const &newProps = *this;
+
+  if (oldProps.yogaStyle != newProps.yogaStyle) {
+    auto const &oldStyle = oldProps.yogaStyle;
+    auto const &newStyle = newProps.yogaStyle;
+
+    if (!(oldStyle.border() == newStyle.border())) {
+      builder.putMapBuffer(
+          YG_BORDER_WIDTH, convertBorderWidths(newStyle.border()));
+    }
+
+    if (oldStyle.overflow() != newStyle.overflow()) {
+      int value;
+      switch (newStyle.overflow()) {
+        case YGOverflowVisible:
+          value = 0;
+          break;
+        case YGOverflowHidden:
+          value = 1;
+          break;
+        case YGOverflowScroll:
+          value = 2;
+          break;
+      }
+      builder.putInt(YG_OVERFLOW, value);
+    }
+  }
+}
+
+} // namespace react
+} // namespace facebook
+
+#endif

package/ReactCommon/{hermes/inspector/chrome/AutoAttachUtils.h → react/renderer/components/view/YogaStylablePropsMapBuffer.h}

@@ -7,18 +7,18 @@
 
 #pragma once
 
-#include <string>
+#ifdef ANDROID
+
+#include <react/renderer/mapbuffer/MapBuffer.h>
 
 namespace facebook {
-namespace hermes {
-namespace inspector {
-namespace chrome {
+namespace react {
+
+// Yoga values
+constexpr MapBuffer::Key YG_BORDER_WIDTH = 100;
+constexpr MapBuffer::Key YG_OVERFLOW = 101;
 
-bool isNetworkInspected(
-    const std::string &owner,
-    const std::string &app,
-    const std::string &device);
-}
-} // namespace inspector
-} // namespace hermes
+} // namespace react
 } // namespace facebook
+
+#endif

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

@@ -563,6 +563,24 @@ inline void fromRawValue(
   react_native_assert(false);
 }
 
+inline void fromRawValue(
+    const PropsParserContext &context,
+    const RawValue &value,
+    BorderCurve &result) {
+  react_native_assert(value.hasType<std::string>());
+  auto stringValue = (std::string)value;
+  if (stringValue == "circular") {
+    result = BorderCurve::Circular;
+    return;
+  }
+  if (stringValue == "continuous") {
+    result = BorderCurve::Continuous;
+    return;
+  }
+  LOG(FATAL) << "Could not parse BorderCurve:" << stringValue;
+  react_native_assert(false);
+}
+
 inline void fromRawValue(
     const PropsParserContext &context,
     const RawValue &value,

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

@@ -56,6 +56,9 @@ struct ViewEvents {
     PointerMoveCapture = 25,
     PointerOver = 26,
     PointerOut = 27,
+    PointerOverCapture = 28,
+    PointerOutCapture = 29,
+
   };
 
   constexpr bool operator[](const Offset offset) const {
@@ -77,6 +80,8 @@ inline static bool operator!=(ViewEvents const &lhs, ViewEvents const &rhs) {
 
 enum class BackfaceVisibility { Auto, Visible, Hidden };
 
+enum class BorderCurve { Circular, Continuous };
+
 enum class BorderStyle { Solid, Dotted, Dashed };
 
 template <typename T>
@@ -202,11 +207,13 @@ struct CascadedRectangleCorners {
 };
 
 using BorderWidths = RectangleEdges<Float>;
+using BorderCurves = RectangleCorners<BorderCurve>;
 using BorderStyles = RectangleEdges<BorderStyle>;
 using BorderColors = RectangleEdges<SharedColor>;
 using BorderRadii = RectangleCorners<Float>;
 
 using CascadedBorderWidths = CascadedRectangleEdges<Float>;
+using CascadedBorderCurves = CascadedRectangleCorners<BorderCurve>;
 using CascadedBorderStyles = CascadedRectangleEdges<BorderStyle>;
 using CascadedBorderColors = CascadedRectangleEdges<SharedColor>;
 using CascadedBorderRadii = CascadedRectangleCorners<Float>;
@@ -215,6 +222,7 @@ struct BorderMetrics {
   BorderColors borderColors{};
   BorderWidths borderWidths{};
   BorderRadii borderRadii{};
+  BorderCurves borderCurves{};
   BorderStyles borderStyles{};
 
   bool operator==(const BorderMetrics &rhs) const {
@@ -222,11 +230,13 @@ struct BorderMetrics {
                this->borderColors,
                this->borderWidths,
                this->borderRadii,
+               this->borderCurves,
                this->borderStyles) ==
         std::tie(
                rhs.borderColors,
                rhs.borderWidths,
                rhs.borderRadii,
+               rhs.borderCurves,
                rhs.borderStyles);
   }