Add support for rootMargin (facebook#54176)

Summary:

Changelog: [Internal] - Add support for `rootMargin` for IntersectionObserver.

Reference:
- https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-rootmargin
- https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin

Differential Revision: D84787370

Author: lunaleaps

packages/react-native/ReactCommon/react/nativemodule/intersectionobserver/NativeIntersectionObserver.cpp

@@ -64,6 +64,7 @@ jsi::Object NativeIntersectionObserver::observeV2(
 
   auto thresholds = options.thresholds;
   auto rootThresholds = options.rootThresholds;
+  auto rootMargin = options.rootMargin;
   auto& uiManager = getUIManagerFromRuntime(runtime);
 
   intersectionObserverManager_.observe(
@@ -72,6 +73,7 @@ jsi::Object NativeIntersectionObserver::observeV2(
       shadowNodeFamily,
       thresholds,
       rootThresholds,
+      rootMargin,
       uiManager);
 
   return tokenFromShadowNodeFamily(runtime, shadowNodeFamily);

packages/react-native/ReactCommon/react/nativemodule/intersectionobserver/NativeIntersectionObserver.h

@@ -30,7 +30,9 @@ using NativeIntersectionObserverObserveOptions =
         // thresholds
         std::vector<Float>,
         // rootThresholds
-        std::optional<std::vector<Float>>>;
+        std::optional<std::vector<Float>>,
+        // rootMargin
+        std::optional<std::string>>;
 
 template <>
 struct Bridging<NativeIntersectionObserverObserveOptions>

packages/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserver.cpp

@@ -10,22 +10,115 @@
 #include <react/renderer/core/LayoutMetrics.h>
 #include <react/renderer/core/LayoutableShadowNode.h>
 #include <react/renderer/core/ShadowNodeFamily.h>
+#include <react/renderer/css/CSSLength.h>
+#include <react/renderer/css/CSSPercentage.h>
+#include <react/renderer/css/CSSValueParser.h>
+#include <react/renderer/graphics/RectangleEdges.h>
 #include <utility>
 
 namespace facebook::react {
 
+namespace {
+
+// Structure to hold a margin value that can be either pixels or percentage
+struct MarginValue {
+  Float value;
+  bool isPercentage;
+};
+
+// Parse a CSS-style margin string (e.g., "10px 20px 30px 40px") into EdgeInsets
+// Follows W3C spec:
+// https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverinit-rootmargin
+std::optional<EdgeInsets> parseRootMargin(
+    const std::string& marginStr,
+    const Rect& rootRect) {
+  if (marginStr.empty()) {
+    return std::nullopt;
+  }
+
+  std::vector<MarginValue> values;
+  CSSSyntaxParser syntaxParser(marginStr);
+
+  // Parse up to 4 space-separated length/percentage values
+  while (!syntaxParser.isFinished()) {
+    syntaxParser.consumeWhitespace();
+    if (syntaxParser.isFinished()) {
+      break;
+    }
+
+    auto parsed = parseNextCSSValue<CSSLength, CSSPercentage>(syntaxParser);
+
+    if (std::holds_alternative<CSSLength>(parsed)) {
+      auto length = std::get<CSSLength>(parsed);
+      // Only support px units for rootMargin (per W3C spec)
+      if (length.unit != CSSLengthUnit::Px) {
+        return std::nullopt;
+      }
+      values.push_back({length.value, false});
+    } else if (std::holds_alternative<CSSPercentage>(parsed)) {
+      auto percentage = std::get<CSSPercentage>(parsed);
+      values.push_back({percentage.value, true});
+    } else {
+      // Invalid token, stop parsing
+      return std::nullopt;
+    }
+  }
+
+  // CSS margin shorthand: 1 value = all, 2 values = vertical/horizontal,
+  // 3 values = top/horizontal/bottom, 4 values = top/right/bottom/left
+  std::vector<MarginValue> expandedValues;
+  switch (values.size()) {
+    case 1:
+      expandedValues = {values[0], values[0], values[0], values[0]};
+      break;
+    case 2:
+      expandedValues = {values[0], values[1], values[0], values[1]};
+      break;
+    case 3:
+      expandedValues = {values[0], values[1], values[2], values[1]};
+      break;
+    case 4:
+      expandedValues = {values[0], values[1], values[2], values[3]};
+      break;
+    default:
+      return std::nullopt;
+  }
+
+  // Calculate actual pixel values, converting percentages based on root
+  // dimensions Per W3C spec: top/bottom percentages use height, left/right use
+  // width
+  Float top = expandedValues[0].isPercentage
+      ? (expandedValues[0].value / 100.0f) * rootRect.size.height
+      : expandedValues[0].value;
+  Float right = expandedValues[1].isPercentage
+      ? (expandedValues[1].value / 100.0f) * rootRect.size.width
+      : expandedValues[1].value;
+  Float bottom = expandedValues[2].isPercentage
+      ? (expandedValues[2].value / 100.0f) * rootRect.size.height
+      : expandedValues[2].value;
+  Float left = expandedValues[3].isPercentage
+      ? (expandedValues[3].value / 100.0f) * rootRect.size.width
+      : expandedValues[3].value;
+
+  return EdgeInsets{left, top, right, bottom};
+}
+
+} // namespace
+
 IntersectionObserver::IntersectionObserver(
     IntersectionObserverObserverId intersectionObserverId,
     std::optional<ShadowNodeFamily::Shared> observationRootShadowNodeFamily,
     ShadowNodeFamily::Shared targetShadowNodeFamily,
     std::vector<Float> thresholds,
-    std::optional<std::vector<Float>> rootThresholds)
+    std::optional<std::vector<Float>> rootThresholds,
+    std::optional<std::string> rootMargin)
     : intersectionObserverId_(intersectionObserverId),
       observationRootShadowNodeFamily_(
           std::move(observationRootShadowNodeFamily)),
       targetShadowNodeFamily_(std::move(targetShadowNodeFamily)),
       thresholds_(std::move(thresholds)),
-      rootThresholds_(std::move(rootThresholds)) {}
+      rootThresholds_(std::move(rootThresholds)),
+      rootMargin_(std::move(rootMargin)) {}
 
 static std::shared_ptr<const ShadowNode> getShadowNode(
     const ShadowNodeFamily::AncestorList& ancestors) {
@@ -113,13 +206,14 @@ static std::optional<Rect> intersectOrNull(
 // https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo
 static std::optional<Rect> computeIntersection(
     const Rect& rootBoundingRect,
+    const Rect& rootMarginBoundingRect,
     const Rect& targetBoundingRect,
     const ShadowNodeFamily::AncestorList& targetToRootAncestors,
     bool hasExplicitRoot) {
   // Use intersectOrNull to properly distinguish between edge-adjacent
   // (valid intersection) and separated rectangles (no intersection)
   auto absoluteIntersectionRect =
-      intersectOrNull(rootBoundingRect, targetBoundingRect);
+      intersectOrNull(rootMarginBoundingRect, targetBoundingRect);
   if (!absoluteIntersectionRect.has_value()) {
     return std::nullopt;
   }
@@ -130,12 +224,14 @@ static std::optional<Rect> computeIntersection(
   auto clippedTargetFromRoot =
       getClippedTargetBoundingRect(targetToRootAncestors);
 
+  // Use root origin (without rootMargins) to translate coordinates of
+  // clippedTarget from relative to root, to top-level coordinate system
   auto clippedTargetBoundingRect = hasExplicitRoot ? Rect{
-      .origin=rootBoundingRect.origin + clippedTargetFromRoot.origin,
+      .origin= rootBoundingRect.origin + clippedTargetFromRoot.origin,
       .size=clippedTargetFromRoot.size}
       : clippedTargetFromRoot;
 
-  return intersectOrNull(rootBoundingRect, clippedTargetBoundingRect);
+  return intersectOrNull(rootMarginBoundingRect, clippedTargetBoundingRect);
 }
 
 static Float getHighestThresholdCrossed(
@@ -167,6 +263,18 @@ IntersectionObserver::updateIntersectionObservation(
       ? getBoundingRect(rootAncestors)
       : getRootNodeBoundingRect(rootShadowNode);
 
+  auto rootMarginBoundingRect = rootBoundingRect;
+
+  // Apply rootMargin to expand/contract the root bounding rect
+  if (rootMargin_.has_value()) {
+    auto parsedMargin = parseRootMargin(rootMargin_.value(), rootBoundingRect);
+    if (parsedMargin.has_value()) {
+      // Use outsetBy to expand the root rect (positive values expand, negative
+      // contract)
+      rootMarginBoundingRect = outsetBy(rootBoundingRect, parsedMargin.value());
+    }
+  }
+
   auto targetAncestors = targetShadowNodeFamily_->getAncestors(rootShadowNode);
 
   // Absolute coordinates of the target
@@ -175,7 +283,7 @@ IntersectionObserver::updateIntersectionObservation(
   if ((hasExplicitRoot && rootAncestors.empty()) || targetAncestors.empty()) {
     // If observation root or target is not a descendant of `rootShadowNode`
     return setNotIntersectingState(
-        rootBoundingRect, targetBoundingRect, {}, time);
+        rootMarginBoundingRect, targetBoundingRect, {}, time);
   }
 
   auto targetToRootAncestors = hasExplicitRoot
@@ -184,6 +292,7 @@ IntersectionObserver::updateIntersectionObservation(
 
   auto intersection = computeIntersection(
       rootBoundingRect,
+      rootMarginBoundingRect,
       targetBoundingRect,
       targetToRootAncestors,
       hasExplicitRoot);
@@ -203,31 +312,31 @@ IntersectionObserver::updateIntersectionObservation(
 
   if (!intersection.has_value()) {
     return setNotIntersectingState(
-        rootBoundingRect, targetBoundingRect, intersectionRect, time);
+        rootMarginBoundingRect, targetBoundingRect, intersectionRect, time);
   }
 
   auto highestThresholdCrossed =
       getHighestThresholdCrossed(intersectionRatio, thresholds_);
 
   auto highestRootThresholdCrossed = -1.0f;
   if (rootThresholds_.has_value()) {
-    Float rootBoundingRectArea =
-        rootBoundingRect.size.width * rootBoundingRect.size.height;
-    Float rootThresholdIntersectionRatio = rootBoundingRectArea == 0
+    Float rootMarginBoundingRectArea =
+        rootMarginBoundingRect.size.width * rootMarginBoundingRect.size.height;
+    Float rootThresholdIntersectionRatio = rootMarginBoundingRectArea == 0
         ? 0
-        : intersectionRectArea / rootBoundingRectArea;
+        : intersectionRectArea / rootMarginBoundingRectArea;
     highestRootThresholdCrossed = getHighestThresholdCrossed(
         rootThresholdIntersectionRatio, rootThresholds_.value());
   }
 
   if (highestThresholdCrossed == -1.0f &&
       highestRootThresholdCrossed == -1.0f) {
     return setNotIntersectingState(
-        rootBoundingRect, targetBoundingRect, intersectionRect, time);
+        rootMarginBoundingRect, targetBoundingRect, intersectionRect, time);
   }
 
   return setIntersectingState(
-      rootBoundingRect,
+      rootMarginBoundingRect,
       targetBoundingRect,
       intersectionRect,
       highestThresholdCrossed,

packages/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserver.h

@@ -41,7 +41,8 @@ class IntersectionObserver {
       std::optional<ShadowNodeFamily::Shared> observationRootShadowNodeFamily,
       ShadowNodeFamily::Shared targetShadowNodeFamily,
       std::vector<Float> thresholds,
-      std::optional<std::vector<Float>> rootThresholds = std::nullopt);
+      std::optional<std::vector<Float>> rootThresholds = std::nullopt,
+      std::optional<std::string> rootMargin = std::nullopt);
 
   // Partially equivalent to
   // https://w3c.github.io/IntersectionObserver/#update-intersection-observations-algo
@@ -84,6 +85,7 @@ class IntersectionObserver {
   ShadowNodeFamily::Shared targetShadowNodeFamily_;
   std::vector<Float> thresholds_;
   std::optional<std::vector<Float>> rootThresholds_;
+  std::optional<std::string> rootMargin_;
   mutable IntersectionObserverState state_ =
       IntersectionObserverState::Initial();
 };

packages/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserverManager.cpp

@@ -44,6 +44,7 @@ void IntersectionObserverManager::observe(
     const ShadowNodeFamily::Shared& shadowNodeFamily,
     std::vector<Float> thresholds,
     std::optional<std::vector<Float>> rootThresholds,
+    std::optional<std::string> rootMargin,
     const UIManager& /*uiManager*/) {
   TraceSection s("IntersectionObserverManager::observe");
 
@@ -58,7 +59,8 @@ void IntersectionObserverManager::observe(
       observationRootShadowNodeFamily,
       shadowNodeFamily,
       std::move(thresholds),
-      std::move(rootThresholds)));
+      std::move(rootThresholds),
+      std::move(rootMargin)));
 
   observersPendingInitialization_.emplace_back(observers.back().get());
 }

packages/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserverManager.h

@@ -31,6 +31,7 @@ class IntersectionObserverManager final
       const ShadowNodeFamily::Shared& shadowNode,
       std::vector<Float> thresholds,
       std::optional<std::vector<Float>> rootThresholds,
+      std::optional<std::string> rootMargin,
       const UIManager& uiManager);
 
   void unobserve(