[General] Unwrap handlerData when passing event to user-defined callbacks (#3840)

## Description

Due to how codegen is structured, we rely on a dynamic `handlerData`
field in events so we don't have to define an event handler for each
event type we may be sending. Currently, this is reflected in the API -
when reading data from events, it needs to be read from `handlerData`.

This PR adds flattened types and a flatten step to get rid of that step,
so that data can be read directly from the event.

This doesn't impact animated, so the event mapping there needs to
include both `nativeEvent` and `handlerData`.

## Test plan

`console.log` the events

Author: j-piasecki

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>(