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

package/src/components/ReanimatedSwipeable/ReanimatedSwipeable.tsx

@@ -1,27 +1,27 @@
-import { useMemo, useCallback, useImperativeHandle, ForwardedRef } from 'react';
-import { LayoutChangeEvent, View, I18nManager, StyleSheet } from 'react-native';
+import type { ForwardedRef } from 'react';
+import { useCallback, useImperativeHandle, useMemo } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { I18nManager, StyleSheet, View } from 'react-native';
 import Animated, {
-  useSharedValue,
   interpolate,
-  runOnJS,
-  ReduceMotion,
-  withSpring,
-  useAnimatedRef,
   measure,
+  ReduceMotion,
+  runOnJS,
   runOnUI,
+  useAnimatedRef,
   useAnimatedStyle,
+  useSharedValue,
+  withSpring,
 } from 'react-native-reanimated';
-import {
-  SwipeableProps,
+
+import { GestureDetector } from '../../v3/detectors';
+import type { PanGestureActiveEvent } from '../../v3/hooks/gestures';
+import { usePanGesture, useTapGesture } from '../../v3/hooks/gestures';
+import type {
   SwipeableMethods,
-  SwipeDirection,
+  SwipeableProps,
 } from './ReanimatedSwipeableProps';
-import {
-  PanGestureEvent,
-  usePanGesture,
-  useTapGesture,
-} from '../../v3/hooks/gestures';
-import { GestureDetector } from '../../v3/detectors';
+import { SwipeDirection } from './ReanimatedSwipeableProps';
 
 const DRAG_TOSS = 0.05;
 
@@ -56,9 +56,9 @@ const Swipeable = (props: SwipeableProps) => {
     onSwipeableClose,
     renderLeftActions,
     renderRightActions,
-    simultaneousWithExternalGesture,
-    requireExternalGestureToFail,
-    blocksExternalGesture,
+    simultaneousWith,
+    requireToFail,
+    block,
     hitSlop,
     ...remainingProps
   } = props;
@@ -402,7 +402,7 @@ const Swipeable = (props: SwipeableProps) => {
   );
 
   const handleRelease = useCallback(
-    (event: PanGestureEvent) => {
+    (event: PanGestureActiveEvent) => {
       'worklet';
       const { velocityX } = event;
       userDrag.value = event.translationX;
@@ -456,9 +456,9 @@ const Swipeable = (props: SwipeableProps) => {
   const tapGesture = useTapGesture({
     shouldCancelWhenOutside: true,
     enabled: shouldEnableTap,
-    simultaneousWith: simultaneousWithExternalGesture,
-    requireToFail: requireExternalGestureToFail,
-    block: blocksExternalGesture,
+    simultaneousWith,
+    requireToFail,
+    block,
     onActivate: () => {
       'worklet';
       if (rowState.value !== 0) {
@@ -471,12 +471,12 @@ const Swipeable = (props: SwipeableProps) => {
     enabled: enabled !== false,
     enableTrackpadTwoFingerGesture: enableTrackpadTwoFingerGesture,
     activeOffsetX: [-dragOffsetFromRightEdge, dragOffsetFromLeftEdge],
-    simultaneousWith: simultaneousWithExternalGesture,
-    requireToFail: requireExternalGestureToFail,
-    block: blocksExternalGesture,
+    simultaneousWith,
+    requireToFail,
+    block,
     hitSlop: hitSlop,
     onActivate: updateElementWidths,
-    onUpdate: (event: PanGestureEvent) => {
+    onUpdate: (event: PanGestureActiveEvent) => {
       'worklet';
       userDrag.value = event.translationX;
 
@@ -500,7 +500,7 @@ const Swipeable = (props: SwipeableProps) => {
 
       updateAnimatedEvent();
     },
-    onDeactivate: (event: PanGestureEvent) => {
+    onDeactivate: (event: PanGestureActiveEvent) => {
       'worklet';
       handleRelease(event);
     },
@@ -552,12 +552,12 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   leftActions: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     overflow: 'hidden',
   },
   rightActions: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',
     overflow: 'hidden',
   },

package/src/components/ReanimatedSwipeable/ReanimatedSwipeableProps.ts

@@ -1,8 +1,9 @@
-import React from 'react';
-import { SharedValue } from 'react-native-reanimated';
-import { StyleProp, ViewStyle } from 'react-native';
-import { HitSlop } from '../../handlers/gestureHandlerCommon';
-import { AnyGesture } from '../../v3/types';
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+
+import type { HitSlop } from '../../handlers/gestureHandlerCommon';
+import type { AnyGesture } from '../../v3/types';
 
 export enum SwipeDirection {
   LEFT = 'left',
@@ -13,7 +14,7 @@ export interface SwipeableProps {
   /**
    *
    */
-  ref?: React.RefObject<SwipeableMethods | null>;
+  ref?: React.Ref<SwipeableMethods>;
 
   /**
    * Sets a `testID` property, allowing for querying `ReanimatedSwipeable` for it in tests.
@@ -190,23 +191,19 @@ export interface SwipeableProps {
    * A gesture object or an array of gesture objects containing the configuration and callbacks to be
    * used with the swipeable's gesture handler.
    */
-  simultaneousWithExternalGesture?: AnyGesture | AnyGesture[];
+  simultaneousWith?: AnyGesture | AnyGesture[];
 
   /**
    * A gesture object or an array of gesture objects containing the configuration and callbacks to be
    * used with the swipeable's gesture handler.
    */
-  requireExternalGestureToFail?: AnyGesture | AnyGesture[];
+  requireToFail?: AnyGesture | AnyGesture[];
 
   /**
    * A gesture object or an array of gesture objects containing the configuration and callbacks to be
    * used with the swipeable's gesture handler.
    */
-  blocksExternalGesture?: AnyGesture | AnyGesture[];
-
-  id?: string;
-
-  cancelsTouchesInView?: boolean;
+  block?: AnyGesture | AnyGesture[];
 }
 
 export interface SwipeableMethods {

package/src/components/ReanimatedSwipeable/index.ts

@@ -1,6 +1,6 @@
+export { default } from './ReanimatedSwipeable';
 export {
-  type SwipeableProps,
   type SwipeableMethods,
+  type SwipeableProps,
   SwipeDirection,
 } from './ReanimatedSwipeableProps';
-export { default } from './ReanimatedSwipeable';

package/src/components/Text.tsx

@@ -1,33 +1,30 @@
-import React, {
-  ForwardedRef,
-  forwardRef,
-  RefObject,
-  useEffect,
-  useRef,
-} from 'react';
-import {
-  Platform,
-  Text as RNText,
-  TextProps as RNTextProps,
-} from 'react-native';
+import type { ComponentRef, Ref } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
+import type { TextProps as RNTextProps } from 'react-native';
+import { Platform, Text as RNText } from 'react-native';
 
-import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
 import { GestureDetector } from '../handlers/gestures/GestureDetector';
+import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
 
-export const Text = forwardRef(
-  (
-    props: RNTextProps,
-    ref: ForwardedRef<React.ComponentRef<typeof RNText>>
-  ) => {
-    const { onPress, onLongPress, ...rest } = props;
+type TextProps = RNTextProps & {
+  ref?: Ref<ComponentRef<typeof RNText> | null>;
+};
+type RNGHTextRef = Ref<RNText | null> & { rngh?: boolean };
 
-    const textRef = useRef<RNText | null>(null);
-    const native = Gesture.Native().runOnJS(true);
+/**
+ * @deprecated `LegacyText` is deprecated. Since Gesture Handler 3, you should wrap `Text` with `GestureDetector`, `InterceptingGestureDetector`, or `VirtualGestureDetector`.
+ */
+export const LegacyText = (props: TextProps) => {
+  const { onPress, onLongPress, ref, ...rest } = props;
 
-    const refHandler = (node: any) => {
+  const textRef = useRef<RNText | null>(null);
+  const native = useMemo(() => Gesture.Native().runOnJS(true), []);
+
+  const refHandler = useMemo(() => {
+    const handler: RNGHTextRef = (node: RNText | null) => {
       textRef.current = node;
 
-      if (ref === null) {
+      if (!ref) {
         return;
       }
 
@@ -41,37 +38,39 @@ export const Text = forwardRef(
     // This is a special case for `Text` component. After https://github.com/software-mansion/react-native-gesture-handler/pull/3379 we check for
     // `displayName` field. However, `Text` from RN has this field set to `Text`, but is also present in `RNSVGElements` set.
     // We don't want to treat our `Text` as the one from `SVG`, therefore we add special field to ref.
-    refHandler.rngh = true;
-
-    useEffect(() => {
-      if (Platform.OS !== 'web') {
-        return;
-      }
+    handler.rngh = true;
 
-      const textElement = ref
-        ? (ref as RefObject<React.ComponentRef<typeof RNText>>).current
-        : textRef.current;
+    return handler;
+  }, [ref]);
 
-      // At this point we are sure that textElement is div in HTML tree
-      (textElement as unknown as HTMLDivElement)?.setAttribute(
-        'rnghtext',
-        'true'
-      );
-    }, []);
+  useEffect(() => {
+    if (Platform.OS !== 'web') {
+      return;
+    }
 
-    return onPress || onLongPress ? (
-      <GestureDetector gesture={native}>
-        <RNText
-          onPress={onPress}
-          onLongPress={onLongPress}
-          ref={refHandler}
-          {...rest}
-        />
-      </GestureDetector>
-    ) : (
-      <RNText ref={ref} {...rest} />
+    // At this point we are sure that textElement is div in HTML tree
+    (textRef.current as unknown as HTMLDivElement)?.setAttribute(
+      'rnghtext',
+      'true'
     );
-  }
-);
+  }, []);
+
+  return onPress || onLongPress ? (
+    <GestureDetector gesture={native}>
+      <RNText
+        onPress={onPress}
+        onLongPress={onLongPress}
+        ref={refHandler}
+        {...rest}
+      />
+    </GestureDetector>
+  ) : (
+    <RNText ref={refHandler} {...rest} />
+  );
+};
+
+/**
+ * @deprecated `LegacyText` is deprecated. Since Gesture Handler 3, you should wrap `Text` with `GestureDetector`, `InterceptingGestureDetector`, or `VirtualGestureDetector`.
+ */
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type Text = typeof Text & RNText;
+export type LegacyText = typeof LegacyText & RNText;

package/src/components/touchables/ExtraButtonProps.ts

@@ -1,7 +1,7 @@
 export type ExtraButtonProps = {
-  borderless?: boolean;
-  rippleColor?: number | string | null;
-  rippleRadius?: number | null;
-  foreground?: boolean;
-  exclusive?: boolean;
+  borderless?: boolean | undefined;
+  rippleColor?: number | string | null | undefined;
+  rippleRadius?: number | null | undefined;
+  foreground?: boolean | undefined;
+  exclusive?: boolean | undefined;
 };

package/src/components/touchables/GenericTouchable.tsx

@@ -2,14 +2,13 @@ import * as React from 'react';
 import { Component } from 'react';
 import { Animated, Platform } from 'react-native';
 
-import { State } from '../../State';
-import { LegacyBaseButton } from '../GestureButtons';
-
-import {
+import type {
   GestureEvent,
   HandlerStateChangeEvent,
 } from '../../handlers/gestureHandlerCommon';
 import type { NativeViewGestureHandlerPayload } from '../../handlers/GestureHandlerEventPayload';
+import { State } from '../../State';
+import { LegacyBaseButton } from '../GestureButtons';
 import type { GenericTouchableProps } from './GenericTouchableProps';
 
 /**
@@ -31,9 +30,7 @@ interface InternalProps {
   onStateChange?: (oldState: TouchableState, newState: TouchableState) => void;
 }
 
-// TODO: maybe can be better
-// TODO: all clearTimeout have ! added, maybe they shouldn't ?
-type Timeout = ReturnType<typeof setTimeout> | null | undefined;
+type Timeout = ReturnType<typeof setTimeout> | undefined;
 
 /**
  * GenericTouchable is not intented to be used as it is.
@@ -70,7 +67,7 @@ export default class GenericTouchable extends Component<
     if (this.props.delayPressIn) {
       this.pressInTimeout = setTimeout(() => {
         this.moveToState(TOUCHABLE_STATE.BEGAN);
-        this.pressInTimeout = null;
+        this.pressInTimeout = undefined;
       }, this.props.delayPressIn);
     } else {
       this.moveToState(TOUCHABLE_STATE.BEGAN);
@@ -89,7 +86,7 @@ export default class GenericTouchable extends Component<
         this.pressOutTimeout ||
         setTimeout(() => {
           this.moveToState(TOUCHABLE_STATE.MOVED_OUTSIDE);
-          this.pressOutTimeout = null;
+          this.pressOutTimeout = undefined;
         }, this.props.delayPressOut);
     } else {
       this.moveToState(TOUCHABLE_STATE.MOVED_OUTSIDE);
@@ -98,14 +95,14 @@ export default class GenericTouchable extends Component<
 
   // handleGoToUndetermined transits to UNDETERMINED state with proper delay
   handleGoToUndetermined() {
-    clearTimeout(this.pressOutTimeout!); // TODO: maybe it can be undefined
+    clearTimeout(this.pressOutTimeout);
     if (this.props.delayPressOut) {
       this.pressOutTimeout = setTimeout(() => {
         if (this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
           this.moveToState(TOUCHABLE_STATE.BEGAN);
         }
         this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
-        this.pressOutTimeout = null;
+        this.pressOutTimeout = undefined;
       }, this.props.delayPressOut);
     } else {
       if (this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
@@ -122,12 +119,12 @@ export default class GenericTouchable extends Component<
   reset() {
     this.longPressDetected = false;
     this.pointerInside = true;
-    clearTimeout(this.pressInTimeout!);
-    clearTimeout(this.pressOutTimeout!);
-    clearTimeout(this.longPressTimeout!);
-    this.pressOutTimeout = null;
-    this.longPressTimeout = null;
-    this.pressInTimeout = null;
+    clearTimeout(this.pressInTimeout);
+    clearTimeout(this.pressOutTimeout);
+    clearTimeout(this.longPressTimeout);
+    this.pressOutTimeout = undefined;
+    this.longPressTimeout = undefined;
+    this.pressInTimeout = undefined;
   }
 
   // All states' transitions are defined here.
@@ -189,7 +186,7 @@ export default class GenericTouchable extends Component<
       const shouldCallOnPress =
         !this.longPressDetected &&
         this.STATE !== TOUCHABLE_STATE.MOVED_OUTSIDE &&
-        this.pressOutTimeout === null;
+        this.pressOutTimeout === undefined;
       this.handleGoToUndetermined();
       if (shouldCallOnPress) {
         // Calls only inside component whether no long press was called previously
@@ -218,8 +215,8 @@ export default class GenericTouchable extends Component<
 
   onMoveOut() {
     // Long press should no longer be detected
-    clearTimeout(this.longPressTimeout!);
-    this.longPressTimeout = null;
+    clearTimeout(this.longPressTimeout);
+    this.longPressTimeout = undefined;
     if (this.STATE === TOUCHABLE_STATE.BEGAN) {
       this.handleMoveOutside();
     }

package/src/components/touchables/GenericTouchableProps.ts

@@ -1,11 +1,12 @@
 import type {
+  Insets,
   StyleProp,
-  ViewStyle,
   TouchableWithoutFeedbackProps,
-  Insets,
+  ViewStyle,
 } from 'react-native';
+
 import type { UserSelect } from '../../handlers/gestureHandlerCommon';
-import { ExtraButtonProps } from './ExtraButtonProps';
+import type { ExtraButtonProps } from './ExtraButtonProps';
 
 export interface GenericTouchableProps
   extends Omit<TouchableWithoutFeedbackProps, 'hitSlop'> {

package/src/components/touchables/TouchableHighlight.tsx

@@ -1,21 +1,21 @@
 import * as React from 'react';
 import { Component } from 'react';
-import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
-import type { GenericTouchableProps } from './GenericTouchableProps';
-import {
-  StyleSheet,
-  View,
-  TouchableHighlightProps as RNTouchableHighlightProps,
+import type {
   ColorValue,
+  TouchableHighlightProps as RNTouchableHighlightProps,
   ViewProps,
 } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
+import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
+import type { GenericTouchableProps } from './GenericTouchableProps';
 
 interface State {
   extraChildStyle: null | {
-    opacity?: number;
+    opacity?: number | undefined;
   };
   extraUnderlayStyle: null | {
-    backgroundColor?: ColorValue;
+    backgroundColor?: ColorValue | undefined;
   };
 }
 

package/src/components/touchables/TouchableNativeFeedback.android.tsx

@@ -1,10 +1,12 @@
-import { Platform, ColorValue } from 'react-native';
 import * as React from 'react';
 import { Component } from 'react';
+import type { ColorValue } from 'react-native';
+import { Platform } from 'react-native';
+
 import GenericTouchable from './GenericTouchable';
-import {
-  TouchableNativeFeedbackProps,
+import type {
   TouchableNativeFeedbackExtraProps,
+  TouchableNativeFeedbackProps,
 } from './TouchableNativeFeedbackProps';
 
 /**

package/src/components/touchables/TouchableNativeFeedbackProps.tsx

@@ -1,6 +1,7 @@
 import type { TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps } from 'react-native';
+
+import type { ExtraButtonProps } from './ExtraButtonProps';
 import type { GenericTouchableProps } from './GenericTouchableProps';
-import { ExtraButtonProps } from './ExtraButtonProps';
 
 export type TouchableNativeFeedbackExtraProps = ExtraButtonProps;
 /**

package/src/components/touchables/TouchableOpacity.tsx

@@ -1,14 +1,10 @@
-import {
-  Animated,
-  Easing,
-  StyleSheet,
-  View,
-  TouchableOpacityProps as RNTouchableOpacityProps,
-} from 'react-native';
-import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
-import type { GenericTouchableProps } from './GenericTouchableProps';
 import * as React from 'react';
 import { Component } from 'react';
+import type { TouchableOpacityProps as RNTouchableOpacityProps } from 'react-native';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+
+import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
+import type { GenericTouchableProps } from './GenericTouchableProps';
 
 /**
  * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.

package/src/components/touchables/TouchableWithoutFeedback.tsx

@@ -1,5 +1,6 @@
+import type { PropsWithChildren } from 'react';
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
+
 import GenericTouchable from './GenericTouchable';
 import type { GenericTouchableProps } from './GenericTouchableProps';
 
@@ -11,29 +12,21 @@ export type TouchableWithoutFeedbackProps = GenericTouchableProps;
 /**
  * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
-const TouchableWithoutFeedback = React.forwardRef<
-  GenericTouchable,
-  PropsWithChildren<TouchableWithoutFeedbackProps>
->(
-  (
-    {
-      delayLongPress = 600,
-      extraButtonProps = {
-        rippleColor: 'transparent',
-        exclusive: true,
-      },
-      ...rest
-    },
-
-    ref
-  ) => (
-    <GenericTouchable
-      ref={ref}
-      delayLongPress={delayLongPress}
-      extraButtonProps={extraButtonProps}
-      {...rest}
-    />
-  )
+const TouchableWithoutFeedback = ({
+  delayLongPress = 600,
+  extraButtonProps = {
+    rippleColor: 'transparent',
+    exclusive: true,
+  },
+  ...rest
+}: PropsWithChildren<TouchableWithoutFeedbackProps> & {
+  ref?: React.Ref<GenericTouchable>;
+}) => (
+  <GenericTouchable
+    delayLongPress={delayLongPress}
+    extraButtonProps={extraButtonProps}
+    {...rest}
+  />
 );
 
 export default TouchableWithoutFeedback;

package/src/components/touchables/index.ts

@@ -1,7 +1,7 @@
 export type { TouchableHighlightProps } from './TouchableHighlight';
+export { default as TouchableHighlight } from './TouchableHighlight';
+export { default as TouchableNativeFeedback } from './TouchableNativeFeedback';
 export type { TouchableOpacityProps } from './TouchableOpacity';
+export { default as TouchableOpacity } from './TouchableOpacity';
 export type { TouchableWithoutFeedbackProps } from './TouchableWithoutFeedback';
-export { default as TouchableNativeFeedback } from './TouchableNativeFeedback';
 export { default as TouchableWithoutFeedback } from './TouchableWithoutFeedback';
-export { default as TouchableOpacity } from './TouchableOpacity';
-export { default as TouchableHighlight } from './TouchableHighlight';

package/src/components/utils.ts

@@ -1,4 +1,4 @@
-import { BaseGesture, GestureRef } from '../handlers/gestures/gesture';
+import type { BaseGesture, GestureRef } from '../handlers/gestures/gesture';
 
 export type RelationPropName =
   | 'simultaneousWithExternalGesture'

package/src/findNodeHandle.web.ts

@@ -1,4 +1,5 @@
 import { FlatList } from 'react-native';
+
 import type { GestureHandlerRef, SVGRef } from './web/interfaces';
 import { isRNSVGElement } from './web/utils';
 
@@ -18,7 +19,10 @@ export default function findNodeHandle(
   }
 
   if (viewRef instanceof Element) {
-    if (viewRef.style.display === 'contents') {
+    if (
+      viewRef.style.display === 'contents' &&
+      viewRef.childElementCount === 1
+    ) {
       return findNodeHandle(viewRef.firstChild as HTMLElement);
     }
 
@@ -31,9 +35,15 @@ export default function findNodeHandle(
 
   // In new API, we receive ref object which `current` field points to  wrapper `div` with `display: contents;`.
   // We want to return the first descendant (in DFS order) that doesn't have this property.
+  // When a `display: contents` wrapper has multiple children (e.g. multi-child detector),
+  // we stop traversal and return the wrapper itself since there is no single child to resolve to.
   let element = (viewRef as GestureHandlerRef)?.current;
 
-  while (element && element.style.display === 'contents') {
+  while (
+    element &&
+    element.style.display === 'contents' &&
+    element.childElementCount === 1
+  ) {
     element = element.firstChild as HTMLElement;
   }
 

package/src/handlers/FlingGestureHandler.ts

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

package/src/handlers/ForceTouchGestureHandler.ts

@@ -1,11 +1,11 @@
-import React, { PropsWithChildren } from 'react';
-import { tagMessage } from '../utils';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+
 import PlatformConstants from '../PlatformConstants';
+import { tagMessage } from '../utils';
 import createHandler from './createHandler';
-import {
-  BaseGestureHandlerProps,
-  baseGestureHandlerProps,
-} from './gestureHandlerCommon';
+import type { BaseGestureHandlerProps } from './gestureHandlerCommon';
+import { baseGestureHandlerProps } from './gestureHandlerCommon';
 import type { ForceTouchGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 
 export const forceTouchGestureHandlerProps = [