react-native-gesture-handler 2.17.1 → 2.18.0

package/src/handlers/RotationGestureHandler.ts

@@ -1,36 +1,10 @@
+import { RotationGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
 import {
   BaseGestureHandlerProps,
   baseGestureHandlerProps,
 } from './gestureHandlerCommon';
 
-export type RotationGestureHandlerEventPayload = {
-  /**
-   * Amount rotated, expressed in radians, from the gesture's focal point
-   * (anchor).
-   */
-  rotation: number;
-
-  /**
-   * X coordinate, expressed in points, of the gesture's central focal point
-   * (anchor).
-   */
-  anchorX: number;
-
-  /**
-   * Y coordinate, expressed in points, of the gesture's central focal point
-   * (anchor).
-   */
-  anchorY: number;
-
-  /**
-   *
-   * Instantaneous velocity, expressed in point units per second, of the
-   * gesture.
-   */
-  velocity: number;
-};
-
 export interface RotationGestureHandlerProps
   extends BaseGestureHandlerProps<RotationGestureHandlerEventPayload> {}
 

package/src/handlers/TapGestureHandler.ts

@@ -1,3 +1,4 @@
+import type { TapGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
 import {
   BaseGestureHandlerProps,
@@ -14,12 +15,6 @@ export const tapGestureHandlerProps = [
   'minPointers',
 ] as const;
 
-export type TapGestureHandlerEventPayload = {
-  x: number;
-  y: number;
-  absoluteX: number;
-  absoluteY: number;
-};
 export interface TapGestureConfig {
   /**
    * Minimum number of pointers (fingers) required to be placed before the

package/src/handlers/createHandler.tsx

@@ -8,20 +8,15 @@ import {
 import { customDirectEventTypes } from './customDirectEventTypes';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 import { State } from '../State';
-import {
-  handlerIDToTag,
-  getNextHandlerTag,
-  registerOldGestureHandler,
-} from './handlersRegistry';
+import { handlerIDToTag, registerOldGestureHandler } from './handlersRegistry';
+import { getNextHandlerTag } from './getNextHandlerTag';
 
 import {
   BaseGestureHandlerProps,
-  filterConfig,
   GestureEvent,
   HandlerStateChangeEvent,
-  findNodeHandle,
-  scheduleFlushOperations,
 } from './gestureHandlerCommon';
+import { filterConfig, findNodeHandle, scheduleFlushOperations } from './utils';
 import { ValueOf } from '../typeUtils';
 import { deepEqual, isFabric, isJestEnv, tagMessage } from '../utils';
 import { ActionType } from '../ActionType';
@@ -86,10 +81,10 @@ if (UIManagerConstants) {
 // Wrap JS responder calls and notify gesture handler manager
 const {
   setJSResponder: oldSetJSResponder = () => {
-    //no operation
+    // no-op
   },
   clearJSResponder: oldClearJSResponder = () => {
-    //no operation
+    // no-op
   },
 } = UIManagerAny;
 UIManagerAny.setJSResponder = (tag: number, blockNativeResponder: boolean) => {
@@ -323,7 +318,7 @@ export default function createHandler<
       this.viewTag = newViewTag;
 
       if (Platform.OS === 'web') {
-        // typecast due to dynamic resolution, attachGestureHandler should have web version signature in this branch
+        // Typecast due to dynamic resolution, attachGestureHandler should have web version signature in this branch
         (
           RNGestureHandlerModule.attachGestureHandler as AttachGestureHandlerWeb
         )(

package/src/handlers/createNativeWrapper.tsx

@@ -28,7 +28,7 @@ export default function createNativeWrapper<P>(
     React.ComponentType<any>,
     P & NativeViewGestureHandlerProps
   >((props, ref) => {
-    // filter out props that should be passed to gesture handler wrapper
+    // Filter out props that should be passed to gesture handler wrapper
     const gestureHandlerProps = Object.keys(props).reduce(
       (res, key) => {
         // TS being overly protective with it's types, see https://github.com/microsoft/TypeScript/issues/26255#issuecomment-458013731 for more info
@@ -39,7 +39,7 @@ export default function createNativeWrapper<P>(
         }
         return res;
       },
-      { ...config } // watch out not to modify config
+      { ...config } // Watch out not to modify config
     );
     const _ref = useRef<React.ComponentType<P>>();
     const _gestureHandlerRef = useRef<React.ComponentType<P>>();
@@ -48,7 +48,7 @@ export default function createNativeWrapper<P>(
       // @ts-ignore TODO(TS) decide how nulls work in this context
       () => {
         const node = _gestureHandlerRef.current;
-        // add handlerTag for relations config
+        // Add handlerTag for relations config
         if (_ref.current && node) {
           // @ts-ignore FIXME(TS) think about createHandler return type
           _ref.current.handlerTag = node.handlerTag;

package/src/handlers/gestureHandlerCommon.ts

@@ -3,15 +3,10 @@
 // e.g. React.createRef<TapGestureHandler> -> React.createRef<typeof TapGestureHandler>.
 // See https://www.typescriptlang.org/docs/handbook/classes.html#constructor-functions for reference.
 import * as React from 'react';
-import { Platform, findNodeHandle as findNodeHandleRN } from 'react-native';
 
 import { State } from '../State';
 import { TouchEventType } from '../TouchEventType';
 import { ValueOf } from '../typeUtils';
-import { handlerIDToTag } from './handlersRegistry';
-import { toArray } from '../utils';
-import RNGestureHandlerModule from '../RNGestureHandlerModule';
-import { ghQueueMicrotask } from '../ghQueueMicrotask';
 import { PointerType } from '../PointerType';
 
 const commonProps = [
@@ -141,7 +136,7 @@ export type TouchAction =
   | 'revert-layer'
   | 'unset';
 
-//TODO(TS) events in handlers
+// TODO(TS) events in handlers
 
 export interface GestureEvent<ExtraEventPayloadT = Record<string, unknown>> {
   nativeEvent: Readonly<GestureEventPayload & ExtraEventPayloadT>;
@@ -206,82 +201,11 @@ export type BaseGestureHandlerProps<
   onActivated?: (event: HandlerStateChangeEvent) => void;
   onEnded?: (event: HandlerStateChangeEvent) => void;
 
-  //TODO(TS) consider using NativeSyntheticEvent
+  // TODO(TS) consider using NativeSyntheticEvent
   onGestureEvent?: (event: GestureEvent<ExtraEventPayloadT>) => void;
   onHandlerStateChange?: (
     event: HandlerStateChangeEvent<ExtraEventPayloadT>
   ) => void;
-  // implicit `children` prop has been removed in @types/react^18.0.0
+  // Implicit `children` prop has been removed in @types/react^18.0.0
   children?: React.ReactNode;
 };
-
-function isConfigParam(param: unknown, name: string) {
-  // param !== Object(param) returns false if `param` is a function
-  // or an object and returns true if `param` is null
-  return (
-    param !== undefined &&
-    (param !== Object(param) ||
-      !('__isNative' in (param as Record<string, unknown>))) &&
-    name !== 'onHandlerStateChange' &&
-    name !== 'onGestureEvent'
-  );
-}
-
-export function filterConfig(
-  props: Record<string, unknown>,
-  validProps: string[],
-  defaults: Record<string, unknown> = {}
-) {
-  const filteredConfig = { ...defaults };
-  for (const key of validProps) {
-    let value = props[key];
-    if (isConfigParam(value, key)) {
-      if (key === 'simultaneousHandlers' || key === 'waitFor') {
-        value = transformIntoHandlerTags(props[key]);
-      } else if (key === 'hitSlop' && typeof value !== 'object') {
-        value = { top: value, left: value, bottom: value, right: value };
-      }
-      filteredConfig[key] = value;
-    }
-  }
-  return filteredConfig;
-}
-
-function transformIntoHandlerTags(handlerIDs: any) {
-  handlerIDs = toArray(handlerIDs);
-
-  if (Platform.OS === 'web') {
-    return handlerIDs
-      .map(({ current }: { current: any }) => current)
-      .filter((handle: any) => handle);
-  }
-  // converts handler string IDs into their numeric tags
-  return handlerIDs
-    .map(
-      (handlerID: any) =>
-        handlerIDToTag[handlerID] || handlerID.current?.handlerTag || -1
-    )
-    .filter((handlerTag: number) => handlerTag > 0);
-}
-
-export function findNodeHandle(
-  node: null | number | React.Component<any, any> | React.ComponentClass<any>
-): null | number | React.Component<any, any> | React.ComponentClass<any> {
-  if (Platform.OS === 'web') {
-    return node;
-  }
-  return findNodeHandleRN(node);
-}
-
-let flushOperationsScheduled = false;
-
-export function scheduleFlushOperations() {
-  if (!flushOperationsScheduled) {
-    flushOperationsScheduled = true;
-    ghQueueMicrotask(() => {
-      RNGestureHandlerModule.flushOperations();
-
-      flushOperationsScheduled = false;
-    });
-  }
-}

package/src/handlers/gestureHandlerTypesCompat.ts

@@ -1,55 +1,41 @@
-import {
+import type {
   BaseButtonProps,
   BorderlessButtonProps,
   RawButtonProps,
   RectButtonProps,
-} from '../components/GestureButtons';
+} from '../components/GestureButtonsProps';
 import {
   GestureEvent,
   GestureEventPayload,
   HandlerStateChangeEvent,
   HandlerStateChangeEventPayload,
 } from './gestureHandlerCommon';
-import {
+import type { FlingGestureHandlerProps } from './FlingGestureHandler';
+import type {
   FlingGestureHandlerEventPayload,
-  FlingGestureHandlerProps,
-} from './FlingGestureHandler';
-import {
   ForceTouchGestureHandlerEventPayload,
-  ForceTouchGestureHandlerProps,
-} from './ForceTouchGestureHandler';
-import {
   LongPressGestureHandlerEventPayload,
-  LongPressGestureHandlerProps,
-} from './LongPressGestureHandler';
-import {
   PanGestureHandlerEventPayload,
-  PanGestureHandlerProps,
-} from './PanGestureHandler';
-import {
   PinchGestureHandlerEventPayload,
-  PinchGestureHandlerProps,
-} from './PinchGestureHandler';
-import {
   RotationGestureHandlerEventPayload,
-  RotationGestureHandlerProps,
-} from './RotationGestureHandler';
-import {
   TapGestureHandlerEventPayload,
-  TapGestureHandlerProps,
-} from './TapGestureHandler';
-import {
   NativeViewGestureHandlerPayload,
-  NativeViewGestureHandlerProps,
-} from './NativeViewGestureHandler';
+} from './GestureHandlerEventPayload';
+import type { ForceTouchGestureHandlerProps } from './ForceTouchGestureHandler';
+import type { LongPressGestureHandlerProps } from './LongPressGestureHandler';
+import type { PanGestureHandlerProps } from './PanGestureHandler';
+import type { PinchGestureHandlerProps } from './PinchGestureHandler';
+import type { RotationGestureHandlerProps } from './RotationGestureHandler';
+import type { TapGestureHandlerProps } from './TapGestureHandler';
+import type { NativeViewGestureHandlerProps } from './NativeViewGestureHandler';
 
-// events
+// Events
 export type GestureHandlerGestureEventNativeEvent = GestureEventPayload;
 export type GestureHandlerStateChangeNativeEvent =
   HandlerStateChangeEventPayload;
 export type GestureHandlerGestureEvent = GestureEvent;
 export type GestureHandlerStateChangeEvent = HandlerStateChangeEvent;
-// gesture handlers events
+// Gesture handlers events
 export type NativeViewGestureHandlerGestureEvent =
   GestureEvent<NativeViewGestureHandlerPayload>;
 export type NativeViewGestureHandlerStateChangeEvent =
@@ -90,7 +76,7 @@ export type FlingGestureHandlerGestureEvent =
 export type FlingGestureHandlerStateChangeEvent =
   HandlerStateChangeEvent<FlingGestureHandlerEventPayload>;
 
-// handlers properties
+// Handlers properties
 export type NativeViewGestureHandlerProperties = NativeViewGestureHandlerProps;
 export type TapGestureHandlerProperties = TapGestureHandlerProps;
 export type LongPressGestureHandlerProperties = LongPressGestureHandlerProps;
@@ -99,7 +85,7 @@ export type PinchGestureHandlerProperties = PinchGestureHandlerProps;
 export type RotationGestureHandlerProperties = RotationGestureHandlerProps;
 export type FlingGestureHandlerProperties = FlingGestureHandlerProps;
 export type ForceTouchGestureHandlerProperties = ForceTouchGestureHandlerProps;
-// button props
+// Button props
 export type RawButtonProperties = RawButtonProps;
 export type BaseButtonProperties = BaseButtonProps;
 export type RectButtonProperties = RectButtonProps;

package/src/handlers/gestures/GestureDetector/Wrap.tsx

@@ -4,7 +4,7 @@ import { tagMessage } from '../../../utils';
 
 export class Wrap extends React.Component<{
   onGestureHandlerEvent?: unknown;
-  // implicit `children` prop has been removed in @types/react^18.0.0
+  // Implicit `children` prop has been removed in @types/react^18.0.0
   children?: React.ReactNode;
 }> {
   render() {

package/src/handlers/gestures/GestureDetector/attachHandlers.ts

@@ -2,10 +2,7 @@ import React from 'react';
 import { GestureType, HandlerCallbacks } from '../gesture';
 import { registerHandler } from '../../handlersRegistry';
 import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
-import {
-  filterConfig,
-  scheduleFlushOperations,
-} from '../../gestureHandlerCommon';
+import { filterConfig, scheduleFlushOperations } from '../../utils';
 import { ComposedGesture } from '../gestureComposition';
 import { ActionType } from '../../../ActionType';
 import { Platform } from 'react-native';
@@ -35,7 +32,7 @@ export function attachHandlers({
 }: AttachHandlersConfig) {
   gestureConfig.initialize();
 
-  // use queueMicrotask to extract handlerTags, because all refs should be initialized
+  // Use queueMicrotask to extract handlerTags, because all refs should be initialized
   // when it's ran
   ghQueueMicrotask(() => {
     if (!preparedGesture.isMounted) {
@@ -55,7 +52,7 @@ export function attachHandlers({
     registerHandler(handler.handlerTag, handler, handler.config.testId);
   }
 
-  // use queueMicrotask to extract handlerTags, because all refs should be initialized
+  // Use queueMicrotask to extract handlerTags, because all refs should be initialized
   // when it's ran
   ghQueueMicrotask(() => {
     if (!preparedGesture.isMounted) {
@@ -86,7 +83,7 @@ export function attachHandlers({
       )(
         gesture.handlerTag,
         viewTag,
-        ActionType.JS_FUNCTION_OLD_API, // ignored on web
+        ActionType.JS_FUNCTION_OLD_API, // Ignored on web
         webEventHandlersRef
       );
     } else {

package/src/handlers/gestures/GestureDetector/dropHandlers.ts

@@ -1,6 +1,6 @@
 import { unregisterHandler } from '../../handlersRegistry';
 import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
-import { scheduleFlushOperations } from '../../gestureHandlerCommon';
+import { scheduleFlushOperations } from '../../utils';
 import { AttachedGestureState } from './types';
 
 export function dropHandlers(preparedGesture: AttachedGestureState) {

package/src/handlers/gestures/GestureDetector/index.tsx

@@ -111,7 +111,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
   );
 
   const webEventHandlersRef = useWebEventHandlers();
-  // store state in ref to prevent unnecessary renders
+  // Store state in ref to prevent unnecessary renders
   const state = useRef<GestureDetectorState>({
     firstRender: true,
     viewRef: null,

package/src/handlers/gestures/GestureDetector/updateHandlers.ts

@@ -1,10 +1,7 @@
 import { GestureType, HandlerCallbacks } from '../gesture';
 import { registerHandler } from '../../handlersRegistry';
 import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
-import {
-  filterConfig,
-  scheduleFlushOperations,
-} from '../../gestureHandlerCommon';
+import { filterConfig, scheduleFlushOperations } from '../../utils';
 import { ComposedGesture } from '../gestureComposition';
 import { ghQueueMicrotask } from '../../../ghQueueMicrotask';
 import { AttachedGestureState } from './types';
@@ -25,7 +22,7 @@ export function updateHandlers(
     const handler = preparedGesture.attachedGestures[i];
     checkGestureCallbacksForWorklets(handler);
 
-    // only update handlerTag when it's actually different, it may be the same
+    // Only update handlerTag when it's actually different, it may be the same
     // if gesture config object is wrapped with useMemo
     if (newGestures[i].handlerTag !== handler.handlerTag) {
       newGestures[i].handlerTag = handler.handlerTag;
@@ -33,16 +30,30 @@ export function updateHandlers(
     }
   }
 
-  // use queueMicrotask to extract handlerTags, because when it's ran, all refs should be updated
+  // Use queueMicrotask to extract handlerTags, because when it's ran, all refs should be updated
   // and handlerTags in BaseGesture references should be updated in the loop above (we need to wait
   // in case of external relations)
   ghQueueMicrotask(() => {
     if (!preparedGesture.isMounted) {
       return;
     }
+
+    // If amount of gesture configs changes, we need to update the callbacks in shared value
+    let shouldUpdateSharedValueIfUsed =
+      preparedGesture.attachedGestures.length !== newGestures.length;
+
     for (let i = 0; i < newGestures.length; i++) {
       const handler = preparedGesture.attachedGestures[i];
 
+      // If the gestureId is different (gesture isn't wrapped with useMemo or its dependencies changed),
+      // we need to update the shared value, assuming the gesture runs on UI thread or the thread changed
+      if (
+        handler.handlers.gestureId !== newGestures[i].handlers.gestureId &&
+        (newGestures[i].shouldUseReanimated || handler.shouldUseReanimated)
+      ) {
+        shouldUpdateSharedValueIfUsed = true;
+      }
+
       handler.config = newGestures[i].config;
       handler.handlers = newGestures[i].handlers;
 
@@ -58,35 +69,14 @@ export function updateHandlers(
       registerHandler(handler.handlerTag, handler, handler.config.testId);
     }
 
-    if (preparedGesture.animatedHandlers) {
-      const previousHandlersValue =
-        preparedGesture.animatedHandlers.value ?? [];
+    if (preparedGesture.animatedHandlers && shouldUpdateSharedValueIfUsed) {
       const newHandlersValue = preparedGesture.attachedGestures
-        .filter((g) => g.shouldUseReanimated) // ignore gestures that shouldn't run on UI
+        .filter((g) => g.shouldUseReanimated) // Ignore gestures that shouldn't run on UI
         .map((g) => g.handlers) as unknown as HandlerCallbacks<
         Record<string, unknown>
       >[];
 
-      // if amount of gesture configs changes, we need to update the callbacks in shared value
-      let shouldUpdateSharedValue =
-        previousHandlersValue.length !== newHandlersValue.length;
-
-      if (!shouldUpdateSharedValue) {
-        // if the amount is the same, we need to check if any of the configs inside has changed
-        for (let i = 0; i < newHandlersValue.length; i++) {
-          if (
-            // we can use the `gestureId` prop as it's unique for every config instance
-            newHandlersValue[i].gestureId !== previousHandlersValue[i].gestureId
-          ) {
-            shouldUpdateSharedValue = true;
-            break;
-          }
-        }
-      }
-
-      if (shouldUpdateSharedValue) {
-        preparedGesture.animatedHandlers.value = newHandlersValue;
-      }
+      preparedGesture.animatedHandlers.value = newHandlersValue;
     }
 
     scheduleFlushOperations();

package/src/handlers/gestures/GestureDetector/useDetectorUpdater.ts

@@ -28,7 +28,7 @@ export function useDetectorUpdater(
   const updateAttachedGestures = useCallback(
     // skipConfigUpdate is used to prevent unnecessary updates when only checking if the view has changed
     (skipConfigUpdate?: boolean) => {
-      // if the underlying view has changed we need to reattach handlers to the new view
+      // If the underlying view has changed we need to reattach handlers to the new view
       const viewTag = findNodeHandle(state.viewRef) as number;
       const didUnderlyingViewChange = viewTag !== state.previousViewTag;
 

package/src/handlers/gestures/GestureDetector/utils.ts

@@ -73,7 +73,7 @@ export function checkGestureCallbacksForWorklets(gesture: GestureType) {
   if (!__DEV__) {
     return;
   }
-  // if a gesture is explicitly marked to run on the JS thread there is no need to check
+  // If a gesture is explicitly marked to run on the JS thread there is no need to check
   // if callbacks are worklets as the user is aware they will be ran on the JS thread
   if (gesture.config.runOnJS) {
     return;
@@ -82,7 +82,7 @@ export function checkGestureCallbacksForWorklets(gesture: GestureType) {
   const areSomeNotWorklets = gesture.handlers.isWorklet.includes(false);
   const areSomeWorklets = gesture.handlers.isWorklet.includes(true);
 
-  // if some of the callbacks are worklets and some are not, and the gesture is not
+  // If some of the callbacks are worklets and some are not, and the gesture is not
   // explicitly marked with `.runOnJS(true)` show an error
   if (areSomeNotWorklets && areSomeWorklets) {
     console.error(
@@ -93,12 +93,12 @@ export function checkGestureCallbacksForWorklets(gesture: GestureType) {
   }
 
   if (Reanimated === undefined) {
-    // if Reanimated is not available, we can't run worklets, so we shouldn't show the warning
+    // If Reanimated is not available, we can't run worklets, so we shouldn't show the warning
     return;
   }
 
   const areAllNotWorklets = !areSomeWorklets && areSomeNotWorklets;
-  // if none of the callbacks are worklets and the gesture is not explicitly marked with
+  // If none of the callbacks are worklets and the gesture is not explicitly marked with
   // `.runOnJS(true)` show a warning
   if (areAllNotWorklets) {
     console.warn(
@@ -111,7 +111,7 @@ export function checkGestureCallbacksForWorklets(gesture: GestureType) {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function validateDetectorChildren(ref: any) {
-  // finds the first native view under the Wrap component and traverses the fiber tree upwards
+  // Finds the first native view under the Wrap component and traverses the fiber tree upwards
   // to check whether there is more than one native view as a pseudo-direct child of GestureDetector
   // i.e. this is not ok:
   //            Wrap

package/src/handlers/gestures/flingGesture.ts

@@ -1,8 +1,6 @@
 import { BaseGesture, BaseGestureConfig } from './gesture';
-import {
-  FlingGestureConfig,
-  FlingGestureHandlerEventPayload,
-} from '../FlingGestureHandler';
+import { FlingGestureConfig } from '../FlingGestureHandler';
+import type { FlingGestureHandlerEventPayload } from '../GestureHandlerEventPayload';
 
 export class FlingGesture extends BaseGesture<FlingGestureHandlerEventPayload> {
   public config: BaseGestureConfig & FlingGestureConfig = {};

package/src/handlers/gestures/forceTouchGesture.ts

@@ -1,8 +1,6 @@
 import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
-import {
-  ForceTouchGestureConfig,
-  ForceTouchGestureHandlerEventPayload,
-} from '../ForceTouchGestureHandler';
+import { ForceTouchGestureConfig } from '../ForceTouchGestureHandler';
+import type { ForceTouchGestureHandlerEventPayload } from '../GestureHandlerEventPayload';
 import { GestureUpdateEvent } from '../gestureHandlerCommon';
 
 export type ForceTouchGestureChangeEventPayload = {

package/src/handlers/gestures/gesture.ts

@@ -1,5 +1,3 @@
-import { FlingGestureHandlerEventPayload } from '../FlingGestureHandler';
-import { ForceTouchGestureHandlerEventPayload } from '../ForceTouchGestureHandler';
 import {
   HitSlop,
   CommonGestureConfig,
@@ -9,14 +7,18 @@ import {
   ActiveCursor,
   MouseButton,
 } from '../gestureHandlerCommon';
-import { getNextHandlerTag } from '../handlersRegistry';
+import { getNextHandlerTag } from '../getNextHandlerTag';
 import { GestureStateManagerType } from './gestureStateManager';
-import { LongPressGestureHandlerEventPayload } from '../LongPressGestureHandler';
-import { PanGestureHandlerEventPayload } from '../PanGestureHandler';
-import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';
-import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';
-import { TapGestureHandlerEventPayload } from '../TapGestureHandler';
-import { NativeViewGestureHandlerPayload } from '../NativeViewGestureHandler';
+import type {
+  FlingGestureHandlerEventPayload,
+  ForceTouchGestureHandlerEventPayload,
+  LongPressGestureHandlerEventPayload,
+  PanGestureHandlerEventPayload,
+  PinchGestureHandlerEventPayload,
+  RotationGestureHandlerEventPayload,
+  TapGestureHandlerEventPayload,
+  NativeViewGestureHandlerPayload,
+} from '../GestureHandlerEventPayload';
 import { isRemoteDebuggingEnabled } from '../../utils';
 
 export type GestureType =
@@ -35,7 +37,7 @@ export type GestureRef =
   | number
   | GestureType
   | React.RefObject<GestureType | undefined>
-  | React.RefObject<React.ComponentType | undefined>; // allow adding a ref to a gesture handler
+  | React.RefObject<React.ComponentType | undefined>; // Allow adding a ref to a gesture handler
 export interface BaseGestureConfig
   extends CommonGestureConfig,
     Record<string, unknown> {
@@ -166,7 +168,7 @@ export abstract class BaseGesture<
 
   // eslint-disable-next-line @typescript-eslint/ban-types
   protected isWorklet(callback: Function) {
-    //@ts-ignore if callback is a worklet, the property will be available, if not then the check will return false
+    // @ts-ignore if callback is a worklet, the property will be available, if not then the check will return false
     return callback.__workletHash !== undefined;
   }
 
@@ -203,7 +205,7 @@ export abstract class BaseGesture<
     ) => void
   ) {
     this.handlers.onEnd = callback;
-    //@ts-ignore if callback is a worklet, the property will be available, if not then the check will return false
+    // @ts-ignore if callback is a worklet, the property will be available, if not then the check will return false
     this.handlers.isWorklet[CALLBACK_TYPE.END] = this.isWorklet(callback);
     return this;
   }
@@ -219,7 +221,7 @@ export abstract class BaseGesture<
     ) => void
   ) {
     this.handlers.onFinalize = callback;
-    //@ts-ignore if callback is a worklet, the property will be available, if not then the check will return false
+    // @ts-ignore if callback is a worklet, the property will be available, if not then the check will return false
     this.handlers.isWorklet[CALLBACK_TYPE.FINALIZE] = this.isWorklet(callback);
     return this;
   }
@@ -416,8 +418,8 @@ export abstract class BaseGesture<
   prepare() {}
 
   get shouldUseReanimated(): boolean {
-    // use Reanimated when runOnJS isn't set explicitly,
-    // and all defined callbacks are worklets,
+    // Use Reanimated when runOnJS isn't set explicitly,
+    // all defined callbacks are worklets
     // and remote debugging is disabled
     return (
       this.config.runOnJS !== true &&