@react-native-oh-tpl/react-native-gesture-handler 2.14.8-rc.1 → 2.14.13

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

@@ -0,0 +1,98 @@
+import { Tag } from '@rnoh/react-native-openharmony/ts';
+import { GestureHandlerArkUIAdapter } from './GestureHandlerArkUIAdapter';
+import { RNGHLogger, GestureHandlerRegistry, View, ViewFinder } from '../core';
+import { TouchEvent, TouchType } from './types';
+
+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/rnoh/RNGestureHandlerButton.ets

@@ -0,0 +1,38 @@
+import { RNOHContext, RNViewBase, ComponentBuilderContext, RNComponentFactory, Tag } from "@rnoh/react-native-openharmony"
+import { RNC } from "../namespace/ts"
+
+export type RNGestureHandlerButtonDescriptor = RNC.RNGestureHandlerButton.Descriptor
+
+@Component
+export struct RNGestureHandlerButton {
+  static readonly NAME = RNC.RNGestureHandlerButton.NAME
+  public ctx!: RNOHContext
+  public tag: number = -1
+  @BuilderParam public buildCustomComponent: (componentBuilderContext: ComponentBuilderContext) => void
+
+  @State private descriptor: RNGestureHandlerButtonDescriptor = {} as RNGestureHandlerButtonDescriptor
+  private unsubscribes: (() => void)[] = []
+
+  aboutToAppear() {
+    this.handleDescriptorChange(this.ctx.descriptorRegistry.getDescriptor<RNGestureHandlerButtonDescriptor>(this.tag))
+    this.unsubscribes.push(this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag, (d) => {
+      this.handleDescriptorChange(d as RNGestureHandlerButtonDescriptor)
+    }))
+  }
+
+  aboutToDisappear() {
+    this.unsubscribes.forEach(unsubscribe => unsubscribe())
+  }
+
+  handleDescriptorChange(newDescriptor: RNGestureHandlerButtonDescriptor) {
+    this.descriptor = newDescriptor
+  }
+
+  build() {
+    RNViewBase({ ctx: this.ctx, tag: this.tag }) {
+      ForEach(this.descriptor.childrenTags, (childrenTag: Tag) => {
+        RNComponentFactory({ ctx: this.ctx, tag: childrenTag, buildCustomComponent: this.buildCustomComponent })
+      })
+    }
+  }
+}

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

@@ -0,0 +1,233 @@
+import { TurboModule, TurboModuleContext, Tag } from "@rnoh/react-native-openharmony/ts";
+import { TM } from "../namespace/ts"
+import { GestureHandlerRegistry, State, OutgoingEventDispatcher, RNGHLogger, InteractionManager, ViewRegistry } from '../core';
+import { GestureHandlerFactory } from "../gesture-handlers"
+import { ViewRegistryArkTS, ViewRegistryCAPI } from './ViewRegistry';
+import { StandardRNGHLogger, FakeRNGHLogger } from './Logger';
+import { JSEventDispatcher, AnimatedEventDispatcher, ReanimatedEventDispatcher } from './OutgoingEventDispatchers'
+import { RNOHScrollLockerArkTS, RNOHScrollLockerCAPI } from "./RNOHScrollLocker"
+import { RNGHRootTouchHandlerCAPI, RawTouchEvent } from "./RNGHRootTouchHandlerCAPI"
+import { RNGHRootTouchHandlerArkTS } from './RNGHRootTouchHandlerArkTS';
+import { ViewCAPI } from "./View"
+import { FakeRNGestureResponder, RNOHGestureResponder } from "./RNOHGestureResponder"
+
+export enum ActionType {
+  REANIMATED_WORKLET = 1,
+  NATIVE_ANIMATED_EVENT = 2,
+  JS_FUNCTION_OLD_API = 3,
+  JS_FUNCTION_NEW_API = 4,
+}
+
+
+export class RNGestureHandlerModule extends TurboModule implements TM.RNGestureHandlerModule.Spec {
+  static NAME = "RNGestureHandlerModule"
+
+  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.viewRegistry, this.logger)
+
+    if (this.ctx.rnInstance.getArchitecture() === "C_API") {
+      this.ctx.rnInstance.cppEventEmitter.subscribe("RNGH::TOUCH_EVENT", (e: any) => {
+        this.onTouch(e)
+      })
+      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) {
+      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 = 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
+  }
+
+  public createGestureHandler(
+    handlerName: string,
+    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)
+  }
+
+  public attachGestureHandler(
+    handlerTag: number,
+    viewTag: number,
+    actionType: ActionType
+  ) {
+    const eventDispatcher = this.createEventDispatcher(actionType, viewTag)
+    if (!eventDispatcher) {
+      this.ctx.logger.error("RNGH: Couldn't create EventDispatcher")
+      return
+    }
+    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("Expected view")
+      return;
+    }
+    this.gestureHandlerRegistry.bindGestureHandlerWithView(handlerTag, view)
+    this.gestureHandlerRegistry
+      .getGestureHandlerByHandlerTag(handlerTag)
+      .setEventDispatcher(eventDispatcher)
+  }
+
+  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)
+      case ActionType.NATIVE_ANIMATED_EVENT:
+        return new AnimatedEventDispatcher(this.ctx.rnInstance, this.logger.cloneWithPrefix('AnimatedEventDispatcher'), viewTag)
+      case ActionType.JS_FUNCTION_OLD_API:
+      case ActionType.JS_FUNCTION_NEW_API:
+        return new JSEventDispatcher(this.ctx.rnInstance, this.logger.cloneWithPrefix('JSEventDispatcher'));
+    }
+  }
+
+  public updateGestureHandler(
+    handlerTag: number,
+    newConfig: Readonly<Record<string, unknown>>
+  ) {
+    const gestureHandler = this.gestureHandlerRegistry.getGestureHandlerByHandlerTag(handlerTag)
+    this.interactionManager.configureInteractions(gestureHandler, newConfig);
+    gestureHandler.updateGestureConfig(newConfig)
+  }
+
+  public dropGestureHandler(handlerTag: number) {
+    this.interactionManager.dropRelationsForHandlerWithTag(handlerTag)
+    this.gestureHandlerRegistry.removeGestureHandlerByHandlerTag(handlerTag)
+  }
+
+  public handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
+    this.warn("handleSetJSResponder is not implemented")
+  }
+
+  public handleClearJSResponder() {
+    this.warn("handleClearJSResponder is not implemented")
+  }
+
+  public flushOperations() {
+    // no-op
+  }
+
+  // -------------------------------------------------------------------------------------------------------------------
+  protected warn(message: string) {
+    this.ctx.logger.warn("RNGH: " + message)
+  }
+
+  public getGestureHandlerRegistry() {
+    return this.gestureHandlerRegistry
+  }
+
+  public getLogger() {
+    return this.logger
+  }
+
+  public getViewRegistry() {
+    if (!this.viewRegistry) {
+      this.logger.info("Tried to get viewRegistry before it was initialized")
+      throw new Error("Tried to get viewRegistry before it was initialized")
+    }
+    return this.viewRegistry
+  }
+
+  public setGestureHandlerState(handlerTag: number, newState: State) {
+    const handler = this.getGestureHandlerRegistry().getGestureHandlerByHandlerTag(handlerTag);
+    switch (newState) {
+      case State.ACTIVE:
+        handler.activate();
+        break;
+      case State.BEGAN:
+        handler.begin();
+        break;
+      case State.END:
+        handler.end();
+        break;
+      case State.FAILED:
+        handler.fail();
+        break;
+      case State.CANCELLED:
+        handler.cancel();
+        break;
+    }
+  }
+}

package/harmony/gesture_handler/src/main/ets/rnoh/RNGestureHandlerRootView.ets

@@ -0,0 +1,53 @@
+import { RNOHContext, RNViewBase, ComponentBuilderContext, RNComponentFactory, Tag } from "@rnoh/react-native-openharmony"
+import { RNC } from "../namespace/ts"
+import { RNGHRootTouchHandlerArkTS as RNGHRootTouchHandler } from "./RNGHRootTouchHandlerArkTS"
+import { RNGestureHandlerModule } from "./RNGestureHandlerModule"
+
+
+export type RNGestureHandlerRootViewDescriptor = RNC.RNGestureHandlerRootView.Descriptor
+
+@Component
+export struct RNGestureHandlerRootView {
+  static readonly NAME = RNC.RNGestureHandlerRootView.NAME
+  ctx!: RNOHContext
+  tag: number = -1
+  @BuilderParam buildCustomComponent: (componentBuilderContext: ComponentBuilderContext) => void
+  @State descriptor: RNGestureHandlerRootViewDescriptor = {} as RNGestureHandlerRootViewDescriptor
+  private unsubscribes: (() => void)[] = []
+  private touchHandler: RNGHRootTouchHandler | undefined = undefined
+
+  aboutToAppear() {
+    const rnGestureHandlerModule = this.ctx.rnInstance.getTurboModule<RNGestureHandlerModule>(RNGestureHandlerModule.NAME)
+    const rootTag = this.ctx.descriptorRegistry.getDescriptorLineage(this.tag)[0].tag
+    this.touchHandler = new RNGHRootTouchHandler(rootTag, rnGestureHandlerModule.getViewRegistry(), rnGestureHandlerModule.getGestureHandlerRegistry(), rnGestureHandlerModule.getLogger())
+    this.handleDescriptorChange(this.ctx.descriptorRegistry.getDescriptor<RNGestureHandlerRootViewDescriptor>(this.tag))
+    this.unsubscribes.push(this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag, (d) => {
+      this.handleDescriptorChange(d as RNGestureHandlerRootViewDescriptor)
+    }))
+  }
+
+  aboutToDisappear() {
+    this.unsubscribes.forEach(unsubscribe => unsubscribe())
+  }
+
+  handleDescriptorChange(newDescriptor: RNGestureHandlerRootViewDescriptor) {
+    this.descriptor = newDescriptor
+  }
+
+  build() {
+    RNViewBase({ ctx: this.ctx, tag: this.tag }) {
+      ForEach(this.descriptor.childrenTags, (childrenTag: Tag) => {
+        RNComponentFactory({ ctx: this.ctx, tag: childrenTag, buildCustomComponent: this.buildCustomComponent })
+      })
+      Stack() {
+      }
+      .width("100%")
+      .height("100%")
+      .onTouch((e) => {
+        this.touchHandler?.handleTouch(e)
+      })
+      .hitTestBehavior(HitTestMode.Transparent)
+
+    }
+  }
+}

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,
+      });
+    };
+  }
+}