Typed gesture hooks (#3706)

## Description

This PR introduces typed hooks for new API.

## Test plan

<details>
<summary>Tested on the following example:</summary>

```tsx
import * as React from 'react';
import { Animated, Button } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  usePan,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const gesture = usePan({
    onUpdate: (e) => {
      'worklet';
      console.log(e.handlerData);
    },
  });

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={gesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}
```

</details>

Also on other handlers.

Author: m-bert

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,53 @@
+import {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  SingleGestureName,
+} from '../../types';
+import { useGesture } from '../useGesture';
+import { cloneConfig } from '../utils';
+
+type FlingGestureProperties = {
+  /**
+   * 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,
+  FlingGestureProperties
+>;
+
+export type FlingGestureConfig =
+  ExcludeInternalConfigProps<FlingGestureInternalConfig>;
+
+export function useFling(config: FlingGestureConfig) {
+  const flingConfig = cloneConfig<FlingHandlerData, FlingGestureProperties>(
+    config
+  );
+
+  return useGesture(SingleGestureName.Fling, flingConfig);
+}

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

@@ -0,0 +1,46 @@
+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 HoverGestureProperties = {
+  /**
+   * 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,
+  HoverGestureProperties
+>;
+
+export type HoverGestureConfig =
+  ExcludeInternalConfigProps<HoverGestureInternalConfig>;
+
+export function useHover(config: HoverGestureConfig) {
+  const hoverConfig = cloneConfig<HoverHandlerData, HoverGestureProperties>(
+    config
+  );
+
+  return useGesture(SingleGestureName.Hover, hoverConfig);
+}

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

@@ -0,0 +1,80 @@
+import {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  SingleGestureName,
+} from '../../types';
+import { useGesture } from '../useGesture';
+import { cloneConfig, remapProps } from '../utils';
+
+type LongPressGestureProperties = {
+  /**
+   * 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 LongPressGestureInternalProperties = {
+  minDurationMs?: number;
+  maxDist?: number;
+  numberOfPointers?: number;
+};
+
+type LongPressHandlerData = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  duration: number;
+};
+
+export type LongPressGestureConfig = ExcludeInternalConfigProps<
+  BaseGestureConfig<LongPressHandlerData, LongPressGestureProperties>
+>;
+
+type LongPressGestureInternalConfig = BaseGestureConfig<
+  LongPressHandlerData,
+  LongPressGestureInternalProperties
+>;
+
+const LongPressPropsMapping = new Map<
+  keyof LongPressGestureProperties,
+  keyof LongPressGestureInternalProperties
+>([
+  ['minDuration', 'minDurationMs'],
+  ['maxDistance', 'maxDist'],
+]);
+
+export function useLongPress(config: LongPressGestureConfig) {
+  const longPressConfig = cloneConfig<
+    LongPressHandlerData,
+    LongPressGestureInternalProperties
+  >(config);
+
+  remapProps<LongPressGestureConfig, LongPressGestureInternalConfig>(
+    longPressConfig,
+    LongPressPropsMapping
+  );
+
+  if (longPressConfig.shouldCancelWhenOutside === undefined) {
+    longPressConfig.shouldCancelWhenOutside = true;
+  }
+
+  return useGesture<LongPressHandlerData, LongPressGestureInternalProperties>(
+    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 ManualGestureProperties = Record<string, never>;
+type ManualHandlerData = Record<string, never>;
+
+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);
+}

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 NativeViewGestureProperties = {
+  /**
+   * 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,
+  NativeViewGestureProperties
+>;
+
+export type NativeViewGestureConfig =
+  ExcludeInternalConfigProps<NativeViewGestureInternalConfig>;
+
+export function useNative(config: NativeViewGestureConfig) {
+  const nativeConfig = cloneConfig<
+    NativeViewHandlerData,
+    NativeViewGestureProperties
+  >(config);
+
+  return useGesture(SingleGestureName.Native, nativeConfig);
+}