[General] Unwrap handlerData when passing event to user-defined callbacks

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

@@ -436,7 +436,7 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
     const handleRelease = useCallback(
       (event: PanGestureStateChangeEvent) => {
         'worklet';
-        let { translationX: dragX, velocityX, x: touchX } = event.handlerData;
+        let { translationX: dragX, velocityX, x: touchX } = event;
 
         if (drawerPosition !== DrawerPosition.LEFT) {
           // See description in _updateAnimatedEvent about why events are flipped
@@ -550,19 +550,19 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
         'worklet';
         const startedOutsideTranslation = isFromLeft
           ? interpolate(
-              event.handlerData.x,
+              event.x,
               [0, drawerWidth, drawerWidth + 1],
               [0, drawerWidth, drawerWidth]
             )
           : interpolate(
-              event.handlerData.x - containerWidth,
+              event.x - containerWidth,
               [-drawerWidth - 1, -drawerWidth, 0],
               [drawerWidth, drawerWidth, 0]
             );
 
         const startedInsideTranslation =
           sideCorrection *
-          (event.handlerData.translationX +
+          (event.translationX +
             (drawerOpened ? drawerWidth * -gestureOrientation : 0));
 
         const adjustedTranslation = Math.max(

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

@@ -405,8 +405,8 @@ const Swipeable = (props: SwipeableProps) => {
   const handleRelease = useCallback(
     (event: PanGestureStateChangeEvent) => {
       'worklet';
-      const { velocityX } = event.handlerData;
-      userDrag.value = event.handlerData.translationX;
+      const { velocityX } = event;
+      userDrag.value = event.translationX;
 
       const leftThresholdProp = leftThreshold ?? leftWidth.value / 2;
       const rightThresholdProp = rightThreshold ?? rightWidth.value / 2;
@@ -479,14 +479,14 @@ const Swipeable = (props: SwipeableProps) => {
     onStart: updateElementWidths,
     onUpdate: (event: PanGestureUpdateEvent) => {
       'worklet';
-      userDrag.value = event.handlerData.translationX;
+      userDrag.value = event.translationX;
 
       const direction =
         rowState.value === -1
           ? SwipeDirection.RIGHT
           : rowState.value === 1
             ? SwipeDirection.LEFT
-            : event.handlerData.translationX > 0
+            : event.translationX > 0
               ? SwipeDirection.RIGHT
               : SwipeDirection.LEFT;
 

packages/react-native-gesture-handler/src/handlers/gestures/reanimatedWrapper.ts

@@ -2,12 +2,12 @@ import { ComponentClass } from 'react';
 import { tagMessage } from '../../utils';
 import {
   GestureCallbacks,
-  GestureUpdateEvent,
+  GestureUpdateEventWithHandlerData,
   SharedValue,
 } from '../../v3/types';
 
 export type ReanimatedContext<THandlerData> = {
-  lastUpdateEvent: GestureUpdateEvent<THandlerData> | undefined;
+  lastUpdateEvent: GestureUpdateEventWithHandlerData<THandlerData> | undefined;
 };
 
 interface WorkletProps {

packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import HostGestureDetector from '../HostGestureDetector';
 import {
   VirtualChild,
-  GestureHandlerEvent,
+  GestureHandlerEventWithHandlerData,
   DetectorCallbacks,
 } from '../../types';
 import {
@@ -128,7 +128,7 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
 
   const createGestureEventHandler = useCallback(
     (key: keyof DetectorCallbacks<THandlerData>) => {
-      return (e: GestureHandlerEvent<THandlerData>) => {
+      return (e: GestureHandlerEventWithHandlerData<THandlerData>) => {
         if (typeof gesture?.detectorCallbacks[key] === 'function') {
           // @ts-expect-error passing event to a union of functions where only one is typed as such
           gesture.detectorCallbacks[key](e);
@@ -148,12 +148,14 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
 
   const getHandlers = useCallback(
     (key: keyof DetectorCallbacks<unknown>) => {
-      const handlers: ((e: GestureHandlerEvent<THandlerData>) => void)[] = [];
+      const handlers: ((
+        e: GestureHandlerEventWithHandlerData<THandlerData>
+      ) => void)[] = [];
 
       if (gesture?.detectorCallbacks[key]) {
         handlers.push(
           gesture.detectorCallbacks[key] as (
-            e: GestureHandlerEvent<unknown>
+            e: GestureHandlerEventWithHandlerData<unknown>
           ) => void
         );
       }
@@ -162,7 +164,9 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
         const handler = child.methods[key];
         if (handler) {
           handlers.push(
-            handler as (e: GestureHandlerEvent<THandlerData>) => void
+            handler as (
+              e: GestureHandlerEventWithHandlerData<THandlerData>
+            ) => void
           );
         }
       });

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

@@ -3,10 +3,11 @@ import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
 import { State } from '../../../State';
 import {
   GestureCallbacks,
-  GestureStateChangeEvent,
-  StateChangeEvent,
+  GestureStateChangeEventWithHandlerData,
+  StateChangeEventWithHandlerData,
 } from '../../types';
 import {
+  flattenEvent,
   isEventForHandlerWithTag,
   maybeExtractNativeEvent,
   runCallback,
@@ -17,12 +18,13 @@ export function getStateChangeHandler<THandlerData>(
   callbacks: GestureCallbacks<THandlerData>,
   context?: ReanimatedContext<THandlerData>
 ) {
-  return (sourceEvent: StateChangeEvent<THandlerData>) => {
+  return (sourceEvent: StateChangeEventWithHandlerData<THandlerData>) => {
     'worklet';
 
-    const event = maybeExtractNativeEvent(
+    const eventWithData = maybeExtractNativeEvent(
       sourceEvent
-    ) as GestureStateChangeEvent<THandlerData>;
+    ) as GestureStateChangeEventWithHandlerData<THandlerData>;
+    const event = flattenEvent(eventWithData);
 
     if (!isEventForHandlerWithTag(handlerTag, event)) {
       return;

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

@@ -4,10 +4,11 @@ import { ReanimatedContext } from '../../../handlers/gestures/reanimatedWrapper'
 import {
   ChangeCalculatorType,
   GestureCallbacks,
-  GestureUpdateEvent,
-  UpdateEvent,
+  GestureUpdateEventWithHandlerData,
+  UpdateEventWithHandlerData,
 } from '../../types';
 import {
+  flattenEvent,
   isEventForHandlerWithTag,
   maybeExtractNativeEvent,
   runCallback,
@@ -19,12 +20,21 @@ export function getUpdateHandler<THandlerData>(
   context: ReanimatedContext<THandlerData> | undefined,
   changeEventCalculator?: ChangeCalculatorType<THandlerData>
 ) {
-  return (sourceEvent: UpdateEvent<THandlerData>) => {
+  return (sourceEvent: UpdateEventWithHandlerData<THandlerData>) => {
     'worklet';
 
-    const event = maybeExtractNativeEvent(
+    const eventWithData = maybeExtractNativeEvent(
       sourceEvent
-    ) as GestureUpdateEvent<THandlerData>;
+    ) as GestureUpdateEventWithHandlerData<THandlerData>;
+
+    const eventWithChanges = changeEventCalculator
+      ? changeEventCalculator(
+          eventWithData,
+          context ? context.lastUpdateEvent : undefined
+        )
+      : eventWithData;
+
+    const event = flattenEvent(eventWithChanges);
 
     if (!isEventForHandlerWithTag(handlerTag, event)) {
       return;
@@ -36,14 +46,8 @@ export function getUpdateHandler<THandlerData>(
       throw new Error(tagMessage('Event handler context is not defined'));
     }
 
-    runCallback(
-      CALLBACK_TYPE.UPDATE,
-      callbacks,
-      changeEventCalculator
-        ? changeEventCalculator(event, context.lastUpdateEvent)
-        : event
-    );
+    runCallback(CALLBACK_TYPE.UPDATE, callbacks, event);
 
-    context.lastUpdateEvent = event;
+    context.lastUpdateEvent = eventWithData;
   };
 }

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

@@ -5,7 +5,7 @@ import {
 import {
   ChangeCalculatorType,
   GestureCallbacks,
-  UnpackedGestureHandlerEvent,
+  UnpackedGestureHandlerEventWithHandlerData,
 } from '../../types';
 import { getStateChangeHandler } from './stateChangeHandler';
 import { getTouchEventHandler } from './touchEventHandler';
@@ -43,7 +43,9 @@ export function useReanimatedEventHandler<THandlerData>(
 
   const touchCallback = getTouchEventHandler(handlerTag, handlers);
 
-  const callback = (event: UnpackedGestureHandlerEvent<THandlerData>) => {
+  const callback = (
+    event: UnpackedGestureHandlerEventWithHandlerData<THandlerData>
+  ) => {
     'worklet';
     if ('oldState' in event && event.oldState !== undefined) {
       stateChangeCallback(event);

packages/react-native-gesture-handler/src/v3/hooks/composition/useComposedGesture.ts

@@ -1,6 +1,6 @@
 import {
-  StateChangeEvent,
-  UpdateEvent,
+  StateChangeEventWithHandlerData,
+  UpdateEventWithHandlerData,
   TouchEvent,
   ComposedGesture,
   ComposedGestureName,
@@ -45,15 +45,19 @@ export function useComposedGesture(
     );
   }
 
-  const onGestureHandlerStateChange = (event: StateChangeEvent<unknown>) => {
+  const onGestureHandlerStateChange = (
+    event: StateChangeEventWithHandlerData<unknown>
+  ) => {
     for (const gesture of gestures) {
       if (gesture.detectorCallbacks.onGestureHandlerStateChange) {
         gesture.detectorCallbacks.onGestureHandlerStateChange(event);
       }
     }
   };
 
-  const onGestureHandlerEvent = (event: UpdateEvent<unknown>) => {
+  const onGestureHandlerEvent = (
+    event: UpdateEventWithHandlerData<unknown>
+  ) => {
     for (const gesture of gestures) {
       if (gesture.detectorCallbacks.onGestureHandlerEvent) {
         gesture.detectorCallbacks.onGestureHandlerEvent(event);

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

@@ -1,7 +1,11 @@
 import { useGestureStateChangeEvent } from './callbacks/js/useGestureStateChangeEvent';
 import { useGestureUpdateEvent } from './callbacks/js/useGestureUpdateEvent';
 import { useGestureTouchEvent } from './callbacks/js/useGestureTouchEvent';
-import { AnimatedEvent, BaseGestureConfig, GestureUpdateEvent } from '../types';
+import {
+  AnimatedEvent,
+  BaseGestureConfig,
+  GestureUpdateEventWithHandlerData,
+} from '../types';
 import {
   checkMappingForChangeProperties,
   isNativeAnimatedEvent,
@@ -82,7 +86,7 @@ export function useGestureCallbacks<THandlerData, TConfig>(
   }
 
   let onGestureHandlerAnimatedEvent:
-    | ((event: GestureUpdateEvent<THandlerData>) => void)
+    | ((event: GestureUpdateEventWithHandlerData<THandlerData>) => void)
     | AnimatedEvent
     | undefined;
   if (config.dispatchesAnimatedEvents) {
@@ -94,6 +98,7 @@ export function useGestureCallbacks<THandlerData, TConfig>(
       // @ts-expect-error At this point we know it's not a native animated event, so it's callable
       onGestureHandlerAnimatedEvent = guardJSAnimatedEvent(config.onUpdate);
     } else {
+      // @ts-expect-error The structure of an AnimatedEvent differs from other event types
       onGestureHandlerAnimatedEvent = config.onUpdate;
     }
   }

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

@@ -2,8 +2,8 @@ import { TouchEventType } from '../../../TouchEventType';
 import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
 import {
   ChangeCalculatorType,
-  UnpackedGestureHandlerEvent,
   GestureCallbacks,
+  UnpackedGestureHandlerEvent,
 } from '../../types';
 
 export function prepareStateChangeHandlers<THandlerData>(

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

@@ -4,33 +4,52 @@ import {
   BaseGestureConfig,
   ChangeCalculatorType,
   DiffCalculatorType,
-  UnpackedGestureHandlerEvent,
-  GestureHandlerEvent,
-  GestureStateChangeEvent,
+  GestureHandlerEventWithHandlerData,
+  GestureStateChangeEventWithHandlerData,
+  GestureUpdateEventWithHandlerData,
   GestureUpdateEvent,
+  GestureStateChangeEvent,
+  UnpackedGestureHandlerEvent,
 } from '../../types';
 import { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
 import { tagMessage } from '../../../utils';
 
 export function isNativeEvent<THandlerData>(
-  event: GestureHandlerEvent<THandlerData>
+  event: GestureHandlerEventWithHandlerData<THandlerData>
 ): event is
-  | NativeSyntheticEvent<GestureUpdateEvent<THandlerData>>
-  | NativeSyntheticEvent<GestureStateChangeEvent<THandlerData>>
+  | NativeSyntheticEvent<GestureUpdateEventWithHandlerData<THandlerData>>
+  | NativeSyntheticEvent<GestureStateChangeEventWithHandlerData<THandlerData>>
   | NativeSyntheticEvent<GestureTouchEvent> {
   'worklet';
 
   return 'nativeEvent' in event;
 }
 
 export function maybeExtractNativeEvent<THandlerData>(
-  event: GestureHandlerEvent<THandlerData>
+  event: GestureHandlerEventWithHandlerData<THandlerData>
 ) {
   'worklet';
 
   return isNativeEvent(event) ? event.nativeEvent : event;
 }
 
+export function flattenEvent<THandlerData>(
+  event: GestureStateChangeEventWithHandlerData<THandlerData>
+): GestureStateChangeEvent<THandlerData>;
+export function flattenEvent<THandlerData>(
+  event: GestureUpdateEventWithHandlerData<THandlerData>
+): GestureUpdateEvent<THandlerData>;
+export function flattenEvent<THandlerData>(
+  event:
+    | GestureUpdateEventWithHandlerData<THandlerData>
+    | GestureStateChangeEventWithHandlerData<THandlerData>
+) {
+  'worklet';
+
+  const { handlerData, ...rest } = event;
+  return { ...rest, ...handlerData };
+}
+
 export function isEventForHandlerWithTag<THandlerData>(
   handlerTag: number,
   event: UnpackedGestureHandlerEvent<THandlerData>
@@ -86,8 +105,8 @@ export function getChangeEventCalculator<THandlerData>(
 ): ChangeCalculatorType<THandlerData> {
   'worklet';
   return (
-    current: GestureUpdateEvent<THandlerData>,
-    previous?: GestureUpdateEvent<THandlerData>
+    current: GestureUpdateEventWithHandlerData<THandlerData>,
+    previous?: GestureUpdateEventWithHandlerData<THandlerData>
   ) => {
     'worklet';
     const currentEventData = current.handlerData;