Filter config

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

@@ -1,6 +1,6 @@
 import { ComponentClass } from 'react';
 import { tagMessage } from '../../utils';
-import { GestureCallbacks, UpdateEvent } from '../../v3/types';
+import { GestureCallbacks, GestureUpdateEvent } from '../../v3/types';
 
 export interface SharedValue<Value = unknown> {
   value: Value;
@@ -15,7 +15,7 @@ export interface SharedValue<Value = unknown> {
 }
 
 export type ReanimatedContext<THandlerData> = {
-  lastUpdateEvent: UpdateEvent<THandlerData> | undefined;
+  lastUpdateEvent: GestureUpdateEvent<THandlerData> | undefined;
 };
 
 interface WorkletProps {

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/callbacks/stateChangeHandler.ts

@@ -1,48 +1,46 @@
 import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
 import { State } from '../../../State';
-import { GestureCallbacks, StateChangeEvent } from '../../types';
-import { isEventForHandlerWithTag, isNativeEvent } from '../utils';
+import {
+  GestureCallbacks,
+  GestureStateChangeEvent,
+  StateChangeEvent,
+} from '../../types';
+import { isEventForHandlerWithTag, maybeExtractNativeEvent } from '../utils';
 import { runCallback } from '../utils/eventHandlersUtils';
 
 export function getStateChangeHandler<THandlerData>(
   handlerTag: number,
   callbacks: GestureCallbacks<THandlerData>
 ) {
-  return (event: StateChangeEvent<THandlerData>) => {
+  return (sourceEvent: StateChangeEvent<THandlerData>) => {
     'worklet';
 
+    const event = maybeExtractNativeEvent(
+      sourceEvent
+    ) as GestureStateChangeEvent<THandlerData>;
+
     if (!isEventForHandlerWithTag(handlerTag, event)) {
       return;
     }
 
-    let oldState: State | undefined;
-    let state: State | undefined;
-
-    if (isNativeEvent(event)) {
-      oldState = event.nativeEvent.oldState;
-      state = event.nativeEvent.state;
-    } else {
-      oldState = event.oldState;
-      state = event.state;
-    }
-
-    if (oldState === State.UNDETERMINED && state === State.BEGAN) {
+    if (event.oldState === State.UNDETERMINED && event.state === State.BEGAN) {
       runCallback(CALLBACK_TYPE.BEGAN, callbacks, event);
     } else if (
-      (oldState === State.BEGAN || oldState === State.UNDETERMINED) &&
-      state === State.ACTIVE
+      (event.oldState === State.BEGAN ||
+        event.oldState === State.UNDETERMINED) &&
+      event.state === State.ACTIVE
     ) {
       runCallback(CALLBACK_TYPE.START, callbacks, event);
-    } else if (oldState !== state && state === State.END) {
-      if (oldState === State.ACTIVE) {
+    } else if (event.oldState !== event.state && event.state === State.END) {
+      if (event.oldState === State.ACTIVE) {
         runCallback(CALLBACK_TYPE.END, callbacks, event, true);
       }
       runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, true);
     } else if (
-      (state === State.FAILED || state === State.CANCELLED) &&
-      state !== oldState
+      (event.state === State.FAILED || event.state === State.CANCELLED) &&
+      event.state !== event.oldState
     ) {
-      if (oldState === State.ACTIVE) {
+      if (event.oldState === State.ACTIVE) {
         runCallback(CALLBACK_TYPE.END, callbacks, event, false);
       }
       runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, false);

packages/react-native-gesture-handler/src/v3/hooks/callbacks/touchEventHandler.ts

@@ -1,6 +1,5 @@
-import { NativeSyntheticEvent } from 'react-native';
 import { GestureCallbacks, TouchEvent } from '../../types';
-import { isEventForHandlerWithTag, isNativeEvent } from '../utils';
+import { isEventForHandlerWithTag, maybeExtractNativeEvent } from '../utils';
 import { TouchEventType } from '../../../TouchEventType';
 import { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
 import {
@@ -12,30 +11,18 @@ export function getTouchEventHandler<THandlerData>(
   handlerTag: number,
   callbacks: GestureCallbacks<THandlerData>
 ) {
-  return (event: TouchEvent) => {
+  return (sourceEvent: TouchEvent) => {
     'worklet';
 
+    const event = maybeExtractNativeEvent(sourceEvent) as GestureTouchEvent;
+
     if (!isEventForHandlerWithTag(handlerTag, event)) {
       return;
     }
 
-    if (
-      isNativeEvent(event) &&
-      event.nativeEvent.eventType !== TouchEventType.UNDETERMINED
-    ) {
-      runCallback(
-        touchEventTypeToCallbackType(
-          (event as NativeSyntheticEvent<GestureTouchEvent>).nativeEvent
-            .eventType
-        ),
-        callbacks,
-        event
-      );
-    } else if (
-      (event as GestureTouchEvent).eventType !== TouchEventType.UNDETERMINED
-    ) {
+    if (event.eventType !== TouchEventType.UNDETERMINED) {
       runCallback(
-        touchEventTypeToCallbackType((event as GestureTouchEvent).eventType),
+        touchEventTypeToCallbackType(event.eventType),
         callbacks,
         event
       );

packages/react-native-gesture-handler/src/v3/hooks/callbacks/updateHandler.ts

@@ -4,9 +4,10 @@ import { ReanimatedContext } from '../../../handlers/gestures/reanimatedWrapper'
 import {
   ChangeCalculatorType,
   GestureCallbacks,
+  GestureUpdateEvent,
   UpdateEvent,
 } from '../../types';
-import { isEventForHandlerWithTag } from '../utils';
+import { isEventForHandlerWithTag, maybeExtractNativeEvent } from '../utils';
 import { runCallback } from '../utils/eventHandlersUtils';
 
 export function getUpdateHandler<THandlerData>(
@@ -15,9 +16,13 @@ export function getUpdateHandler<THandlerData>(
   context: ReanimatedContext<THandlerData> | undefined,
   changeEventCalculator?: ChangeCalculatorType<THandlerData>
 ) {
-  return (event: UpdateEvent<THandlerData>) => {
+  return (sourceEvent: UpdateEvent<THandlerData>) => {
     'worklet';
 
+    const event = maybeExtractNativeEvent(
+      sourceEvent
+    ) as GestureUpdateEvent<THandlerData>;
+
     if (!isEventForHandlerWithTag(handlerTag, event)) {
       return;
     }
@@ -36,7 +41,6 @@ export function getUpdateHandler<THandlerData>(
         : event
     );
 
-    // TODO: Investigate why this is always undefined
     context.lastUpdateEvent = event;
   };
 }

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,62 @@
+import { StylusData } from '../../../handlers/gestureHandlerCommon';
+import { HoverEffect } from '../../../handlers/gestures/hoverGesture';
+import {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  HandlerData,
+  SingleGestureName,
+} from '../../types';
+import { useGesture } from '../useGesture';
+import { cloneConfig, getChangeEventCalculator } 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;
+  changeX?: number;
+  changeY?: number;
+};
+
+type HoverGestureInternalConfig = BaseGestureConfig<
+  HoverHandlerData,
+  HoverGestureProperties
+>;
+
+export type HoverGestureConfig =
+  ExcludeInternalConfigProps<HoverGestureInternalConfig>;
+
+function diffCalculator(
+  current: HandlerData<HoverHandlerData>,
+  previous: HandlerData<HoverHandlerData> | null
+) {
+  'worklet';
+  return {
+    changeX: previous ? current.x - previous.x : current.x,
+    changeY: previous ? current.y - previous.y : current.y,
+  };
+}
+
+export function useHover(config: HoverGestureConfig) {
+  const hoverConfig = cloneConfig<HoverHandlerData, HoverGestureProperties>(
+    config
+  );
+
+  hoverConfig.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+
+  return useGesture(SingleGestureName.Hover, hoverConfig);
+}