Add support for rootMargin (#54176)

Summary:
Pull Request resolved: #54176

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

Reviewed By: rubennorte

Differential Revision: D84787370

fbshipit-source-id: 752a9a32becde73d1a92469f9b74240918519b24

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,101 @@
 #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 {
 
+// Parse a normalized rootMargin string that's always in the format:
+// "top right bottom left" where each value is either "Npx" or "N%"
+// The string is already validated and normalized by JS.
+// Returns a vector of 4 MarginValue structures (top, right, bottom, left).
+// Returns an empty vector if parsing fails.
+std::vector<MarginValue> parseNormalizedRootMargin(
+    const std::string& marginStr) {
+  // If unset or set to default, return empty so we don't apply any margins
+  if (marginStr.empty() || marginStr == "0px 0px 0px 0px") {
+    return {};
+  }
+
+  std::vector<MarginValue> values;
+  CSSSyntaxParser syntaxParser(marginStr);
+
+  // Parse exactly 4 space-separated values
+  while (!syntaxParser.isFinished() && values.size() < 4) {
+    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 {};
+      }
+      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
+      return {};
+    }
+  }
+
+  // Should have exactly 4 values since JS normalizes to this format
+  if (values.size() != 4) {
+    return {};
+  }
+
+  return values;
+}
+
+namespace {
+
+// Convert margin values to actual pixel values based on root rect.
+// Per W3C spec: top/bottom percentages use height, left/right use width.
+EdgeInsets calculateRootMarginInsets(
+    const std::vector<MarginValue>& margins,
+    const Rect& rootRect) {
+  Float top = margins[0].isPercentage
+      ? (margins[0].value / 100.0f) * rootRect.size.height
+      : margins[0].value;
+  Float right = margins[1].isPercentage
+      ? (margins[1].value / 100.0f) * rootRect.size.width
+      : margins[1].value;
+  Float bottom = margins[2].isPercentage
+      ? (margins[2].value / 100.0f) * rootRect.size.height
+      : margins[2].value;
+  Float left = margins[3].isPercentage
+      ? (margins[3].value / 100.0f) * rootRect.size.width
+      : margins[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::vector<MarginValue> rootMargins)
     : intersectionObserverId_(intersectionObserverId),
       observationRootShadowNodeFamily_(
           std::move(observationRootShadowNodeFamily)),
       targetShadowNodeFamily_(std::move(targetShadowNodeFamily)),
       thresholds_(std::move(thresholds)),
-      rootThresholds_(std::move(rootThresholds)) {}
+      rootThresholds_(std::move(rootThresholds)),
+      rootMargins_(std::move(rootMargins)) {}
 
 static std::shared_ptr<const ShadowNode> getShadowNode(
     const ShadowNodeFamily::AncestorList& ancestors) {
@@ -113,13 +192,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 +210,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 +249,18 @@ IntersectionObserver::updateIntersectionObservation(
       ? getBoundingRect(rootAncestors)
       : getRootNodeBoundingRect(rootShadowNode);
 
+  auto rootMarginBoundingRect = rootBoundingRect;
+
+  // Apply rootMargin to expand/contract the root bounding rect
+  if (!rootMargins_.empty()) {
+    // Calculate the actual insets based on current root dimensions
+    // (converts percentages to pixels)
+    auto insets = calculateRootMarginInsets(rootMargins_, rootBoundingRect);
+    // Use outsetBy to expand the root rect (positive values expand, negative
+    // contract)
+    rootMarginBoundingRect = outsetBy(rootBoundingRect, insets);
+  }
+
   auto targetAncestors = targetShadowNodeFamily_->getAncestors(rootShadowNode);
 
   // Absolute coordinates of the target
@@ -175,7 +269,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 +278,7 @@ IntersectionObserver::updateIntersectionObservation(
 
   auto intersection = computeIntersection(
       rootBoundingRect,
+      rootMarginBoundingRect,
       targetBoundingRect,
       targetToRootAncestors,
       hasExplicitRoot);
@@ -203,31 +298,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

@@ -18,6 +18,19 @@ namespace facebook::react {
 
 using IntersectionObserverObserverId = int32_t;
 
+// Structure to hold a margin value that can be either pixels or percentage
+struct MarginValue {
+  Float value;
+  bool isPercentage;
+};
+
+// Parse a normalized rootMargin string that's always in the format:
+// "top right bottom left" where each value is either "Npx" or "N%"
+// The string is already validated and normalized by JS.
+// Returns a vector of 4 MarginValue structures (top, right, bottom, left).
+std::vector<MarginValue> parseNormalizedRootMargin(
+    const std::string& marginStr);
+
 struct IntersectionObserverEntry {
   IntersectionObserverObserverId intersectionObserverId;
   ShadowNodeFamily::Shared shadowNodeFamily;
@@ -41,7 +54,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::vector<MarginValue> rootMargins);
 
   // Partially equivalent to
   // https://w3c.github.io/IntersectionObserver/#update-intersection-observations-algo
@@ -84,6 +98,8 @@ class IntersectionObserver {
   ShadowNodeFamily::Shared targetShadowNodeFamily_;
   std::vector<Float> thresholds_;
   std::optional<std::vector<Float>> rootThresholds_;
+  // Parsed and expanded rootMargin values (top, right, bottom, left)
+  std::vector<MarginValue> rootMargins_;
   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");
 
@@ -53,12 +54,19 @@ void IntersectionObserverManager::observe(
   std::unique_lock lock(observersMutex_);
 
   auto& observers = observersBySurfaceId_[surfaceId];
+
+  // Parse rootMargin string into MarginValue structures
+  // Default to "0px 0px 0px 0px" if not provided
+  auto parsedRootMargin =
+      parseNormalizedRootMargin(rootMargin.value_or("0px 0px 0px 0px"));
+
   observers.emplace_back(std::make_unique<IntersectionObserver>(
       intersectionObserverId,
       observationRootShadowNodeFamily,
       shadowNodeFamily,
       std::move(thresholds),
-      std::move(rootThresholds)));
+      std::move(rootThresholds),
+      std::move(parsedRootMargin)));
 
   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(