[General] Move the end flag to the event passed to onDeactivate and onFinalize

apps/common-app/src/new_api/components/switchAndInput/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import type { NativeGestureEvent } from 'react-native-gesture-handler';
 import {
   TextInput,
   LegacyTextInput,
@@ -22,8 +21,8 @@ export default function SwitchTextInputExample() {
           <TextInput
             onBegin={() => console.log('[TextInput] onBegin')}
             onActivate={() => console.log('[TextInput] onActivate')}
-            onFinalize={(_: NativeGestureEvent, s: boolean) =>
-              console.log('[TextInput] onFinalize', s)
+            onFinalize={(e) =>
+              console.log('[TextInput] onFinalize', e.canceled)
             }
             style={styles.input}
             placeholder="Type here..."
@@ -50,9 +49,7 @@ export default function SwitchTextInputExample() {
           <View style={styles.switchRow}>
             <Switch
               onBegin={() => console.log('[Switch] onBegin')}
-              onFinalize={(_: NativeGestureEvent, s: boolean) =>
-                console.log('[Switch] onFinalize', s)
-              }
+              onFinalize={(e) => console.log('[Switch] onFinalize', e.canceled)}
               value={switchOn}
               onValueChange={(v: boolean) => {
                 console.log('[Switch] onValueChange', v);

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

@@ -9,10 +9,11 @@ import type {
   RectButtonProps,
 } from './GestureButtonsProps';
 
-import type { GestureEvent } from '../types';
+import type { GestureEvent, GestureEndEvent } from '../types';
 import type { NativeHandlerData } from '../hooks/gestures/native/NativeTypes';
 
 type CallbackEventType = GestureEvent<NativeHandlerData>;
+type EndCallbackEventType = GestureEndEvent<NativeHandlerData>;
 
 /**
  * @deprecated `RawButton` is deprecated, use `Clickable` instead
@@ -67,23 +68,23 @@ export const BaseButton = (props: BaseButtonProps) => {
     props.onActivate?.(e);
   };
 
-  const onDeactivate = (e: CallbackEventType, didSucceed: boolean) => {
+  const onDeactivate = (e: EndCallbackEventType) => {
     onActiveStateChange?.(false);
 
-    if (didSucceed && !longPressDetected.current) {
+    if (!e.canceled && !longPressDetected.current) {
       onPress?.(e.pointerInside);
     }
 
-    props.onDeactivate?.(e, didSucceed);
+    props.onDeactivate?.(e);
   };
 
-  const onFinalize = (e: CallbackEventType, didSucceed: boolean) => {
+  const onFinalize = (e: EndCallbackEventType) => {
     if (longPressTimeout.current !== undefined) {
       clearTimeout(longPressTimeout.current);
       longPressTimeout.current = undefined;
     }
 
-    props.onFinalize?.(e, didSucceed);
+    props.onFinalize?.(e);
   };
 
   return (

packages/react-native-gesture-handler/src/v3/components/Pressable.tsx

@@ -274,13 +274,13 @@ const Pressable = (props: PressableProps) => {
       stateMachine.reset();
       handlePressOut(pressableEvent, false);
     },
-    onFinalize: (_event, success) => {
+    onFinalize: (event) => {
       if (Platform.OS !== 'web') {
         return;
       }
 
       stateMachine.handleEvent(
-        success ? StateMachineEvent.FINALIZE : StateMachineEvent.CANCEL
+        event.canceled ? StateMachineEvent.CANCEL : StateMachineEvent.FINALIZE
       );
 
       handleFinalize();
@@ -313,14 +313,14 @@ const Pressable = (props: PressableProps) => {
         stateMachine.handleEvent(StateMachineEvent.NATIVE_START);
       }
     },
-    onFinalize: (_event, success) => {
+    onFinalize: (event) => {
       // On Web we use LongPress.onFinalize instead of Native.onFinalize,
       // as Native cancels on mouse move, and LongPress does not.
       if (Platform.OS === 'web') {
         return;
       }
       stateMachine.handleEvent(
-        success ? StateMachineEvent.FINALIZE : StateMachineEvent.CANCEL
+        event.canceled ? StateMachineEvent.CANCEL : StateMachineEvent.FINALIZE
       );
 
       handleFinalize();

packages/react-native-gesture-handler/src/v3/components/Touchable/Touchable.tsx

@@ -3,7 +3,11 @@ import { Platform } from 'react-native';
 import GestureHandlerButton, {
   ButtonProps,
 } from '../../../components/GestureHandlerButton';
-import { CallbackEventType, TouchableProps } from './TouchableProps';
+import {
+  CallbackEventType,
+  EndCallbackEventType,
+  TouchableProps,
+} from './TouchableProps';
 import createNativeWrapper from '../../createNativeWrapper';
 
 const TouchableButton = createNativeWrapper<
@@ -80,18 +84,18 @@ export const Touchable = (props: TouchableProps) => {
   );
 
   const onDeactivate = useCallback(
-    (e: CallbackEventType, success: boolean) => {
+    (e: EndCallbackEventType) => {
       onActiveStateChange?.(false);
 
-      if (success && !longPressDetected.current) {
+      if (!e.canceled && !longPressDetected.current) {
         onPress?.(e.pointerInside);
       }
     },
     [onActiveStateChange, onPress]
   );
 
   const onFinalize = useCallback(
-    (e: CallbackEventType) => {
+    (e: EndCallbackEventType) => {
       onPressOut?.(e);
 
       if (longPressTimeout.current !== undefined) {

packages/react-native-gesture-handler/src/v3/components/Touchable/TouchableProps.ts

@@ -1,10 +1,11 @@
 import type { PressableAndroidRippleConfig as RNPressableAndroidRippleConfig } from 'react-native';
 import type { ButtonProps } from '../../../components/GestureHandlerButton';
-import type { GestureEvent } from '../../types';
+import type { GestureEndEvent, GestureEvent } from '../../types';
 import type { NativeHandlerData } from '../../hooks/gestures/native/NativeTypes';
 import { BaseButtonProps, RawButtonProps } from '../GestureButtonsProps';
 
 export type CallbackEventType = GestureEvent<NativeHandlerData>;
+export type EndCallbackEventType = GestureEndEvent<NativeHandlerData>;
 
 type PressableAndroidRippleConfig = {
   [K in keyof RNPressableAndroidRippleConfig]?: Exclude<

packages/react-native-gesture-handler/src/v3/hooks/callbacks/eventHandler.ts

@@ -11,6 +11,7 @@ import {
   ChangeCalculatorType,
   GestureCallbacks,
   GestureEvent,
+  GestureEndEvent,
   GestureHandlerEventWithHandlerData,
   GestureStateChangeEventWithHandlerData,
   GestureUpdateEventWithHandlerData,
@@ -44,25 +45,29 @@ function handleStateChangeEvent<
   ) {
     fillInDefaultValues?.(event as GestureEvent<TExtendedHandlerData>);
     runCallback(CALLBACK_TYPE.START, callbacks, event);
-  } else if (oldState !== state && state === State.END) {
-    if (oldState === State.ACTIVE) {
-      fillInDefaultValues?.(event as GestureEvent<TExtendedHandlerData>);
-      runCallback(CALLBACK_TYPE.END, callbacks, event, true);
-    }
-    runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, true);
-
-    if (context) {
-      context.lastUpdateEvent = undefined;
-    }
   } else if (
-    (state === State.FAILED || state === State.CANCELLED) &&
-    state !== oldState
+    oldState !== state &&
+    (state === State.END || state === State.FAILED || state === State.CANCELLED)
   ) {
+    const canceled = state === State.FAILED || state === State.CANCELLED;
+    const endEvent: GestureEndEvent<THandlerData> = {
+      ...event,
+      canceled,
+    };
+
     if (oldState === State.ACTIVE) {
       fillInDefaultValues?.(event as GestureEvent<TExtendedHandlerData>);
-      runCallback(CALLBACK_TYPE.END, callbacks, event, false);
+      runCallback<THandlerData, TExtendedHandlerData>(
+        CALLBACK_TYPE.END,
+        callbacks,
+        endEvent
+      );
     }
-    runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, false);
+    runCallback<THandlerData, TExtendedHandlerData>(
+      CALLBACK_TYPE.FINALIZE,
+      callbacks,
+      endEvent
+    );
 
     if (context) {
       context.lastUpdateEvent = undefined;