Introduce root to IntersectionObserver (#47394)

Summary:
Pull Request resolved: #47394

## Changelog:

[General] [Added] - Support for observation `root` for Intersection Observer

Reviewed By: rubennorte

Differential Revision: D65085733

fbshipit-source-id: e67a74ace16c3f6f8ebba7eb811c1a9e0d559b0a

Author: lunaleaps

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -9607,6 +9607,7 @@ exports[`public API should not change unintentionally src/private/webapis/inters
   observer: IntersectionObserver
 ) => mixed;
 export interface IntersectionObserverInit {
+  root?: ?ReactNativeElement;
   threshold?: number | $ReadOnlyArray<number>;
   rnRootThreshold?: number | $ReadOnlyArray<number>;
 }

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

@@ -70,12 +70,20 @@ jsi::Object NativeIntersectionObserver::observeV2(
   auto shadowNode =
       shadowNodeFromValue(runtime, std::move(options.targetShadowNode));
   auto shadowNodeFamily = shadowNode->getFamilyShared();
+
+  std::optional<ShadowNodeFamily::Shared> observationRootShadowNodeFamily;
+  if (options.rootShadowNode.isObject()) {
+    observationRootShadowNodeFamily =
+        shadowNodeFromValue(runtime, options.rootShadowNode)->getFamilyShared();
+  }
+
   auto thresholds = options.thresholds;
   auto rootThresholds = options.rootThresholds;
   auto& uiManager = getUIManagerFromRuntime(runtime);
 
   intersectionObserverManager_.observe(
       intersectionObserverId,
+      observationRootShadowNodeFamily,
       shadowNodeFamily,
       thresholds,
       rootThresholds,

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

@@ -22,6 +22,8 @@ using NativeIntersectionObserverObserveOptions =
     NativeIntersectionObserverNativeIntersectionObserverObserveOptions<
         // intersectionObserverId
         NativeIntersectionObserverIntersectionObserverId,
+        // rootShadowNode
+        jsi::Value,
         // targetShadowNode
         jsi::Object,
         // thresholds

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

@@ -16,17 +16,41 @@ namespace facebook::react {
 
 IntersectionObserver::IntersectionObserver(
     IntersectionObserverObserverId intersectionObserverId,
+    std::optional<ShadowNodeFamily::Shared> observationRootShadowNodeFamily,
     ShadowNodeFamily::Shared targetShadowNodeFamily,
     std::vector<Float> thresholds,
     std::optional<std::vector<Float>> rootThresholds)
     : intersectionObserverId_(intersectionObserverId),
+      observationRootShadowNodeFamily_(
+          std::move(observationRootShadowNodeFamily)),
       targetShadowNodeFamily_(std::move(targetShadowNodeFamily)),
       thresholds_(std::move(thresholds)),
       rootThresholds_(std::move(rootThresholds)) {}
 
-static Rect getRootBoundingRect(
-    const LayoutableShadowNode& layoutableRootShadowNode) {
-  auto layoutMetrics = layoutableRootShadowNode.getLayoutMetrics();
+static std::shared_ptr<const ShadowNode> getShadowNode(
+    const ShadowNodeFamily::AncestorList& ancestors) {
+  if (ancestors.empty()) {
+    return nullptr;
+  }
+
+  const auto& lastAncestor = ancestors.back();
+  const ShadowNode& parentNode = lastAncestor.first.get();
+  int childIndex = lastAncestor.second;
+
+  const std::shared_ptr<const ShadowNode>& childNode =
+      parentNode.getChildren().at(childIndex);
+  return childNode;
+}
+
+static Rect getRootNodeBoundingRect(const RootShadowNode& rootShadowNode) {
+  const auto layoutableRootShadowNode =
+      dynamic_cast<const LayoutableShadowNode*>(&rootShadowNode);
+
+  react_native_assert(
+      layoutableRootShadowNode != nullptr &&
+      "RootShadowNode instances must always inherit from LayoutableShadowNode.");
+
+  auto layoutMetrics = layoutableRootShadowNode->getLayoutMetrics();
 
   if (layoutMetrics == EmptyLayoutMetrics ||
       layoutMetrics.displayType == DisplayType::None) {
@@ -35,13 +59,12 @@ static Rect getRootBoundingRect(
 
   // Apply the transform to translate the root view to its location in the
   // viewport.
-  return layoutMetrics.frame * layoutableRootShadowNode.getTransform();
+  return layoutMetrics.frame * layoutableRootShadowNode->getTransform();
 }
 
-static Rect getTargetBoundingRect(
-    const ShadowNodeFamily::AncestorList& targetAncestors) {
+static Rect getBoundingRect(const ShadowNodeFamily::AncestorList& ancestors) {
   auto layoutMetrics = LayoutableShadowNode::computeRelativeLayoutMetrics(
-      targetAncestors,
+      ancestors,
       {/* .includeTransform = */ true,
        /* .includeViewportOffset = */ true});
   return layoutMetrics == EmptyLayoutMetrics ? Rect{} : layoutMetrics.frame;
@@ -63,7 +86,7 @@ static Rect getClippedTargetBoundingRect(
 static Rect computeIntersection(
     const Rect& rootBoundingRect,
     const Rect& targetBoundingRect,
-    const ShadowNodeFamily::AncestorList& targetAncestors) {
+    const ShadowNodeFamily::AncestorList& targetToRootAncestors) {
   auto absoluteIntersectionRect =
       Rect::intersect(rootBoundingRect, targetBoundingRect);
 
@@ -79,10 +102,15 @@ static Rect computeIntersection(
     return {};
   }
 
-  // Coordinates of the target after clipping the parts hidden by a parent
-  // (e.g.: in scroll views, or in views with a parent with overflow: hidden)
-  auto clippedTargetBoundingRect =
-      getClippedTargetBoundingRect(targetAncestors);
+  // Coordinates of the target after clipping the parts hidden by a parent,
+  // until till the root (e.g.: in scroll views, or in views with a parent with
+  // overflow: hidden)
+  auto clippedTargetFromRoot =
+      getClippedTargetBoundingRect(targetToRootAncestors);
+
+  auto clippedTargetBoundingRect = Rect{
+      rootBoundingRect.origin + clippedTargetFromRoot.origin,
+      clippedTargetFromRoot.size};
 
   return Rect::intersect(rootBoundingRect, clippedTargetBoundingRect);
 }
@@ -105,23 +133,34 @@ std::optional<IntersectionObserverEntry>
 IntersectionObserver::updateIntersectionObservation(
     const RootShadowNode& rootShadowNode,
     double time) {
-  const auto layoutableRootShadowNode =
-      dynamic_cast<const LayoutableShadowNode*>(&rootShadowNode);
-
-  react_native_assert(
-      layoutableRootShadowNode != nullptr &&
-      "RootShadowNode instances must always inherit from LayoutableShadowNode.");
+  bool hasCustomRoot = observationRootShadowNodeFamily_.has_value();
 
-  auto targetAncestors = targetShadowNodeFamily_->getAncestors(rootShadowNode);
+  auto rootAncestors = hasCustomRoot
+      ? observationRootShadowNodeFamily_.value()->getAncestors(rootShadowNode)
+      : ShadowNodeFamily::AncestorList{};
 
   // Absolute coordinates of the root
-  auto rootBoundingRect = getRootBoundingRect(*layoutableRootShadowNode);
+  auto rootBoundingRect = hasCustomRoot
+      ? getBoundingRect(rootAncestors)
+      : getRootNodeBoundingRect(rootShadowNode);
+
+  auto targetAncestors = targetShadowNodeFamily_->getAncestors(rootShadowNode);
 
   // Absolute coordinates of the target
-  auto targetBoundingRect = getTargetBoundingRect(targetAncestors);
+  auto targetBoundingRect = getBoundingRect(targetAncestors);
+
+  if ((hasCustomRoot && rootAncestors.empty()) || targetAncestors.empty()) {
+    // If observation root or target is not a descendant of `rootShadowNode`
+    return setNotIntersectingState(
+        rootBoundingRect, targetBoundingRect, {}, time);
+  }
+
+  auto targetToRootAncestors = hasCustomRoot
+      ? targetShadowNodeFamily_->getAncestors(*getShadowNode(rootAncestors))
+      : targetAncestors;
 
   auto intersectionRect = computeIntersection(
-      rootBoundingRect, targetBoundingRect, targetAncestors);
+      rootBoundingRect, targetBoundingRect, targetToRootAncestors);
 
   Float targetBoundingRectArea =
       targetBoundingRect.size.width * targetBoundingRect.size.height;

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

@@ -40,6 +40,7 @@ class IntersectionObserver {
  public:
   IntersectionObserver(
       IntersectionObserverObserverId intersectionObserverId,
+      std::optional<ShadowNodeFamily::Shared> observationRootShadowNodeFamily,
       ShadowNodeFamily::Shared targetShadowNodeFamily,
       std::vector<Float> thresholds,
       std::optional<std::vector<Float>> rootThresholds = std::nullopt);
@@ -81,6 +82,7 @@ class IntersectionObserver {
       double time);
 
   IntersectionObserverObserverId intersectionObserverId_;
+  std::optional<ShadowNodeFamily::Shared> observationRootShadowNodeFamily_;
   ShadowNodeFamily::Shared targetShadowNodeFamily_;
   std::vector<Float> thresholds_;
   std::optional<std::vector<Float>> rootThresholds_;

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

@@ -39,6 +39,8 @@ IntersectionObserverManager::IntersectionObserverManager() = default;
 
 void IntersectionObserverManager::observe(
     IntersectionObserverObserverId intersectionObserverId,
+    const std::optional<ShadowNodeFamily::Shared>&
+        observationRootShadowNodeFamily,
     const ShadowNodeFamily::Shared& shadowNodeFamily,
     std::vector<Float> thresholds,
     std::optional<std::vector<Float>> rootThresholds,
@@ -58,6 +60,7 @@ void IntersectionObserverManager::observe(
     auto& observers = observersBySurfaceId_[surfaceId];
     observers.emplace_back(std::make_unique<IntersectionObserver>(
         intersectionObserverId,
+        observationRootShadowNodeFamily,
         shadowNodeFamily,
         std::move(thresholds),
         std::move(rootThresholds)));

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

@@ -27,6 +27,7 @@ class IntersectionObserverManager final
 
   void observe(
       IntersectionObserverObserverId intersectionObserverId,
+      const std::optional<ShadowNodeFamily::Shared>& observationRootShadowNode,
       const ShadowNodeFamily::Shared& shadowNode,
       std::vector<Float> thresholds,
       std::optional<std::vector<Float>> rootThresholds,

packages/react-native/src/private/webapis/intersectionobserver/IntersectionObserver.js

@@ -23,7 +23,7 @@ export type IntersectionObserverCallback = (
 ) => mixed;
 
 export interface IntersectionObserverInit {
-  // root?: ReactNativeElement, // This option exists on the Web but it's not currently supported in React Native.
+  root?: ?ReactNativeElement;
   // rootMargin?: string, // This option exists on the Web but it's not currently supported in React Native.
   threshold?: number | $ReadOnlyArray<number>;
 
@@ -67,6 +67,7 @@ export default class IntersectionObserver {
   _observationTargets: Set<ReactNativeElement> = new Set();
   _intersectionObserverId: ?IntersectionObserverId;
   _rootThresholds: $ReadOnlyArray<number> | null;
+  _root: ReactNativeElement | null;
 
   constructor(
     callback: IntersectionObserverCallback,
@@ -85,16 +86,18 @@ export default class IntersectionObserver {
     }
 
     // $FlowExpectedError[prop-missing] it's not typed in React Native but exists on Web.
-    if (options?.root != null) {
+    if (options?.rootMargin != null) {
       throw new TypeError(
-        "Failed to construct 'IntersectionObserver': root is not supported",
+        "Failed to construct 'IntersectionObserver': rootMargin is not supported",
       );
     }
 
-    // $FlowExpectedError[prop-missing] it's not typed in React Native but exists on Web.
-    if (options?.rootMargin != null) {
+    if (
+      options?.root != null &&
+      !(options?.root instanceof ReactNativeElement)
+    ) {
       throw new TypeError(
-        "Failed to construct 'IntersectionObserver': rootMargin is not supported",
+        "Failed to construct 'IntersectionObserver': Failed to read the 'root' property from 'IntersectionObserverInit': The provided value is not of type '(null or ReactNativeElement)",
       );
     }
 
@@ -105,6 +108,7 @@ export default class IntersectionObserver {
       options?.threshold,
       this._rootThresholds != null, // only provide default if no rootThreshold
     );
+    this._root = options?.root ?? null;
   }
 
   /**
@@ -116,7 +120,7 @@ export default class IntersectionObserver {
    * NOTE: This cannot currently be configured and `root` is always `null`.
    */
   get root(): ReactNativeElement | null {
-    return null;
+    return this._root;
   }
 
   /**
@@ -183,6 +187,7 @@ export default class IntersectionObserver {
 
     const didStartObserving = IntersectionObserverManager.observe({
       intersectionObserverId: this._getOrCreateIntersectionObserverId(),
+      root: this._root,
       target,
     });