[Web] Cancel button gesture when other handlers are extracted before it (#4128)

## Description

Applies the same solution for the problem described in
#4127.

There's no native gesture hooks mechanism on web, so the check happens
directly in `NativeViewGestureHandler`. Since the button feedback
animation is independent of the gesture logic currently, I added custom
DOM events dispatched by `NativeViewGestureHandler` when it begins and
gets canceled. This way, the button can block/enable the feedback
depending on gesture state.

## Test plan

Tested on the example from
#4127

|Before|After|
|-|-|
|<video
src="https://github.com/user-attachments/assets/1304c59d-4464-410d-a9f2-8508a298d946"
/>|<video
src="https://github.com/user-attachments/assets/863c454f-ec8f-471e-bfad-8cfec85eb504"
/>|

Author: j-piasecki

packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import type { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
 import { View } from 'react-native';
 
+import { GestureLifecycleEvent } from '../web/tools/GestureLifecycleEvents';
+
 type ButtonProps = ViewProps & {
   ref?: React.Ref<React.ComponentRef<typeof View>>;
   enabled?: boolean;
@@ -17,6 +19,7 @@ type ButtonProps = ViewProps & {
 };
 
 export const ButtonComponent = ({
+  ref: externalRef,
   enabled = true,
   pressAndHoldAnimationDuration: pressAndHoldAnimationDurationProp = -1,
   tapAnimationDuration: tapAnimationDurationProp = 100,
@@ -46,9 +49,52 @@ export const ButtonComponent = ({
   const pressOutTimer = React.useRef<ReturnType<typeof setTimeout> | null>(
     null
   );
+  const gestureEnabledRef = React.useRef(true);
+  const viewRef = React.useRef<HTMLElement | null>(null);
+
+  const setRef = React.useCallback(
+    (node: React.ComponentRef<typeof View> | null) => {
+      viewRef.current = node as unknown as HTMLElement | null;
+      if (typeof externalRef === 'function') {
+        externalRef(node);
+      } else if (externalRef != null) {
+        externalRef.current = node;
+      }
+    },
+    [externalRef]
+  );
 
   React.useEffect(() => {
+    const node = viewRef.current;
+
+    const handleGestureBegan = () => {
+      gestureEnabledRef.current = true;
+    };
+    const handleGestureCanceled = () => {
+      gestureEnabledRef.current = false;
+      if (pressOutTimer.current != null) {
+        clearTimeout(pressOutTimer.current);
+        pressOutTimer.current = null;
+      }
+      pressInTimestamp.current = 0;
+      setPressed(false);
+    };
+
+    node?.addEventListener(GestureLifecycleEvent.Began, handleGestureBegan);
+    node?.addEventListener(
+      GestureLifecycleEvent.Canceled,
+      handleGestureCanceled
+    );
+
     return () => {
+      node?.removeEventListener(
+        GestureLifecycleEvent.Began,
+        handleGestureBegan
+      );
+      node?.removeEventListener(
+        GestureLifecycleEvent.Canceled,
+        handleGestureCanceled
+      );
       if (pressOutTimer.current != null) {
         clearTimeout(pressOutTimer.current);
       }
@@ -57,7 +103,7 @@ export const ButtonComponent = ({
 
   const pressIn = React.useCallback(
     (event: NativeSyntheticEvent<unknown>) => {
-      if (!enabled) {
+      if (!enabled || !gestureEnabledRef.current) {
         return;
       }
 
@@ -78,7 +124,7 @@ export const ButtonComponent = ({
       // Only release if a press-in was actually recorded — guards against
       // stray pointer events and lets us complete the release cycle even if
       // `enabled` flipped to false between press-in and press-out.
-      if (pressInTimestamp.current === 0) {
+      if (pressInTimestamp.current === 0 || !gestureEnabledRef.current) {
         return;
       }
 
@@ -131,6 +177,7 @@ export const ButtonComponent = ({
 
   return (
     <View
+      ref={setRef}
       accessibilityRole="button"
       style={[
         style,

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -303,6 +303,12 @@ export default abstract class GestureHandler implements IGestureHandler {
     );
   }
 
+  public shouldBeginWithRecordedHandlers(
+    _recorded: IGestureHandler[]
+  ): boolean {
+    return true;
+  }
+
   public shouldAttachGestureToChildView(): boolean {
     return false;
   }

packages/react-native-gesture-handler/src/web/handlers/IGestureHandler.ts

@@ -53,6 +53,7 @@ export default interface IGestureHandler {
   shouldRequireToWaitForFailure: (handler: IGestureHandler) => boolean;
   shouldRecognizeSimultaneously: (handler: IGestureHandler) => boolean;
   shouldBeCancelledByOther: (handler: IGestureHandler) => boolean;
+  shouldBeginWithRecordedHandlers: (recorded: IGestureHandler[]) => boolean;
   shouldAttachGestureToChildView: () => boolean;
 
   sendEvent: (newState: State, oldState: State) => void;

packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts

@@ -9,6 +9,10 @@ import { SingleGestureName } from '../../v3/types';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
 import type { AdaptedEvent, Config, PropsRef } from '../interfaces';
 import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
+import {
+  dispatchGestureLifecycleEvent,
+  GestureLifecycleEvent,
+} from '../tools/GestureLifecycleEvents';
 import GestureHandler from './GestureHandler';
 import type IGestureHandler from './IGestureHandler';
 
@@ -101,6 +105,11 @@ export default class NativeViewGestureHandler extends GestureHandler {
 
     this.begin();
 
+    dispatchGestureLifecycleEvent(
+      this.delegate.view as HTMLElement | null,
+      GestureLifecycleEvent.Began
+    );
+
     const view = this.delegate.view as HTMLElement;
     const isRNGHText = view.hasAttribute('rnghtext');
 
@@ -208,6 +217,31 @@ export default class NativeViewGestureHandler extends GestureHandler {
     return this.buttonRole;
   }
 
+  public override shouldBeginWithRecordedHandlers(
+    recorded: IGestureHandler[]
+  ): boolean {
+    if (!this.isButton()) {
+      return true;
+    }
+
+    const self = this as IGestureHandler;
+    return recorded.every(
+      (other) =>
+        other.shouldRecognizeSimultaneously(self) ||
+        self.shouldRecognizeSimultaneously(other) ||
+        other.delegate.view === this.delegate.view ||
+        other.name === SingleGestureName.Hover
+    );
+  }
+
+  protected override onCancel(): void {
+    super.onCancel();
+    dispatchGestureLifecycleEvent(
+      this.delegate.view as HTMLElement | null,
+      GestureLifecycleEvent.Canceled
+    );
+  }
+
   protected override transformNativeEvent(): Record<string, unknown> {
     return {
       pointerInside: this.delegate.isPointerInBounds(

packages/react-native-gesture-handler/src/web/tools/GestureHandlerOrchestrator.ts

@@ -270,11 +270,15 @@ export default class GestureHandlerOrchestrator {
       return;
     }
 
-    this.gestureHandlers.push(handler);
-
     handler.active = false;
     handler.awaiting = false;
     handler.activationIndex = Number.MAX_SAFE_INTEGER;
+
+    if (!handler.shouldBeginWithRecordedHandlers(this.gestureHandlers)) {
+      handler.cancel();
+    }
+
+    this.gestureHandlers.push(handler);
   }
 
   private shouldHandlerWaitForOther(

packages/react-native-gesture-handler/src/web/tools/GestureLifecycleEvents.ts

@@ -0,0 +1,14 @@
+export const GestureLifecycleEvent = {
+  Began: 'gh:gestureBegan',
+  Canceled: 'gh:gestureCanceled',
+} as const;
+
+export type GestureLifecycleEventName =
+  (typeof GestureLifecycleEvent)[keyof typeof GestureLifecycleEvent];
+
+export function dispatchGestureLifecycleEvent(
+  view: HTMLElement | null | undefined,
+  name: GestureLifecycleEventName
+): void {
+  view?.dispatchEvent(new CustomEvent(name));
+}