Merge branch 'next' into @akwasniewski/logic-detector

Author: akwasniewski

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/types.ts

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

packages/react-native-gesture-handler/src/handlers/gestures/reanimatedWrapper.ts

@@ -1,21 +1,13 @@
 import { ComponentClass } from 'react';
 import { tagMessage } from '../../utils';
-import { GestureCallbacks, UpdateEvent } from '../../v3/types';
-
-export interface SharedValue<Value = unknown> {
-  value: Value;
-  get(): Value;
-  set(value: Value | ((value: Value) => Value)): void;
-  addListener: (listenerID: number, listener: (value: Value) => void) => void;
-  removeListener: (listenerID: number) => void;
-  modify: (
-    modifier?: <T extends Value>(value: T) => T,
-    forceUpdate?: boolean
-  ) => void;
-}
+import {
+  GestureCallbacks,
+  GestureUpdateEvent,
+  SharedValue,
+} from '../../v3/types';
 
 export type ReanimatedContext<THandlerData> = {
-  lastUpdateEvent: UpdateEvent<THandlerData> | undefined;
+  lastUpdateEvent: GestureUpdateEvent<THandlerData> | undefined;
 };
 
 interface WorkletProps {
@@ -52,7 +44,7 @@ let Reanimated:
       ) => (event: unknown) => void;
       useSharedValue: <T>(value: T) => SharedValue<T>;
       setGestureState: (handlerTag: number, newState: number) => void;
-      isSharedValue: (value: unknown) => value is SharedValue<unknown>;
+      isSharedValue: <T = unknown>(value: unknown) => value is SharedValue<T>;
       isWorkletFunction<
         Args extends unknown[] = unknown[],
         ReturnValue = unknown,

packages/react-native-gesture-handler/src/v3/hooks/callbacks/stateChangeHandler.ts

@@ -1,48 +1,46 @@
 import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
 import { State } from '../../../State';
-import { GestureCallbacks, StateChangeEvent } from '../../types';
-import { isEventForHandlerWithTag, isNativeEvent } from '../utils';
+import {
+  GestureCallbacks,
+  GestureStateChangeEvent,
+  StateChangeEvent,
+} from '../../types';
+import { isEventForHandlerWithTag, maybeExtractNativeEvent } from '../utils';
 import { runCallback } from '../utils/eventHandlersUtils';
 
 export function getStateChangeHandler<THandlerData>(
   handlerTag: number,
   callbacks: GestureCallbacks<THandlerData>
 ) {
-  return (event: StateChangeEvent<THandlerData>) => {
+  return (sourceEvent: StateChangeEvent<THandlerData>) => {
     'worklet';
 
+    const event = maybeExtractNativeEvent(
+      sourceEvent
+    ) as GestureStateChangeEvent<THandlerData>;
+
     if (!isEventForHandlerWithTag(handlerTag, event)) {
       return;
     }
 
-    let oldState: State | undefined;
-    let state: State | undefined;
-
-    if (isNativeEvent(event)) {
-      oldState = event.nativeEvent.oldState;
-      state = event.nativeEvent.state;
-    } else {
-      oldState = event.oldState;
-      state = event.state;
-    }
-
-    if (oldState === State.UNDETERMINED && state === State.BEGAN) {
+    if (event.oldState === State.UNDETERMINED && event.state === State.BEGAN) {
       runCallback(CALLBACK_TYPE.BEGAN, callbacks, event);
     } else if (
-      (oldState === State.BEGAN || oldState === State.UNDETERMINED) &&
-      state === State.ACTIVE
+      (event.oldState === State.BEGAN ||
+        event.oldState === State.UNDETERMINED) &&
+      event.state === State.ACTIVE
     ) {
       runCallback(CALLBACK_TYPE.START, callbacks, event);
-    } else if (oldState !== state && state === State.END) {
-      if (oldState === State.ACTIVE) {
+    } else if (event.oldState !== event.state && event.state === State.END) {
+      if (event.oldState === State.ACTIVE) {
         runCallback(CALLBACK_TYPE.END, callbacks, event, true);
       }
       runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, true);
     } else if (
-      (state === State.FAILED || state === State.CANCELLED) &&
-      state !== oldState
+      (event.state === State.FAILED || event.state === State.CANCELLED) &&
+      event.state !== event.oldState
     ) {
-      if (oldState === State.ACTIVE) {
+      if (event.oldState === State.ACTIVE) {
         runCallback(CALLBACK_TYPE.END, callbacks, event, false);
       }
       runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, false);

packages/react-native-gesture-handler/src/v3/hooks/callbacks/touchEventHandler.ts

@@ -1,6 +1,5 @@
-import { NativeSyntheticEvent } from 'react-native';
 import { GestureCallbacks, TouchEvent } from '../../types';
-import { isEventForHandlerWithTag, isNativeEvent } from '../utils';
+import { isEventForHandlerWithTag, maybeExtractNativeEvent } from '../utils';
 import { TouchEventType } from '../../../TouchEventType';
 import { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
 import {
@@ -12,30 +11,18 @@ export function getTouchEventHandler<THandlerData>(
   handlerTag: number,
   callbacks: GestureCallbacks<THandlerData>
 ) {
-  return (event: TouchEvent) => {
+  return (sourceEvent: TouchEvent) => {
     'worklet';
 
+    const event = maybeExtractNativeEvent(sourceEvent) as GestureTouchEvent;
+
     if (!isEventForHandlerWithTag(handlerTag, event)) {
       return;
     }
 
-    if (
-      isNativeEvent(event) &&
-      event.nativeEvent.eventType !== TouchEventType.UNDETERMINED
-    ) {
-      runCallback(
-        touchEventTypeToCallbackType(
-          (event as NativeSyntheticEvent<GestureTouchEvent>).nativeEvent
-            .eventType
-        ),
-        callbacks,
-        event
-      );
-    } else if (
-      (event as GestureTouchEvent).eventType !== TouchEventType.UNDETERMINED
-    ) {
+    if (event.eventType !== TouchEventType.UNDETERMINED) {
       runCallback(
-        touchEventTypeToCallbackType((event as GestureTouchEvent).eventType),
+        touchEventTypeToCallbackType(event.eventType),
         callbacks,
         event
       );

packages/react-native-gesture-handler/src/v3/hooks/callbacks/updateHandler.ts

@@ -4,9 +4,10 @@ import { ReanimatedContext } from '../../../handlers/gestures/reanimatedWrapper'
 import {
   ChangeCalculatorType,
   GestureCallbacks,
+  GestureUpdateEvent,
   UpdateEvent,
 } from '../../types';
-import { isEventForHandlerWithTag } from '../utils';
+import { isEventForHandlerWithTag, maybeExtractNativeEvent } from '../utils';
 import { runCallback } from '../utils/eventHandlersUtils';
 
 export function getUpdateHandler<THandlerData>(
@@ -15,9 +16,13 @@ export function getUpdateHandler<THandlerData>(
   context: ReanimatedContext<THandlerData> | undefined,
   changeEventCalculator?: ChangeCalculatorType<THandlerData>
 ) {
-  return (event: UpdateEvent<THandlerData>) => {
+  return (sourceEvent: UpdateEvent<THandlerData>) => {
     'worklet';
 
+    const event = maybeExtractNativeEvent(
+      sourceEvent
+    ) as GestureUpdateEvent<THandlerData>;
+
     if (!isEventForHandlerWithTag(handlerTag, event)) {
       return;
     }
@@ -36,7 +41,6 @@ export function getUpdateHandler<THandlerData>(
         : event
     );
 
-    // TODO: Investigate why this is always undefined
     context.lastUpdateEvent = event;
   };
 }

packages/react-native-gesture-handler/src/v3/hooks/gestures/useFling.ts

@@ -2,11 +2,12 @@ import {
   BaseGestureConfig,
   ExcludeInternalConfigProps,
   SingleGestureName,
+  WithSharedValue,
 } from '../../types';
 import { useGesture } from '../useGesture';
 import { cloneConfig } from '../utils';
 
-type FlingGestureProperties = {
+type FlingGestureProperties = WithSharedValue<{
   /**
    * Expressed allowed direction of movement. It's possible to pass one or many
    * directions in one parameter:
@@ -27,7 +28,7 @@ type FlingGestureProperties = {
    * Determine exact number of points required to handle the fling gesture.
    */
   numberOfPointers?: number;
-};
+}>;
 
 type FlingHandlerData = {
   x: number;

packages/react-native-gesture-handler/src/v3/hooks/gestures/useHover.ts

@@ -3,30 +3,37 @@ import { HoverEffect } from '../../../handlers/gestures/hoverGesture';
 import {
   BaseGestureConfig,
   ExcludeInternalConfigProps,
+  HandlerData,
   SingleGestureName,
+  WithSharedValue,
 } from '../../types';
 import { useGesture } from '../useGesture';
-import { cloneConfig } from '../utils';
-
-type HoverGestureProperties = {
-  /**
-   * Visual effect applied to the view while the view is hovered. The possible values are:
-   *
-   * - `HoverEffect.None`
-   * - `HoverEffect.Lift`
-   * - `HoverEffect.Highlight`
-   *
-   * Defaults to `HoverEffect.None`
-   */
-  hoverEffect?: HoverEffect;
-};
+import { cloneConfig, getChangeEventCalculator } from '../utils';
+
+type HoverGestureProperties = WithSharedValue<
+  {
+    /**
+     * Visual effect applied to the view while the view is hovered. The possible values are:
+     *
+     * - `HoverEffect.None`
+     * - `HoverEffect.Lift`
+     * - `HoverEffect.Highlight`
+     *
+     * Defaults to `HoverEffect.None`
+     */
+    hoverEffect?: HoverEffect;
+  },
+  HoverEffect
+>;
 
 type HoverHandlerData = {
   x: number;
   y: number;
   absoluteX: number;
   absoluteY: number;
   stylusData: StylusData;
+  changeX: number;
+  changeY: number;
 };
 
 type HoverGestureInternalConfig = BaseGestureConfig<
@@ -37,10 +44,23 @@ type HoverGestureInternalConfig = BaseGestureConfig<
 export type HoverGestureConfig =
   ExcludeInternalConfigProps<HoverGestureInternalConfig>;
 
+function diffCalculator(
+  current: HandlerData<HoverHandlerData>,
+  previous: HandlerData<HoverHandlerData> | null
+) {
+  'worklet';
+  return {
+    changeX: previous ? current.x - previous.x : 0,
+    changeY: previous ? current.y - previous.y : 0,
+  };
+}
+
 export function useHover(config: HoverGestureConfig) {
   const hoverConfig = cloneConfig<HoverHandlerData, HoverGestureProperties>(
     config
   );
 
+  hoverConfig.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+
   return useGesture(SingleGestureName.Hover, hoverConfig);
 }

packages/react-native-gesture-handler/src/v3/hooks/gestures/useLongPress.ts

@@ -2,11 +2,12 @@ import {
   BaseGestureConfig,
   ExcludeInternalConfigProps,
   SingleGestureName,
+  WithSharedValue,
 } from '../../types';
 import { useGesture } from '../useGesture';
 import { cloneConfig, remapProps } from '../utils';
 
-type LongPressGestureProperties = {
+type LongPressGestureProperties = WithSharedValue<{
   /**
    * Minimum time, expressed in milliseconds, that a finger must remain pressed on
    * the corresponding view. The default value is 500.
@@ -25,13 +26,13 @@ type LongPressGestureProperties = {
    * Determine exact number of points required to handle the long press gesture.
    */
   numberOfPointers?: number;
-};
+}>;
 
-type LongPressGestureInternalProperties = {
+type LongPressGestureInternalProperties = WithSharedValue<{
   minDurationMs?: number;
   maxDist?: number;
   numberOfPointers?: number;
-};
+}>;
 
 type LongPressHandlerData = {
   x: number;

packages/react-native-gesture-handler/src/v3/hooks/gestures/useNative.ts

@@ -2,11 +2,12 @@ import {
   BaseGestureConfig,
   ExcludeInternalConfigProps,
   SingleGestureName,
+  WithSharedValue,
 } from '../../types';
 import { useGesture } from '../useGesture';
 import { cloneConfig } from '../utils';
 
-type NativeViewGestureProperties = {
+type NativeViewGestureProperties = WithSharedValue<{
   /**
    * Android only.
    *
@@ -20,7 +21,7 @@ type NativeViewGestureProperties = {
    * `NativeViewGestureHandler` receives an `ACTIVE` state event.
    */
   disallowInterruption?: boolean;
-};
+}>;
 
 type NativeViewHandlerData = {
   pointerInside: boolean;