react-native-gesture-handler 2.12.0 → 2.13.0

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;
@@ -402,7 +404,7 @@ export default function createHandler<
     }
 
     render() {
-      if (__DEV__ && !this.context && !isJestEnv()) {
+      if (__DEV__ && !this.context && !isJestEnv() && Platform.OS !== 'web') {
         throw new Error(
           name +
             ' must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.'

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,
 ];
 
@@ -612,7 +614,7 @@ interface GestureDetectorState {
 }
 export const GestureDetector = (props: GestureDetectorProps) => {
   const rootViewContext = useContext(GestureHandlerRootViewContext);
-  if (__DEV__ && !rootViewContext && !isJestEnv()) {
+  if (__DEV__ && !rootViewContext && !isJestEnv() && Platform.OS !== 'web') {
     throw new Error(
       'GestureDetector must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.'
     );

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>;

package/src/index.ts

@@ -73,6 +73,7 @@ export type { RotationGestureType as RotationGesture } from './handlers/gestures
 export type { ForceTouchGestureType as ForceTouchGesture } from './handlers/gestures/forceTouchGesture';
 export type { NativeGestureType as NativeGesture } from './handlers/gestures/nativeGesture';
 export type { ManualGestureType as ManualGesture } from './handlers/gestures/manualGesture';
+export type { HoverGestureType as HoverGesture } from './handlers/gestures/hoverGesture';
 export type {
   ComposedGestureType as ComposedGesture,
   RaceGestureType as RaceGesture,
@@ -94,6 +95,11 @@ export {
   BorderlessButton,
   PureNativeButton,
 } from './components/GestureButtons';
+export type {
+  TouchableHighlightProps,
+  TouchableOpacityProps,
+  TouchableWithoutFeedbackProps,
+} from './components/touchables';
 export {
   TouchableHighlight,
   TouchableNativeFeedback,
@@ -108,6 +114,7 @@ export {
   FlatList,
   RefreshControl,
 } from './components/GestureComponents';
+export { HoverEffect } from './handlers/gestures/hoverGesture';
 export type {
   //events
   GestureHandlerGestureEvent,
@@ -147,6 +154,7 @@ export type {
   BorderlessButtonProperties,
 } from './handlers/gestureHandlerTypesCompat';
 
+export type { SwipeableProps } from './components/Swipeable';
 export { default as Swipeable } from './components/Swipeable';
 export type {
   DrawerLayoutProps,

package/src/web/handlers/FlingGestureHandler.ts

@@ -39,17 +39,6 @@ export default class FlingGestureHandler extends GestureHandler {
     }
   }
 
-  protected transformNativeEvent() {
-    const rect: DOMRect = this.view.getBoundingClientRect();
-
-    return {
-      x: this.tracker.getLastAvgX() - rect.left,
-      y: this.tracker.getLastAvgY() - rect.top,
-      absoluteX: this.tracker.getLastAvgX(),
-      absoluteY: this.tracker.getLastAvgY(),
-    };
-  }
-
   private startFling(): void {
     this.startX = this.tracker.getLastX(this.keyPointer);
     this.startY = this.tracker.getLastY(this.keyPointer);