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

package/src/v3/hooks/utils/configUtils.ts

@@ -1,11 +1,12 @@
+import { useMemo } from 'react';
+
 import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
 import { tagMessage } from '../../../utils';
-import {
+import type {
   BaseGestureConfig,
   ExcludeInternalConfigProps,
   SingleGestureName,
 } from '../../types';
-import { hasWorkletEventHandlers, maybeUnpackValue } from './reanimatedUtils';
 import { isNativeAnimatedEvent, shouldHandleTouchEvents } from './eventUtils';
 import {
   allowedNativeProps,
@@ -13,11 +14,13 @@ import {
   PropsToFilter,
   PropsWhiteLists,
 } from './propsWhiteList';
-import { useMemo } from 'react';
+import { hasWorkletEventHandlers, maybeUnpackValue } from './reanimatedUtils';
 
-export function prepareConfig<THandlerData, TConfig extends object>(
-  config: BaseGestureConfig<THandlerData, TConfig>
-) {
+export function resolveInternalConfigProps<
+  TConfig extends object,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(config: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>) {
   const runOnJS = maybeUnpackValue(config.runOnJS);
 
   if (
@@ -64,12 +67,20 @@ export function prepareConfig<THandlerData, TConfig extends object>(
     config.shouldUseReanimatedDetector && !runOnJS;
 }
 
-export function prepareConfigForNativeSide<THandlerData, TConfig>(
+export function prepareConfigForNativeSide<
+  TConfig extends object,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
   handlerType: SingleGestureName,
-  config: BaseGestureConfig<THandlerData, TConfig>
+  config: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
 ) {
   // @ts-ignore Seems like TypeScript can't infer the type here properly because of generic
-  const filteredConfig: BaseGestureConfig<THandlerData, TConfig> = {};
+  const filteredConfig: BaseGestureConfig<
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData
+  > = {};
   const handlerPropsWhiteList =
     PropsWhiteLists.get(handlerType) ?? EMPTY_WHITE_LIST;
 
@@ -93,10 +104,20 @@ export function prepareConfigForNativeSide<THandlerData, TConfig>(
   return filteredConfig;
 }
 
-function cloneConfig<THandlerData, TConfig>(
-  config: ExcludeInternalConfigProps<BaseGestureConfig<THandlerData, TConfig>>
-): BaseGestureConfig<THandlerData, TConfig> {
-  return { ...config } as BaseGestureConfig<THandlerData, TConfig>;
+function cloneConfig<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  config: ExcludeInternalConfigProps<
+    BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
+  >
+): BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData> {
+  return { ...config } as BaseGestureConfig<
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData
+  >;
 }
 
 function remapProps<
@@ -104,7 +125,7 @@ function remapProps<
   TInternalConfig extends Record<string, unknown>,
 >(
   config: TConfig & TInternalConfig,
-  propsMapping: Map<string, string>
+  propsMapping: ReadonlyMap<string, string>
 ): TInternalConfig {
   type MergedConfig = TConfig & TInternalConfig;
 
@@ -121,23 +142,41 @@ function remapProps<
   return config;
 }
 
+const DEFAULT_PROPS_MAPPING = new Map<string, string>();
+const DEFAULT_PROPS_TRANSFORMER = <TConfig extends object>(
+  config: TConfig
+): TConfig => config;
+
 export function useClonedAndRemappedConfig<
+  TConfig extends Record<string, unknown>,
   THandlerData,
-  TConfig extends object,
-  TInternalConfig extends Record<string, unknown>,
+  TInternalConfig extends Record<string, unknown> = TConfig,
+  TExtendedHandlerData extends THandlerData = THandlerData,
 >(
-  config: ExcludeInternalConfigProps<BaseGestureConfig<THandlerData, TConfig>>,
-  propsMapping: Map<string, string> = new Map(),
-  propsTransformer: (config: TInternalConfig) => TInternalConfig = (cfg) => cfg
-): BaseGestureConfig<THandlerData, TInternalConfig> {
+  config: ExcludeInternalConfigProps<
+    BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
+  >,
+  propsMapping: ReadonlyMap<string, string> = DEFAULT_PROPS_MAPPING,
+  propsTransformer: (
+    config: TInternalConfig
+  ) => TInternalConfig = DEFAULT_PROPS_TRANSFORMER
+): BaseGestureConfig<TInternalConfig, THandlerData, TExtendedHandlerData> {
   return useMemo(() => {
-    const clonedConfig = cloneConfig<THandlerData, TConfig>(config);
+    const clonedConfig = cloneConfig<
+      TConfig,
+      THandlerData,
+      TExtendedHandlerData
+    >(config);
 
-    return propsTransformer(
+    const transformedConfig = propsTransformer(
       remapProps<TConfig, TInternalConfig>(
         clonedConfig as TConfig & TInternalConfig,
         propsMapping
       )
     );
+
+    resolveInternalConfigProps(transformedConfig);
+
+    return transformedConfig;
   }, [config, propsMapping, propsTransformer]);
 }

package/src/v3/hooks/utils/eventHandlersUtils.ts

@@ -1,17 +1,21 @@
 import { useMemo } from 'react';
-import { TouchEventType } from '../../../TouchEventType';
+
 import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
-import {
+import { TouchEventType } from '../../../TouchEventType';
+import type {
   GestureCallbacks,
+  GestureEndEventCallback,
   GestureEventCallback,
-  GestureEventCallbackWithDidSucceed,
   GestureTouchEventCallback,
   UnpackedGestureHandlerEvent,
 } from '../../types';
 
-export function useMemoizedGestureCallbacks<THandlerData>(
-  callbacks: GestureCallbacks<THandlerData>
-): GestureCallbacks<THandlerData> {
+export function useMemoizedGestureCallbacks<
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  callbacks: GestureCallbacks<THandlerData, TExtendedHandlerData>
+): GestureCallbacks<THandlerData, TExtendedHandlerData> {
   return useMemo(
     () => ({
       ...(callbacks.onBegin ? { onBegin: callbacks.onBegin } : {}),
@@ -46,12 +50,14 @@ export function useMemoizedGestureCallbacks<THandlerData>(
   );
 }
 
-function getHandler<THandlerData>(
+function getHandler<THandlerData, TExtendedHandlerData extends THandlerData>(
   type: CALLBACK_TYPE,
-  callbacks: GestureCallbacks<THandlerData>
+  callbacks: GestureCallbacks<THandlerData, TExtendedHandlerData>
 ):
   | GestureEventCallback<THandlerData>
-  | GestureEventCallbackWithDidSucceed<THandlerData>
+  | GestureEventCallback<TExtendedHandlerData>
+  | GestureEndEventCallback<THandlerData>
+  | GestureEndEventCallback<TExtendedHandlerData>
   | GestureTouchEventCallback
   | undefined {
   'worklet';
@@ -61,7 +67,7 @@ function getHandler<THandlerData>(
     case CALLBACK_TYPE.START:
       return callbacks.onActivate;
     case CALLBACK_TYPE.UPDATE:
-      return callbacks.onUpdate as GestureEventCallback<THandlerData>; // Animated event is handled in different place.
+      return callbacks.onUpdate as GestureEventCallback<TExtendedHandlerData>; // Animated event is handled in different place.
     case CALLBACK_TYPE.END:
       return callbacks.onDeactivate;
     case CALLBACK_TYPE.FINALIZE:
@@ -95,13 +101,14 @@ export function touchEventTypeToCallbackType(
 }
 
 type SingleParameterCallback<T> = (event: T) => void;
-type DoubleParameterCallback<T> = (event: T, didSucceed: boolean) => void;
 
-export function runCallback<THandlerData>(
+export function runCallback<
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
   type: CALLBACK_TYPE,
-  callbacks: GestureCallbacks<THandlerData>,
-  event: UnpackedGestureHandlerEvent<THandlerData>,
-  didSucceed?: boolean
+  callbacks: GestureCallbacks<THandlerData, TExtendedHandlerData>,
+  event: UnpackedGestureHandlerEvent<THandlerData>
 ) {
   'worklet';
   const handler = getHandler(type, callbacks);
@@ -110,9 +117,5 @@ export function runCallback<THandlerData>(
     return;
   }
 
-  if (didSucceed === undefined) {
-    (handler as SingleParameterCallback<typeof event>)(event);
-  } else {
-    (handler as DoubleParameterCallback<typeof event>)(event, didSucceed);
-  }
+  (handler as SingleParameterCallback<typeof event>)(event);
 }

package/src/v3/hooks/utils/eventUtils.ts

@@ -1,21 +1,24 @@
-import { NativeSyntheticEvent } from 'react-native';
-import {
+import type { NativeSyntheticEvent } from 'react-native';
+
+import type { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
+import { tagMessage } from '../../../utils';
+import type {
   AnimatedEvent,
   BaseGestureConfig,
   ChangeCalculatorType,
   DiffCalculatorType,
+  GestureEvent,
   GestureHandlerEventWithHandlerData,
   GestureStateChangeEventWithHandlerData,
   GestureUpdateEventWithHandlerData,
-  GestureEvent,
 } from '../../types';
-import { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
-import { tagMessage } from '../../../utils';
 
-function isNativeEvent<THandlerData>(
-  event: GestureHandlerEventWithHandlerData<THandlerData>
+function isNativeEvent<THandlerData, TExtendedHandlerData extends THandlerData>(
+  event: GestureHandlerEventWithHandlerData<THandlerData, TExtendedHandlerData>
 ): event is
-  | NativeSyntheticEvent<GestureUpdateEventWithHandlerData<THandlerData>>
+  | NativeSyntheticEvent<
+      GestureUpdateEventWithHandlerData<TExtendedHandlerData>
+    >
   | NativeSyntheticEvent<GestureStateChangeEventWithHandlerData<THandlerData>>
   | NativeSyntheticEvent<GestureTouchEvent> {
   'worklet';
@@ -23,11 +26,14 @@ function isNativeEvent<THandlerData>(
   return 'nativeEvent' in event;
 }
 
-export function maybeExtractNativeEvent<THandlerData>(
-  event: GestureHandlerEventWithHandlerData<THandlerData>
+export function maybeExtractNativeEvent<
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  event: GestureHandlerEventWithHandlerData<THandlerData, TExtendedHandlerData>
 ):
   | GestureTouchEvent
-  | GestureUpdateEventWithHandlerData<THandlerData>
+  | GestureUpdateEventWithHandlerData<TExtendedHandlerData>
   | GestureStateChangeEventWithHandlerData<THandlerData> {
   'worklet';
 
@@ -44,9 +50,15 @@ export function flattenAndFilterEvent<THandlerData>(
   return { handlerTag: event.handlerTag, ...event.handlerData };
 }
 
-export function isEventForHandlerWithTag<THandlerData>(
+export function isEventForHandlerWithTag<
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
   handlerTag: number,
-  event: GestureUpdateEventWithHandlerData<THandlerData> | GestureTouchEvent
+  event:
+    | GestureStateChangeEventWithHandlerData<THandlerData>
+    | GestureUpdateEventWithHandlerData<TExtendedHandlerData>
+    | GestureTouchEvent
 ) {
   'worklet';
 
@@ -83,9 +95,11 @@ export function checkMappingForChangeProperties(animatedEvent: AnimatedEvent) {
   }
 }
 
-export function shouldHandleTouchEvents<THandlerData, TConfig>(
-  config: BaseGestureConfig<THandlerData, TConfig>
-) {
+export function shouldHandleTouchEvents<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(config: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>) {
   return (
     !!config.onTouchesDown ||
     !!config.onTouchesMove ||
@@ -94,13 +108,13 @@ export function shouldHandleTouchEvents<THandlerData, TConfig>(
   );
 }
 
-export function getChangeEventCalculator<THandlerData>(
-  diffCalculator: DiffCalculatorType<THandlerData>
-): ChangeCalculatorType<THandlerData> {
+export function getChangeEventCalculator<TExtendedHandlerData>(
+  diffCalculator: DiffCalculatorType<TExtendedHandlerData>
+): ChangeCalculatorType<TExtendedHandlerData> {
   'worklet';
   return (
-    current: GestureUpdateEventWithHandlerData<THandlerData>,
-    previous?: GestureUpdateEventWithHandlerData<THandlerData>
+    current: GestureUpdateEventWithHandlerData<TExtendedHandlerData>,
+    previous?: GestureUpdateEventWithHandlerData<TExtendedHandlerData>
   ) => {
     'worklet';
     const currentEventData = current.handlerData;
@@ -113,3 +127,31 @@ export function getChangeEventCalculator<THandlerData>(
     return current;
   };
 }
+
+export function isTouchEvent<
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  event:
+    | GestureStateChangeEventWithHandlerData<THandlerData>
+    | GestureUpdateEventWithHandlerData<TExtendedHandlerData>
+    | GestureTouchEvent
+): event is GestureTouchEvent {
+  'worklet';
+
+  return 'allTouches' in event;
+}
+
+export function isStateChangeEvent<
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  event:
+    | GestureStateChangeEventWithHandlerData<THandlerData>
+    | GestureUpdateEventWithHandlerData<TExtendedHandlerData>
+    | GestureTouchEvent
+): event is GestureStateChangeEventWithHandlerData<THandlerData> {
+  'worklet';
+
+  return 'oldState' in event && event.oldState !== undefined;
+}

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

@@ -1,43 +1,37 @@
 export {
-  prepareConfig,
   prepareConfigForNativeSide,
   useClonedAndRemappedConfig,
 } from './configUtils';
-
 export {
-  useMemoizedGestureCallbacks,
-  touchEventTypeToCallbackType,
   runCallback,
+  touchEventTypeToCallbackType,
+  useMemoizedGestureCallbacks,
 } from './eventHandlersUtils';
-
 export {
-  maybeExtractNativeEvent,
+  checkMappingForChangeProperties,
   flattenAndFilterEvent,
+  getChangeEventCalculator,
   isEventForHandlerWithTag,
   isNativeAnimatedEvent,
-  checkMappingForChangeProperties,
+  maybeExtractNativeEvent,
   shouldHandleTouchEvents,
-  getChangeEventCalculator,
 } from './eventUtils';
-
+export {
+  allowedNativeProps,
+  EMPTY_WHITE_LIST,
+  HandlerCallbacks,
+  NativeWrapperProps,
+  PropsToFilter,
+  PropsWhiteLists,
+} from './propsWhiteList';
 export {
   bindSharedValues,
-  unbindSharedValues,
   hasWorkletEventHandlers,
   maybeUnpackValue,
+  unbindSharedValues,
 } from './reanimatedUtils';
-
 export {
+  containsDuplicates,
   isComposedGesture,
   prepareRelations,
-  containsDuplicates,
 } from './relationUtils';
-
-export {
-  allowedNativeProps,
-  NativeWrapperProps,
-  HandlerCallbacks,
-  PropsToFilter,
-  PropsWhiteLists,
-  EMPTY_WHITE_LIST,
-} from './propsWhiteList';

package/src/v3/hooks/utils/propsWhiteList.ts

@@ -1,19 +1,19 @@
-import {
+import type {
   BaseGestureConfig,
   CommonGestureConfig,
   ExternalRelations,
   GestureCallbacks,
   HandlersPropsWhiteList,
   InternalConfigProps,
-  SingleGestureName,
 } from '../../types';
-import { NativeWrapperProperties } from '../../types/NativeWrapperType';
-import { FlingNativeProperties } from '../gestures/fling/FlingProperties';
-import { HoverNativeProperties } from '../gestures/hover/HoverProperties';
-import { LongPressNativeProperties } from '../gestures/longPress/LongPressProperties';
-import { NativeHandlerNativeProperties } from '../gestures/native/NativeProperties';
-import { PanNativeProperties } from '../gestures/pan/PanProperties';
-import { TapNativeProperties } from '../gestures/tap/TapProperties';
+import { SingleGestureName } from '../../types';
+import type { NativeWrapperProperties } from '../../types/NativeWrapperType';
+import { FlingNativeProperties } from '../gestures/fling/FlingTypes';
+import { HoverNativeProperties } from '../gestures/hover/HoverTypes';
+import { LongPressNativeProperties } from '../gestures/longPress/LongPressTypes';
+import { NativeHandlerNativeProperties } from '../gestures/native/NativeTypes';
+import { PanNativeProperties } from '../gestures/pan/PanTypes';
+import { TapNativeProperties } from '../gestures/tap/TapTypes';
 
 const CommonConfig = new Set<keyof CommonGestureConfig>([
   'enabled',
@@ -23,6 +23,7 @@ const CommonConfig = new Set<keyof CommonGestureConfig>([
   'mouseButton',
   'testID',
   'cancelsTouchesInView',
+  'cancelsJSResponder',
   'manualActivation',
 ]);
 
@@ -52,7 +53,7 @@ if (!__DEV__) {
 }
 
 export const HandlerCallbacks = new Set<
-  keyof Required<GestureCallbacks<unknown>>
+  keyof Required<GestureCallbacks<unknown, unknown>>
 >([
   'onBegin',
   'onActivate',
@@ -65,16 +66,25 @@ export const HandlerCallbacks = new Set<
   'onTouchesCancel',
 ]);
 
-export const PropsToFilter = new Set<BaseGestureConfig<unknown, unknown>>([
+export const PropsToFilter = new Set<
+  BaseGestureConfig<unknown, unknown, unknown>
+>([
   ...HandlerCallbacks,
   ...ExternalRelationsConfig,
 
   // Config props
+  'fillInDefaultValues',
   'changeEventCalculator',
   'disableReanimated',
   'shouldUseReanimatedDetector',
   'useAnimated',
   'runOnJS',
+
+  // Pan offset props before remapping:
+  'activeOffsetY',
+  'failOffsetX',
+  'failOffsetY',
+  'activeOffsetX',
 ]);
 
 export const PropsWhiteLists = new Map<
@@ -91,7 +101,9 @@ export const PropsWhiteLists = new Map<
 
 export const EMPTY_WHITE_LIST = new Set<string>();
 
-export const NativeWrapperProps = new Set<keyof NativeWrapperProperties>([
+export const NativeWrapperProps = new Set<
+  keyof NativeWrapperProperties<unknown>
+>([
   ...CommonConfig,
   ...HandlerCallbacks,
   ...NativeHandlerNativeProperties,

package/src/v3/hooks/utils/reanimatedUtils.ts

@@ -1,6 +1,6 @@
-import { NativeProxy } from '../../NativeProxy';
 import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
-import {
+import { NativeProxy } from '../../NativeProxy';
+import type {
   BaseGestureConfig,
   GestureCallbacks,
   SharedValue,
@@ -26,8 +26,12 @@ const SHARED_VALUE_OFFSET = 1.618;
 // Don't transfer entire NativeProxy to the UI thread
 const { updateGestureHandlerConfig } = NativeProxy;
 
-export function bindSharedValues<THandlerData, TConfig>(
-  config: BaseGestureConfig<THandlerData, TConfig>,
+export function bindSharedValues<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  config: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>,
   handlerTag: number
 ) {
   if (Reanimated === undefined) {
@@ -64,8 +68,12 @@ export function bindSharedValues<THandlerData, TConfig>(
   }
 }
 
-export function unbindSharedValues<THandlerData, TConfig>(
-  config: BaseGestureConfig<THandlerData, TConfig>,
+export function unbindSharedValues<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  config: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>,
   handlerTag: number
 ) {
   if (Reanimated === undefined) {
@@ -88,12 +96,16 @@ export function unbindSharedValues<THandlerData, TConfig>(
   }
 }
 
-export function hasWorkletEventHandlers<THandlerData, TConfig>(
-  config: BaseGestureConfig<THandlerData, TConfig>
-) {
+export function hasWorkletEventHandlers<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(config: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>) {
   return Object.entries(config).some(
     ([key, value]) =>
-      HandlerCallbacks.has(key as keyof GestureCallbacks<unknown>) &&
+      HandlerCallbacks.has(
+        key as keyof GestureCallbacks<THandlerData, TExtendedHandlerData>
+      ) &&
       typeof value === 'function' &&
       '__workletHash' in value
   );

package/src/v3/hooks/utils/relationUtils.ts

@@ -1,12 +1,12 @@
-import {
+import type {
   ComposedGesture,
   ExternalRelations,
   Gesture,
   GestureRelations,
 } from '../../types';
 
-export function isComposedGesture<THandlerData, TConfig>(
-  gesture: Gesture<THandlerData, TConfig> | ComposedGesture
+export function isComposedGesture<TConfig, THandlerData>(
+  gesture: Gesture<TConfig, THandlerData> | ComposedGesture
 ): gesture is ComposedGesture {
   return 'handlerTags' in gesture;
 }