Typed gesture hooks

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

@@ -170,4 +170,6 @@ export * from './v3/hooks/relations';
 
 export { SingleGestureName } from './v3/types';
 
+export * from './v3/hooks/gestures';
+
 initialize();

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

@@ -7,9 +7,9 @@ import { tagMessage } from '../../utils';
 import { configureRelations } from './utils';
 import { isComposedGesture } from '../hooks/utils/relationUtils';
 
-export interface NativeDetectorProps {
+export interface NativeDetectorProps<THandlerData, TConfig> {
   children?: React.ReactNode;
-  gesture: Gesture;
+  gesture: Gesture<THandlerData, TConfig>;
 }
 
 const AnimatedNativeDetector =
@@ -18,7 +18,10 @@ const AnimatedNativeDetector =
 const ReanimatedNativeDetector =
   Reanimated?.default.createAnimatedComponent(HostGestureDetector);
 
-export function NativeDetector({ gesture, children }: NativeDetectorProps) {
+export function NativeDetector<THandlerData, TConfig>({
+  gesture,
+  children,
+}: NativeDetectorProps<THandlerData, TConfig>) {
   const NativeDetectorComponent = gesture.config.dispatchesAnimatedEvents
     ? AnimatedNativeDetector
     : gesture.config.shouldUseReanimated
@@ -38,25 +41,25 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
 
   return (
     <NativeDetectorComponent
-      // @ts-ignore TODO: Fix types
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
       onGestureHandlerStateChange={
         gesture.gestureEvents.onGestureHandlerStateChange
       }
-      // @ts-ignore TODO: Fix types
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
       onGestureHandlerEvent={gesture.gestureEvents.onGestureHandlerEvent}
-      // @ts-ignore TODO: Fix types
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
       onGestureHandlerTouchEvent={
         gesture.gestureEvents.onGestureHandlerTouchEvent
       }
-      // @ts-ignore TODO: Fix types
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
       onGestureHandlerReanimatedStateChange={
         gesture.gestureEvents.onReanimatedStateChange
       }
-      // @ts-ignore TODO: Fix types
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
       onGestureHandlerReanimatedEvent={
         gesture.gestureEvents.onReanimatedUpdateEvent
       }
-      // @ts-ignore TODO: Fix types
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
       onGestureHandlerReanimatedTouchEvent={
         gesture.gestureEvents.onReanimatedTouchEvent
       }

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

@@ -126,7 +126,9 @@ export const traverseAndConfigureRelations = (
   });
 };
 
-export function configureRelations(gesture: Gesture) {
+export function configureRelations<THandlerData, TConfig>(
+  gesture: Gesture<THandlerData, TConfig>
+) {
   if (isComposedGesture(gesture)) {
     const simultaneousHandlers = new Set<number>(
       gesture.externalSimultaneousHandlers

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

@@ -0,0 +1,26 @@
+export type { TapGestureConfig } from './useTap';
+export { useTap } from './useTap';
+
+export type { FlingGestureConfig } from './useFling';
+export { useFling } from './useFling';
+
+export type { LongPressGestureConfig } from './useLongPress';
+export { useLongPress } from './useLongPress';
+
+export type { PinchGestureConfig } from './usePinch';
+export { usePinch } from './usePinch';
+
+export type { RotationGestureConfig } from './useRotation';
+export { useRotation } from './useRotation';
+
+export type { HoverGestureConfig } from './useHover';
+export { useHover } from './useHover';
+
+export type { ManualGestureConfig } from './useManual';
+export { useManual } from './useManual';
+
+export type { NativeViewGestureConfig } from './useNative';
+export { useNative } from './useNative';
+
+export type { PanGestureConfig } from './usePan';
+export { usePan } from './usePan';

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

@@ -0,0 +1,51 @@
+import {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  SingleGestureName,
+} from '../../types';
+import { useGesture } from '../useGesture';
+import { cloneConfig } from '../utils';
+
+type FlingGestureProps = {
+  /**
+   * Expressed allowed direction of movement. It's possible to pass one or many
+   * directions in one parameter:
+   *
+   * ```js
+   * direction={Directions.RIGHT | Directions.LEFT}
+   * ```
+   *
+   * or
+   *
+   * ```js
+   * direction={Directions.DOWN}
+   * ```
+   */
+  direction?: number;
+
+  /**
+   * Determine exact number of points required to handle the fling gesture.
+   */
+  numberOfPointers?: number;
+};
+
+type FlingHandlerData = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+};
+
+type FlingGestureInternalConfig = BaseGestureConfig<
+  FlingHandlerData,
+  FlingGestureProps
+>;
+
+export type FlingGestureConfig =
+  ExcludeInternalConfigProps<FlingGestureInternalConfig>;
+
+export function useFling(config: FlingGestureConfig) {
+  const flingConfig = cloneConfig<FlingHandlerData, FlingGestureProps>(config);
+
+  return useGesture(SingleGestureName.Fling, flingConfig);
+}

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

@@ -0,0 +1,44 @@
+import { StylusData } from '../../../handlers/gestureHandlerCommon';
+import { HoverEffect } from '../../../handlers/gestures/hoverGesture';
+import {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  SingleGestureName,
+} from '../../types';
+import { useGesture } from '../useGesture';
+import { cloneConfig } from '../utils';
+
+type HoverGestureProps = {
+  /**
+   * Visual effect applied to the view while the view is hovered. The possible values are:
+   *
+   * - `HoverEffect.None`
+   * - `HoverEffect.Lift`
+   * - `HoverEffect.Highlight`
+   *
+   * Defaults to `HoverEffect.None`
+   */
+  hoverEffect?: HoverEffect;
+};
+
+type HoverHandlerData = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  stylusData: StylusData;
+};
+
+type HoverGestureInternalConfig = BaseGestureConfig<
+  HoverHandlerData,
+  HoverGestureProps
+>;
+
+export type HoverGestureConfig =
+  ExcludeInternalConfigProps<HoverGestureInternalConfig>;
+
+export function useHover(config: HoverGestureConfig) {
+  const hoverConfig = cloneConfig<HoverHandlerData, HoverGestureProps>(config);
+
+  return useGesture(SingleGestureName.Hover, hoverConfig);
+}

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

@@ -0,0 +1,75 @@
+import {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  SingleGestureName,
+} from '../../types';
+import { useGesture } from '../useGesture';
+import { remapProps } from '../utils';
+
+type LongPressGestureProps = {
+  /**
+   * Minimum time, expressed in milliseconds, that a finger must remain pressed on
+   * the corresponding view. The default value is 500.
+   */
+  minDuration?: number;
+
+  /**
+   * Maximum distance, expressed in points, that defines how far the finger is
+   * allowed to travel during a long press gesture. If the finger travels
+   * further than the defined distance and the handler hasn't yet activated, it
+   * will fail to recognize the gesture. The default value is 10.
+   */
+  maxDistance?: number;
+
+  /**
+   * Determine exact number of points required to handle the long press gesture.
+   */
+  numberOfPointers?: number;
+};
+
+type LongPressGestureInternalProps = {
+  minDurationMs?: number;
+  maxDist?: number;
+  numberOfPointers?: number;
+};
+
+type LongPressHandlerData = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  duration: number;
+};
+
+export type LongPressGestureConfig = ExcludeInternalConfigProps<
+  BaseGestureConfig<LongPressHandlerData, LongPressGestureProps>
+>;
+
+type LongPressGestureInternalConfig = BaseGestureConfig<
+  LongPressHandlerData,
+  LongPressGestureInternalProps
+>;
+
+const LongPressPropsMapping = new Map<
+  keyof LongPressGestureProps,
+  keyof LongPressGestureInternalProps
+>([
+  ['minDuration', 'minDurationMs'],
+  ['maxDistance', 'maxDist'],
+]);
+
+export function useLongPress(config: LongPressGestureConfig) {
+  const longPressConfig = remapProps<
+    LongPressGestureConfig,
+    LongPressGestureInternalConfig
+  >(config, LongPressPropsMapping);
+
+  if (longPressConfig.shouldCancelWhenOutside === undefined) {
+    longPressConfig.shouldCancelWhenOutside = true;
+  }
+
+  return useGesture<LongPressHandlerData, LongPressGestureInternalProps>(
+    SingleGestureName.LongPress,
+    longPressConfig
+  );
+}

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

@@ -0,0 +1,26 @@
+import {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  SingleGestureName,
+} from '../../types';
+import { useGesture } from '../useGesture';
+import { cloneConfig } from '../utils';
+
+type ManualGestureProps = Record<string, never>;
+type ManualHandlerData = Record<string, never>;
+
+type ManualGestureInternalConfig = BaseGestureConfig<
+  ManualHandlerData,
+  ManualGestureProps
+>;
+
+export type ManualGestureConfig =
+  ExcludeInternalConfigProps<ManualGestureInternalConfig>;
+
+export function useManual(config: ManualGestureConfig) {
+  const manualConfig = cloneConfig<ManualHandlerData, ManualGestureProps>(
+    config
+  );
+
+  return useGesture(SingleGestureName.Manual, manualConfig);
+}

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

@@ -0,0 +1,44 @@
+import {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  SingleGestureName,
+} from '../../types';
+import { useGesture } from '../useGesture';
+import { cloneConfig } from '../utils';
+
+type NativeViewGestureProps = {
+  /**
+   * Android only.
+   *
+   * Determines whether the handler should check for an existing touch event on
+   * instantiation.
+   */
+  shouldActivateOnStart?: boolean;
+
+  /**
+   * When `true`, cancels all other gesture handlers when this
+   * `NativeViewGestureHandler` receives an `ACTIVE` state event.
+   */
+  disallowInterruption?: boolean;
+};
+
+type NativeViewHandlerData = {
+  pointerInside: boolean;
+};
+
+type NativeViewGestureInternalConfig = BaseGestureConfig<
+  NativeViewHandlerData,
+  NativeViewGestureProps
+>;
+
+export type NativeViewGestureConfig =
+  ExcludeInternalConfigProps<NativeViewGestureInternalConfig>;
+
+export function useNative(config: NativeViewGestureConfig) {
+  const nativeConfig = cloneConfig<
+    NativeViewHandlerData,
+    NativeViewGestureProps
+  >(config);
+
+  return useGesture(SingleGestureName.Native, nativeConfig);
+}