react-native-gesture-handler 3.0.0-beta.3 → 3.0.0-beta.5

package/src/v3/components/Touchable/TouchableProps.ts

@@ -17,13 +17,69 @@ type PressableAndroidRippleConfig = {
 
 type RippleProps = 'rippleColor' | 'rippleRadius' | 'borderless' | 'foreground';
 
-export type TouchableProps = Omit<ButtonProps, RippleProps | 'enabled'> &
-  Omit<BaseButtonProps, keyof RawButtonProps> & {
+type DurationProps =
+  | 'tapAnimationInDuration'
+  | 'tapAnimationOutDuration'
+  | 'longPressDuration'
+  | 'longPressAnimationOutDuration'
+  | 'hoverAnimationInDuration'
+  | 'hoverAnimationOutDuration';
+
+type InOutDuration = { in: number; out: number };
+type LongPressDuration = { out: number };
+
+/**
+ * Configuration for press / hover animation timing.
+ *
+ * - A single number applies to every phase of every category.
+ * - An object with top-level `in` / `out` sets the baseline; `tap` and
+ *   `hover` may override either side or both — any field left out
+ *   inherits the top-level value.
+ * - Alternatively, both categories may be specified in full without a
+ *   top-level baseline.
+ *
+ * `longPress` optionally customizes the press-out duration once the
+ * press has been held past `delayLongPress`. If omitted, the long-press
+ * release falls back to the resolved tap-out timing.
+ */
+export type AnimationDuration =
+  | number
+  | (InOutDuration & {
+      tap?: Partial<InOutDuration>;
+      hover?: Partial<InOutDuration>;
+      longPress?: LongPressDuration;
+    })
+  | {
+      tap: InOutDuration;
+      hover: InOutDuration;
+      longPress?: LongPressDuration;
+    };
+
+export type TouchableProps = Omit<
+  ButtonProps,
+  RippleProps | 'enabled' | DurationProps
+> &
+  Omit<
+    BaseButtonProps,
+    keyof RawButtonProps | 'onActiveStateChange' | 'onPress'
+  > & {
+    /**
+     * Press and hover animation durations, in milliseconds. Pass a single
+     * number to apply it to every phase, or an object to customize per phase
+     * and per category. Defaults to 50ms for the in phase and 100ms for the
+     * out phase.
+     */
+    animationDuration?: AnimationDuration | undefined;
     /**
      * Configuration for the ripple effect on Android.
      */
     androidRipple?: PressableAndroidRippleConfig | undefined;
 
+    /**
+     * Called when the component gets pressed.
+     */
+    onPress?: ((event: CallbackEventType) => void) | undefined;
+
     /**
      * Called when pointer touches the component.
      */
@@ -38,4 +94,10 @@ export type TouchableProps = Omit<ButtonProps, RippleProps | 'enabled'> &
      * Whether the component should ignore touches. By default set to false.
      */
     disabled?: boolean | undefined;
+
+    /**
+     * Whether the touch should be canceled when pointer leaves the component. By default set to true.
+     * On web this prop doesn't have any effect and behaves as if `true` was set.
+     */
+    cancelOnLeave?: boolean | undefined;
   };

package/src/v3/detectors/HostGestureDetector.web.tsx

@@ -9,7 +9,9 @@ import type {
 } from '../../handlers/gestureHandlerCommon';
 import RNGestureHandlerModule from '../../RNGestureHandlerModule.web';
 import { tagMessage } from '../../utils';
-import type { PropsRef } from '../../web/interfaces';
+import { type PropsRef } from '../../web/interfaces';
+import NodeManager from '../../web/tools/NodeManager';
+import { useNativeGestureRole } from './useNativeGestureRole';
 
 export interface GestureHandlerDetectorProps extends PropsRef {
   handlerTags: number[];
@@ -30,7 +32,193 @@ export interface VirtualChildrenWeb {
   enableContextMenu?: boolean | undefined;
 }
 
-const EMPTY_HANDLERS = new Set<number>();
+// Bundles all per-instance state passed to the standalone helpers below. Holding everything in
+// one stable object keeps the helpers pure (no closures over component-render-scoped values),
+// which means the useEffects don't need them in their deps lists.
+type DetectorRefs = {
+  owner: object;
+  viewRef: RefObject<Element | null>;
+  propsRef: RefObject<GestureHandlerDetectorProps>;
+  // Tags observed for the detector view (top-level).
+  subscribedHandlers: Set<number>;
+  // Flat set of tags currently bound to *some* element (top-level or virtual). Mirrors iOS
+  // `_attachedHandlers` / Android `attachedHandlers`.
+  attachedHandlers: Set<number>;
+  // Tags whose handler asked to attach to the detector's child element rather than the detector
+  // itself (`shouldAttachGestureToChildView`). Kept here so we can (re)bind them as subviews
+  // appear.
+  nativeHandlers: Set<number>;
+  // For each virtual child's viewTag, the set of currently-observed handler tags.
+  subscribedVirtualHandlers: Map<number, Set<number>>;
+  // Latest snapshot of virtual children keyed by viewTag. The ready callback reads this so
+  // re-fires after a child's per-DOM props change use the up-to-date values.
+  virtualChildren: Map<number, VirtualChildrenWeb>;
+};
+
+// Invoked from `NodeManager.observeHandler` once the handler is known to exist. Branches on
+// handler kind + actionType to pick the right binding flow. May be called multiple times for
+// the same tag (handler re-registration), so each branch must be idempotent.
+function attachReadyHandler(
+  refs: DetectorRefs,
+  tag: number,
+  actionType: ActionType,
+  virtualViewTag?: number
+) {
+  const handler = RNGestureHandlerModule.getGestureHandlerNode(tag);
+
+  if (
+    actionType === ActionType.NATIVE_DETECTOR &&
+    handler.shouldAttachGestureToChildView()
+  ) {
+    refs.nativeHandlers.add(tag);
+    if (
+      refs.viewRef.current != null &&
+      refs.viewRef.current.childElementCount > 0
+    ) {
+      tryAttachNativeHandlersToChildView(refs);
+    }
+    return;
+  }
+
+  if (actionType === ActionType.VIRTUAL_DETECTOR) {
+    const child =
+      virtualViewTag != null
+        ? refs.virtualChildren.get(virtualViewTag)
+        : undefined;
+    if (child == null || child.viewRef.current == null) {
+      return;
+    }
+
+    if (!refs.attachedHandlers.has(tag)) {
+      RNGestureHandlerModule.attachGestureHandler(
+        tag,
+        child.viewRef.current,
+        actionType,
+        refs.propsRef
+      );
+      refs.attachedHandlers.add(tag);
+    }
+
+    RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+      userSelect: child.userSelect,
+      touchAction: child.touchAction,
+      enableContextMenu: child.enableContextMenu,
+    });
+    return;
+  }
+
+  if (refs.viewRef.current == null) {
+    return;
+  }
+
+  if (!refs.attachedHandlers.has(tag)) {
+    RNGestureHandlerModule.attachGestureHandler(
+      tag,
+      refs.viewRef.current,
+      actionType,
+      refs.propsRef
+    );
+    refs.attachedHandlers.add(tag);
+  }
+
+  RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+    userSelect: refs.propsRef.current.userSelect,
+    touchAction: refs.propsRef.current.touchAction,
+    enableContextMenu: refs.propsRef.current.enableContextMenu,
+  });
+}
+
+function tryAttachNativeHandlersToChildView(refs: DetectorRefs) {
+  if (refs.nativeHandlers.size === 0) {
+    return;
+  }
+
+  const view = refs.viewRef.current;
+  if (view == null) {
+    return;
+  }
+
+  if (view.childElementCount > 1) {
+    throw new Error(
+      tagMessage(
+        'Cannot have more than one child view when native gesture handlers are attached to the detector'
+      )
+    );
+  }
+
+  const target = view.firstElementChild;
+  if (target == null) {
+    return;
+  }
+
+  for (const tag of refs.nativeHandlers) {
+    // A tag may be in `nativeHandlers` from an earlier ready callback but the underlying
+    // handler may have been dropped since. Skip — a re-registration fires the observation again.
+    if (!NodeManager.hasHandler(tag)) {
+      continue;
+    }
+    if (refs.attachedHandlers.has(tag)) {
+      continue;
+    }
+    RNGestureHandlerModule.attachGestureHandler(
+      tag,
+      target,
+      ActionType.NATIVE_DETECTOR,
+      refs.propsRef
+    );
+    refs.attachedHandlers.add(tag);
+    RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+      userSelect: refs.propsRef.current.userSelect,
+      touchAction: refs.propsRef.current.touchAction,
+      enableContextMenu: refs.propsRef.current.enableContextMenu,
+    });
+  }
+}
+
+// Reconcile `subscribedSet` against `currentTags`: observe new tags, cancel observation and
+// detach for tags no longer present. The ready callback set up here is responsible for actually
+// binding the handler once it exists.
+function syncSubscriptions(
+  refs: DetectorRefs,
+  currentTags: Iterable<number>,
+  subscribedSet: Set<number>,
+  actionType: ActionType,
+  virtualViewTag?: number
+) {
+  const toUnsubscribe = new Set(subscribedSet);
+  for (const tag of currentTags) {
+    toUnsubscribe.delete(tag);
+    if (subscribedSet.has(tag)) {
+      continue;
+    }
+    NodeManager.observeHandler(tag, refs.owner, () => {
+      attachReadyHandler(refs, tag, actionType, virtualViewTag);
+    });
+    subscribedSet.add(tag);
+  }
+
+  for (const tag of toUnsubscribe) {
+    NodeManager.cancelObservation(tag, refs.owner);
+    if (refs.attachedHandlers.has(tag)) {
+      RNGestureHandlerModule.detachGestureHandler(tag);
+      refs.attachedHandlers.delete(tag);
+    }
+    subscribedSet.delete(tag);
+    refs.nativeHandlers.delete(tag);
+  }
+}
+
+function teardown(refs: DetectorRefs) {
+  NodeManager.cancelAllObservationsForOwner(refs.owner);
+  for (const tag of refs.attachedHandlers) {
+    RNGestureHandlerModule.detachGestureHandler(tag);
+  }
+  refs.attachedHandlers.clear();
+  refs.subscribedHandlers.clear();
+  refs.nativeHandlers.clear();
+  refs.subscribedVirtualHandlers.clear();
+  refs.virtualChildren.clear();
+}
 
 const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   const { handlerTags, children } = props;
@@ -39,70 +227,28 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
 
   const viewRef = useRef<Element>(null);
   const propsRef = useRef<GestureHandlerDetectorProps>(props);
-  const attachedHandlers = useRef<Set<number>>(new Set<number>());
-  const attachedNativeHandlers = useRef<Set<number>>(new Set<number>());
-  const attachedVirtualHandlers = useRef<Map<number, Set<number>>>(new Map());
-
-  const detachHandlers = (
-    currentHandlerTags: Set<number>,
-    attachedHandlerTags: Set<number>
-  ) => {
-    const oldHandlerTags = attachedHandlerTags.difference(currentHandlerTags);
-    oldHandlerTags.forEach((tag) => {
-      RNGestureHandlerModule.detachGestureHandler(tag);
-      attachedHandlerTags.delete(tag);
-    });
-  };
-
-  const attachHandlers = (
-    viewRef: RefObject<Element | null>,
-    propsRef: RefObject<GestureHandlerDetectorProps>,
-    currentHandlerTags: Set<number>,
-    attachedHandlerTags: Set<number>,
-    actionType: ActionType
-  ) => {
-    const newHandlerTags = currentHandlerTags.difference(attachedHandlerTags);
-
-    newHandlerTags.forEach((tag) => {
-      if (
-        RNGestureHandlerModule.getGestureHandlerNode(
-          tag
-        ).shouldAttachGestureToChildView() &&
-        actionType === ActionType.NATIVE_DETECTOR
-      ) {
-        if (viewRef.current!.childElementCount > 1) {
-          throw new Error(
-            tagMessage(
-              'Cannot have more than one child view when native gesture handlers are attached to the detector'
-            )
-          );
-        }
 
-        RNGestureHandlerModule.attachGestureHandler(
-          tag,
-          viewRef.current!.firstChild,
-          actionType,
-          propsRef
-        );
-        attachedNativeHandlers.current.add(tag);
-      } else {
-        RNGestureHandlerModule.attachGestureHandler(
-          tag,
-          viewRef.current,
-          actionType,
-          propsRef
-        );
-      }
-      attachedHandlerTags.add(tag);
+  // Stable per-instance state
+  const refsRef = useRef<DetectorRefs | null>(null);
+  if (refsRef.current === null) {
+    refsRef.current = {
+      owner: {},
+      viewRef,
+      propsRef,
+      subscribedHandlers: new Set<number>(),
+      attachedHandlers: new Set<number>(),
+      nativeHandlers: new Set<number>(),
+      subscribedVirtualHandlers: new Map<number, Set<number>>(),
+      virtualChildren: new Map<number, VirtualChildrenWeb>(),
+    };
+  }
+  const refs = refsRef.current;
 
-      RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
-        userSelect: props.userSelect,
-        touchAction: props.touchAction,
-        enableContextMenu: props.enableContextMenu,
-      });
-    });
-  };
+  useNativeGestureRole(viewRef, children);
 
+  // Keep propsRef in sync and re-apply detector-level DOM props to top-level attached handlers
+  // when they change. Virtual children get their own (potentially different) DOM props applied
+  // in the virtualChildren effect below, so we only touch top-level subscribers here.
   useEffect(() => {
     const shouldUpdateDOMProps =
       propsRef.current.userSelect !== props.userSelect ||
@@ -112,7 +258,17 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
     propsRef.current = props;
 
     if (shouldUpdateDOMProps) {
-      for (const tag of attachedHandlers.current) {
+      // attachedHandlers ⊆ subscribedHandlers ⋃ subscribedVirtualHandlers, we want to ignore the
+      // handlers attached by the virtual detectors not to overwrite their DOM props.
+      const claimedByVirtual = Array.from(
+        refs.subscribedVirtualHandlers.values()
+      ).reduce((acc, current) => acc.union(current), new Set<number>());
+
+      const handlersToUpdate = refs.subscribedHandlers
+        .intersection(refs.attachedHandlers)
+        .difference(claimedByVirtual);
+
+      for (const tag of handlersToUpdate) {
         RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
           userSelect: props.userSelect,
           touchAction: props.touchAction,
@@ -120,38 +276,38 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
         });
       }
     }
-  }, [props]);
+  }, [props, refs]);
 
   useEffect(() => {
-    detachHandlers(handlerTagsSet, attachedHandlers.current);
-
-    attachHandlers(
-      viewRef,
-      propsRef,
+    syncSubscriptions(
+      refs,
       handlerTagsSet,
-      attachedHandlers.current,
+      refs.subscribedHandlers,
       ActionType.NATIVE_DETECTOR
     );
-    return () => {
-      detachHandlers(EMPTY_HANDLERS, attachedHandlers.current);
-      attachedVirtualHandlers?.current.forEach((childHandlerTags) => {
-        detachHandlers(EMPTY_HANDLERS, childHandlerTags);
-      });
-    };
-  }, [handlerTagsSet, viewRef]);
+  }, [handlerTagsSet, refs]);
 
   useEffect(() => {
-    const virtualChildrenToDetach: Set<number> = new Set(
-      attachedVirtualHandlers.current.keys()
-    );
+    // Refresh the snapshot used by the ready callback so re-fires read current child props.
+    refs.virtualChildren.clear();
+    props.virtualChildren?.forEach((child) => {
+      refs.virtualChildren.set(child.viewTag, child);
+    });
 
+    const virtualChildrenToDetach = new Set(
+      refs.subscribedVirtualHandlers.keys()
+    );
     props.virtualChildren?.forEach((child) => {
       virtualChildrenToDetach.delete(child.viewTag);
     });
 
-    virtualChildrenToDetach.forEach((tag) => {
-      detachHandlers(EMPTY_HANDLERS, attachedVirtualHandlers.current.get(tag)!);
-    });
+    for (const viewTag of virtualChildrenToDetach) {
+      const tags = refs.subscribedVirtualHandlers.get(viewTag);
+      if (tags != null) {
+        syncSubscriptions(refs, [], tags, ActionType.VIRTUAL_DETECTOR, viewTag);
+      }
+      refs.subscribedVirtualHandlers.delete(viewTag);
+    }
 
     props.virtualChildren?.forEach((child) => {
       if (child.viewRef.current == null) {
@@ -159,33 +315,37 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
         // switches its component based on whether animated/reanimated events should run.
         return;
       }
-      if (!attachedVirtualHandlers.current.has(child.viewTag)) {
-        attachedVirtualHandlers.current.set(child.viewTag, new Set());
-      }
-
-      const currentHandlerTags = new Set(child.handlerTags);
-      detachHandlers(
-        currentHandlerTags,
-        attachedVirtualHandlers.current.get(child.viewTag)!
-      );
 
-      attachHandlers(
-        child.viewRef,
-        propsRef,
-        currentHandlerTags,
-        attachedVirtualHandlers.current.get(child.viewTag)!,
-        ActionType.VIRTUAL_DETECTOR
+      let subs = refs.subscribedVirtualHandlers.get(child.viewTag);
+      if (subs == null) {
+        subs = new Set();
+        refs.subscribedVirtualHandlers.set(child.viewTag, subs);
+      }
+      syncSubscriptions(
+        refs,
+        child.handlerTags,
+        subs,
+        ActionType.VIRTUAL_DETECTOR,
+        child.viewTag
       );
-
-      currentHandlerTags.forEach((tag) => {
-        RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
-          userSelect: child.userSelect,
-          touchAction: child.touchAction,
-          enableContextMenu: child.enableContextMenu,
-        });
-      });
+      // Re-apply per-child DOM props on every run. Already-attached tags need this when only
+      // the child's props change; tags attached via a sync-fired observer already had it
+      // applied in `attachReadyHandler`, so this is a no-op for them.
+      for (const tag of subs) {
+        if (refs.attachedHandlers.has(tag)) {
+          RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+            userSelect: child.userSelect,
+            touchAction: child.touchAction,
+            enableContextMenu: child.enableContextMenu,
+          });
+        }
+      }
     });
-  }, [props.virtualChildren]);
+  }, [props.virtualChildren, refs]);
+
+  useEffect(() => {
+    return () => teardown(refs);
+  }, [refs]);
 
   return (
     <View style={{ display: 'contents' }} ref={viewRef as Ref<View>}>

package/src/v3/detectors/NativeDetector.tsx

@@ -6,7 +6,8 @@ import type { NativeDetectorProps } from './common';
 import { AnimatedNativeDetector, nativeDetectorStyles } from './common';
 import HostGestureDetector from './HostGestureDetector';
 import { ReanimatedNativeDetector } from './ReanimatedNativeDetector';
-import { configureRelations, ensureNativeDetectorComponent } from './utils';
+import { useGestureRelationsUpdater } from './useGestureRelationsUpdater';
+import { ensureNativeDetectorComponent } from './utils';
 
 export function NativeDetector<
   TConfig,
@@ -26,7 +27,7 @@ export function NativeDetector<
       : HostGestureDetector;
 
   ensureNativeDetectorComponent(NativeDetectorComponent);
-  configureRelations(gesture);
+  useGestureRelationsUpdater(gesture);
 
   const handlerTags = useMemo(() => {
     return isComposedGesture(gesture)

package/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx

@@ -18,7 +18,8 @@ import { AnimatedNativeDetector, nativeDetectorStyles } from '../common';
 import HostGestureDetector from '../HostGestureDetector';
 import { ReanimatedNativeDetector } from '../ReanimatedNativeDetector';
 import { useEnsureGestureHandlerRootView } from '../useEnsureGestureHandlerRootView';
-import { configureRelations, ensureNativeDetectorComponent } from '../utils';
+import { useGestureRelationsUpdater } from '../useGestureRelationsUpdater';
+import { ensureNativeDetectorComponent } from '../utils';
 import type { InterceptingDetectorContextValue } from './useInterceptingDetectorContext';
 import {
   InterceptingDetectorContext,
@@ -221,9 +222,7 @@ export function InterceptingGestureDetector<
 
   ensureNativeDetectorComponent(NativeDetectorComponent);
 
-  if (gesture) {
-    configureRelations(gesture);
-  }
+  useGestureRelationsUpdater(gesture);
 
   const handlerTags = useMemo(() => {
     if (gesture) {

package/src/v3/detectors/VirtualDetector/VirtualDetector.tsx

@@ -6,7 +6,8 @@ import { tagMessage } from '../../../utils';
 import { isComposedGesture } from '../../hooks/utils/relationUtils';
 import type { DetectorCallbacks, VirtualChild } from '../../types';
 import type { VirtualDetectorProps } from '../common';
-import { configureRelations } from '../utils';
+import { useGestureRelationsUpdater } from '../useGestureRelationsUpdater';
+import { useNativeGestureRole } from '../useNativeGestureRole';
 import {
   InterceptingDetectorMode,
   useInterceptingDetectorContext,
@@ -54,6 +55,8 @@ export function VirtualDetector<
     [props.children]
   );
 
+  useNativeGestureRole(viewRef, props.children);
+
   useEffect(() => {
     if (viewTag === -1) {
       return;
@@ -101,7 +104,7 @@ export function VirtualDetector<
     setMode,
   ]);
 
-  configureRelations(props.gesture);
+  useGestureRelationsUpdater(props.gesture);
 
   return <Wrap ref={handleRef}>{props.children}</Wrap>;
 }

package/src/v3/detectors/useGestureRelationsUpdater.ts

@@ -0,0 +1,30 @@
+import { useEffect, useMemo } from 'react';
+
+import { NativeProxy } from '../NativeProxy';
+import type { Gesture } from '../types';
+import { configureRelations } from './utils';
+
+export function useGestureRelationsUpdater<TConfig, THandlerData>(
+  gesture?: Gesture<TConfig, THandlerData>
+) {
+  const relations = useMemo(
+    () => (gesture ? configureRelations(gesture) : null),
+    [gesture]
+  );
+
+  useEffect(() => {
+    if (!relations) {
+      return;
+    }
+
+    // React runs effects bottom-up, we need to ensure that relations are applied after all effects
+    // in the tree have run, so we defer to the next frame.
+    const frame = requestAnimationFrame(() => {
+      relations.forEach((rel, handlerTag) => {
+        NativeProxy.configureRelations(handlerTag, rel);
+      });
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [relations]);
+}

package/src/v3/detectors/useNativeGestureRole.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, RefObject } from 'react';
+
+export function useNativeGestureRole(
+  _viewRef: RefObject<unknown>,
+  _children: ReactNode
+): void {
+  // No-op on native; the web implementation lives in `useNativeGestureRole.web.ts`.
+}

package/src/v3/detectors/useNativeGestureRole.web.ts

@@ -0,0 +1,42 @@
+import type { ReactNode, RefObject } from 'react';
+import { useEffect } from 'react';
+
+import { NATIVE_GESTURE_ROLE_ATTRIBUTE } from '../../web/constants';
+import { NativeGestureRole } from '../../web/interfaces';
+
+export function useNativeGestureRole(
+  viewRef: RefObject<Element | null>,
+  children: ReactNode
+): void {
+  useEffect(() => {
+    const child = viewRef.current?.firstChild;
+
+    if (!(child instanceof HTMLElement)) {
+      return;
+    }
+
+    // @ts-ignore This exists on React.ReactNode
+    const displayName = children?.type?.displayName as string;
+
+    if (displayName === NativeGestureRole.ScrollView) {
+      child.setAttribute(
+        NATIVE_GESTURE_ROLE_ATTRIBUTE,
+        NativeGestureRole.ScrollView
+      );
+    } else if (displayName === NativeGestureRole.Switch) {
+      child.setAttribute(
+        NATIVE_GESTURE_ROLE_ATTRIBUTE,
+        NativeGestureRole.Switch
+      );
+    } else if (displayName === NativeGestureRole.Button) {
+      child.setAttribute(
+        NATIVE_GESTURE_ROLE_ATTRIBUTE,
+        NativeGestureRole.Button
+      );
+    }
+
+    return () => {
+      child.removeAttribute(NATIVE_GESTURE_ROLE_ATTRIBUTE);
+    };
+  }, [children, viewRef]);
+}