react-native-gesture-handler 3.0.0-beta.2 → 3.0.0-beta.4

package/src/v3/hooks/callbacks/useGestureEventHandler.ts

@@ -1,32 +1,43 @@
-import { ReanimatedContext } from '../../../handlers/gestures/reanimatedWrapper';
-import {
+import { useMemo } from 'react';
+
+import type { ReanimatedContext } from '../../../handlers/gestures/reanimatedWrapper';
+import type {
   BaseGestureConfig,
   GestureCallbacks,
   GestureHandlerEventWithHandlerData,
 } from '../../types';
-import { useMemo } from 'react';
 import { eventHandler } from './eventHandler';
 
-export function useGestureEventHandler<THandlerData, TConfig>(
+export function useGestureEventHandler<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
   handlerTag: number,
-  handlers: GestureCallbacks<THandlerData>,
-  config: BaseGestureConfig<THandlerData, TConfig>
+  handlers: GestureCallbacks<THandlerData, TExtendedHandlerData>,
+  config: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
 ) {
-  const jsContext: ReanimatedContext<THandlerData> = useMemo(() => {
+  const jsContext: ReanimatedContext<TExtendedHandlerData> = useMemo(() => {
     return {
       lastUpdateEvent: undefined,
     };
   }, []);
 
   return useMemo(() => {
-    return (event: GestureHandlerEventWithHandlerData<THandlerData>) => {
+    return (
+      event: GestureHandlerEventWithHandlerData<
+        THandlerData,
+        TExtendedHandlerData
+      >
+    ) => {
       eventHandler(
         handlerTag,
         event,
         handlers,
         config.changeEventCalculator,
         jsContext,
-        !!config.dispatchesAnimatedEvents
+        !!config.dispatchesAnimatedEvents,
+        config.fillInDefaultValues
       );
     };
   }, [
@@ -34,6 +45,7 @@ export function useGestureEventHandler<THandlerData, TConfig>(
     handlers,
     config.changeEventCalculator,
     config.dispatchesAnimatedEvents,
+    config.fillInDefaultValues,
     jsContext,
   ]);
 }

package/src/v3/hooks/callbacks/useReanimatedEventHandler.ts

@@ -1,25 +1,35 @@
-import { useMemo } from 'react';
-import {
-  Reanimated,
-  ReanimatedHandler,
-} from '../../../handlers/gestures/reanimatedWrapper';
-import {
+import { useEffect, useMemo, useRef } from 'react';
+
+import type { ReanimatedHandler } from '../../../handlers/gestures/reanimatedWrapper';
+import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
+import type {
   ChangeCalculatorType,
   GestureCallbacks,
+  GestureEvent,
   UnpackedGestureHandlerEventWithHandlerData,
 } from '../../types';
 import { eventHandler } from './eventHandler';
 
+const REANIMATED_EVENT_NAMES = [
+  'onGestureHandlerReanimatedEvent',
+  'onGestureHandlerReanimatedStateChange',
+  'onGestureHandlerReanimatedTouchEvent',
+];
+
 const workletNOOP = () => {
   'worklet';
   // no-op
 };
 
-export function useReanimatedEventHandler<THandlerData>(
+export function useReanimatedEventHandler<
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
   handlerTag: number,
-  handlers: GestureCallbacks<THandlerData>,
-  reanimatedHandler: ReanimatedHandler<THandlerData> | undefined,
-  changeEventCalculator: ChangeCalculatorType<THandlerData> | undefined
+  handlers: GestureCallbacks<THandlerData, TExtendedHandlerData>,
+  reanimatedHandler: ReanimatedHandler<TExtendedHandlerData> | undefined,
+  changeEventCalculator: ChangeCalculatorType<TExtendedHandlerData> | undefined,
+  fillInDefaultValues?: (event: GestureEvent<TExtendedHandlerData>) => void
 ) {
   const workletizedHandlers = useMemo(() => {
     // We don't want to call hooks conditionally, `useEvent` will be always called.
@@ -37,7 +47,10 @@ export function useReanimatedEventHandler<THandlerData>(
   }, [handlers]);
 
   const callback = (
-    event: UnpackedGestureHandlerEventWithHandlerData<THandlerData>
+    event: UnpackedGestureHandlerEventWithHandlerData<
+      THandlerData,
+      TExtendedHandlerData
+    >
   ) => {
     'worklet';
     eventHandler(
@@ -47,18 +60,29 @@ export function useReanimatedEventHandler<THandlerData>(
       changeEventCalculator,
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       reanimatedHandler?.context!,
-      false
+      false,
+      fillInDefaultValues
     );
   };
 
+  // Fast Refresh invalidates `useMemo` caches but preserves `useRef`, so the
+  // `handlerTag` computed with `useMemo([])` in `useGesture` can regenerate
+  // on FR. Without forcing a rebuild, the registered worklet keeps the old
+  // `handlerTag` in its closure and `isEventForHandlerWithTag` rejects every
+  // event emitted by the freshly-created native handler.
+  const prevHandlerTagRef = useRef(handlerTag);
+  const handlerTagChanged = prevHandlerTagRef.current !== handlerTag;
+
+  // Write after commit so interrupted or re-invoked renders don't desync the
+  // ref from what was actually committed.
+  useEffect(() => {
+    prevHandlerTagRef.current = handlerTag;
+  }, [handlerTag]);
+
   const reanimatedEvent = Reanimated?.useEvent(
     callback,
-    [
-      'onGestureHandlerReanimatedEvent',
-      'onGestureHandlerReanimatedStateChange',
-      'onGestureHandlerReanimatedTouchEvent',
-    ],
-    !!reanimatedHandler?.doDependenciesDiffer
+    REANIMATED_EVENT_NAMES,
+    handlerTagChanged || !!reanimatedHandler?.doDependenciesDiffer
   );
 
   return reanimatedEvent;

package/src/v3/hooks/composition/index.ts

@@ -1,3 +1,3 @@
-export { useSimultaneousGestures } from './useSimultaneousGestures';
-export { useExclusiveGestures } from './useExclusiveGestures';
 export { useCompetingGestures } from './useCompetingGestures';
+export { useExclusiveGestures } from './useExclusiveGestures';
+export { useSimultaneousGestures } from './useSimultaneousGestures';

package/src/v3/hooks/composition/useCompetingGestures.ts

@@ -1,4 +1,5 @@
-import { AnyGesture, ComposedGestureName } from '../../types';
+import type { AnyGesture } from '../../types';
+import { ComposedGestureName } from '../../types';
 import { useComposedGesture } from './useComposedGesture';
 
 export function useCompetingGestures(...gestures: AnyGesture[]) {

package/src/v3/hooks/composition/useComposedGesture.ts

@@ -1,12 +1,12 @@
-import {
-  ComposedGesture,
-  ComposedGestureName,
+import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
+import { tagMessage } from '../../../utils';
+import type {
   AnyGesture,
+  ComposedGesture,
   ComposedGestureConfig,
+  ComposedGestureName,
   GestureHandlerEventWithHandlerData,
 } from '../../types';
-import { tagMessage } from '../../../utils';
-import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
 import { containsDuplicates, isComposedGesture } from '../utils';
 
 // TODO: Simplify repeated relations (Simultaneous with Simultaneous, Exclusive with Exclusive, etc.)
@@ -44,7 +44,7 @@ export function useComposedGesture(
   }
 
   const jsEventHandler = (
-    event: GestureHandlerEventWithHandlerData<unknown>
+    event: GestureHandlerEventWithHandlerData<unknown, unknown>
   ) => {
     for (const gesture of gestures) {
       if (gesture.detectorCallbacks.jsEventHandler) {

package/src/v3/hooks/composition/useExclusiveGestures.ts

@@ -1,4 +1,5 @@
-import { AnyGesture, ComposedGestureName } from '../../types';
+import type { AnyGesture } from '../../types';
+import { ComposedGestureName } from '../../types';
 import { useComposedGesture } from './useComposedGesture';
 
 export function useExclusiveGestures(...gestures: AnyGesture[]) {

package/src/v3/hooks/composition/useSimultaneousGestures.ts

@@ -1,4 +1,5 @@
-import { AnyGesture, ComposedGestureName } from '../../types';
+import type { AnyGesture } from '../../types';
+import { ComposedGestureName } from '../../types';
 import { useComposedGesture } from './useComposedGesture';
 
 export function useSimultaneousGestures(...gestures: AnyGesture[]) {

package/src/v3/hooks/gestures/fling/FlingTypes.ts

@@ -0,0 +1,60 @@
+import type {
+  BaseDiscreteGestureConfig,
+  ExcludeInternalConfigProps,
+  GestureEvent,
+  SingleGesture,
+  WithSharedValue,
+} from '../../../types';
+
+export type FlingGestureNativeProperties = {
+  /**
+   * Expressed allowed direction of movement. It's possible to pass one or many
+   * directions in one parameter:
+   *
+   * ```js
+   * direction={Directions.RIGHT | Directions.LEFT}
+   * ```
+   *
+   * or
+   *
+   * ```js
+   * direction={Directions.DOWN}
+   * ```
+   */
+  direction?: number;
+
+  /**
+   * Determine exact number of points required to handle the fling gesture.
+   */
+  numberOfPointers?: number;
+};
+
+export const FlingNativeProperties = new Set<
+  keyof FlingGestureNativeProperties
+>(['direction', 'numberOfPointers']);
+
+export type FlingHandlerData = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+};
+
+export type FlingGestureProperties =
+  WithSharedValue<FlingGestureNativeProperties>;
+
+export type FlingGestureInternalConfig = BaseDiscreteGestureConfig<
+  FlingGestureProperties,
+  FlingHandlerData
+>;
+
+export type FlingGestureConfig =
+  ExcludeInternalConfigProps<FlingGestureInternalConfig>;
+
+export type FlingGestureEvent = GestureEvent<FlingHandlerData>;
+export type FlingGestureActiveEvent = FlingGestureEvent;
+
+export type FlingGesture = SingleGesture<
+  FlingGestureProperties,
+  FlingHandlerData
+>;

package/src/v3/hooks/gestures/fling/useFlingGesture.ts

@@ -1,44 +1,21 @@
-import {
-  BaseDiscreteGestureConfig,
-  ExcludeInternalConfigProps,
-  SingleGesture,
-  SingleGestureName,
-  WithSharedValue,
-  GestureEvent,
-} from '../../../types';
+import { SingleGestureName } from '../../../types';
 import { useGesture } from '../../useGesture';
 import { useClonedAndRemappedConfig } from '../../utils';
-import type { FlingGestureNativeProperties } from './FlingProperties';
-
-type FlingHandlerData = {
-  x: number;
-  y: number;
-  absoluteX: number;
-  absoluteY: number;
-};
-
-type FlingGestureProperties = WithSharedValue<FlingGestureNativeProperties>;
-
-type FlingGestureInternalConfig = BaseDiscreteGestureConfig<
+import type {
+  FlingGesture,
+  FlingGestureConfig,
+  FlingGestureProperties,
   FlingHandlerData,
-  FlingGestureProperties
->;
+} from './FlingTypes';
 
-export type FlingGestureConfig =
-  ExcludeInternalConfigProps<FlingGestureInternalConfig>;
-
-export type FlingGestureEvent = GestureEvent<FlingHandlerData>;
-
-export type FlingGesture = SingleGesture<
-  FlingHandlerData,
-  FlingGestureProperties
->;
+const EMPTY_FLING_CONFIG: FlingGestureConfig = {};
 
-export function useFlingGesture(config: FlingGestureConfig): FlingGesture {
+export function useFlingGesture(
+  config: FlingGestureConfig = EMPTY_FLING_CONFIG
+): FlingGesture {
   const flingConfig = useClonedAndRemappedConfig<
-    FlingHandlerData,
     FlingGestureProperties,
-    FlingGestureProperties
+    FlingHandlerData
   >(config);
 
   return useGesture(SingleGestureName.Fling, flingConfig);

package/src/v3/hooks/gestures/hover/HoverTypes.ts

@@ -0,0 +1,76 @@
+import type { StylusData } from '../../../../handlers/gestureHandlerCommon';
+import type { HoverEffect } from '../../../../handlers/gestures/hoverGesture';
+import type {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  GestureEvent,
+  SingleGesture,
+  WithSharedValue,
+} from '../../../types';
+
+export type HoverGestureExternalProperties = {
+  /**
+   * 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`
+   */
+  effect?: HoverEffect;
+};
+
+export type HoverGestureNativeProperties = {
+  hoverEffect: HoverEffect;
+};
+
+export const HoverNativeProperties = new Set<
+  keyof HoverGestureNativeProperties
+>(['hoverEffect']);
+
+export type HoverHandlerData = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  stylusData: StylusData;
+};
+
+export type HoverExtendedHandlerData = HoverHandlerData & {
+  changeX: number;
+  changeY: number;
+};
+
+export type HoverGestureProperties = WithSharedValue<
+  HoverGestureExternalProperties,
+  HoverEffect
+>;
+
+export type HoverGestureInternalProperties = WithSharedValue<
+  HoverGestureNativeProperties,
+  HoverEffect
+>;
+
+export type HoverGestureConfig = ExcludeInternalConfigProps<
+  BaseGestureConfig<
+    HoverGestureProperties,
+    HoverHandlerData,
+    HoverExtendedHandlerData
+  >
+>;
+
+export type HoverGestureInternalConfig = BaseGestureConfig<
+  HoverGestureInternalProperties,
+  HoverHandlerData,
+  HoverExtendedHandlerData
+>;
+
+export type HoverGestureEvent = GestureEvent<HoverHandlerData>;
+export type HoverGestureActiveEvent = GestureEvent<HoverExtendedHandlerData>;
+
+export type HoverGesture = SingleGesture<
+  HoverGestureInternalProperties,
+  HoverHandlerData,
+  HoverExtendedHandlerData
+>;

package/src/v3/hooks/gestures/hover/useHoverGesture.ts

@@ -1,63 +1,23 @@
-import { StylusData } from '../../../../handlers/gestureHandlerCommon';
-import { HoverEffect } from '../../../../handlers/gestures/hoverGesture';
-import {
-  BaseGestureConfig,
-  ExcludeInternalConfigProps,
-  SingleGesture,
-  HandlerData,
-  SingleGestureName,
-  WithSharedValue,
-  GestureEvent,
-} from '../../../types';
+import type { GestureEvent, HandlerData } from '../../../types';
+import { SingleGestureName } from '../../../types';
 import { useGesture } from '../../useGesture';
 import {
-  useClonedAndRemappedConfig,
   getChangeEventCalculator,
+  useClonedAndRemappedConfig,
 } from '../../utils';
-import {
-  HoverGestureExternalProperties,
-  HoverGestureNativeProperties,
-} from './HoverProperties';
-
-type HoverHandlerData = {
-  x: number;
-  y: number;
-  absoluteX: number;
-  absoluteY: number;
-  stylusData: StylusData;
-  changeX: number;
-  changeY: number;
-};
-
-type HoverGestureProperties = WithSharedValue<
-  HoverGestureExternalProperties,
-  HoverEffect
->;
-
-type HoverGestureInternalProperties = WithSharedValue<
-  HoverGestureNativeProperties,
-  HoverEffect
->;
-
-export type HoverGestureConfig = ExcludeInternalConfigProps<
-  BaseGestureConfig<HoverHandlerData, HoverGestureProperties>
->;
-
-type HoverGestureInternalConfig = BaseGestureConfig<
+import type {
+  HoverExtendedHandlerData,
+  HoverGesture,
+  HoverGestureConfig,
+  HoverGestureInternalConfig,
+  HoverGestureInternalProperties,
+  HoverGestureProperties,
   HoverHandlerData,
-  HoverGestureInternalProperties
->;
-
-export type HoverGestureEvent = GestureEvent<HoverHandlerData>;
-
-export type HoverGesture = SingleGesture<
-  HoverHandlerData,
-  HoverGestureInternalProperties
->;
+} from './HoverTypes';
 
 function diffCalculator(
-  current: HandlerData<HoverHandlerData>,
-  previous: HandlerData<HoverHandlerData> | null
+  current: HandlerData<HoverExtendedHandlerData>,
+  previous: HandlerData<HoverExtendedHandlerData> | null
 ) {
   'worklet';
   return {
@@ -66,21 +26,34 @@ function diffCalculator(
   };
 }
 
+function fillInDefaultValues(event: GestureEvent<HoverExtendedHandlerData>) {
+  'worklet';
+
+  event.changeX = 0;
+  event.changeY = 0;
+}
+
 function transformHoverProps(
   config: HoverGestureConfig & HoverGestureInternalConfig
 ) {
   config.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+  config.fillInDefaultValues = fillInDefaultValues;
 
   return config;
 }
 
 const HoverPropsMapping = new Map<string, string>([['effect', 'hoverEffect']]);
 
-export function useHoverGesture(config: HoverGestureConfig): HoverGesture {
+const EMPTY_HOVER_CONFIG: HoverGestureConfig = {};
+
+export function useHoverGesture(
+  config: HoverGestureConfig = EMPTY_HOVER_CONFIG
+): HoverGesture {
   const hoverConfig = useClonedAndRemappedConfig<
-    HoverHandlerData,
     HoverGestureProperties,
-    HoverGestureInternalProperties
+    HoverHandlerData,
+    HoverGestureInternalProperties,
+    HoverExtendedHandlerData
   >(config, HoverPropsMapping, transformHoverProps);
 
   return useGesture(SingleGestureName.Hover, hoverConfig);