@react-native-oh-tpl/react-native-gesture-handler 2.12.9-1 → 2.14.1-2.14.12

package/harmony/gesture_handler/src/main/ets/rnoh/RNGHRootTouchHandlerArkTS.ts

@@ -0,0 +1,108 @@
+import { Tag } from '@rnoh/react-native-openharmony/ts';
+import { GestureHandlerArkUIAdapter } from './GestureHandlerArkUIAdapter';
+import { RNGHLogger, GestureHandlerRegistry, View } from '../core';
+import { TouchEvent, TouchType } from './types';
+
+export interface ViewFinder {
+  getTouchableViewsAt(
+    pointRelativeToRoot: {
+      x: number,
+      y: number
+    },
+    rootTag: Tag
+  ): View[]
+}
+
+export class RNGHRootTouchHandlerArkTS {
+  private adapterByViewTag: Map<number, GestureHandlerArkUIAdapter> = new Map(); // TODO: remove adapter when view is removed
+  /**
+   * A view is ACTIVE, if it recently received POINTER_DOWN event
+   */
+  private activeViewTags = new Set<number>();
+  private viewFinder: ViewFinder;
+  private gestureHandlerRegistry: GestureHandlerRegistry;
+  private logger: RNGHLogger;
+  private rootTag: Tag;
+
+  constructor(
+    rootTag: Tag,
+    viewFinder: ViewFinder,
+    gestureHandlerRegistry: GestureHandlerRegistry,
+    logger: RNGHLogger,
+  ) {
+    this.rootTag = rootTag;
+    this.viewFinder = viewFinder;
+    this.gestureHandlerRegistry = gestureHandlerRegistry;
+    this.logger = logger;
+  }
+
+  /**
+   *
+   * @param touchEvent - TouchEvent. The type is any to allow providing the type in ets file (any and unknowns aren't allowed in ets files).
+   * @param touchableViews - Optional. List of views that can have gesture handler attached for given touch. If not provided, viewFinder will be used.
+   */
+  public handleTouch(touchEvent: any, touchableViews: View[] | null = null) {
+    const e = touchEvent as TouchEvent;
+    if (e.type === TouchType.Down) {
+      this.activeViewTags.clear();
+    }
+    for (const changedTouch of e.changedTouches) {
+      const views = touchableViews ?? this.viewFinder.getTouchableViewsAt(
+        {
+          x: changedTouch.windowX,
+          y: changedTouch.windowY,
+        },
+        this.rootTag,
+      );
+      for (const view of views) {
+        for (const handler of this.gestureHandlerRegistry.getGestureHandlersByViewTag(
+          view.getTag(),
+        )) {
+          this.logger.info(
+            `Found GestureHandler ${handler.getTag()} for view ${view.getTag()}`,
+          );
+
+          // create adapter if necessary
+          if (!this.adapterByViewTag.has(view.getTag())) {
+            this.adapterByViewTag.set(
+              view.getTag(),
+              new GestureHandlerArkUIAdapter(
+                view,
+                this.logger,
+              ),
+            );
+          }
+
+          // attach handler (there might be multiple handlers per view)
+          this.adapterByViewTag.get(view.getTag())!.attachGestureHandler(handler) // TODO: detachGestureHandler
+
+          // register active view tag
+          if (e.type === TouchType.Down) {
+            this.activeViewTags.add(view.getTag());
+          }
+        }
+      }
+
+      // send touch to gesture handlers, prioritize handling touch events for child components
+      if (this.activeViewTags.size > 0) {
+        const tags = Array.from(this.activeViewTags);
+        for (let i = tags.length - 1; i >= 0; i--) {
+          const tag = tags[i];
+          const adapter = this.adapterByViewTag.get(tag);
+          if (adapter) {
+            adapter.handleTouch(e);
+          }
+        }
+      }
+    }
+  }
+
+  public cancelTouches() {
+    for (const activeViewTag of this.activeViewTags) {
+      this.gestureHandlerRegistry.getGestureHandlersByViewTag(activeViewTag).forEach(gh => {
+        gh.cancel()
+        gh.reset()
+      })
+    }
+  }
+}

package/harmony/gesture_handler/src/main/ets/rnoh/RNGHRootTouchHandlerCAPI.ts

@@ -0,0 +1,110 @@
+import { RNGHRootTouchHandlerArkTS } from './RNGHRootTouchHandlerArkTS';
+import { TouchEvent as TouchEventArkTS, TouchType, TouchObject } from './types';
+import { RNGHLogger, View } from '../core';
+import { RawTouchableView } from "./View"
+
+type RawTouchPoint = {
+  pointerId: number;
+  windowX: number;
+  windowY: number;
+};
+
+export type RawTouchEvent = {
+  action: number;
+  actionTouch: RawTouchPoint;
+  touchPoints: RawTouchPoint[];
+  sourceType: number;
+  timestamp: number;
+  /** TouchableViews is a list of views from root to leaf which contain the touch point specified by `actionTouch` in their boundary boxes. */
+  touchableViews: RawTouchableView[]
+};
+
+const CACHED_TOUCHES_MAP = new Map<number, RawTouchPoint>();
+let lastChangedPointerId: number | null = null;
+const MAX_SIZE = 10;
+const areRawTouchPointsEqual = (a: RawTouchPoint, b: RawTouchPoint) =>
+  a.pointerId === b.pointerId &&
+  a.windowX === b.windowX &&
+  a.windowY === b.windowY;
+
+
+export class RNGHRootTouchHandlerCAPI {
+  private logger: RNGHLogger;
+
+  constructor(
+    logger: RNGHLogger,
+    private touchHandlerArkTS: RNGHRootTouchHandlerArkTS,
+  ) {
+    this.logger = logger.cloneWithPrefix('RNGHRootTouchHandlerCAPI');
+  }
+
+  handleTouch(rawTouchEvent: RawTouchEvent, touchableViews: View[]) {
+    this.touchHandlerArkTS.handleTouch(
+      touchEventArkTSFromRawTouchEvent(rawTouchEvent), touchableViews
+    );
+  }
+
+  cancelTouches() {
+    this.touchHandlerArkTS.cancelTouches()
+  }
+}
+
+function touchEventArkTSFromRawTouchEvent(raw: RawTouchEvent): TouchEventArkTS {
+  const touchType = touchTypeFromAction(raw.action);
+  const actionTouch = raw.actionTouch;
+  let hasTouchChanged = true;
+  let lastChangedTouch: RawTouchPoint = actionTouch;
+  if (CACHED_TOUCHES_MAP.has(actionTouch.pointerId)) {
+    if (areRawTouchPointsEqual(actionTouch, CACHED_TOUCHES_MAP.get(actionTouch.pointerId) as RawTouchPoint)) {
+      hasTouchChanged = false;
+    } else {
+      lastChangedPointerId = actionTouch.pointerId;
+      CACHED_TOUCHES_MAP.set(actionTouch.pointerId, actionTouch);
+    }
+  } else {
+    // remove first element if the cache is full
+    if (CACHED_TOUCHES_MAP.size >= MAX_SIZE) {
+      CACHED_TOUCHES_MAP.delete(CACHED_TOUCHES_MAP.keys().next().value);
+    }
+    lastChangedPointerId = actionTouch.pointerId;
+    CACHED_TOUCHES_MAP.set(actionTouch.pointerId, actionTouch);
+  }
+  lastChangedTouch = CACHED_TOUCHES_MAP.get(lastChangedPointerId as number) as RawTouchPoint
+  return {
+    type: touchTypeFromAction(raw.action),
+    touches: raw.touchPoints.map(tp =>
+    touchObjectFromTouchPoint(tp, touchType),
+    ),
+    changedTouches: [
+      touchObjectFromTouchPoint(lastChangedTouch, touchType),
+    ],
+    timestamp: raw.timestamp / Math.pow(10, 6),
+  };
+}
+
+function touchTypeFromAction(action: number): TouchType {
+  switch (action) {
+    case 1:
+      return TouchType.Down;
+    case 2:
+      return TouchType.Move;
+    case 3:
+      return TouchType.Up;
+    default:
+      return TouchType.Cancel;
+  }
+}
+
+function touchObjectFromTouchPoint(
+  touchPoint: RawTouchPoint,
+  touchType: TouchType,
+): TouchObject {
+  return {
+    id: touchPoint.pointerId,
+    windowX: touchPoint.windowX,
+    windowY: touchPoint.windowY,
+    x: touchPoint.windowX,
+    y: touchPoint.windowY,
+    type: touchType,
+  };
+}

package/harmony/gesture_handler/src/main/ets/{RNGestureHandlerButton.ets → rnoh/RNGestureHandlerButton.ets}

@@ -1,11 +1,11 @@
 import { RNOHContext, RNViewBase, ComponentBuilderContext, RNComponentFactory, Tag } from "@rnoh/react-native-openharmony"
-import { RNGestureHandlerButton as RNC } from "./namespace/RNGestureHandlerButton"
+import { RNC } from "../namespace/ts"
 
-export type RNGestureHandlerButtonDescriptor = RNC.Descriptor
+export type RNGestureHandlerButtonDescriptor = RNC.RNGestureHandlerButton.Descriptor
 
 @Component
 export struct RNGestureHandlerButton {
-  static readonly NAME = RNC.NAME
+  static readonly NAME = RNC.RNGestureHandlerButton.NAME
   public ctx!: RNOHContext
   public tag: number = -1
   @BuilderParam public buildCustomComponent: (componentBuilderContext: ComponentBuilderContext) => void

package/harmony/gesture_handler/src/main/ets/{RNGestureHandlerModule.ts → rnoh/RNGestureHandlerModule.ts}

@@ -1,19 +1,15 @@
-import { TurboModule, TurboModuleContext, Tag } from '@rnoh/react-native-openharmony/ts';
-// import { TM } from "rnoh/generated/ts"
-import { GestureHandlerRegistry } from './GestureHandlerRegistry';
-import { GestureHandlerFactory } from "./GestureHandlerFactory"
-import { ViewRegistry } from './ViewRegistry';
-import { RNGHLogger, StandardRNGHLogger, FakeRNGHLogger } from './RNGHLogger';
-import {
-  EventDispatcher,
-  JSEventDispatcher,
-  AnimatedEventDispatcher,
-  ReanimatedEventDispatcher
-} from './EventDispatcher'
+import { TurboModule, TurboModuleContext, Tag } from "@rnoh/react-native-openharmony/ts";
+import { TM } from "../namespace/ts"
+import { GestureHandlerRegistry, State, OutgoingEventDispatcher, RNGHLogger, InteractionManager } from '../core';
+import { GestureHandlerFactory } from "../gesture-handlers"
+import { ViewRegistry, ViewRegistryArkTS, ViewRegistryCAPI } from './ViewRegistry';
+import { StandardRNGHLogger, FakeRNGHLogger } from './Logger';
+import { JSEventDispatcher, AnimatedEventDispatcher, ReanimatedEventDispatcher } from './OutgoingEventDispatchers'
 import { RNOHScrollLockerArkTS, RNOHScrollLockerCAPI } from "./RNOHScrollLocker"
-import { State } from './State';
 import { RNGHRootTouchHandlerCAPI, RawTouchEvent } from "./RNGHRootTouchHandlerCAPI"
 import { RNGHRootTouchHandlerArkTS } from './RNGHRootTouchHandlerArkTS';
+import { ViewCAPI } from "./View"
+import { FakeRNGestureResponder, RNOHGestureResponder } from "./RNOHGestureResponder"
 
 export enum ActionType {
   REANIMATED_WORKLET = 1,
@@ -23,20 +19,23 @@ export enum ActionType {
 }
 
 
-export class RNGestureHandlerModule extends TurboModule {
-// implements TM.RNGestureHandlerModule.Spec {
+export class RNGestureHandlerModule extends TurboModule implements TM.RNGestureHandlerModule.Spec {
   static NAME = "RNGestureHandlerModule"
 
-  private gestureHandlerRegistry = new GestureHandlerRegistry()
+  private gestureHandlerRegistry: GestureHandlerRegistry
   private gestureHandlerFactory: GestureHandlerFactory | undefined = undefined
   private viewRegistry: ViewRegistry | undefined = undefined
   private logger: RNGHLogger
   private touchHandlerByRootTag = new Map<Tag, RNGHRootTouchHandlerCAPI>()
+  private interactionManager: InteractionManager
 
   constructor(ctx: TurboModuleContext) {
     super(ctx)
     const debug = false
     this.logger = debug ? new StandardRNGHLogger(ctx.logger, "RNGH") : new FakeRNGHLogger()
+    this.interactionManager = new InteractionManager(this.logger)
+    this.gestureHandlerRegistry = new GestureHandlerRegistry(this.logger)
+
     if (this.ctx.rnInstance.getArchitecture() === "C_API") {
       this.ctx.rnInstance.cppEventEmitter.subscribe("RNGH::TOUCH_EVENT", (e: any) => {
         this.onTouch(e)
@@ -44,27 +43,61 @@ export class RNGestureHandlerModule extends TurboModule {
       this.ctx.rnInstance.cppEventEmitter.subscribe("RNGH::ROOT_CREATED", (rootTag: any) => {
         this.onGHRootCreated(rootTag)
       })
+      this.ctx.rnInstance.cppEventEmitter.subscribe("RNGH::CANCEL_TOUCHES", (rootTag: any) => {
+        const touchHandler = this.touchHandlerByRootTag.get(rootTag)
+        touchHandler?.cancelTouches()
+      })
     }
   }
 
+  /**
+   * @architecture: C-API
+   * Called from C++.
+   */
   private onGHRootCreated(rootTag: Tag) {
     this.touchHandlerByRootTag.set(rootTag, new RNGHRootTouchHandlerCAPI(this.logger, new RNGHRootTouchHandlerArkTS(rootTag, this.viewRegistry, this.gestureHandlerRegistry, this.logger)));
   }
 
+  /**
+   * @architecture: C-API
+   * Called from C++.
+   */
   private onTouch(e: RawTouchEvent & { rootTag: Tag }) {
+    const logger = this.logger.cloneWithPrefix("onTouch")
+    if (!(this.viewRegistry instanceof ViewRegistryCAPI)) {
+      logger.error("Expected ViewRegistryCAPI")
+      return;
+    }
     const touchHandler = this.touchHandlerByRootTag.get(e.rootTag)
-    if (touchHandler) {
-      touchHandler.handleTouch(e);
-    } else {
-      this.logger.info(`Couldn't find touch handler for root tag: ${e.rootTag}`)
+    if (!touchHandler) {
+      logger.error(`Couldn't find touch handler for gesture root tag: ${e.rootTag}`)
+      return;
     }
-
+    // update view registry
+    e.touchableViews.forEach(touchableView => {
+      const view = this.viewRegistry.getViewByTag(touchableView.tag)
+      if (view) {
+        if (!(view instanceof ViewCAPI)) {
+          logger.error(`Expected ViewCAPI`)
+          return
+        }
+        view.updateBoundingBox(touchableView)
+        view.setButtonRole(touchableView.buttonRole)
+      } else {
+        this.viewRegistry.save(new ViewCAPI(touchableView))
+      }
+    })
+    // relay touch
+    touchHandler.handleTouch(e, e.touchableViews.map(({tag}) => this.viewRegistry.getViewByTag(tag)));
   }
 
+  // -------------------------------------------------------------------------------------------------------------------
+
   public install() {
-    this.viewRegistry = new ViewRegistry(this.ctx.descriptorRegistry, this.ctx.componentManagerRegistry)
-    const scrollLocker = this.ctx.rnInstance.getArchitecture() === "ARK_TS" ? new RNOHScrollLockerArkTS(this.ctx.rnInstance) : new RNOHScrollLockerCAPI(this.ctx.rnInstance);
-    this.gestureHandlerFactory = new GestureHandlerFactory(this.logger, scrollLocker)
+    this.viewRegistry = this.ctx.rnInstance.getArchitecture() === "ARK_TS" ? new ViewRegistryArkTS(this.ctx.descriptorRegistry) : new ViewRegistryCAPI()
+    const scrollLocker = this.ctx.rnInstance.getArchitecture() === "ARK_TS" ? new RNOHScrollLockerArkTS(this.ctx.rnInstance) : new RNOHScrollLockerCAPI(this.ctx.rnInstance, this.logger);
+    const rnGestureResponder =  this.ctx.rnInstance.getArchitecture() === "ARK_TS" ? new FakeRNGestureResponder() : new RNOHGestureResponder(this.ctx.rnInstance)
+    this.gestureHandlerFactory = new GestureHandlerFactory(this.logger, scrollLocker, this.interactionManager, rnGestureResponder)
     return true
   }
 
@@ -73,12 +106,15 @@ export class RNGestureHandlerModule extends TurboModule {
     handlerTag: number,
     config: Readonly<Record<string, unknown>>
   ) {
+    const logger = this.logger.cloneWithPrefix("createGestureHandler")
     if (!this.gestureHandlerFactory) {
       this.ctx.logger.error("Trying to create a gesture handler before creating gesture handler factory")
       return
     }
+    logger.debug({ handlerName, handlerTag, config })
     const gestureHandler = this.gestureHandlerFactory.create(handlerName, handlerTag)
     this.gestureHandlerRegistry.addGestureHandler(gestureHandler)
+    this.interactionManager.configureInteractions(gestureHandler, config);
     gestureHandler.updateGestureConfig(config)
   }
 
@@ -92,9 +128,21 @@ export class RNGestureHandlerModule extends TurboModule {
       this.ctx.logger.error("RNGH: Couldn't create EventDispatcher")
       return
     }
-    const view = this.viewRegistry.getViewByTag(viewTag)
+    const viewRegistry = this.viewRegistry
+    let view = this.viewRegistry.getViewByTag(viewTag)
+    if (!view && viewRegistry instanceof ViewRegistryCAPI) {
+      view = new ViewCAPI({
+        tag: viewTag,
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        buttonRole: false
+      })
+      viewRegistry.save(view)
+    }
     if (!view) {
-      this.ctx.logger.error(`RNGH: Couldn't attachGestureHandler to view ${viewTag}`)
+      this.ctx.logger.error("Expected view")
       return;
     }
     this.gestureHandlerRegistry.bindGestureHandlerWithView(handlerTag, view)
@@ -103,7 +151,7 @@ export class RNGestureHandlerModule extends TurboModule {
       .setEventDispatcher(eventDispatcher)
   }
 
-  private createEventDispatcher(actionType: ActionType, viewTag: number): EventDispatcher | null {
+  private createEventDispatcher(actionType: ActionType, viewTag: number): OutgoingEventDispatcher | null {
     switch (actionType) {
       case ActionType.REANIMATED_WORKLET:
         return new ReanimatedEventDispatcher(this.ctx.rnInstance, this.logger.cloneWithPrefix('ReanimatedEventDispatcher'), viewTag)
@@ -120,6 +168,7 @@ export class RNGestureHandlerModule extends TurboModule {
     newConfig: Readonly<Record<string, unknown>>
   ) {
     const gestureHandler = this.gestureHandlerRegistry.getGestureHandlerByHandlerTag(handlerTag)
+    this.interactionManager.configureInteractions(gestureHandler, newConfig);
     gestureHandler.updateGestureConfig(newConfig)
   }
 

package/harmony/gesture_handler/src/main/ets/{RNGestureHandlerRootView.ets → rnoh/RNGestureHandlerRootView.ets}

@@ -1,14 +1,14 @@
 import { RNOHContext, RNViewBase, ComponentBuilderContext, RNComponentFactory, Tag } from "@rnoh/react-native-openharmony"
-import { RNGestureHandlerRootView as RNC } from "./namespace/RNGestureHandlerRootView"
+import { RNC } from "../namespace/ts"
 import { RNGHRootTouchHandlerArkTS as RNGHRootTouchHandler } from "./RNGHRootTouchHandlerArkTS"
 import { RNGestureHandlerModule } from "./RNGestureHandlerModule"
 
 
-export type RNGestureHandlerRootViewDescriptor = RNC.Descriptor
+export type RNGestureHandlerRootViewDescriptor = RNC.RNGestureHandlerRootView.Descriptor
 
 @Component
 export struct RNGestureHandlerRootView {
-  static readonly NAME = RNC.NAME
+  static readonly NAME = RNC.RNGestureHandlerRootView.NAME
   ctx!: RNOHContext
   tag: number = -1
   @BuilderParam buildCustomComponent: (componentBuilderContext: ComponentBuilderContext) => void

package/harmony/gesture_handler/src/main/ets/rnoh/RNOHGestureResponder.ts

@@ -0,0 +1,24 @@
+import { RNInstance } from "@rnoh/react-native-openharmony/ts"
+import { RNGestureResponder } from "../core"
+
+export class FakeRNGestureResponder {
+  lock() {
+    // Cancelling RN events isn't supported in ArkTS architecture.
+    return () => {}
+  }
+}
+
+/**
+ * Used in C-API architecture.
+ */
+export class RNOHGestureResponder implements RNGestureResponder {
+  constructor(private rnInstance: RNInstance) {
+  }
+
+  lock(viewTag: number): () => void {
+    this.rnInstance.postMessageToCpp("RNGH::ROOT_VIEW_IS_HANDLING_TOUCHES", { descendantViewTag: viewTag, isHandlingTouches: true })
+    return () => {
+      this.rnInstance.postMessageToCpp("RNGH::ROOT_VIEW_IS_HANDLING_TOUCHES", { descendantViewTag: viewTag, isHandlingTouches: false })
+    }
+  }
+}

package/harmony/gesture_handler/src/main/ets/rnoh/RNOHScrollLocker.ts

@@ -0,0 +1,32 @@
+import { RNInstance } from '@rnoh/react-native-openharmony/ts';
+import { ScrollLocker, RNGHLogger } from '../core';
+
+export class RNOHScrollLockerArkTS implements ScrollLocker {
+  constructor(private rnInstance: RNInstance) {
+  }
+
+  lockScrollContainingViewTag(viewTag: number) {
+    return this.rnInstance.blockComponentsGestures(viewTag);
+  }
+}
+
+export class RNOHScrollLockerCAPI implements ScrollLocker {
+  private logger: RNGHLogger
+
+  constructor(private rnInstance: RNInstance, logger: RNGHLogger) {
+    this.logger = logger.cloneWithPrefix("RNOHScrollLockerCAPI")
+  }
+
+  lockScrollContainingViewTag(viewTag: number) {
+    this.rnInstance.postMessageToCpp('RNGH::SET_NATIVE_RESPONDERS_BLOCK', {
+      targetTag: viewTag,
+      shouldBlock: true,
+    });
+    return () => {
+      this.rnInstance.postMessageToCpp('RNGH::SET_NATIVE_RESPONDERS_BLOCK', {
+        targetTag: viewTag,
+        shouldBlock: false,
+      });
+    };
+  }
+}

package/harmony/gesture_handler/src/main/ets/rnoh/View.ts

@@ -0,0 +1,134 @@
+import { DescriptorRegistry, Descriptor, Tag } from '@rnoh/react-native-openharmony/ts';
+import { View, Vector2D, BoundingBox } from "../core"
+
+
+export type RawTouchableView = {
+  tag: number,
+  /**
+   * Relative to application window.
+   */
+  x: number,
+  /**
+   * Relative to application window.
+   */
+  y: number,
+  width: number,
+  height: number,
+  buttonRole: boolean,
+}
+
+export class ViewCAPI implements View {
+  private tag: number
+  private buttonRole: boolean
+  private boundingBox: BoundingBox
+
+  constructor({ tag, buttonRole, ...boundingBox }: RawTouchableView) {
+    this.tag = tag
+    this.buttonRole = buttonRole
+    this.boundingBox = boundingBox
+  }
+
+  getTag(): number {
+    return this.tag
+  }
+
+  getBoundingRect(): BoundingBox {
+    return { ...this.boundingBox }
+  }
+
+  isPositionInBounds({x, y}: {
+    x: number;
+    y: number
+  }): boolean {
+    const rect = this.getBoundingRect();
+    return (
+      x >= rect.x &&
+        x <= rect.x + rect.width &&
+        y >= rect.y &&
+        y <= rect.y + rect.height
+    );
+  }
+
+  updateBoundingBox(boundingBox: BoundingBox) {
+    this.boundingBox = boundingBox
+  }
+
+  setButtonRole(buttonRole: boolean) {
+    this.buttonRole = buttonRole
+  }
+
+  hasButtonRole(): boolean {
+    return this.buttonRole
+  }
+}
+
+export class ViewArkTS implements View {
+  constructor(
+    private descriptorRegistry: DescriptorRegistry,
+    private viewTag: number,
+  ) {
+  }
+
+
+  public getTag(): Tag {
+    return this.viewTag;
+  }
+
+  public isPositionInBounds({x, y}: {
+    x: number;
+    y: number
+  }): boolean {
+    const rect = this.getBoundingRect();
+    return (
+      x >= rect.x &&
+        x <= rect.x + rect.width &&
+        y >= rect.y &&
+        y <= rect.y + rect.height
+    );
+  }
+
+  public getBoundingRect(): BoundingBox {
+    const d = this.getDescriptor();
+    if (!d) {
+      return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    const offsetToAbsolutePosition = this.getOffsetToAbsolutePosition();
+    return {
+      x: d.layoutMetrics.frame.origin.x - offsetToAbsolutePosition.x,
+      y: d.layoutMetrics.frame.origin.y - offsetToAbsolutePosition.y,
+      width: d.layoutMetrics.frame.size.width,
+      height: d.layoutMetrics.frame.size.height,
+    };
+  }
+
+  private getDescriptor() {
+    return this.descriptorRegistry.getDescriptor(this.viewTag);
+  }
+
+  private getOffsetToAbsolutePosition(): Vector2D {
+    const currentOffset = new Vector2D();
+    let parentTag = this.getDescriptor()?.parentTag;
+    while (parentTag !== undefined) {
+      const d = this.descriptorRegistry.getDescriptor(parentTag);
+      currentOffset.add(this.extractScrollOffsetFromDescriptor(d));
+      currentOffset.subtract(new Vector2D(d.layoutMetrics.frame.origin));
+      parentTag = d.parentTag;
+    }
+    return currentOffset;
+  }
+
+  private extractScrollOffsetFromDescriptor(descriptor: Descriptor<any>) {
+    if (descriptor.type !== 'ScrollView') {
+      return new Vector2D();
+    }
+    const scrollViewState: any = descriptor.state;
+    return new Vector2D({
+      x: scrollViewState.contentOffsetX,
+      y: scrollViewState.contentOffsetY,
+    });
+  }
+
+  public hasButtonRole(): boolean {
+    return false;
+  }
+}