react-native-gesture-handler 2.12.1 → 2.13.0

package/lib/typescript/web/interfaces.d.ts

@@ -1,4 +1,4 @@
-import { UserSelect } from '../handlers/gestureHandlerCommon';
+import { UserSelect, ActiveCursor } from '../handlers/gestureHandlerCommon';
 import { Directions } from '../Directions';
 import { State } from '../State';
 export interface HitSlop {
@@ -14,7 +14,7 @@ export interface HitSlop {
 export interface Handler {
     handlerTag: number;
 }
-declare type ConfigArgs = number | boolean | HitSlop | UserSelect | Directions | Handler[] | null | undefined;
+declare type ConfigArgs = number | boolean | HitSlop | UserSelect | ActiveCursor | Directions | Handler[] | null | undefined;
 export interface Config extends Record<string, ConfigArgs> {
     enabled?: boolean;
     simultaneousHandlers?: Handler[] | null;
@@ -22,6 +22,7 @@ export interface Config extends Record<string, ConfigArgs> {
     hitSlop?: HitSlop;
     shouldCancelWhenOutside?: boolean;
     userSelect?: UserSelect;
+    activeCursor?: ActiveCursor;
     activateAfterLongPress?: number;
     failOffsetXStart?: number;
     failOffsetYStart?: number;
@@ -120,7 +121,7 @@ export declare enum EventTypes {
     ADDITIONAL_POINTER_UP = 3,
     MOVE = 4,
     ENTER = 5,
-    OUT = 6,
+    LEAVE = 6,
     CANCEL = 7
 }
 export declare enum TouchEventType {

package/lib/typescript/web/tools/EventManager.d.ts

@@ -1,9 +1,9 @@
 import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
-export default abstract class EventManager {
-    protected readonly view: HTMLElement;
+export default abstract class EventManager<T> {
+    protected readonly view: T;
     protected pointersInBounds: number[];
     protected activePointersCounter: number;
-    constructor(view: HTMLElement);
+    constructor(view: T);
     abstract setListeners(): void;
     protected abstract mapEvent(event: Event, eventType: EventTypes, index?: number, touchEventType?: TouchEventType): AdaptedEvent;
     protected onPointerDown(_event: AdaptedEvent): void;
@@ -11,19 +11,23 @@ export default abstract class EventManager {
     protected onPointerUp(_event: AdaptedEvent): void;
     protected onPointerRemove(_event: AdaptedEvent): void;
     protected onPointerMove(_event: AdaptedEvent): void;
-    protected onPointerOut(_event: AdaptedEvent): void;
+    protected onPointerLeave(_event: AdaptedEvent): void;
     protected onPointerEnter(_event: AdaptedEvent): void;
     protected onPointerCancel(_event: AdaptedEvent): void;
     protected onPointerOutOfBounds(_event: AdaptedEvent): void;
+    protected onPointerMoveOver(_event: AdaptedEvent): void;
+    protected onPointerMoveOut(_event: AdaptedEvent): void;
     setOnPointerDown(callback: (event: AdaptedEvent) => void): void;
     setOnPointerAdd(callback: (event: AdaptedEvent) => void): void;
     setOnPointerUp(callback: (event: AdaptedEvent) => void): void;
     setOnPointerRemove(callback: (event: AdaptedEvent) => void): void;
     setOnPointerMove(callback: (event: AdaptedEvent) => void): void;
-    setOnPointerOut(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerLeave(callback: (event: AdaptedEvent) => void): void;
     setOnPointerEnter(callback: (event: AdaptedEvent) => void): void;
     setOnPointerCancel(callback: (event: AdaptedEvent) => void): void;
     setOnPointerOutOfBounds(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerMoveOver(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerMoveOut(callback: (event: AdaptedEvent) => void): void;
     protected markAsInBounds(pointerId: number): void;
     protected markAsOutOfBounds(pointerId: number): void;
     resetManager(): void;

package/lib/typescript/web/tools/GestureHandlerDelegate.d.ts

@@ -0,0 +1,22 @@
+import type GestureHandler from '../handlers/GestureHandler';
+export interface MeasureResult {
+    pageX: number;
+    pageY: number;
+    width: number;
+    height: number;
+}
+export interface GestureHandlerDelegate<T> {
+    getView(): T;
+    init(viewRef: number, handler: GestureHandler): void;
+    isPointerInBounds({ x, y }: {
+        x: number;
+        y: number;
+    }): boolean;
+    measureView(): MeasureResult;
+    reset(): void;
+    onBegin(): void;
+    onActivate(): void;
+    onEnd(): void;
+    onCancel(): void;
+    onFail(): void;
+}

package/lib/typescript/web/tools/GestureHandlerWebDelegate.d.ts

@@ -0,0 +1,21 @@
+import type GestureHandler from '../handlers/GestureHandler';
+import { GestureHandlerDelegate, MeasureResult } from './GestureHandlerDelegate';
+export declare class GestureHandlerWebDelegate implements GestureHandlerDelegate<HTMLElement> {
+    private view;
+    private gestureHandler;
+    private eventManagers;
+    getView(): HTMLElement;
+    init(viewRef: number, handler: GestureHandler): void;
+    isPointerInBounds({ x, y }: {
+        x: number;
+        y: number;
+    }): boolean;
+    measureView(): MeasureResult;
+    reset(): void;
+    tryResetCursor(): void;
+    onBegin(): void;
+    onActivate(): void;
+    onEnd(): void;
+    onCancel(): void;
+    onFail(): void;
+}

package/lib/typescript/web/tools/NodeManager.d.ts

@@ -2,10 +2,10 @@ import { ValueOf } from '../../typeUtils';
 import { Gestures } from '../../RNGestureHandlerModule.web';
 export default abstract class NodeManager {
     private static gestures;
-    static getHandler(tag: number): import("../handlers/NativeViewGestureHandler").default | import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/ManualGestureHandler").default;
+    static getHandler(tag: number): import("../handlers/NativeViewGestureHandler").default | import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/ManualGestureHandler").default | import("../handlers/HoverGestureHandler").default;
     static createGestureHandler(handlerTag: number, handler: InstanceType<ValueOf<typeof Gestures>>): void;
     static dropGestureHandler(handlerTag: number): void;
     static getNodes(): {
-        [x: number]: import("../handlers/NativeViewGestureHandler").default | import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/ManualGestureHandler").default;
+        [x: number]: import("../handlers/NativeViewGestureHandler").default | import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/ManualGestureHandler").default | import("../handlers/HoverGestureHandler").default;
     };
 }

package/lib/typescript/web/tools/PointerEventManager.d.ts

@@ -1,6 +1,6 @@
 import { AdaptedEvent, EventTypes } from '../interfaces';
 import EventManager from './EventManager';
-export default class PointerEventManager extends EventManager {
+export default class PointerEventManager extends EventManager<HTMLElement> {
     private trackedPointers;
     setListeners(): void;
     protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent;

package/lib/typescript/web/tools/TouchEventManager.d.ts

@@ -1,6 +1,6 @@
 import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
 import EventManager from './EventManager';
-export default class TouchEventManager extends EventManager {
+export default class TouchEventManager extends EventManager<HTMLElement> {
     setListeners(): void;
     protected mapEvent(event: TouchEvent, eventType: EventTypes, index: number, touchEventType: TouchEventType): AdaptedEvent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build && husky install",
@@ -88,7 +88,7 @@
     "@typescript-eslint/parser": "^4.33.0",
     "babel-jest": "^26.6.3",
     "clang-format": "^1.8.0",
-    "eslint": "^7.15.0",
+    "eslint": "^7.32.0",
     "eslint-config-satya164": "^3.1.8",
     "eslint-import-resolver-babel-module": "^5.2.0",
     "eslint-plugin-import": "^2.22.1",

package/src/RNGestureHandlerModule.macos.ts

@@ -23,6 +23,7 @@ import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
 import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
 import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
 import { Config } from './web/interfaces';
+import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
 
 export const Gestures = {
   NativeViewGestureHandler,
@@ -65,7 +66,10 @@ export default {
       }
 
       const GestureClass = Gestures[handlerName];
-      NodeManager.createGestureHandler(handlerTag, new GestureClass());
+      NodeManager.createGestureHandler(
+        handlerTag,
+        new GestureClass(new GestureHandlerWebDelegate())
+      );
       InteractionManager.getInstance().configureInteractions(
         NodeManager.getHandler(handlerTag),
         config as unknown as Config

package/src/RNGestureHandlerModule.web.ts

@@ -14,6 +14,7 @@ import RotationGestureHandler from './web/handlers/RotationGestureHandler';
 import FlingGestureHandler from './web/handlers/FlingGestureHandler';
 import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
 import ManualGestureHandler from './web/handlers/ManualGestureHandler';
+import HoverGestureHandler from './web/handlers/HoverGestureHandler';
 
 //Hammer Handlers
 import * as HammerNodeManager from './web_hammer/NodeManager';
@@ -25,6 +26,7 @@ import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
 import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
 import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
 import { Config } from './web/interfaces';
+import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
 
 export const Gestures = {
   NativeViewGestureHandler,
@@ -35,6 +37,7 @@ export const Gestures = {
   RotationGestureHandler,
   FlingGestureHandler,
   ManualGestureHandler,
+  HoverGestureHandler,
 };
 
 export const HammerGestures = {
@@ -67,7 +70,10 @@ export default {
       }
 
       const GestureClass = Gestures[handlerName];
-      NodeManager.createGestureHandler(handlerTag, new GestureClass());
+      NodeManager.createGestureHandler(
+        handlerTag,
+        new GestureClass(new GestureHandlerWebDelegate())
+      );
       InteractionManager.getInstance().configureInteractions(
         NodeManager.getHandler(handlerTag),
         config as unknown as Config

package/src/RNGestureHandlerModule.windows.ts

@@ -25,6 +25,7 @@ import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
 import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
 import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
 import { Config } from './web/interfaces';
+import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
 
 export const Gestures = {
   NativeViewGestureHandler,
@@ -67,7 +68,10 @@ export default {
       }
 
       const GestureClass = Gestures[handlerName];
-      NodeManager.createGestureHandler(handlerTag, new GestureClass());
+      NodeManager.createGestureHandler(
+        handlerTag,
+        new GestureClass(new GestureHandlerWebDelegate())
+      );
       InteractionManager.getInstance().configureInteractions(
         NodeManager.getHandler(handlerTag),
         config as unknown as Config

package/src/components/DrawerLayout.tsx

@@ -27,6 +27,7 @@ import {
   GestureEvent,
   HandlerStateChangeEvent,
   UserSelect,
+  ActiveCursor,
 } from '../handlers/gestureHandlerCommon';
 import {
   PanGestureHandler,
@@ -165,6 +166,13 @@ export interface DrawerLayoutProps {
    * Values: 'none'|'text'|'auto'
    */
   userSelect?: UserSelect;
+
+  /**
+   * @default 'auto'
+   * Defines which cursor property should be used when gesture activates.
+   * Values: see CSS cursor values
+   */
+  activeCursor?: ActiveCursor;
 }
 
 export type DrawerLayoutState = {
@@ -691,6 +699,7 @@ export default class DrawerLayout extends Component<
       <PanGestureHandler
         // @ts-ignore could be fixed in handler types
         userSelect={this.props.userSelect}
+        activeCursor={this.props.activeCursor}
         ref={this.setPanGestureRef}
         hitSlop={hitSlop}
         activeOffsetX={gestureOrientation * minSwipeDistance!}

package/src/components/touchables/GenericTouchable.tsx

@@ -6,6 +6,7 @@ import {
   StyleProp,
   ViewStyle,
   TouchableWithoutFeedbackProps,
+  Insets,
 } from 'react-native';
 
 import { State } from '../../State';
@@ -33,7 +34,8 @@ export const TOUCHABLE_STATE = {
 
 type TouchableState = typeof TOUCHABLE_STATE[keyof typeof TOUCHABLE_STATE];
 
-export interface GenericTouchableProps extends TouchableWithoutFeedbackProps {
+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
 
@@ -48,6 +50,7 @@ export interface GenericTouchableProps extends TouchableWithoutFeedbackProps {
   disallowInterruption?: boolean;
 
   containerStyle?: StyleProp<ViewStyle>;
+  hitSlop?: Insets | number;
 }
 
 interface InternalProps {
@@ -272,9 +275,6 @@ export default class GenericTouchable extends Component<
       onAccessibilityAction: this.props.onAccessibilityAction,
       nativeID: this.props.nativeID,
       onLayout: this.props.onLayout,
-      hitSlop: hitSlop as
-        | Animated.WithAnimatedObject<typeof hitSlop>
-        | undefined,
     };
 
     return (

package/src/components/touchables/TouchableHighlight.tsx

@@ -7,7 +7,7 @@ import GenericTouchable, {
 import {
   StyleSheet,
   View,
-  TouchableHighlightProps,
+  TouchableHighlightProps as RNTouchableHighlightProps,
   ColorValue,
   ViewProps,
 } from 'react-native';
@@ -21,11 +21,14 @@ interface State {
   };
 }
 
+export type TouchableHighlightProps = RNTouchableHighlightProps &
+  GenericTouchableProps;
+
 /**
  * TouchableHighlight follows RN's implementation
  */
 export default class TouchableHighlight extends Component<
-  TouchableHighlightProps & GenericTouchableProps,
+  TouchableHighlightProps,
   State
 > {
   static defaultProps = {
@@ -35,7 +38,7 @@ export default class TouchableHighlight extends Component<
     underlayColor: 'black',
   };
 
-  constructor(props: TouchableHighlightProps & GenericTouchableProps) {
+  constructor(props: TouchableHighlightProps) {
     super(props);
     this.state = {
       extraChildStyle: null,

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

@@ -1,6 +1,6 @@
 import {
   Platform,
-  TouchableNativeFeedbackProps,
+  TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps,
   ColorValue,
 } from 'react-native';
 import * as React from 'react';
@@ -14,15 +14,16 @@ export type TouchableNativeFeedbackExtraProps = {
   foreground?: boolean;
 };
 
+export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps &
+  GenericTouchableProps;
+
 /**
  * TouchableNativeFeedback behaves slightly different than RN's TouchableNativeFeedback.
  * There's small difference with handling long press ripple since RN's implementation calls
  * ripple animation via bridge. This solution leaves all animations' handling for native components so
  * it follows native behaviours.
  */
-export default class TouchableNativeFeedback extends Component<
-  TouchableNativeFeedbackProps & GenericTouchableProps
-> {
+export default class TouchableNativeFeedback extends Component<TouchableNativeFeedbackProps> {
   static defaultProps = {
     ...GenericTouchable.defaultProps,
     useForeground: true,

package/src/components/touchables/TouchableOpacity.tsx

@@ -3,7 +3,7 @@ import {
   Easing,
   StyleSheet,
   View,
-  TouchableOpacityProps,
+  TouchableOpacityProps as RNTouchableOpacityProps,
 } from 'react-native';
 import GenericTouchable, {
   TOUCHABLE_STATE,
@@ -12,16 +12,15 @@ import GenericTouchable, {
 import * as React from 'react';
 import { Component } from 'react';
 
-interface GHTouchableOpacityProps {
-  useNativeAnimations?: boolean;
-}
+export type TouchableOpacityProps = RNTouchableOpacityProps &
+  GenericTouchableProps & {
+    useNativeAnimations?: boolean;
+  };
 
 /**
  * TouchableOpacity bases on timing animation which has been used in RN's core
  */
-export default class TouchableOpacity extends Component<
-  TouchableOpacityProps & GenericTouchableProps & GHTouchableOpacityProps
-> {
+export default class TouchableOpacity extends Component<TouchableOpacityProps> {
   static defaultProps = {
     ...GenericTouchable.defaultProps,
     activeOpacity: 0.2,

package/src/components/touchables/TouchableWithoutFeedback.tsx

@@ -2,8 +2,10 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import GenericTouchable, { GenericTouchableProps } from './GenericTouchable';
 
+export type TouchableWithoutFeedbackProps = GenericTouchable;
+
 const TouchableWithoutFeedback = React.forwardRef<
-  GenericTouchable,
+  TouchableWithoutFeedbackProps,
   PropsWithChildren<GenericTouchableProps>
 >((props, ref) => <GenericTouchable ref={ref} {...props} />);
 

package/src/components/touchables/index.ts

@@ -1,3 +1,6 @@
+export type { TouchableHighlightProps } from './TouchableHighlight';
+export type { TouchableOpacityProps } 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';

package/src/handlers/createHandler.tsx

@@ -329,8 +329,10 @@ export default function createHandler<
 
         const actionType = (() => {
           if (
-            this.props?.onGestureEvent &&
-            'current' in this.props.onGestureEvent
+            (this.props?.onGestureEvent &&
+              'current' in this.props.onGestureEvent) ||
+            (this.props?.onHandlerStateChange &&
+              'current' in this.props.onHandlerStateChange)
           ) {
             // Reanimated worklet
             return ActionType.REANIMATED_WORKLET;

package/src/handlers/gestureHandlerCommon.ts

@@ -19,6 +19,7 @@ const commonProps = [
   'hitSlop',
   'cancelsTouchesInView',
   'userSelect',
+  'activeCursor',
 ] as const;
 
 const componentInteractionProps = ['waitFor', 'simultaneousHandlers'] as const;
@@ -64,6 +65,43 @@ export type HitSlop =
   | Record<'height' | 'bottom', number>;
 
 export type UserSelect = 'none' | 'auto' | 'text';
+export type ActiveCursor =
+  | 'auto'
+  | 'default'
+  | 'none'
+  | 'context-menu'
+  | 'help'
+  | 'pointer'
+  | 'progress'
+  | 'wait'
+  | 'cell'
+  | 'crosshair'
+  | 'text'
+  | 'vertical-text'
+  | 'alias'
+  | 'copy'
+  | 'move'
+  | 'no-drop'
+  | 'not-allowed'
+  | 'grab'
+  | 'grabbing'
+  | 'e-resize'
+  | 'n-resize'
+  | 'ne-resize'
+  | 'nw-resize'
+  | 's-resize'
+  | 'se-resize'
+  | 'sw-resize'
+  | 'w-resize'
+  | 'ew-resize'
+  | 'ns-resize'
+  | 'nesw-resize'
+  | 'nwse-resize'
+  | 'col-resize'
+  | 'row-resize'
+  | 'all-scroll'
+  | 'zoom-in'
+  | 'zoom-out';
 
 //TODO(TS) events in handlers
 
@@ -105,6 +143,7 @@ export type CommonGestureConfig = {
   shouldCancelWhenOutside?: boolean;
   hitSlop?: HitSlop;
   userSelect?: UserSelect;
+  activeCursor?: ActiveCursor;
 };
 
 // Events payloads are types instead of interfaces due to TS limitation.

package/src/handlers/gestures/GestureDetector.tsx

@@ -32,6 +32,7 @@ import {
   panGestureHandlerCustomNativeProps,
 } from '../PanGestureHandler';
 import { tapGestureHandlerProps } from '../TapGestureHandler';
+import { hoverGestureHandlerProps } from './hoverGesture';
 import { State } from '../../State';
 import { TouchEventType } from '../../TouchEventType';
 import { ComposedGesture } from './gestureComposition';
@@ -63,6 +64,7 @@ const ALLOWED_PROPS = [
   ...longPressGestureHandlerProps,
   ...forceTouchGestureHandlerProps,
   ...flingGestureHandlerProps,
+  ...hoverGestureHandlerProps,
   ...nativeViewGestureHandlerProps,
 ];
 

package/src/handlers/gestures/gesture.ts

@@ -6,6 +6,7 @@ import {
   GestureTouchEvent,
   GestureStateChangeEvent,
   GestureUpdateEvent,
+  ActiveCursor,
 } from '../gestureHandlerCommon';
 import { getNextHandlerTag } from '../handlersRegistry';
 import { GestureStateManagerType } from './gestureStateManager';
@@ -250,6 +251,11 @@ export abstract class BaseGesture<
     return this;
   }
 
+  activeCursor(activeCursor: ActiveCursor) {
+    this.config.activeCursor = activeCursor;
+    return this;
+  }
+
   runOnJS(runOnJS: boolean) {
     this.config.runOnJS = runOnJS;
     return this;

package/src/handlers/gestures/gestureObjects.ts

@@ -13,6 +13,7 @@ import { RotationGesture } from './rotationGesture';
 import { TapGesture } from './tapGesture';
 import { NativeGesture } from './nativeGesture';
 import { ManualGesture } from './manualGesture';
+import { HoverGesture } from './hoverGesture';
 
 export const GestureObjects = {
   Tap: () => {
@@ -51,6 +52,10 @@ export const GestureObjects = {
     return new ManualGesture();
   },
 
+  Hover: () => {
+    return new HoverGesture();
+  },
+
   /**
    * Builds a composed gesture consisting of gestures provided as parameters.
    * The first one that becomes active cancels the rest of gestures.

package/src/handlers/gestures/hoverGesture.ts

@@ -0,0 +1,83 @@
+import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+
+export type HoverGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+};
+
+export type HoverGestureChangeEventPayload = {
+  changeX: number;
+  changeY: number;
+};
+
+export enum HoverEffect {
+  NONE = 0,
+  LIFT = 1,
+  HIGHLIGHT = 2,
+}
+
+export interface HoverGestureConfig {
+  hoverEffect?: HoverEffect;
+}
+
+export const hoverGestureHandlerProps = ['hoverEffect'] as const;
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<HoverGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<HoverGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: HoverGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      changeX: current.x,
+      changeY: current.y,
+    };
+  } else {
+    changePayload = {
+      changeX: current.x - previous.x,
+      changeY: current.y - previous.y,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class HoverGesture extends ContinousBaseGesture<
+  HoverGestureHandlerEventPayload,
+  HoverGestureChangeEventPayload
+> {
+  public config: BaseGestureConfig & HoverGestureConfig = {};
+
+  constructor() {
+    super();
+
+    this.handlerName = 'HoverGestureHandler';
+  }
+
+  /**
+   * Sets the visual hover effect.
+   * iOS only
+   */
+  effect(effect: HoverEffect) {
+    this.config.hoverEffect = effect;
+    return this;
+  }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        HoverGestureHandlerEventPayload & HoverGestureChangeEventPayload
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, HoverGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
+}
+
+export type HoverGestureType = InstanceType<typeof HoverGesture>;