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

package/src/v3/hooks/gestures/pan/usePanGesture.ts

@@ -1,60 +1,25 @@
-import { StylusData } from '../../../../handlers/gestureHandlerCommon';
-import {
-  BaseGestureConfig,
-  ExcludeInternalConfigProps,
-  SingleGesture,
+import type {
+  GestureEvent,
   HandlerData,
-  SingleGestureName,
   WithSharedValue,
-  GestureEvent,
 } from '../../../types';
+import { SingleGestureName } from '../../../types';
 import { useGesture } from '../../useGesture';
 import {
   getChangeEventCalculator,
   maybeUnpackValue,
   useClonedAndRemappedConfig,
 } from '../../utils';
-import {
+import type {
   OffsetProps,
-  PanGestureExternalProperties,
-  PanGestureNativeProperties,
-} from './PanProperties';
-
-export type PanHandlerData = {
-  x: number;
-  y: number;
-  absoluteX: number;
-  absoluteY: number;
-  translationX: number;
-  translationY: number;
-  velocityX: number;
-  velocityY: number;
-  stylusData: StylusData;
-  changeX: number;
-  changeY: number;
-};
-
-export type PanGestureProperties =
-  WithSharedValue<PanGestureExternalProperties>;
-
-export type PanGestureInternalProperties =
-  WithSharedValue<PanGestureNativeProperties>;
-
-export type PanGestureConfig = ExcludeInternalConfigProps<
-  BaseGestureConfig<PanHandlerData, PanGestureProperties>
->;
-
-type PanGestureInternalConfig = BaseGestureConfig<
+  PanExtendedHandlerData,
+  PanGesture,
+  PanGestureConfig,
+  PanGestureInternalConfig,
+  PanGestureInternalProperties,
+  PanGestureProperties,
   PanHandlerData,
-  PanGestureInternalProperties
->;
-
-export type PanGestureEvent = GestureEvent<PanHandlerData>;
-
-export type PanGesture = SingleGesture<
-  PanHandlerData,
-  PanGestureInternalProperties
->;
+} from './PanTypes';
 
 const PanPropsMapping = new Map<
   keyof PanGestureProperties,
@@ -139,8 +104,8 @@ function transformOffsetProp(
 }
 
 function diffCalculator(
-  current: HandlerData<PanHandlerData>,
-  previous: HandlerData<PanHandlerData> | null
+  current: HandlerData<PanExtendedHandlerData>,
+  previous: HandlerData<PanExtendedHandlerData> | null
 ) {
   'worklet';
   return {
@@ -153,6 +118,13 @@ function diffCalculator(
   };
 }
 
+function fillInDefaultValues(event: GestureEvent<PanExtendedHandlerData>) {
+  'worklet';
+
+  event.changeX = 0;
+  event.changeY = 0;
+}
+
 function transformPanProps(
   config: PanGestureConfig & PanGestureInternalConfig
 ) {
@@ -162,23 +134,30 @@ function transformPanProps(
   transformOffsetProp(config, 'activeOffsetX');
 
   config.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+  config.fillInDefaultValues = fillInDefaultValues;
 
   return config;
 }
 
-export function usePanGesture(config: PanGestureConfig): PanGesture {
+const EMPTY_PAN_CONFIG: PanGestureConfig = {};
+
+export function usePanGesture(
+  config: PanGestureConfig = EMPTY_PAN_CONFIG
+): PanGesture {
   if (__DEV__) {
     validatePanConfig(config);
   }
 
   const panConfig = useClonedAndRemappedConfig<
-    PanHandlerData,
     PanGestureProperties,
-    PanGestureInternalProperties
+    PanHandlerData,
+    PanGestureInternalProperties,
+    PanExtendedHandlerData
   >(config, PanPropsMapping, transformPanProps);
 
-  return useGesture<PanHandlerData, PanGestureInternalProperties>(
-    SingleGestureName.Pan,
-    panConfig
-  );
+  return useGesture<
+    PanGestureInternalProperties,
+    PanHandlerData,
+    PanExtendedHandlerData
+  >(SingleGestureName.Pan, panConfig);
 }

package/src/v3/hooks/gestures/pinch/PinchTypes.ts

@@ -0,0 +1,40 @@
+import type {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  GestureEvent,
+  SingleGesture,
+} from '../../../types';
+
+export type PinchGestureNativeProperties = Record<string, never>;
+
+// We want to keep `{}` because it does not break ts-server suggestions
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type PinchHandlerData = {};
+
+export type PinchExtendedHandlerData = {
+  scale: number;
+  velocity: number;
+  focalX: number;
+  focalY: number;
+  scaleChange: number;
+};
+
+export type PinchGestureProperties = PinchGestureNativeProperties;
+
+export type PinchGestureInternalConfig = BaseGestureConfig<
+  PinchGestureProperties,
+  PinchHandlerData,
+  PinchExtendedHandlerData
+>;
+
+export type PinchGestureConfig =
+  ExcludeInternalConfigProps<PinchGestureInternalConfig>;
+
+export type PinchGestureEvent = GestureEvent<PinchHandlerData>;
+export type PinchGestureActiveEvent = GestureEvent<PinchExtendedHandlerData>;
+
+export type PinchGesture = SingleGesture<
+  PinchGestureProperties,
+  PinchHandlerData,
+  PinchExtendedHandlerData
+>;

package/src/v3/hooks/gestures/pinch/usePinchGesture.ts

@@ -1,46 +1,22 @@
-import {
-  BaseGestureConfig,
-  ExcludeInternalConfigProps,
-  SingleGesture,
-  HandlerData,
-  SingleGestureName,
-  GestureEvent,
-} from '../../../types';
+import type { GestureEvent, HandlerData } from '../../../types';
+import { SingleGestureName } from '../../../types';
 import { useGesture } from '../../useGesture';
 import {
-  useClonedAndRemappedConfig,
   getChangeEventCalculator,
+  useClonedAndRemappedConfig,
 } from '../../utils';
-import { PinchGestureNativeProperties } from './PinchProperties';
-
-type PinchHandlerData = {
-  scale: number;
-  focalX: number;
-  focalY: number;
-  velocity: number;
-  scaleChange: number;
-};
-
-type PinchGestureProperties = PinchGestureNativeProperties;
-
-type PinchGestureInternalConfig = BaseGestureConfig<
+import type {
+  PinchExtendedHandlerData,
+  PinchGesture,
+  PinchGestureConfig,
+  PinchGestureInternalConfig,
+  PinchGestureProperties,
   PinchHandlerData,
-  PinchGestureProperties
->;
-
-export type PinchGestureConfig =
-  ExcludeInternalConfigProps<PinchGestureInternalConfig>;
-
-export type PinchGestureEvent = GestureEvent<PinchHandlerData>;
-
-export type PinchGesture = SingleGesture<
-  PinchHandlerData,
-  PinchGestureProperties
->;
+} from './PinchTypes';
 
 function diffCalculator(
-  current: HandlerData<PinchHandlerData>,
-  previous: HandlerData<PinchHandlerData> | null
+  current: HandlerData<PinchExtendedHandlerData>,
+  previous: HandlerData<PinchExtendedHandlerData> | null
 ) {
   'worklet';
   return {
@@ -48,25 +24,34 @@ function diffCalculator(
   };
 }
 
+function fillInDefaultValues(event: GestureEvent<PinchExtendedHandlerData>) {
+  'worklet';
+  event.scaleChange = 1;
+}
+
 function transformPinchProps(
   config: PinchGestureConfig & PinchGestureInternalConfig
 ) {
   config.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+  config.fillInDefaultValues = fillInDefaultValues;
 
   return config;
 }
 
 const PinchPropsMapping = new Map<string, string>();
 
-export function usePinchGesture(config: PinchGestureConfig): PinchGesture {
+const EMPTY_PINCH_CONFIG: PinchGestureConfig = {};
+
+export function usePinchGesture(
+  config: PinchGestureConfig = EMPTY_PINCH_CONFIG
+): PinchGesture {
   const pinchConfig = useClonedAndRemappedConfig<
-    PinchHandlerData,
     PinchGestureProperties,
+    PinchHandlerData,
     // no internal props, pass record as PinchGestureProperties maps everything to never
-    Record<string, unknown>
+    Record<string, unknown>,
+    PinchExtendedHandlerData
   >(config, PinchPropsMapping, transformPinchProps);
 
-  pinchConfig.changeEventCalculator = getChangeEventCalculator(diffCalculator);
-
   return useGesture(SingleGestureName.Pinch, pinchConfig);
 }

package/src/v3/hooks/gestures/rotation/RotationTypes.ts

@@ -0,0 +1,41 @@
+import type {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  GestureEvent,
+  SingleGesture,
+} from '../../../types';
+
+export type RotationGestureNativeProperties = Record<string, never>;
+
+// We want to keep `{}` because it does not break ts-server suggestions
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type RotationHandlerData = {};
+
+export type RotationExtendedHandlerData = {
+  rotation: number;
+  velocity: number;
+  anchorX: number;
+  anchorY: number;
+  rotationChange: number;
+};
+
+export type RotationGestureProperties = RotationGestureNativeProperties;
+
+export type RotationGestureInternalConfig = BaseGestureConfig<
+  RotationGestureProperties,
+  RotationHandlerData,
+  RotationExtendedHandlerData
+>;
+
+export type RotationGestureConfig =
+  ExcludeInternalConfigProps<RotationGestureInternalConfig>;
+
+export type RotationGestureEvent = GestureEvent<RotationHandlerData>;
+export type RotationGestureActiveEvent =
+  GestureEvent<RotationExtendedHandlerData>;
+
+export type RotationGesture = SingleGesture<
+  RotationGestureProperties,
+  RotationHandlerData,
+  RotationExtendedHandlerData
+>;

package/src/v3/hooks/gestures/rotation/useRotationGesture.ts

@@ -1,46 +1,22 @@
-import {
-  BaseGestureConfig,
-  ExcludeInternalConfigProps,
-  SingleGesture,
-  HandlerData,
-  SingleGestureName,
-  GestureEvent,
-} from '../../../types';
+import type { GestureEvent, HandlerData } from '../../../types';
+import { SingleGestureName } from '../../../types';
 import { useGesture } from '../../useGesture';
 import {
-  useClonedAndRemappedConfig,
   getChangeEventCalculator,
+  useClonedAndRemappedConfig,
 } from '../../utils';
-import { RotationGestureNativeProperties } from './RotationProperties';
-
-type RotationHandlerData = {
-  rotation: number;
-  anchorX: number;
-  anchorY: number;
-  velocity: number;
-  rotationChange: number;
-};
-
-type RotationGestureProperties = RotationGestureNativeProperties;
-
-type RotationGestureInternalConfig = BaseGestureConfig<
-  RotationHandlerData,
-  RotationGestureProperties
->;
-
-export type RotationGestureConfig =
-  ExcludeInternalConfigProps<RotationGestureInternalConfig>;
-
-export type RotationGestureEvent = GestureEvent<RotationHandlerData>;
-
-export type RotationGesture = SingleGesture<
+import type {
+  RotationExtendedHandlerData,
+  RotationGesture,
+  RotationGestureConfig,
+  RotationGestureInternalConfig,
+  RotationGestureProperties,
   RotationHandlerData,
-  RotationGestureProperties
->;
+} from './RotationTypes';
 
 function diffCalculator(
-  current: HandlerData<RotationHandlerData>,
-  previous: HandlerData<RotationHandlerData> | null
+  current: HandlerData<RotationExtendedHandlerData>,
+  previous: HandlerData<RotationExtendedHandlerData> | null
 ) {
   'worklet';
   return {
@@ -50,24 +26,33 @@ function diffCalculator(
   };
 }
 
+function fillInDefaultValues(event: GestureEvent<RotationExtendedHandlerData>) {
+  'worklet';
+  event.rotationChange = 0;
+}
+
 function transformRotationProps(
   config: RotationGestureConfig & RotationGestureInternalConfig
 ) {
   config.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+  config.fillInDefaultValues = fillInDefaultValues;
 
   return config;
 }
 
 const RotationPropsMapping = new Map<string, string>();
 
+const EMPTY_ROTATION_CONFIG: RotationGestureConfig = {};
+
 export function useRotationGesture(
-  config: RotationGestureConfig
+  config: RotationGestureConfig = EMPTY_ROTATION_CONFIG
 ): RotationGesture {
   const rotationConfig = useClonedAndRemappedConfig<
-    RotationHandlerData,
     RotationGestureProperties,
+    RotationHandlerData,
     // no internal props, pass record as RotationGestureProperties maps everything to never
-    Record<string, unknown>
+    Record<string, unknown>,
+    RotationExtendedHandlerData
   >(config, RotationPropsMapping, transformRotationProps);
 
   return useGesture(SingleGestureName.Rotation, rotationConfig);

package/src/v3/hooks/gestures/tap/{TapProperties.ts → TapTypes.ts}

@@ -1,3 +1,11 @@
+import type {
+  BaseDiscreteGestureConfig,
+  DiscreteSingleGesture,
+  ExcludeInternalConfigProps,
+  GestureEvent,
+  WithSharedValue,
+} from '../../../types';
+
 type CommonTapGestureConfig = {
   /**
    * Minimum number of pointers (fingers) required to be placed before the
@@ -66,3 +74,27 @@ export const TapNativeProperties = new Set<keyof TapGestureNativeConfig>([
   'maxDelayMs',
   'maxDist',
 ]);
+
+export type TapHandlerData = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+};
+
+export type TapGestureProperties = WithSharedValue<TapGestureExternalConfig>;
+
+export type TapGestureInternalProperties =
+  WithSharedValue<TapGestureNativeConfig>;
+
+export type TapGestureConfig = ExcludeInternalConfigProps<
+  BaseDiscreteGestureConfig<TapGestureProperties, TapHandlerData>
+>;
+
+export type TapGestureEvent = GestureEvent<TapHandlerData>;
+export type TapGestureActiveEvent = TapGestureEvent;
+
+export type TapGesture = DiscreteSingleGesture<
+  TapGestureInternalProperties,
+  TapHandlerData
+>;

package/src/v3/hooks/gestures/tap/useTapGesture.ts

@@ -1,39 +1,13 @@
-import {
-  BaseDiscreteGestureConfig,
-  ExcludeInternalConfigProps,
-  GestureEvent,
-  DiscreteSingleGesture,
-  SingleGestureName,
-  WithSharedValue,
-} from '../../../types';
+import { SingleGestureName } from '../../../types';
 import { useGesture } from '../../useGesture';
 import { useClonedAndRemappedConfig } from '../../utils';
-import {
-  TapGestureExternalConfig,
-  TapGestureNativeConfig,
-} from './TapProperties';
-
-type TapHandlerData = {
-  x: number;
-  y: number;
-  absoluteX: number;
-  absoluteY: number;
-};
-
-type TapGestureProperties = WithSharedValue<TapGestureExternalConfig>;
-
-type TapGestureInternalProperties = WithSharedValue<TapGestureNativeConfig>;
-
-export type TapGestureConfig = ExcludeInternalConfigProps<
-  BaseDiscreteGestureConfig<TapHandlerData, TapGestureProperties>
->;
-
-export type TapGestureEvent = GestureEvent<TapHandlerData>;
-
-export type TapGesture = DiscreteSingleGesture<
+import type {
+  TapGesture,
+  TapGestureConfig,
+  TapGestureInternalProperties,
+  TapGestureProperties,
   TapHandlerData,
-  TapGestureInternalProperties
->;
+} from './TapTypes';
 
 const TapPropsMapping = new Map<
   keyof TapGestureProperties,
@@ -44,14 +18,18 @@ const TapPropsMapping = new Map<
   ['maxDelay', 'maxDelayMs'],
 ]);
 
-export function useTapGesture(config: TapGestureConfig): TapGesture {
+const EMPTY_TAP_CONFIG: TapGestureConfig = {};
+
+export function useTapGesture(
+  config: TapGestureConfig = EMPTY_TAP_CONFIG
+): TapGesture {
   const tapConfig = useClonedAndRemappedConfig<
-    TapHandlerData,
     TapGestureProperties,
+    TapHandlerData,
     TapGestureInternalProperties
   >(config, TapPropsMapping);
 
-  return useGesture<TapHandlerData, TapGestureInternalProperties>(
+  return useGesture<TapGestureInternalProperties, TapHandlerData>(
     SingleGestureName.Tap,
     tapConfig
   );

package/src/v3/hooks/useGesture.ts

@@ -1,26 +1,34 @@
 import { useEffect, useMemo, useRef } from 'react';
+
 import { getNextHandlerTag } from '../../handlers/getNextHandlerTag';
-import { useGestureCallbacks } from './useGestureCallbacks';
-import {
-  prepareConfig,
-  prepareRelations,
-  bindSharedValues,
-  unbindSharedValues,
-  prepareConfigForNativeSide,
-} from './utils';
-import { tagMessage } from '../../utils';
-import { BaseGestureConfig, SingleGesture, SingleGestureName } from '../types';
-import { scheduleFlushOperations } from '../../handlers/utils';
 import {
   registerGesture,
   unregisterGesture,
 } from '../../handlers/handlersRegistry';
+import { scheduleFlushOperations } from '../../handlers/utils';
+import { tagMessage } from '../../utils';
 import { NativeProxy } from '../NativeProxy';
+import type {
+  BaseGestureConfig,
+  SingleGesture,
+  SingleGestureName,
+} from '../types';
+import { useGestureCallbacks } from './useGestureCallbacks';
+import {
+  bindSharedValues,
+  prepareConfigForNativeSide,
+  prepareRelations,
+  unbindSharedValues,
+} from './utils';
 
-export function useGesture<THandlerData, TConfig>(
+export function useGesture<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData = THandlerData,
+>(
   type: SingleGestureName,
-  config: BaseGestureConfig<THandlerData, TConfig>
-): SingleGesture<THandlerData, TConfig> {
+  config: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
+): SingleGesture<TConfig, THandlerData, TExtendedHandlerData> {
   const handlerTag = useMemo(() => getNextHandlerTag(), []);
   const disableReanimated = useMemo(() => config.disableReanimated, []);
 
@@ -32,9 +40,6 @@ export function useGesture<THandlerData, TConfig>(
     );
   }
 
-  // This has to be done ASAP as other hooks depend `shouldUseReanimatedDetector`.
-  prepareConfig(config);
-
   // TODO: Call only necessary hooks depending on which callbacks are defined (?)
   const { jsEventHandler, reanimatedEventHandler, animatedEventHandler } =
     useGestureCallbacks(handlerTag, config);
@@ -90,7 +95,10 @@ export function useGesture<THandlerData, TConfig>(
 
   useEffect(() => {
     return () => {
-      currentGestureRef.current = { type: '', handlerTag: -1 };
+      if (currentGestureRef.current.handlerTag === handlerTag) {
+        currentGestureRef.current = { type: '', handlerTag: -1 };
+      }
+
       NativeProxy.dropGestureHandler(handlerTag);
       scheduleFlushOperations();
     };

package/src/v3/hooks/useGestureCallbacks.ts

@@ -1,17 +1,17 @@
-import { useGestureEventHandler } from './callbacks/useGestureEventHandler';
-import {
+import { Reanimated } from '../../handlers/gestures/reanimatedWrapper';
+import { tagMessage } from '../../utils';
+import type {
   AnimatedEvent,
   BaseGestureConfig,
   GestureUpdateEventWithHandlerData,
 } from '../types';
+import { useGestureEventHandler } from './callbacks/useGestureEventHandler';
+import { useReanimatedEventHandler } from './callbacks/useReanimatedEventHandler';
 import {
   checkMappingForChangeProperties,
   isNativeAnimatedEvent,
   useMemoizedGestureCallbacks,
 } from './utils';
-import { useReanimatedEventHandler } from './callbacks/useReanimatedEventHandler';
-import { tagMessage } from '../../utils';
-import { Reanimated } from '../../handlers/gestures/reanimatedWrapper';
 
 function guardJSAnimatedEvent(handler: (...args: unknown[]) => void) {
   return (...args: unknown[]) => {
@@ -36,9 +36,13 @@ function guardJSAnimatedEvent(handler: (...args: unknown[]) => void) {
   };
 }
 
-export function useGestureCallbacks<THandlerData, TConfig>(
+export function useGestureCallbacks<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
   handlerTag: number,
-  config: BaseGestureConfig<THandlerData, TConfig>
+  config: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
 ) {
   const callbacks = useMemoizedGestureCallbacks(config);
 
@@ -54,12 +58,13 @@ export function useGestureCallbacks<THandlerData, TConfig>(
       handlerTag,
       callbacks,
       reanimatedHandler,
-      config.changeEventCalculator
+      config.changeEventCalculator,
+      config.fillInDefaultValues
     );
   }
 
   let animatedEventHandler:
-    | ((event: GestureUpdateEventWithHandlerData<THandlerData>) => void)
+    | ((event: GestureUpdateEventWithHandlerData<TExtendedHandlerData>) => void)
     | AnimatedEvent
     | undefined;
   if (config.dispatchesAnimatedEvents) {