Split HandlerData

apps/common-app/src/new_api/complicated/velocity_test/index.tsx

@@ -33,11 +33,7 @@ export default function App() {
       offsetX.value += event.changeX;
       offsetY.value += event.changeY;
     },
-    onFinalize: (event) => {
-      isPressed.value = false;
-      colorProgress.value = withTiming(0, {
-        duration: 100,
-      });
+    onDeactivate: (event) => {
       // If we can't get view size, just ignore it. Half of the view will be
       // able to go outside the screen
       const size = measure(aref) ?? { width: 0, height: 0 };
@@ -59,6 +55,13 @@ export default function App() {
         rubberBandFactor: 0.75,
       });
     },
+    onFinalize: () => {
+      isPressed.value = false;
+
+      colorProgress.value = withTiming(0, {
+        duration: 100,
+      });
+    },
   });
 
   const animatedStyles = useAnimatedStyle(() => {

apps/common-app/src/new_api/showcase/bottom_sheet/index.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import {
   GestureDetector,
-  PanGestureEvent,
+  PanGestureActiveEvent,
   useSimultaneousGestures,
   usePanGesture,
   useTapGesture,
@@ -35,7 +35,7 @@ function Example() {
   const scrollOffset = useSharedValue(0);
   const bottomSheetTranslateY = useSharedValue(CLOSED_SNAP_POINT);
 
-  const onHandlerDeactivate = (e: PanGestureEvent) => {
+  const onHandlerDeactivate = (e: PanGestureActiveEvent) => {
     const dragToss = 0.01;
     const endOffsetY =
       bottomSheetTranslateY.value + translationY.value + e.velocityY * dragToss;

packages/react-native-gesture-handler/src/__tests__/RelationsTraversal.test.tsx

@@ -9,10 +9,10 @@ import { configureRelations } from '../v3/detectors/utils';
 import { SingleGesture, SingleGestureName } from '../v3/types';
 import { renderHook } from '@testing-library/react-native';
 
+type AnySingleGesture = SingleGesture<unknown, unknown, unknown>;
+
 describe('Ensure only one leaf node', () => {
-  let pan1: SingleGesture<unknown, unknown>,
-    pan2: SingleGesture<unknown, unknown>,
-    pan3: SingleGesture<unknown, unknown>;
+  let pan1: AnySingleGesture, pan2: AnySingleGesture, pan3: AnySingleGesture;
 
   beforeEach(() => {
     pan1 = renderHook(() =>
@@ -55,8 +55,8 @@ describe('Ensure only one leaf node', () => {
 });
 
 describe('Simple relations', () => {
-  let pan1: SingleGesture<unknown, unknown>,
-    pan2: SingleGesture<unknown, unknown>;
+  let pan1: SingleGesture<unknown, unknown, unknown>,
+    pan2: SingleGesture<unknown, unknown, unknown>;
 
   beforeEach(() => {
     pan1 = renderHook(() =>
@@ -203,12 +203,8 @@ describe('External relations', () => {
 });
 
 describe('Complex relations', () => {
-  let pan1: SingleGesture<unknown, unknown>,
-    pan2: SingleGesture<unknown, unknown>,
-    pan3: SingleGesture<unknown, unknown>;
-  let tap1: SingleGesture<unknown, unknown>,
-    tap2: SingleGesture<unknown, unknown>,
-    tap3: SingleGesture<unknown, unknown>;
+  let pan1: AnySingleGesture, pan2: AnySingleGesture, pan3: AnySingleGesture;
+  let tap1: AnySingleGesture, tap2: AnySingleGesture, tap3: AnySingleGesture;
 
   beforeEach(() => {
     tap1 = renderHook(() =>

packages/react-native-gesture-handler/src/components/Pressable/utils.ts

@@ -1,19 +1,20 @@
 import { Insets } from 'react-native';
-import {
+import type {
   HoverGestureHandlerEventPayload,
   LongPressGestureHandlerEventPayload,
 } from '../../handlers/GestureHandlerEventPayload';
-import {
+import type {
   TouchData,
   GestureStateChangeEvent,
   GestureTouchEvent,
 } from '../../handlers/gestureHandlerCommon';
-import {
+import type {
   PressableDimensions,
   InnerPressableEvent,
   PressableEvent,
 } from './PressableProps';
-import { HoverGestureEvent, LongPressGestureEvent } from '../../v3';
+import type { HoverGestureEvent, LongPressGestureEvent } from '../../v3';
+import type { HoverGestureActiveEvent } from '../../v3/hooks';
 
 const numberAsInset = (value: number): Insets => ({
   left: value,
@@ -51,6 +52,7 @@ const gestureToPressEvent = (
         HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
       >
     | HoverGestureEvent
+    | HoverGestureActiveEvent
     | LongPressGestureEvent,
   timestamp: number,
   targetId: number
@@ -82,6 +84,7 @@ const gestureToPressableEvent = (
         HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
       >
     | HoverGestureEvent
+    | HoverGestureActiveEvent
     | LongPressGestureEvent
 ): PressableEvent => {
   const timestamp = Date.now();

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

@@ -43,7 +43,7 @@ import {
   HitSlop,
 } from '../handlers/gestureHandlerCommon';
 import {
-  PanGestureEvent,
+  PanGestureActiveEvent,
   usePanGesture,
   useTapGesture,
 } from '../v3/hooks/gestures';
@@ -434,7 +434,7 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
     );
 
     const handleRelease = useCallback(
-      (event: PanGestureEvent) => {
+      (event: PanGestureActiveEvent) => {
         'worklet';
         let { translationX: dragX, velocityX, x: touchX } = event;
 

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

@@ -17,7 +17,7 @@ import {
   SwipeDirection,
 } from './ReanimatedSwipeableProps';
 import {
-  PanGestureEvent,
+  PanGestureActiveEvent,
   usePanGesture,
   useTapGesture,
 } from '../../v3/hooks/gestures';
@@ -402,7 +402,7 @@ const Swipeable = (props: SwipeableProps) => {
   );
 
   const handleRelease = useCallback(
-    (event: PanGestureEvent) => {
+    (event: PanGestureActiveEvent) => {
       'worklet';
       const { velocityX } = event;
       userDrag.value = event.translationX;
@@ -476,7 +476,7 @@ const Swipeable = (props: SwipeableProps) => {
     block,
     hitSlop: hitSlop,
     onActivate: updateElementWidths,
-    onUpdate: (event: PanGestureEvent) => {
+    onUpdate: (event: PanGestureActiveEvent) => {
       'worklet';
       userDrag.value = event.translationX;
 
@@ -500,7 +500,7 @@ const Swipeable = (props: SwipeableProps) => {
 
       updateAnimatedEvent();
     },
-    onDeactivate: (event: PanGestureEvent) => {
+    onDeactivate: (event: PanGestureActiveEvent) => {
       'worklet';
       handleRelease(event);
     },

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

@@ -53,9 +53,9 @@ let Reanimated:
         ): ComponentClass<P>;
       };
       NativeEventsManager: NativeEventsManager;
-      useHandler: <THandlerData>(
-        handlers: GestureCallbacks<THandlerData>
-      ) => ReanimatedHandler<THandlerData>;
+      useHandler: <THandlerData, TExtendedHandlerData extends THandlerData>(
+        handlers: GestureCallbacks<THandlerData, TExtendedHandlerData>
+      ) => ReanimatedHandler<TExtendedHandlerData>;
       useEvent: <T>(
         callback: (event: T) => void,
         events: string[],

packages/react-native-gesture-handler/src/handlers/handlersRegistry.ts

@@ -8,14 +8,18 @@ export const handlerIDToTag: Record<string, number> = {};
 // There were attempts to create types that merge possible HandlerData and Config,
 // but ts was not able to infer them properly in many cases, so we use any here.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const hookGestures = new Map<number, SingleGesture<any, any>>();
+const hookGestures = new Map<number, SingleGesture<any, any, any>>();
 const gestures = new Map<number, GestureType>();
 const oldHandlers = new Map<number, GestureHandlerCallbacks>();
 const testIDs = new Map<string, number>();
 
-export function registerGesture<THandlerData, TConfig>(
+export function registerGesture<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
   handlerTag: number,
-  gesture: SingleGesture<THandlerData, TConfig>
+  gesture: SingleGesture<TConfig, THandlerData, TExtendedHandlerData>
 ) {
   if (isTestEnv() && gesture.config.testID) {
     hookGestures.set(handlerTag, gesture);

packages/react-native-gesture-handler/src/jestUtils/jestUtils.ts

@@ -166,14 +166,17 @@ const handlersDefaultEvents: DefaultEventsMapping = {
 };
 
 function isGesture(
-  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>
+  componentOrGesture:
+    | ReactTestInstance
+    | GestureType
+    | SingleGesture<any, any, any>
 ): componentOrGesture is GestureType {
   return componentOrGesture instanceof BaseGesture;
 }
 
 function isHookGesture(
-  componentOrGesture: ReactTestInstance | SingleGesture<any, any>
-): componentOrGesture is SingleGesture<any, any> {
+  componentOrGesture: ReactTestInstance | SingleGesture<any, any, any>
+): componentOrGesture is SingleGesture<any, any, any> {
   return 'detectorCallbacks' in componentOrGesture;
 }
 
@@ -416,7 +419,10 @@ interface HandlerData {
   enabled: boolean | undefined;
 }
 function getHandlerData(
-  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>
+  componentOrGesture:
+    | ReactTestInstance
+    | GestureType
+    | SingleGesture<any, any, any>
 ): HandlerData {
   if (isGesture(componentOrGesture)) {
     const gesture = componentOrGesture;
@@ -500,7 +506,10 @@ type ExtractConfig<T> =
       : Record<string, unknown>;
 
 export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
-  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>,
+  componentOrGesture:
+    | ReactTestInstance
+    | GestureType
+    | SingleGesture<any, any, any>,
   eventList: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[] = []
 ): void {
   const { emitEvent, handlerType, handlerTag, enabled } =

packages/react-native-gesture-handler/src/v3/NativeProxy.ts

@@ -22,9 +22,13 @@ export const NativeProxy = {
       config || {}
     );
   },
-  setGestureHandlerConfig: <THandlerData, TConfig>(
+  setGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     scheduleOperationToBeFlushed(() => {
       RNGestureHandlerModule.setGestureHandlerConfig(handlerTag, newConfig);
@@ -33,9 +37,13 @@ export const NativeProxy = {
   // updateGestureHandlerConfig can be called on the UI thread when using
   // SharedValue binding. Therefore, it needs to be a worklet and we flush
   // immediately since we're likely already on the UI thread.
-  updateGestureHandlerConfig: <THandlerData, TConfig>(
+  updateGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     'worklet';
     updateGestureHandlerConfig(handlerTag, newConfig);

packages/react-native-gesture-handler/src/v3/NativeProxy.web.ts

@@ -17,15 +17,23 @@ export const NativeProxy = {
       config || {}
     );
   },
-  setGestureHandlerConfig: <THandlerData, TConfig>(
+  setGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     RNGestureHandlerModule.setGestureHandlerConfig(handlerTag, newConfig);
   },
-  updateGestureHandlerConfig: <THandlerData, TConfig>(
+  updateGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     RNGestureHandlerModule.updateGestureHandlerConfig(handlerTag, newConfig);
   },

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

@@ -9,9 +9,9 @@ import type {
 } from './GestureButtonsProps';
 
 import type { GestureEvent } from '../types';
-import type { NativeViewHandlerData } from '../hooks/gestures/native/useNativeGesture';
+import type { NativeHandlerData } from '../hooks/gestures/native/NativeTypes';
 
-type CallbackEventType = GestureEvent<NativeViewHandlerData>;
+type CallbackEventType = GestureEvent<NativeHandlerData>;
 
 export const RawButton = createNativeWrapper(GestureHandlerButton, {
   shouldCancelWhenOutside: false,

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

@@ -14,10 +14,10 @@ import {
 
 import createNativeWrapper from '../createNativeWrapper';
 
-import { NativeWrapperProperties } from '../types/NativeWrapperType';
-import { NativeWrapperProps } from '../hooks/utils';
+import type { NativeWrapperProperties } from '../types/NativeWrapperType';
+import type { NativeWrapperProps } from '../hooks/utils';
 import { GestureDetectorType } from '../detectors';
-import { NativeGesture } from '../hooks/gestures/native/useNativeGesture';
+import type { NativeGesture } from '../hooks/gestures/native/NativeTypes';
 import { ghQueueMicrotask } from '../../ghQueueMicrotask';
 
 export const RefreshControl = createNativeWrapper<

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

@@ -8,8 +8,14 @@ import {
 } from '../../handlers/gestures/GestureDetector';
 import { useEnsureGestureHandlerRootView } from './useEnsureGestureHandlerRootView';
 
-export function GestureDetector<THandlerData, TConfig>(
-  props: NativeDetectorProps<THandlerData, TConfig> | LegacyGestureDetectorProps
+export function GestureDetector<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  props:
+    | NativeDetectorProps<TConfig, THandlerData, TExtendedHandlerData>
+    | LegacyGestureDetectorProps
 ) {
   useEnsureGestureHandlerRootView();
 
@@ -22,7 +28,11 @@ export function GestureDetector<THandlerData, TConfig>(
 
   return (
     <NativeDetector
-      {...(props as NativeDetectorProps<THandlerData, TConfig>)}
+      {...(props as NativeDetectorProps<
+        TConfig,
+        THandlerData,
+        TExtendedHandlerData
+      >)}
     />
   );
 }

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

@@ -10,13 +10,17 @@ import {
 import { ReanimatedNativeDetector } from './ReanimatedNativeDetector';
 import { Platform } from 'react-native';
 
-export function NativeDetector<THandlerData, TConfig>({
+export function NativeDetector<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>({
   gesture,
   children,
   touchAction,
   userSelect,
   enableContextMenu,
-}: NativeDetectorProps<THandlerData, TConfig>) {
+}: NativeDetectorProps<TConfig, THandlerData, TExtendedHandlerData>) {
   const NativeDetectorComponent = gesture.config.dispatchesAnimatedEvents
     ? AnimatedNativeDetector
     : gesture.config.shouldUseReanimatedDetector