Resolve circular dependencies on JS side

src/RNGestureHandlerModule.web.ts

@@ -7,6 +7,7 @@
 import InteractionManager from './web/tools/InteractionManager';
 import NodeManager from './web/tools/NodeManager';
 import * as HammerNodeManager from './web_hammer/NodeManager';
+import * as createGestureHandler from './web_hammer/modifyGestureHandlerRegistry';
 import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
 
 export default {
@@ -48,7 +49,7 @@
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const GestureClass = HammerGestures[handlerName];
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
+      createGestureHandler.createGestureHandler(handlerTag, new GestureClass());
     }
 
     this.updateGestureHandler(handlerTag, config as unknown as Config);
@@ -68,10 +69,10 @@
 
     if (isNewWebImplementationEnabled()) {
       //@ts-ignore Types should be HTMLElement or React.Component
       NodeManager.getHandler(handlerTag).init(newView, propsRef);
     } else {
       //@ts-ignore Types should be HTMLElement or React.Component
       HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
     }
   },
   updateGestureHandler(handlerTag: number, newConfig: Config) {
@@ -83,21 +84,21 @@
         newConfig
       );
     } else {
       HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
     }
   },
   getGestureHandlerNode(handlerTag: number) {
     if (isNewWebImplementationEnabled()) {
       return NodeManager.getHandler(handlerTag);
     } else {
       return HammerNodeManager.getHandler(handlerTag);
     }
   },
   dropGestureHandler(handlerTag: number) {
     if (isNewWebImplementationEnabled()) {
       NodeManager.dropGestureHandler(handlerTag);
     } else {
-      HammerNodeManager.dropGestureHandler(handlerTag);
+      createGestureHandler.dropGestureHandler(handlerTag);
     }
   },
   // eslint-disable-next-line @typescript-eslint/no-empty-function

src/components/DrawerLayout.tsx

@@ -30,14 +30,12 @@
   ActiveCursor,
   MouseButton,
 } from '../handlers/gestureHandlerCommon';
+import { PanGestureHandler } from '../handlers/PanGestureHandler';
 import {
-  PanGestureHandler,
   PanGestureHandlerEventPayload,
-} from '../handlers/PanGestureHandler';
-import {
-  TapGestureHandler,
   TapGestureHandlerEventPayload,
-} from '../handlers/TapGestureHandler';
+} from '../handlers/GestureHandlerEventPayload';
+import { TapGestureHandler } from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;
@@ -332,7 +330,7 @@
       );
 
       const dragOffsetFromOnStartPosition = startPositionX.interpolate({
         inputRange: [drawerWidth! - 1, drawerWidth!, drawerWidth! + 1],
         outputRange: [0, 0, 1],
       });
       translationX = Animated.add(

src/components/GestureButtons.tsx

@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  processColor,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { Animated, Platform, processColor, StyleSheet } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
 import GestureHandlerButton from './GestureHandlerButton';
@@ -16,118 +9,15 @@ import {
   GestureEvent,
   HandlerStateChangeEvent,
 } from '../handlers/gestureHandlerCommon';
+import { NativeViewGestureHandlerPayload } from '../handlers/GestureHandlerEventPayload';
 import {
-  NativeViewGestureHandlerPayload,
-  NativeViewGestureHandlerProps,
-} from '../handlers/NativeViewGestureHandler';
-
-export interface RawButtonProps extends NativeViewGestureHandlerProps {
-  /**
-   * Defines if more than one button could be pressed simultaneously. By default
-   * set true.
-   */
-  exclusive?: boolean;
-  // TODO: we should transform props in `createNativeWrapper`
-
-  /**
-   * Android only.
-   *
-   * Defines color of native ripple animation used since API level 21.
-   */
-  rippleColor?: any; // it was present in BaseButtonProps before but is used here in code
-
-  /**
-   * Android only.
-   *
-   * Defines radius of native ripple animation used since API level 21.
-   */
-  rippleRadius?: number | null;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you want the ripple animation to render outside the view bounds.
-   */
-  borderless?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Defines whether the ripple animation should be drawn on the foreground of the view.
-   */
-  foreground?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you don't want the system to play sound when the button is pressed.
-   */
-  touchSoundDisabled?: boolean;
-}
-
-interface ButtonWithRefProps {
-  innerRef?: React.ForwardedRef<React.ComponentType<any>>;
-}
-
-export interface BaseButtonProps extends RawButtonProps {
-  /**
-   * Called when the button gets pressed (analogous to `onPress` in
-   * `TouchableHighlight` from RN core).
-   */
-  onPress?: (pointerInside: boolean) => void;
-
-  /**
-   * Called when the button gets pressed and is held for `delayLongPress`
-   * milliseconds.
-   */
-  onLongPress?: () => void;
-
-  /**
-   * Called when button changes from inactive to active and vice versa. It
-   * passes active state as a boolean variable as a first parameter for that
-   * method.
-   */
-  onActiveStateChange?: (active: boolean) => void;
-  style?: StyleProp<ViewStyle>;
-  testID?: string;
-
-  /**
-   * Delay, in milliseconds, after which the `onLongPress` callback gets called.
-   * Defaults to 600.
-   */
-  delayLongPress?: number;
-}
-
-interface BaseButtonWithRefProps extends BaseButtonProps, ButtonWithRefProps {}
-
-export interface RectButtonProps extends BaseButtonProps {
-  /**
-   * Background color that will be dimmed when button is in active state.
-   */
-  underlayColor?: string;
-
-  /**
-   * iOS only.
-   *
-   * Opacity applied to the underlay when button is in active state.
-   */
-  activeOpacity?: number;
-}
-
-interface RectButtonWithRefProps extends RectButtonProps, ButtonWithRefProps {}
-
-export interface BorderlessButtonProps extends BaseButtonProps {
-  /**
-   * iOS only.
-   *
-   * Opacity applied to the button when it is in an active state.
-   */
-  activeOpacity?: number;
-}
-
-interface BorderlessButtonWithRefProps
-  extends BorderlessButtonProps,
-    ButtonWithRefProps {}
+  BaseButtonWithRefProps,
+  BaseButtonProps,
+  RectButtonWithRefProps,
+  RectButtonProps,
+  BorderlessButtonWithRefProps,
+  BorderlessButtonProps,
+} from './GestureButtonsProps';
 
 export const RawButton = createNativeWrapper(GestureHandlerButton, {
   shouldCancelWhenOutside: false,

src/components/GestureButtonsProps.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
+
+export interface RawButtonProps extends NativeViewGestureHandlerProps {
+  /**
+   * Defines if more than one button could be pressed simultaneously. By default
+   * set true.
+   */
+  exclusive?: boolean;
+  // TODO: we should transform props in `createNativeWrapper`
+  /**
+   * Android only.
+   *
+   * Defines color of native ripple animation used since API level 21.
+   */
+  rippleColor?: any; // it was present in BaseButtonProps before but is used here in code
+
+  /**
+   * Android only.
+   *
+   * Defines radius of native ripple animation used since API level 21.
+   */
+  rippleRadius?: number | null;
+
+  /**
+   * Android only.
+   *
+   * Set this to true if you want the ripple animation to render outside the view bounds.
+   */
+  borderless?: boolean;
+
+  /**
+   * Android only.
+   *
+   * Defines whether the ripple animation should be drawn on the foreground of the view.
+   */
+  foreground?: boolean;
+
+  /**
+   * Android only.
+   *
+   * Set this to true if you don't want the system to play sound when the button is pressed.
+   */
+  touchSoundDisabled?: boolean;
+}
+interface ButtonWithRefProps {
+  innerRef?: React.ForwardedRef<React.ComponentType<any>>;
+}
+
+export interface BaseButtonProps extends RawButtonProps {
+  /**
+   * Called when the button gets pressed (analogous to `onPress` in
+   * `TouchableHighlight` from RN core).
+   */
+  onPress?: (pointerInside: boolean) => void;
+
+  /**
+   * Called when the button gets pressed and is held for `delayLongPress`
+   * milliseconds.
+   */
+  onLongPress?: () => void;
+
+  /**
+   * Called when button changes from inactive to active and vice versa. It
+   * passes active state as a boolean variable as a first parameter for that
+   * method.
+   */
+  onActiveStateChange?: (active: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+
+  /**
+   * Delay, in milliseconds, after which the `onLongPress` callback gets called.
+   * Defaults to 600.
+   */
+  delayLongPress?: number;
+}
+export interface BaseButtonWithRefProps
+  extends BaseButtonProps,
+    ButtonWithRefProps {}
+
+export interface RectButtonProps extends BaseButtonProps {
+  /**
+   * Background color that will be dimmed when button is in active state.
+   */
+  underlayColor?: string;
+
+  /**
+   * iOS only.
+   *
+   * Opacity applied to the underlay when button is in active state.
+   */
+  activeOpacity?: number;
+}
+export interface RectButtonWithRefProps
+  extends RectButtonProps,
+    ButtonWithRefProps {}
+
+export interface BorderlessButtonProps extends BaseButtonProps {
+  /**
+   * iOS only.
+   *
+   * Opacity applied to the button when it is in an active state.
+   */
+  activeOpacity?: number;
+}
+export interface BorderlessButtonWithRefProps
+  extends BorderlessButtonProps,
+    ButtonWithRefProps {}

src/components/GestureHandlerButton.tsx

@@ -1,5 +1,5 @@
 import { HostComponent } from 'react-native';
-import { RawButtonProps } from './GestureButtons';
+import { RawButtonProps } from './GestureButtonsProps';
 import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
 
 export default RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;

src/components/ReanimatedSwipeable.tsx

@@ -15,10 +15,8 @@ import {
   GestureStateChangeEvent,
   GestureUpdateEvent,
 } from '../handlers/gestureHandlerCommon';
-import {
-  PanGestureHandlerEventPayload,
-  PanGestureHandlerProps,
-} from '../handlers/PanGestureHandler';
+import { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
+import { PanGestureHandlerEventPayload } from '../handlers/GestureHandlerEventPayload';
 import Animated, {
   Extrapolation,
   SharedValue,

src/components/Swipeable.tsx

@@ -20,13 +20,13 @@ import {
 } from '../handlers/gestureHandlerCommon';
 import {
   PanGestureHandler,
-  PanGestureHandlerEventPayload,
   PanGestureHandlerProps,
 } from '../handlers/PanGestureHandler';
 import {
-  TapGestureHandler,
+  PanGestureHandlerEventPayload,
   TapGestureHandlerEventPayload,
-} from '../handlers/TapGestureHandler';
+} from '../handlers/GestureHandlerEventPayload';
+import { TapGestureHandler } from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;

src/components/touchables/GenericTouchable.tsx

@@ -1,24 +1,17 @@
 import * as React from 'react';
 import { Component } from 'react';
-import {
-  Animated,
-  Platform,
-  StyleProp,
-  ViewStyle,
-  TouchableWithoutFeedbackProps,
-  Insets,
-} from 'react-native';
+import { Animated, Platform } from 'react-native';
 
 import { State } from '../../State';
 import { BaseButton } from '../GestureButtons';
 
 import {
   GestureEvent,
   HandlerStateChangeEvent,
-  UserSelect,
 } from '../../handlers/gestureHandlerCommon';
-import { NativeViewGestureHandlerPayload } from '../../handlers/NativeViewGestureHandler';
-import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedback.android';
+import { NativeViewGestureHandlerPayload } from '../../handlers/GestureHandlerEventPayload';
+import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedbackProps';
+import { GenericTouchableProps } from './GenericTouchableProps';
 
 /**
  * Each touchable is a states' machine which preforms transitions.
@@ -35,26 +28,6 @@ export const TOUCHABLE_STATE = {
 
 type TouchableState = typeof TOUCHABLE_STATE[keyof typeof TOUCHABLE_STATE];
 
-export interface GenericTouchableProps
-  extends Omit<TouchableWithoutFeedbackProps, 'hitSlop'> {
-  // Decided to drop not used fields from RN's implementation.
-  // e.g. onBlur and onFocus as well as deprecated props. - TODO: this comment may be unuseful in this moment
-
-  // TODO: in RN these events get native event parameter, which prolly could be used in our implementation too
-  onPress?: () => void;
-  onPressIn?: () => void;
-  onPressOut?: () => void;
-  onLongPress?: () => void;
-
-  nativeID?: string;
-  shouldActivateOnStart?: boolean;
-  disallowInterruption?: boolean;
-
-  containerStyle?: StyleProp<ViewStyle>;
-  hitSlop?: Insets | number;
-  userSelect?: UserSelect;
-}
-
 interface InternalProps {
   extraButtonProps: TouchableNativeFeedbackExtraProps;
   onStateChange?: (oldState: TouchableState, newState: TouchableState) => void;