[Types] Remove onUpdate from discrete gestures (#3811)

j-piasecki · web-flow · commit 7b2ecaa91092 · 2025-11-12T16:26:51.000+01:00
## Description

Discrete gestures shouldn't be sending `update` events, so the
`onUpdate` method shouldn't be accepted by the type definitions.

It also moves the type definitions for events and gestures above the
hook definition. I'm pretty sure it was also correct before, but I think
it's cleaner when things are declared before they are used. LMK what you
think.

## Test plan

```
  const tap = useTap({
    onUpdate: () =&gt; {
      'worklet';
    },
  });

  const fling = useFling({
    onUpdate: () =&gt; {
      'worklet';
    },
  });

  const longpress = useLongPress({
    onUpdate: () =&gt; {
      'worklet';
    },
  });

  const native = useNative({
    onUpdate: () =&gt; {
      'worklet';
    },
  });
```
diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/fling/useFling.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/fling/useFling.ts
@@ -1,5 +1,5 @@
 import {
-  BaseGestureConfig,
+  BaseDiscreteGestureConfig,
   ExcludeInternalConfigProps,
   SingleGesture,
   SingleGestureName,
@@ -20,27 +20,28 @@ type FlingHandlerData = {
 
 type FlingGestureProperties = WithSharedValue<FlingGestureNativeProperties>;
 
-type FlingGestureInternalConfig = BaseGestureConfig<
+type FlingGestureInternalConfig = BaseDiscreteGestureConfig<
   FlingHandlerData,
   FlingGestureProperties
 >;
 
 export type FlingGestureConfig =
   ExcludeInternalConfigProps<FlingGestureInternalConfig>;
 
-export function useFling(config: FlingGestureConfig) {
-  const flingConfig = cloneConfig<FlingHandlerData, FlingGestureProperties>(
-    config
-  );
-
-  return useGesture(SingleGestureName.Fling, flingConfig);
-}
-
 export type FlingGestureStateChangeEvent =
   GestureStateChangeEvent<FlingHandlerData>;
+
 export type FlingGestureUpdateEvent = GestureUpdateEvent<FlingHandlerData>;
 
 export type FlingGesture = SingleGesture<
   FlingHandlerData,
   FlingGestureProperties
 >;
+
+export function useFling(config: FlingGestureConfig): FlingGesture {
+  const flingConfig = cloneConfig<FlingHandlerData, FlingGestureProperties>(
+    config
+  );
+
+  return useGesture(SingleGestureName.Fling, flingConfig);
+}
diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/hover/useHover.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/hover/useHover.ts
@@ -37,6 +37,16 @@ type HoverGestureInternalConfig = BaseGestureConfig<
 export type HoverGestureConfig =
   ExcludeInternalConfigProps<HoverGestureInternalConfig>;
 
+export type HoverGestureStateChangeEvent =
+  GestureStateChangeEvent<HoverHandlerData>;
+
+export type HoverGestureUpdateEvent = GestureUpdateEvent<HoverHandlerData>;
+
+export type HoverGesture = SingleGesture<
+  HoverHandlerData,
+  HoverGestureProperties
+>;
+
 function diffCalculator(
   current: HandlerData<HoverHandlerData>,
   previous: HandlerData<HoverHandlerData> | null
@@ -48,7 +58,7 @@ function diffCalculator(
   };
 }
 
-export function useHover(config: HoverGestureConfig) {
+export function useHover(config: HoverGestureConfig): HoverGesture {
   const hoverConfig = cloneConfig<HoverHandlerData, HoverGestureProperties>(
     config
   );
@@ -57,12 +67,3 @@ export function useHover(config: HoverGestureConfig) {
 
   return useGesture(SingleGestureName.Hover, hoverConfig);
 }
-
-export type HoverGestureStateChangeEvent =
-  GestureStateChangeEvent<HoverHandlerData>;
-export type HoverGestureUpdateEvent = GestureUpdateEvent<HoverHandlerData>;
-
-export type HoverGesture = SingleGesture<
-  HoverHandlerData,
-  HoverGestureProperties
->;
diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/longPress/useLongPress.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/longPress/useLongPress.ts
@@ -1,5 +1,5 @@
 import {
-  BaseGestureConfig,
+  BaseDiscreteGestureConfig,
   ExcludeInternalConfigProps,
   SingleGesture,
   SingleGestureName,
@@ -29,14 +29,25 @@ type LongPressGestureInternalProperties =
   WithSharedValue<LongPressGestureNativeProperties>;
 
 export type LongPressGestureConfig = ExcludeInternalConfigProps<
-  BaseGestureConfig<LongPressHandlerData, LongPressGestureProperties>
+  BaseDiscreteGestureConfig<LongPressHandlerData, LongPressGestureProperties>
 >;
 
-type LongPressGestureInternalConfig = BaseGestureConfig<
+type LongPressGestureInternalConfig = BaseDiscreteGestureConfig<
   LongPressHandlerData,
   LongPressGestureInternalProperties
 >;
 
+export type LongPressGestureStateChangeEvent =
+  GestureStateChangeEvent<LongPressHandlerData>;
+
+export type LongPressGestureUpdateEvent =
+  GestureUpdateEvent<LongPressHandlerData>;
+
+export type LongPressGesture = SingleGesture<
+  LongPressHandlerData,
+  LongPressGestureProperties
+>;
+
 const LongPressPropsMapping = new Map<
   keyof LongPressGestureProperties,
   keyof LongPressGestureInternalProperties
@@ -45,7 +56,7 @@ const LongPressPropsMapping = new Map<
   ['maxDistance', 'maxDist'],
 ]);
 
-export function useLongPress(config: LongPressGestureConfig) {
+export function useLongPress(config: LongPressGestureConfig): LongPressGesture {
   const longPressConfig = cloneConfig<
     LongPressHandlerData,
     LongPressGestureInternalProperties
@@ -65,13 +76,3 @@ export function useLongPress(config: LongPressGestureConfig) {
     longPressConfig
   );
 }
-
-export type LongPressGestureStateChangeEvent =
-  GestureStateChangeEvent<LongPressHandlerData>;
-export type LongPressGestureUpdateEvent =
-  GestureUpdateEvent<LongPressHandlerData>;
-
-export type LongPressGesture = SingleGesture<
-  LongPressHandlerData,
-  LongPressGestureProperties
->;
diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/manual/useManual.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/manual/useManual.ts
@@ -18,17 +18,10 @@ type ManualGestureInternalConfig = BaseGestureConfig<
   ManualHandlerData,
   ManualGestureProperties
 >;
+
 export type ManualGestureConfig =
   ExcludeInternalConfigProps<ManualGestureInternalConfig>;
 
-export function useManual(config: ManualGestureConfig) {
-  const manualConfig = cloneConfig<ManualHandlerData, ManualGestureProperties>(
-    config
-  );
-
-  return useGesture(SingleGestureName.Manual, manualConfig);
-}
-
 export type ManualGestureStateChangeEvent =
   GestureStateChangeEvent<ManualHandlerData>;
 export type ManualGestureUpdateEvent = GestureUpdateEvent<ManualHandlerData>;
@@ -37,3 +30,11 @@ export type ManualGesture = SingleGesture<
   ManualHandlerData,
   ManualGestureProperties
 >;
+
+export function useManual(config: ManualGestureConfig): ManualGesture {
+  const manualConfig = cloneConfig<ManualHandlerData, ManualGestureProperties>(
+    config
+  );
+
+  return useGesture(SingleGestureName.Manual, manualConfig);
+}
diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/native/useNative.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/native/useNative.ts
@@ -1,5 +1,5 @@
 import {
-  BaseGestureConfig,
+  BaseDiscreteGestureConfig,
   ExcludeInternalConfigProps,
   SingleGesture,
   SingleGestureName,
@@ -18,29 +18,30 @@ type NativeViewHandlerData = {
 type NativeViewGestureProperties =
   WithSharedValue<NativeGestureNativeProperties>;
 
-type NativeViewGestureInternalConfig = BaseGestureConfig<
+type NativeViewGestureInternalConfig = BaseDiscreteGestureConfig<
   NativeViewHandlerData,
   NativeViewGestureProperties
 >;
 
 export type NativeViewGestureConfig =
   ExcludeInternalConfigProps<NativeViewGestureInternalConfig>;
 
-export function useNative(config: NativeViewGestureConfig) {
-  const nativeConfig = cloneConfig<
-    NativeViewHandlerData,
-    NativeViewGestureProperties
-  >(config);
-
-  return useGesture(SingleGestureName.Native, nativeConfig);
-}
-
 export type NativeGestureStateChangeEvent =
   GestureStateChangeEvent<NativeViewHandlerData>;
+
 export type NativeGestureUpdateEvent =
   GestureUpdateEvent<NativeViewHandlerData>;
 
 export type NativeGesture = SingleGesture<
   NativeViewHandlerData,
   NativeViewGestureProperties
 >;
+
+export function useNative(config: NativeViewGestureConfig): NativeGesture {
+  const nativeConfig = cloneConfig<
+    NativeViewHandlerData,
+    NativeViewGestureProperties
+  >(config);
+
+  return useGesture(SingleGestureName.Native, nativeConfig);
+}
diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/pan/usePan.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/pan/usePan.ts
@@ -51,6 +51,13 @@ type PanGestureInternalConfig = BaseGestureConfig<
   PanGestureInternalProperties
 >;
 
+export type PanGestureStateChangeEvent =
+  GestureStateChangeEvent<PanHandlerData>;
+
+export type PanGestureUpdateEvent = GestureUpdateEvent<PanHandlerData>;
+
+export type PanGesture = SingleGesture<PanHandlerData, PanGestureProperties>;
+
 const PanPropsMapping = new Map<
   keyof PanGestureProperties,
   keyof PanGestureInternalProperties
@@ -154,7 +161,7 @@ function diffCalculator(
   };
 }
 
-export function usePan(config: PanGestureConfig) {
+export function usePan(config: PanGestureConfig): PanGesture {
   if (__DEV__) {
     validatePanConfig(config);
   }
@@ -177,9 +184,3 @@ export function usePan(config: PanGestureConfig) {
     panConfig
   );
 }
-
-export type PanGestureStateChangeEvent =
-  GestureStateChangeEvent<PanHandlerData>;
-export type PanGestureUpdateEvent = GestureUpdateEvent<PanHandlerData>;
-
-export type PanGesture = SingleGesture<PanHandlerData, PanGestureProperties>;
diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/pinch/usePinch.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/pinch/usePinch.ts
@@ -29,6 +29,16 @@ type PinchGestureInternalConfig = BaseGestureConfig<
 export type PinchGestureConfig =
   ExcludeInternalConfigProps<PinchGestureInternalConfig>;
 
+export type PinchGestureStateChangeEvent =
+  GestureStateChangeEvent<PinchHandlerData>;
+
+export type PinchGestureUpdateEvent = GestureUpdateEvent<PinchHandlerData>;
+
+export type PinchGesture = SingleGesture<
+  PinchHandlerData,
+  PinchGestureProperties
+>;
+
 function diffCalculator(
   current: HandlerData<PinchHandlerData>,
   previous: HandlerData<PinchHandlerData> | null
@@ -39,7 +49,7 @@ function diffCalculator(
   };
 }
 
-export function usePinch(config: PinchGestureConfig) {
+export function usePinch(config: PinchGestureConfig): PinchGesture {
   const pinchConfig = cloneConfig<PinchHandlerData, PinchGestureProperties>(
     config
   );
@@ -48,12 +58,3 @@ export function usePinch(config: PinchGestureConfig) {
 
   return useGesture(SingleGestureName.Pinch, pinchConfig);
 }
-
-export type PinchGestureStateChangeEvent =
-  GestureStateChangeEvent<PinchHandlerData>;
-export type PinchGestureUpdateEvent = GestureUpdateEvent<PinchHandlerData>;
-
-export type PinchGesture = SingleGesture<
-  PinchHandlerData,
-  PinchGestureProperties
->;
diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/rotation/useRotation.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/rotation/useRotation.ts
@@ -29,6 +29,17 @@ type RotationGestureInternalConfig = BaseGestureConfig<
 export type RotationGestureConfig =
   ExcludeInternalConfigProps<RotationGestureInternalConfig>;
 
+export type RotationGestureStateChangeEvent =
+  GestureStateChangeEvent<RotationHandlerData>;
+
+export type RotationGestureUpdateEvent =
+  GestureUpdateEvent<RotationHandlerData>;
+
+export type RotationGesture = SingleGesture<
+  RotationHandlerData,
+  RotationGestureProperties
+>;
+
 function diffCalculator(
   current: HandlerData<RotationHandlerData>,
   previous: HandlerData<RotationHandlerData> | null
@@ -41,7 +52,7 @@ function diffCalculator(
   };
 }
 
-export function useRotation(config: RotationGestureConfig) {
+export function useRotation(config: RotationGestureConfig): RotationGesture {
   const rotationConfig = cloneConfig<
     RotationHandlerData,
     RotationGestureProperties
@@ -52,13 +63,3 @@ export function useRotation(config: RotationGestureConfig) {
 
   return useGesture(SingleGestureName.Rotation, rotationConfig);
 }
-
-export type RotationGestureStateChangeEvent =
-  GestureStateChangeEvent<RotationHandlerData>;
-export type RotationGestureUpdateEvent =
-  GestureUpdateEvent<RotationHandlerData>;
-
-export type RotationGesture = SingleGesture<
-  RotationHandlerData,
-  RotationGestureProperties
->;
diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/tap/useTap.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/tap/useTap.ts
@@ -1,9 +1,9 @@
 import {
-  BaseGestureConfig,
+  BaseDiscreteGestureConfig,
   ExcludeInternalConfigProps,
   GestureStateChangeEvent,
   GestureUpdateEvent,
-  SingleGesture,
+  DiscreteSingleGesture,
   SingleGestureName,
   WithSharedValue,
 } from '../../../types';
@@ -26,14 +26,24 @@ type TapGestureProperties = WithSharedValue<TapGestureExternalConfig>;
 type TapGestureInternalProperties = WithSharedValue<TapGestureNativeConfig>;
 
 export type TapGestureConfig = ExcludeInternalConfigProps<
-  BaseGestureConfig<TapHandlerData, TapGestureProperties>
+  BaseDiscreteGestureConfig<TapHandlerData, TapGestureProperties>
 >;
 
-type TapGestureInternalConfig = BaseGestureConfig<
+type TapGestureInternalConfig = BaseDiscreteGestureConfig<
   TapHandlerData,
   TapGestureInternalProperties
 >;
 
+export type TapGestureStateChangeEvent =
+  GestureStateChangeEvent<TapHandlerData>;
+
+export type TapGestureUpdateEvent = GestureUpdateEvent<TapHandlerData>;
+
+export type TapGesture = DiscreteSingleGesture<
+  TapHandlerData,
+  TapGestureProperties
+>;
+
 const TapPropsMapping = new Map<
   keyof TapGestureProperties,
   keyof TapGestureInternalProperties
@@ -43,7 +53,7 @@ const TapPropsMapping = new Map<
   ['maxDelay', 'maxDelayMs'],
 ]);
 
-export function useTap(config: TapGestureConfig) {
+export function useTap(config: TapGestureConfig): TapGesture {
   const tapConfig = cloneConfig<TapHandlerData, TapGestureInternalProperties>(
     config
   );
@@ -58,9 +68,3 @@ export function useTap(config: TapGestureConfig) {
     tapConfig
   );
 }
-
-export type TapGestureStateChangeEvent =
-  GestureStateChangeEvent<TapHandlerData>;
-export type TapGestureUpdateEvent = GestureUpdateEvent<TapHandlerData>;
-
-export type TapGesture = SingleGesture<TapHandlerData, TapGestureProperties>;
diff --git a/packages/react-native-gesture-handler/src/v3/types/GestureTypes.ts b/packages/react-native-gesture-handler/src/v3/types/GestureTypes.ts
