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

apps/common-app/src/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

@@ -8,10 +8,11 @@ import type {
   RectButtonProps,
 } from './GestureButtonsProps';
 
-import type { GestureEvent } from '../types';
+import type { GestureEndEvent, GestureEvent } from '../types';
 import type { NativeViewHandlerData } from '../hooks/gestures/native/useNativeGesture';
 
 type CallbackEventType = GestureEvent<NativeViewHandlerData>;
+type EndCallbackEventType = GestureEndEvent<NativeViewHandlerData>;
 
 export const RawButton = createNativeWrapper(GestureHandlerButton, {
   shouldCancelWhenOutside: false,
@@ -58,15 +59,15 @@ export const BaseButton = (props: BaseButtonProps) => {
     }
   };
 
-  const onDeactivate = (e: CallbackEventType, success: boolean) => {
+  const onDeactivate = (e: EndCallbackEventType) => {
     onActiveStateChange?.(false);
 
-    if (success && !longPressDetected.current) {
+    if (!e.canceled && !longPressDetected.current) {
       onPress?.(e.pointerInside);
     }
   };
 
-  const onFinalize = (_e: CallbackEventType) => {
+  const onFinalize = (_e: EndCallbackEventType) => {
     if (longPressTimeout.current !== undefined) {
       clearTimeout(longPressTimeout.current);
       longPressTimeout.current = undefined;

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

@@ -10,6 +10,7 @@ import { ReanimatedContext } from '../../../handlers/gestures/reanimatedWrapper'
 import {
   ChangeCalculatorType,
   GestureCallbacks,
+  GestureEndEvent,
   GestureHandlerEventWithHandlerData,
   GestureStateChangeEventWithHandlerData,
   GestureUpdateEventWithHandlerData,
@@ -35,23 +36,20 @@ function handleStateChangeEvent<THandlerData>(
     state === State.ACTIVE
   ) {
     runCallback(CALLBACK_TYPE.START, callbacks, event);
-  } else if (oldState !== state && state === State.END) {
-    if (oldState === State.ACTIVE) {
-      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) {
-      runCallback(CALLBACK_TYPE.END, callbacks, event, false);
+      runCallback(CALLBACK_TYPE.END, callbacks, endEvent);
     }
-    runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, false);
+    runCallback(CALLBACK_TYPE.FINALIZE, callbacks, endEvent);
 
     if (context) {
       context.lastUpdateEvent = undefined;

packages/react-native-gesture-handler/src/v3/hooks/utils/eventHandlersUtils.ts

@@ -4,10 +4,10 @@ import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
 import {
   GestureCallbacks,
   GestureEventCallback,
-  GestureEventCallbackWithDidSucceed,
   GestureTouchEventCallback,
   UnpackedGestureHandlerEvent,
 } from '../../types';
+import { GestureEndEventCallback } from '../../types/ConfigTypes';
 
 export function useMemoizedGestureCallbacks<THandlerData>(
   callbacks: GestureCallbacks<THandlerData>
@@ -51,7 +51,7 @@ function getHandler<THandlerData>(
   callbacks: GestureCallbacks<THandlerData>
 ):
   | GestureEventCallback<THandlerData>
-  | GestureEventCallbackWithDidSucceed<THandlerData>
+  | GestureEndEventCallback<THandlerData>
   | GestureTouchEventCallback
   | undefined {
   'worklet';
@@ -95,13 +95,11 @@ export function touchEventTypeToCallbackType(
 }
 
 type SingleParameterCallback<T> = (event: T) => void;
-type DoubleParameterCallback<T> = (event: T, didSucceed: boolean) => void;
 
 export function runCallback<THandlerData>(
   type: CALLBACK_TYPE,
   callbacks: GestureCallbacks<THandlerData>,
-  event: UnpackedGestureHandlerEvent<THandlerData>,
-  didSucceed?: boolean
+  event: UnpackedGestureHandlerEvent<THandlerData>
 ) {
   'worklet';
   const handler = getHandler(type, callbacks);
@@ -110,9 +108,5 @@ export function runCallback<THandlerData>(
     return;
   }
 
-  if (didSucceed === undefined) {
-    (handler as SingleParameterCallback<typeof event>)(event);
-  } else {
-    (handler as DoubleParameterCallback<typeof event>)(event, didSucceed);
-  }
+  (handler as SingleParameterCallback<typeof event>)(event);
 }

packages/react-native-gesture-handler/src/v3/types/ConfigTypes.ts

@@ -9,6 +9,7 @@ import {
 import {
   AnimatedEvent,
   ChangeCalculatorType,
+  GestureEndEvent,
   GestureEvent,
 } from './EventTypes';
 import { WithSharedValue } from './ReanimatedTypes';
@@ -17,18 +18,17 @@ export type GestureEventCallback<THandlerData> = (
   event: GestureEvent<THandlerData>
 ) => void;
 
-export type GestureEventCallbackWithDidSucceed<THandlerData> = (
-  event: GestureEvent<THandlerData>,
-  didSucceed: boolean
+export type GestureEndEventCallback<THandlerData> = (
+  event: GestureEndEvent<THandlerData>
 ) => void;
 
 export type GestureTouchEventCallback = (event: GestureTouchEvent) => void;
 
 export type GestureCallbacks<THandlerData> = {
   onBegin?: GestureEventCallback<THandlerData>;
   onActivate?: GestureEventCallback<THandlerData>;
-  onDeactivate?: GestureEventCallbackWithDidSucceed<THandlerData>;
-  onFinalize?: GestureEventCallbackWithDidSucceed<THandlerData>;
+  onDeactivate?: GestureEndEventCallback<THandlerData>;
+  onFinalize?: GestureEndEventCallback<THandlerData>;
   onUpdate?: GestureEventCallback<THandlerData> | AnimatedEvent;
   onTouchesDown?: GestureTouchEventCallback;
   onTouchesMove?: GestureTouchEventCallback;

packages/react-native-gesture-handler/src/v3/types/EventTypes.ts

@@ -53,6 +53,10 @@ export type GestureEvent<THandlerData> = {
   handlerTag: number;
 } & HandlerData<THandlerData>;
 
+export type GestureEndEvent<THandlerData> = {
+  canceled: boolean;
+} & GestureEvent<THandlerData>;
+
 export type UnpackedGestureHandlerEvent<THandlerData> =
   | GestureEvent<THandlerData>
   | GestureTouchEvent;

packages/react-native-gesture-handler/src/v3/types/index.ts

@@ -15,6 +15,7 @@ export type {
   StateChangeEventWithHandlerData,
   TouchEvent,
   GestureEvent,
+  GestureEndEvent,
   AnimatedEvent,
   ChangeCalculatorType,
   DiffCalculatorType,
@@ -23,7 +24,6 @@ export type {
 export type {
   GestureCallbacks,
   GestureEventCallback,
-  GestureEventCallbackWithDidSucceed,
   GestureTouchEventCallback,
   GestureRelations,
   InternalConfigProps,