react-native-gesture-handler 3.0.0-beta.1 → 3.0.0-beta.3

package/src/handlers/GestureHandlerEventPayload.ts

@@ -1,4 +1,4 @@
-import { StylusData } from './gestureHandlerCommon';
+import type { StylusData } from './gestureHandlerCommon';
 
 export type FlingGestureHandlerEventPayload = {
   x: number;
@@ -129,7 +129,7 @@ export type PanGestureHandlerEventPayload = {
   /**
    * Object containing additional stylus data.
    */
-  stylusData?: StylusData;
+  stylusData?: StylusData | undefined;
 };
 
 export type PinchGestureHandlerEventPayload = {
@@ -225,5 +225,5 @@ export type HoverGestureHandlerEventPayload = {
   /**
    * Object containing additional stylus data.
    */
-  stylusData?: StylusData;
+  stylusData?: StylusData | undefined;
 };

package/src/handlers/LongPressGestureHandler.ts

@@ -1,9 +1,7 @@
-import { LongPressGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
-import {
-  BaseGestureHandlerProps,
-  baseGestureHandlerProps,
-} from './gestureHandlerCommon';
+import type { BaseGestureHandlerProps } from './gestureHandlerCommon';
+import { baseGestureHandlerProps } from './gestureHandlerCommon';
+import type { LongPressGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 
 export const longPressGestureHandlerProps = [
   'minDurationMs',

package/src/handlers/NativeViewGestureHandler.ts

@@ -1,9 +1,7 @@
-import type { NativeViewGestureHandlerPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
-import {
-  BaseGestureHandlerProps,
-  baseGestureHandlerProps,
-} from './gestureHandlerCommon';
+import type { BaseGestureHandlerProps } from './gestureHandlerCommon';
+import { baseGestureHandlerProps } from './gestureHandlerCommon';
+import type { NativeViewGestureHandlerPayload } from './GestureHandlerEventPayload';
 
 export const nativeViewGestureHandlerProps = [
   'shouldActivateOnStart',
@@ -17,13 +15,13 @@ export interface NativeViewGestureConfig {
    * Determines whether the handler should check for an existing touch event on
    * instantiation.
    */
-  shouldActivateOnStart?: boolean;
+  shouldActivateOnStart?: boolean | undefined;
 
   /**
    * When `true`, cancels all other gesture handlers when this
    * `NativeViewGestureHandler` receives an `ACTIVE` state event.
    */
-  disallowInterruption?: boolean;
+  disallowInterruption?: boolean | undefined;
 }
 
 /**

package/src/handlers/PanGestureHandler.ts

@@ -1,9 +1,7 @@
-import type { PanGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
-import {
-  BaseGestureHandlerProps,
-  baseGestureHandlerProps,
-} from './gestureHandlerCommon';
+import type { BaseGestureHandlerProps } from './gestureHandlerCommon';
+import { baseGestureHandlerProps } from './gestureHandlerCommon';
+import type { PanGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 
 export const panGestureHandlerProps = [
   'activeOffsetY',

package/src/handlers/PinchGestureHandler.ts

@@ -1,9 +1,7 @@
-import { PinchGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
-import {
-  BaseGestureHandlerProps,
-  baseGestureHandlerProps,
-} from './gestureHandlerCommon';
+import type { BaseGestureHandlerProps } from './gestureHandlerCommon';
+import { baseGestureHandlerProps } from './gestureHandlerCommon';
+import type { PinchGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 
 /**
  * @deprecated PinchGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Pinch()` instead.

package/src/handlers/RotationGestureHandler.ts

@@ -1,9 +1,7 @@
-import { RotationGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
-import {
-  BaseGestureHandlerProps,
-  baseGestureHandlerProps,
-} from './gestureHandlerCommon';
+import type { BaseGestureHandlerProps } from './gestureHandlerCommon';
+import { baseGestureHandlerProps } from './gestureHandlerCommon';
+import type { RotationGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 
 /**
  * @deprecated RotationGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Rotation()` instead.

package/src/handlers/TapGestureHandler.ts

@@ -1,9 +1,7 @@
-import type { TapGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
-import {
-  BaseGestureHandlerProps,
-  baseGestureHandlerProps,
-} from './gestureHandlerCommon';
+import type { BaseGestureHandlerProps } from './gestureHandlerCommon';
+import { baseGestureHandlerProps } from './gestureHandlerCommon';
+import type { TapGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 
 export const tapGestureHandlerProps = [
   'maxDurationMs',

package/src/handlers/createHandler.tsx

@@ -1,34 +1,31 @@
+import type { ReactElement } from 'react';
 import * as React from 'react';
-import {
-  Platform,
-  DeviceEventEmitter,
-  EmitterSubscription,
-} from 'react-native';
-import { customDirectEventTypes } from './customDirectEventTypes';
+import type { EmitterSubscription } from 'react-native';
+import { DeviceEventEmitter, Platform } from 'react-native';
+
+import { ActionType } from '../ActionType';
+import findNodeHandle from '../findNodeHandle';
+import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
+import { ghQueueMicrotask } from '../ghQueueMicrotask';
+import { MountRegistry } from '../mountRegistry';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 import { State } from '../State';
+import type { ValueOf } from '../typeUtils';
+import { deepEqual, isTestEnv, tagMessage } from '../utils';
+import { customDirectEventTypes } from './customDirectEventTypes';
+import type {
+  BaseGestureHandlerProps,
+  GestureEvent,
+  HandlerStateChangeEvent,
+} from './gestureHandlerCommon';
+import { getNextHandlerTag } from './getNextHandlerTag';
 import {
   handlerIDToTag,
   registerOldGestureHandler,
   unregisterOldGestureHandler,
 } from './handlersRegistry';
-import { getNextHandlerTag } from './getNextHandlerTag';
-
-import {
-  BaseGestureHandlerProps,
-  GestureEvent,
-  HandlerStateChangeEvent,
-} from './gestureHandlerCommon';
-import { filterConfig, scheduleFlushOperations } from './utils';
-import findNodeHandle from '../findNodeHandle';
-import { ValueOf } from '../typeUtils';
-import { deepEqual, isTestEnv, tagMessage } from '../utils';
-import { ActionType } from '../ActionType';
 import { PressabilityDebugView } from './PressabilityDebugView';
-import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
-import { ghQueueMicrotask } from '../ghQueueMicrotask';
-import { MountRegistry } from '../mountRegistry';
-import { ReactElement } from 'react';
+import { filterConfig, scheduleFlushOperations } from './utils';
 
 customDirectEventTypes.topGestureHandlerEvent = {
   registrationName: 'onGestureHandlerEvent',

package/src/handlers/createNativeWrapper.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useImperativeHandle, useRef } from 'react';
 
+import type { NativeViewGestureHandlerProps } from './NativeViewGestureHandler';
 import {
   NativeViewGestureHandler,
-  NativeViewGestureHandlerProps,
   nativeViewProps,
 } from './NativeViewGestureHandler';
 
@@ -20,14 +20,19 @@ const NATIVE_WRAPPER_PROPS_FILTER = [
   'onGestureHandlerStateChange',
 ] as const;
 
+/**
+ * @deprecated `createNativeWrapper` is deprecated and will be removed in favor of using `GestureDetector` with `Native` gesture directly.
+ */
 export default function createNativeWrapper<P>(
   Component: React.ComponentType<P>,
   config: Readonly<NativeViewGestureHandlerProps> = {}
 ) {
-  const ComponentWrapper = React.forwardRef<
-    React.ComponentType<any>,
-    P & NativeViewGestureHandlerProps
-  >((props, ref) => {
+  const ComponentWrapper = (
+    props: P &
+      NativeViewGestureHandlerProps & {
+        ref?: React.Ref<React.ComponentType<any> | null> | undefined;
+      }
+  ) => {
     // Filter out props that should be passed to gesture handler wrapper
     const { gestureHandlerProps, childProps } = Object.keys(props).reduce(
       (res, key) => {
@@ -54,7 +59,7 @@ export default function createNativeWrapper<P>(
     const _ref = useRef<React.ComponentType<P>>(null);
     const _gestureHandlerRef = useRef<React.ComponentType<P>>(null);
     useImperativeHandle(
-      ref,
+      props.ref,
       // @ts-ignore TODO(TS) decide how nulls work in this context
       () => {
         const node = _gestureHandlerRef.current;
@@ -76,7 +81,7 @@ export default function createNativeWrapper<P>(
         <Component {...childProps} ref={_ref} />
       </NativeViewGestureHandler>
     );
-  });
+  };
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   ComponentWrapper.displayName =

package/src/handlers/gestureHandlerCommon.ts

@@ -2,12 +2,12 @@
 // Without those types, we'd introduce breaking change, forcing users to prefix every handler type specification with typeof
 // 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 type * as React from 'react';
 
-import { State } from '../State';
-import { TouchEventType } from '../TouchEventType';
-import { ValueOf } from '../typeUtils';
-import { PointerType } from '../PointerType';
+import type { PointerType } from '../PointerType';
+import type { State } from '../State';
+import type { TouchEventType } from '../TouchEventType';
+import type { ValueOf } from '../typeUtils';
 
 const commonProps = [
   'id',
@@ -63,7 +63,7 @@ export type HitSlop =
   | Partial<
       Record<
         'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal',
-        number
+        number | undefined
       >
     >
   | Record<'width' | 'left', number>
@@ -181,14 +181,14 @@ export type GestureStateChangeEvent<
 > = HandlerStateChangeEventPayload & GestureStateChangeEventPayloadT;
 
 export type CommonGestureConfig = {
-  enabled?: boolean;
-  shouldCancelWhenOutside?: boolean;
-  hitSlop?: HitSlop;
-  userSelect?: UserSelect;
-  activeCursor?: ActiveCursor;
-  mouseButton?: MouseButton;
-  enableContextMenu?: boolean;
-  touchAction?: TouchAction;
+  enabled?: boolean | undefined;
+  shouldCancelWhenOutside?: boolean | undefined;
+  hitSlop?: HitSlop | undefined;
+  userSelect?: UserSelect | undefined;
+  activeCursor?: ActiveCursor | undefined;
+  mouseButton?: MouseButton | undefined;
+  enableContextMenu?: boolean | undefined;
+  touchAction?: TouchAction | undefined;
 };
 
 // Events payloads are types instead of interfaces due to TS limitation.
@@ -196,24 +196,26 @@ export type CommonGestureConfig = {
 export type BaseGestureHandlerProps<
   ExtraEventPayloadT extends Record<string, unknown> = Record<string, unknown>,
 > = CommonGestureConfig & {
-  id?: string;
-  waitFor?: React.Ref<unknown> | React.Ref<unknown>[];
-  simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
-  blocksHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
-  testID?: string;
-  cancelsTouchesInView?: boolean;
+  id?: string | undefined;
+  waitFor?: React.Ref<unknown> | React.Ref<unknown>[] | undefined;
+  simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[] | undefined;
+  blocksHandlers?: React.Ref<unknown> | React.Ref<unknown>[] | undefined;
+  testID?: string | undefined;
+  cancelsTouchesInView?: boolean | undefined;
   // TODO(TS) - fix event types
-  onBegan?: (event: HandlerStateChangeEvent) => void;
-  onFailed?: (event: HandlerStateChangeEvent) => void;
-  onCancelled?: (event: HandlerStateChangeEvent) => void;
-  onActivated?: (event: HandlerStateChangeEvent) => void;
-  onEnded?: (event: HandlerStateChangeEvent) => void;
+  onBegan?: ((event: HandlerStateChangeEvent) => void) | undefined;
+  onFailed?: ((event: HandlerStateChangeEvent) => void) | undefined;
+  onCancelled?: ((event: HandlerStateChangeEvent) => void) | undefined;
+  onActivated?: ((event: HandlerStateChangeEvent) => void) | undefined;
+  onEnded?: ((event: HandlerStateChangeEvent) => void) | undefined;
 
   // TODO(TS) consider using NativeSyntheticEvent
-  onGestureEvent?: (event: GestureEvent<ExtraEventPayloadT>) => void;
-  onHandlerStateChange?: (
-    event: HandlerStateChangeEvent<ExtraEventPayloadT>
-  ) => void;
+  onGestureEvent?:
+    | ((event: GestureEvent<ExtraEventPayloadT>) => void)
+    | undefined;
+  onHandlerStateChange?:
+    | ((event: HandlerStateChangeEvent<ExtraEventPayloadT>) => void)
+    | undefined;
   // Implicit `children` prop has been removed in @types/react^18.0.0
   children?: React.ReactNode;
 };

package/src/handlers/gestureHandlerTypesCompat.ts

@@ -4,30 +4,30 @@ import type {
   LegacyRawButtonProps,
   LegacyRectButtonProps,
 } from '../components/GestureButtonsProps';
-import {
+import type { FlingGestureHandlerProps } from './FlingGestureHandler';
+import type { ForceTouchGestureHandlerProps } from './ForceTouchGestureHandler';
+import type {
   GestureEvent,
   GestureEventPayload,
   HandlerStateChangeEvent,
   HandlerStateChangeEventPayload,
 } from './gestureHandlerCommon';
-import type { FlingGestureHandlerProps } from './FlingGestureHandler';
 import type {
   FlingGestureHandlerEventPayload,
   ForceTouchGestureHandlerEventPayload,
   LongPressGestureHandlerEventPayload,
+  NativeViewGestureHandlerPayload,
   PanGestureHandlerEventPayload,
   PinchGestureHandlerEventPayload,
   RotationGestureHandlerEventPayload,
   TapGestureHandlerEventPayload,
-  NativeViewGestureHandlerPayload,
 } from './GestureHandlerEventPayload';
-import type { ForceTouchGestureHandlerProps } from './ForceTouchGestureHandler';
 import type { LongPressGestureHandlerProps } from './LongPressGestureHandler';
+import type { NativeViewGestureHandlerProps } from './NativeViewGestureHandler';
 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
 export type GestureHandlerGestureEventNativeEvent = GestureEventPayload;

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Reanimated } from '../reanimatedWrapper';
+
 import { tagMessage } from '../../../utils';
+import { Reanimated } from '../reanimatedWrapper';
 
 export class Wrap extends React.Component<{
   onGestureHandlerEvent?: unknown;

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

@@ -1,41 +1,45 @@
-import React, { forwardRef } from 'react';
 import type { LegacyRef, PropsWithChildren } from 'react';
+import React from 'react';
+
 import { tagMessage } from '../../../utils';
 import { isRNSVGNode } from '../../../web/utils';
 
-export const Wrap = forwardRef<HTMLDivElement, PropsWithChildren<{}>>(
-  ({ children }, ref) => {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const child: any = React.Children.only(children);
-
-      if (isRNSVGNode(child)) {
-        const clone = React.cloneElement(
-          child,
-          { ref },
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          child.props.children
-        );
-
-        return clone;
-      }
+export const Wrap = ({
+  ref,
+  children,
+}: PropsWithChildren<{}> & {
+  ref: React.Ref<HTMLDivElement>;
+}) => {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const child: any = React.Children.only(children);
 
-      return (
-        <div
-          ref={ref as LegacyRef<HTMLDivElement>}
-          style={{ display: 'contents' }}>
-          {child}
-        </div>
-      );
-    } catch (e) {
-      throw new Error(
-        tagMessage(
-          `GestureDetector got more than one view as a child. If you want the gesture to work on multiple views, wrap them with a common parent and attach the gesture to that view.`
-        )
+    if (isRNSVGNode(child)) {
+      const clone = React.cloneElement(
+        child,
+        { ref },
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        child.props.children
       );
+
+      return clone;
     }
+
+    return (
+      <div
+        ref={ref as LegacyRef<HTMLDivElement>}
+        style={{ display: 'contents' }}>
+        {child}
+      </div>
+    );
+  } catch (e) {
+    throw new Error(
+      tagMessage(
+        `GestureDetector got more than one view as a child. If you want the gesture to work on multiple views, wrap them with a common parent and attach the gesture to that view.`
+      )
+    );
   }
-);
+};
 
 // On web we never take a path with Reanimated,
 // therefore we can simply export Wrap

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

@@ -1,21 +1,22 @@
-import React from 'react';
-import { GestureType, HandlerCallbacks } from '../gesture';
-import { registerHandler } from '../../handlersRegistry';
-import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
-import { filterConfig, scheduleFlushOperations } from '../../utils';
-import { ComposedGesture } from '../gestureComposition';
-import { ActionType } from '../../../ActionType';
+import type React from 'react';
 import { Platform } from 'react-native';
-import type RNGestureHandlerModuleWeb from '../../../RNGestureHandlerModule.web';
+
+import { ActionType } from '../../../ActionType';
 import { ghQueueMicrotask } from '../../../ghQueueMicrotask';
-import { AttachedGestureState } from './types';
+import { MountRegistry } from '../../../mountRegistry';
+import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
+import type RNGestureHandlerModuleWeb from '../../../RNGestureHandlerModule.web';
+import type { PropsRef } from '../../../web/interfaces';
+import { registerHandler } from '../../handlersRegistry';
+import { filterConfig, scheduleFlushOperations } from '../../utils';
+import type { GestureType, HandlerCallbacks } from '../gesture';
+import type { ComposedGesture } from '../gestureComposition';
+import type { AttachedGestureState } from './types';
 import {
-  extractGestureRelations,
-  checkGestureCallbacksForWorklets,
   ALLOWED_PROPS,
+  checkGestureCallbacksForWorklets,
+  extractGestureRelations,
 } from './utils';
-import { MountRegistry } from '../../../mountRegistry';
-import { PropsRef } from '../../../web/interfaces';
 
 interface AttachHandlersConfig {
   preparedGesture: AttachedGestureState;

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

@@ -1,8 +1,8 @@
-import { unregisterHandler } from '../../handlersRegistry';
+import { MountRegistry } from '../../../mountRegistry';
 import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
+import { unregisterHandler } from '../../handlersRegistry';
 import { scheduleFlushOperations } from '../../utils';
-import { AttachedGestureState } from './types';
-import { MountRegistry } from '../../../mountRegistry';
+import type { AttachedGestureState } from './types';
 
 export function dropHandlers(preparedGesture: AttachedGestureState) {
   for (const handler of preparedGesture.attachedGestures) {

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

@@ -1,20 +1,21 @@
 /* eslint-disable react/no-unused-prop-types */
 import React, { useEffect, useMemo, useRef } from 'react';
+
 import findNodeHandle from '../../../findNodeHandle';
-import { GestureType } from '../gesture';
-import { UserSelect, TouchAction } from '../../gestureHandlerCommon';
-import { ComposedGesture } from '../gestureComposition';
-import { AttachedGestureState, GestureDetectorState } from './types';
-import { useAnimatedGesture } from './useAnimatedGesture';
+import { useIsomorphicLayoutEffect } from '../../../useIsomorphicLayoutEffect';
+import type { TouchAction, UserSelect } from '../../gestureHandlerCommon';
+import type { GestureType } from '../gesture';
+import type { ComposedGesture } from '../gestureComposition';
 import { attachHandlers } from './attachHandlers';
-import { needsToReattach } from './needsToReattach';
 import { dropHandlers } from './dropHandlers';
-import { useWebEventHandlers } from './utils';
-import { Wrap, AnimatedWrap } from './Wrap';
+import { needsToReattach } from './needsToReattach';
+import type { AttachedGestureState, GestureDetectorState } from './types';
+import { useAnimatedGesture } from './useAnimatedGesture';
 import { useDetectorUpdater } from './useDetectorUpdater';
-import { useViewRefHandler } from './useViewRefHandler';
 import { useMountReactions } from './useMountReactions';
-import { useIsomorphicLayoutEffect } from '../../../useIsomorphicLayoutEffect';
+import { useViewRefHandler } from './useViewRefHandler';
+import { useWebEventHandlers } from './utils';
+import { AnimatedWrap, Wrap } from './Wrap';
 
 function propagateDetectorConfig(
   props: GestureDetectorProps,

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

@@ -1,5 +1,5 @@
-import { GestureType } from '../gesture';
-import { AttachedGestureState } from './types';
+import type { GestureType } from '../gesture';
+import type { AttachedGestureState } from './types';
 
 // Checks whether the gesture should be reattached to the view, this will happen when:
 // - The number of gestures in the preparedGesture is different than the number of gestures in the gesture

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

@@ -1,5 +1,5 @@
-import { SharedValue } from '../../../v3/types';
-import { GestureType, HandlerCallbacks } from '../gesture';
+import type { SharedValue } from '../../../v3/types';
+import type { GestureType, HandlerCallbacks } from '../gesture';
 
 export interface AttachedGestureState {
   // Array of gestures that should be attached to the view under that gesture detector

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

@@ -1,14 +1,14 @@
-import { GestureType, HandlerCallbacks } from '../gesture';
-import { registerHandler } from '../../handlersRegistry';
+import { ghQueueMicrotask } from '../../../ghQueueMicrotask';
 import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
+import { registerHandler } from '../../handlersRegistry';
 import { filterConfig, scheduleFlushOperations } from '../../utils';
-import { ComposedGesture } from '../gestureComposition';
-import { ghQueueMicrotask } from '../../../ghQueueMicrotask';
-import { AttachedGestureState } from './types';
+import type { GestureType, HandlerCallbacks } from '../gesture';
+import type { ComposedGesture } from '../gestureComposition';
+import type { AttachedGestureState } from './types';
 import {
-  extractGestureRelations,
-  checkGestureCallbacksForWorklets,
   ALLOWED_PROPS,
+  checkGestureCallbacksForWorklets,
+  extractGestureRelations,
 } from './utils';
 
 export function updateHandlers(

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

@@ -1,18 +1,17 @@
-import { HandlerCallbacks, CALLBACK_TYPE } from '../gesture';
-import { Reanimated } from '../reanimatedWrapper';
-import {
-  GestureTouchEvent,
-  GestureUpdateEvent,
-  GestureStateChangeEvent,
-} from '../../gestureHandlerCommon';
-import {
-  GestureStateManager,
-  GestureStateManagerType,
-} from '../gestureStateManager';
 import { State } from '../../../State';
 import { TouchEventType } from '../../../TouchEventType';
 import { tagMessage } from '../../../utils';
-import { AttachedGestureState } from './types';
+import type {
+  GestureStateChangeEvent,
+  GestureTouchEvent,
+  GestureUpdateEvent,
+} from '../../gestureHandlerCommon';
+import type { HandlerCallbacks } from '../gesture';
+import { CALLBACK_TYPE } from '../gesture';
+import type { GestureStateManagerType } from '../gestureStateManager';
+import { GestureStateManager } from '../gestureStateManager';
+import { Reanimated } from '../reanimatedWrapper';
+import type { AttachedGestureState } from './types';
 
 function getHandler(
   type: CALLBACK_TYPE,

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

@@ -1,15 +1,16 @@
-import React, { useCallback } from 'react';
-import { GestureType } from '../gesture';
-import { ComposedGesture } from '../gestureComposition';
+import type React from 'react';
+import { useCallback } from 'react';
 
-import { AttachedGestureState, GestureDetectorState } from './types';
+import findNodeHandle from '../../../findNodeHandle';
+import type { PropsRef } from '../../../web/interfaces';
+import type { GestureType } from '../gesture';
+import type { ComposedGesture } from '../gestureComposition';
 import { attachHandlers } from './attachHandlers';
-import { updateHandlers } from './updateHandlers';
-import { needsToReattach } from './needsToReattach';
 import { dropHandlers } from './dropHandlers';
+import { needsToReattach } from './needsToReattach';
+import type { AttachedGestureState, GestureDetectorState } from './types';
+import { updateHandlers } from './updateHandlers';
 import { useForceRender, validateDetectorChildren } from './utils';
-import findNodeHandle from '../../../findNodeHandle';
-import { PropsRef } from '../../../web/interfaces';
 
 // Returns a function that's responsible for updating the attached gestures
 // If the view has changed, it will reattach the handlers to the new view

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

@@ -1,8 +1,9 @@
-import { transformIntoHandlerTags } from '../../utils';
-import { MountRegistry } from '../../../mountRegistry';
-import { AttachedGestureState } from './types';
 import { useEffect } from 'react';
-import { GestureRef } from '../gesture';
+
+import { MountRegistry } from '../../../mountRegistry';
+import { transformIntoHandlerTags } from '../../utils';
+import type { GestureRef } from '../gesture';
+import type { AttachedGestureState } from './types';
 
 function shouldUpdateDetector(
   relation: GestureRef[] | undefined,