Always cancel scheduled press out

Author: j-piasecki

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt

@@ -535,6 +535,7 @@ class RNGestureHandlerButtonViewManager :
     }
 
     private fun animatePressOut() {
+      pendingPressOut?.let { handler.removeCallbacks(it) }
       val elapsed = SystemClock.uptimeMillis() - pressInTimestamp
 
       if (elapsed >= pressAndHoldAnimationDuration) {
@@ -544,7 +545,6 @@ class RNGestureHandlerButtonViewManager :
         animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, elapsed)
       } else {
         val remaining = tapAnimationDuration - elapsed
-        pendingPressOut?.let { handler.removeCallbacks(it) }
         animateTo(activeOpacity, activeScale, activeUnderlayOpacity, remaining)
 
         val runnable = Runnable {

packages/react-native-gesture-handler/apple/RNGestureHandlerButton.mm

@@ -275,6 +275,10 @@ - (void)handleAnimatePressIn
 
 - (void)handleAnimatePressOut
 {
+  if (_pendingPressOutBlock) {
+    dispatch_block_cancel(_pendingPressOutBlock);
+  }
+
   NSTimeInterval elapsed = (CACurrentMediaTime() - _pressInTimestamp) * 1000.0;
   NSInteger pressAndHoldAnimationDuration = self.pressAndHoldAnimationDuration;
 
@@ -296,9 +300,7 @@ - (void)handleAnimatePressOut
   } else {
     // Before minimum duration, finish press-in in remaining time then animate out in minDuration
     NSTimeInterval remaining = _tapAnimationDuration - elapsed;
-    if (_pendingPressOutBlock) {
-      dispatch_block_cancel(_pendingPressOutBlock);
-    }
+
     RNGHUIView *target = self.animationTarget ?: self;
     [self animateTarget:target toOpacity:_activeOpacity scale:_activeScale duration:remaining];
     if (_activeUnderlayOpacity != _defaultUnderlayOpacity) {

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

@@ -65,6 +65,9 @@ export const ButtonComponent = ({
   }, [enabled, pressAndHoldAnimationDuration]);
 
   const pressOut = React.useCallback(() => {
+    if (pressOutTimer.current != null) {
+      clearTimeout(pressOutTimer.current);
+    }
     const elapsed = Date.now() - pressInTimestamp.current;
 
     if (elapsed >= pressAndHoldAnimationDuration) {
@@ -77,9 +80,6 @@ export const ButtonComponent = ({
     } else {
       // Let the in-progress CSS press-in transition continue; schedule press-out after remaining time
       const remaining = tapAnimationDuration - elapsed;
-      if (pressOutTimer.current != null) {
-        clearTimeout(pressOutTimer.current);
-      }
       pressOutTimer.current = setTimeout(() => {
         pressOutTimer.current = null;
         setCurrentDuration(tapAnimationDuration);