[Web] Fix nested touchables and gestures (#4108)

## Description

1. Adds `stopPropagation` call to event handlers in `Touchable` so only
the inner-most one triggers the active animation.
2. Changes when buttons without `shouldActivateOnStart` (so `Touchable`)
activate - instead of doing it on pressDown, now it happens during
pressUp. This ensures that all other handlers have been extracted and
can be canceled/can cancel `Touchable` correctly.
3. Behavior for buttons with `shouldActivateOnStart` (other buttons)
shouldn't change after this PR, but the proper `shouldActivateOnStart`
implementation is still to be done.

## Test plan

Tested on the example from
#4106

Author: j-piasecki

packages/react-native-gesture-handler/src/components/GestureButtons.tsx

@@ -27,7 +27,7 @@ export const LegacyRawButton = createNativeWrapper<LegacyRawButtonProps>(
   GestureHandlerButton as unknown as HostComponent<LegacyRawButtonProps>,
   {
     shouldCancelWhenOutside: false,
-    shouldActivateOnStart: false,
+    shouldActivateOnStart: Platform.OS === 'web',
   }
 );
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ColorValue, ViewProps } from 'react-native';
+import type { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
 import { View } from 'react-native';
 
 type ButtonProps = ViewProps & {
@@ -55,42 +55,60 @@ export const ButtonComponent = ({
     };
   }, []);
 
-  const pressIn = React.useCallback(() => {
-    if (enabled) {
+  const pressIn = React.useCallback(
+    (event: NativeSyntheticEvent<unknown>) => {
+      if (!enabled) {
+        return;
+      }
+
+      event.stopPropagation();
       if (pressOutTimer.current != null) {
         clearTimeout(pressOutTimer.current);
         pressOutTimer.current = null;
       }
       pressInTimestamp.current = performance.now();
       setCurrentDuration(pressAndHoldAnimationDuration);
       setPressed(true);
-    }
-  }, [enabled, pressAndHoldAnimationDuration]);
+    },
+    [enabled, pressAndHoldAnimationDuration]
+  );
 
-  const pressOut = React.useCallback(() => {
-    if (pressOutTimer.current != null) {
-      clearTimeout(pressOutTimer.current);
-      pressOutTimer.current = null;
-    }
-    const elapsed = performance.now() - pressInTimestamp.current;
+  const pressOut = React.useCallback(
+    (event: NativeSyntheticEvent<unknown>) => {
+      // 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) {
+        return;
+      }
 
-    if (elapsed >= pressAndHoldAnimationDuration) {
-      setCurrentDuration(pressAndHoldAnimationDuration);
-      setPressed(false);
-      // elapsed * 2 to ensure there is at least half of the tapAnimationDuration left for the animation to play
-    } else if (elapsed * 2 >= tapAnimationDuration) {
-      setCurrentDuration(elapsed);
-      setPressed(false);
-    } else {
-      // Let the in-progress CSS press-in transition continue; schedule press-out after remaining time
-      const remaining = tapAnimationDuration - elapsed;
-      pressOutTimer.current = setTimeout(() => {
+      event.stopPropagation();
+      if (pressOutTimer.current != null) {
+        clearTimeout(pressOutTimer.current);
         pressOutTimer.current = null;
-        setCurrentDuration(tapAnimationDuration);
+      }
+      const elapsed = performance.now() - pressInTimestamp.current;
+      pressInTimestamp.current = 0;
+
+      if (elapsed >= pressAndHoldAnimationDuration) {
+        setCurrentDuration(pressAndHoldAnimationDuration);
         setPressed(false);
-      }, remaining);
-    }
-  }, [pressAndHoldAnimationDuration, tapAnimationDuration]);
+        // elapsed * 2 to ensure there is at least half of the tapAnimationDuration left for the animation to play
+      } else if (elapsed * 2 >= tapAnimationDuration) {
+        setCurrentDuration(elapsed);
+        setPressed(false);
+      } else {
+        // Let the in-progress CSS press-in transition continue; schedule press-out after remaining time
+        const remaining = tapAnimationDuration - elapsed;
+        pressOutTimer.current = setTimeout(() => {
+          pressOutTimer.current = null;
+          setCurrentDuration(tapAnimationDuration);
+          setPressed(false);
+        }, remaining);
+      }
+    },
+    [pressAndHoldAnimationDuration, tapAnimationDuration]
+  );
 
   const currentUnderlayOpacity = pressed
     ? activeUnderlayOpacity

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

@@ -15,8 +15,7 @@ import type IGestureHandler from './IGestureHandler';
 export default class NativeViewGestureHandler extends GestureHandler {
   private buttonRole!: boolean;
 
-  // TODO: Implement logic for activation on start
-  // @ts-ignore Logic yet to be implemented
+  // TODO: Implement logic for activation on start properly
   private shouldActivateOnStart = false;
   private disallowInterruption = false;
 
@@ -72,7 +71,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
     }
 
     view.style['touchAction'] = 'auto';
-    // @ts-ignore Turns on defualt touch behavior on Safari
+    // @ts-ignore Turns on default touch behavior on Safari
     view.style['WebkitTouchCallout'] = 'auto';
   }
 
@@ -102,7 +101,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
     const view = this.delegate.view as HTMLElement;
     const isRNGHText = view.hasAttribute('rnghtext');
 
-    if (this.buttonRole || isRNGHText) {
+    if ((this.buttonRole && this.shouldActivateOnStart) || isRNGHText) {
       this.activate();
     }
   }
@@ -144,6 +143,10 @@ export default class NativeViewGestureHandler extends GestureHandler {
     this.tracker.removeFromTracker(event.pointerId);
 
     if (this.tracker.trackedPointersCount === 0) {
+      if (this.buttonRole && this.state === State.BEGAN) {
+        this.activate();
+      }
+
       if (this.state === State.ACTIVE) {
         this.end();
       } else {