@amazon-devices/react-native-gesture-handler 2.0.9000000000 → 4.0.0-rn-83

package/src/handlers/createHandler.tsx

@@ -1,49 +1,52 @@
-import { Platform } from '@amazon-devices/react-native-kepler';
 import * as React from 'react';
 import {
+  Platform,
   UIManager,
   DeviceEventEmitter,
   EmitterSubscription,
 } from 'react-native';
-// @ts-ignore - it isn't typed by TS & don't have definitelyTyped types
-import { isEqual as deepEqual } from 'lodash';
+import { customDirectEventTypes } from './customDirectEventTypes';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
-import type RNGestureHandlerModuleWeb from '../RNGestureHandlerModule.web';
 import { State } from '../State';
 import {
   handlerIDToTag,
-  getNextHandlerTag,
   registerOldGestureHandler,
+  unregisterOldGestureHandler,
 } from './handlersRegistry';
+import { getNextHandlerTag } from './getNextHandlerTag';
 
 import {
   BaseGestureHandlerProps,
-  filterConfig,
   GestureEvent,
   HandlerStateChangeEvent,
-  findNodeHandle,
-  scheduleFlushOperations,
 } from './gestureHandlerCommon';
+import { filterConfig, scheduleFlushOperations } from './utils';
+import findNodeHandle from '../findNodeHandle';
 import { ValueOf } from '../typeUtils';
-import { isFabric, isJestEnv, tagMessage } from '../utils';
+import {
+  deepEqual,
+  isFabric,
+  isReact19,
+  isTestEnv,
+  tagMessage,
+} from '../utils';
 import { ActionType } from '../ActionType';
 import { PressabilityDebugView } from './PressabilityDebugView';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
+import { ghQueueMicrotask } from '../ghQueueMicrotask';
+import { MountRegistry } from '../mountRegistry';
+import { ReactElement } from 'react';
 
-// amznmod_gesturehandler - Update deep import to align with changes we have pulled early from upstream.
-// @ts-expect-error Untyped as we are unsafely importing a private API
-import * as registry from 'react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry'
+const UIManagerAny = UIManager as any;
 
-registry.customDirectEventTypes['topOnGestureHandlerStateChange'] = {
-  registrationName: 'onGestureHandlerStateChange'
-}
+customDirectEventTypes.topGestureHandlerEvent = {
+  registrationName: 'onGestureHandlerEvent',
+};
 
-registry.customDirectEventTypes['topOnGestureHandlerEvent'] = {
-  registrationName: 'onGestureHandlerEvent'
+customDirectEventTypes.topGestureHandlerStateChange = {
+  registrationName: 'onGestureHandlerStateChange'
 }
 
-const UIManagerAny = UIManager as any;
-
 const customGHEventsConfigFabricAndroid = {
   topOnGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
   topOnGestureHandlerStateChange: {
@@ -78,12 +81,11 @@ UIManagerAny.genericDirectEventTypes = {
   ...UIManagerAny.genericDirectEventTypes,
   ...customGHEventsConfig,
 };
-// In newer versions of RN the `genericDirectEventTypes` is located in the object
-// returned by UIManager.getViewManagerConfig('getConstants') or in older RN UIManager.getConstants(), we need to add it there as well to make
-// it compatible with RN 61+
+
 // amznmod_react - getViewManagerConfig and getConstants are both deprecated and return null.
 // Bypassing the call on kepler to avoid a misleading error log.
-const UIManagerConstants = Platform.OS === 'kepler' ? null :
+// @ts-ignore Need PROJ*-337000 before using Platform typedef from react-native-kepler
+const UIManagerConstants = Platform.OS === "kepler" ? null :
   UIManagerAny.getViewManagerConfig?.('getConstants') ??
   UIManagerAny.getConstants?.();
 
@@ -97,10 +99,10 @@ if (UIManagerConstants) {
 // Wrap JS responder calls and notify gesture handler manager
 const {
   setJSResponder: oldSetJSResponder = () => {
-    //no operation
+    // no-op
   },
   clearJSResponder: oldClearJSResponder = () => {
-    //no operation
+    // no-op
   },
 } = UIManagerAny;
 UIManagerAny.setJSResponder = (tag: number, blockNativeResponder: boolean) => {
@@ -162,12 +164,20 @@ type InternalEventHandlers = {
   onGestureHandlerStateChange?: (event: any) => void;
 };
 
+type AttachGestureHandlerWeb = (
+  handlerTag: number,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  newView: any,
+  _actionType: ActionType,
+  propsRef: React.RefObject<unknown>
+) => void;
+
 const UNRESOLVED_REFS_RETRY_LIMIT = 1;
 
 // TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
 export default function createHandler<
   T extends BaseGestureHandlerProps<U>,
-  U extends Record<string, unknown>
+  U extends Record<string, unknown>,
 >({
   name,
   allowedProps = [],
@@ -185,7 +195,7 @@ export default function createHandler<
     static displayName = name;
     static contextType = GestureHandlerRootViewContext;
 
-    private handlerTag: number;
+    private handlerTag = -1;
     private config: Record<string, unknown>;
     private propsRef: React.MutableRefObject<unknown>;
     private isMountedRef: React.MutableRefObject<boolean | null>;
@@ -195,7 +205,6 @@ export default function createHandler<
 
     constructor(props: T & InternalEventHandlers) {
       super(props);
-      this.handlerTag = getNextHandlerTag();
       this.config = {};
       this.propsRef = React.createRef();
       this.isMountedRef = React.createRef();
@@ -228,7 +237,7 @@ export default function createHandler<
         // queueMicrotask. This makes it so update() function gets called after all
         // react components are mounted and we expect the missing ref object to
         // be resolved by then.
-        queueMicrotask(() => {
+        ghQueueMicrotask(() => {
           this.update(UNRESOLVED_REFS_RETRY_LIMIT);
         });
       }
@@ -241,6 +250,12 @@ export default function createHandler<
         )
       );
 
+      if (!this.viewNode) {
+        throw new Error(
+          `[Gesture Handler] Failed to obtain view for ${Handler.displayName}. Note that old API doesn't support functional components.`
+        );
+      }
+
       this.attachGestureHandler(findNodeHandle(this.viewNode) as number); // TODO(TS) - check if this can be null
     }
 
@@ -255,6 +270,9 @@ export default function createHandler<
     componentWillUnmount() {
       this.inspectorToggleListener?.remove();
       this.isMountedRef.current = false;
+      if (Platform.OS !== 'web') {
+        unregisterOldGestureHandler(this.handlerTag);
+      }
       RNGestureHandlerModule.dropGestureHandler(this.handlerTag);
       scheduleFlushOperations();
       // We can't use this.props.id directly due to TS generic type narrowing bug, see https://github.com/microsoft/TypeScript/issues/13995 for more context
@@ -263,9 +281,12 @@ export default function createHandler<
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
         delete handlerIDToTag[handlerID];
       }
+
+      MountRegistry.gestureHandlerWillUnmount(this);
     }
 
     private onGestureHandlerEvent = (event: GestureEvent<U>) => {
+      console.log("[SWM] onGestureHandlerEvent")
       if (event.nativeEvent.handlerTag === this.handlerTag) {
         if (typeof this.props.onGestureEvent === 'function') {
           this.props.onGestureEvent?.(event);
@@ -279,6 +300,7 @@ export default function createHandler<
     private onGestureHandlerStateChange = (
       event: HandlerStateChangeEvent<U>
     ) => {
+      console.log("[SWM] onGestureHanlderStateChange", event)
       if (event.nativeEvent.handlerTag === this.handlerTag) {
         if (typeof this.props.onHandlerStateChange === 'function') {
           this.props.onHandlerStateChange?.(event);
@@ -299,20 +321,25 @@ export default function createHandler<
       this.viewNode = node;
 
       const child = React.Children.only(this.props.children);
-      // TODO(TS) fix ref type
-      const { ref }: any = child;
-      if (ref !== null) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
+      // @ts-ignore Since React 19 ref is accessible as standard prop
+      // https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-element-ref
+      const ref = isReact19() ? (child as ReactElement).props?.ref : child?.ref;
+
+      if (!ref) {
+        return;
+      }
+
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        ref.current = node;
       }
     };
 
     private createGestureHandler = (
       newConfig: Readonly<Record<string, unknown>>
     ) => {
+      this.handlerTag = getNextHandlerTag();
       this.config = newConfig;
 
       RNGestureHandlerModule.createGestureHandler(
@@ -326,9 +353,9 @@ export default function createHandler<
       this.viewTag = newViewTag;
 
       if (Platform.OS === 'web') {
-        // typecast due to dynamic resolution, attachGestureHandler should have web version signature in this branch
+        // Typecast due to dynamic resolution, attachGestureHandler should have web version signature in this branch
         (
-          RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler
+          RNGestureHandlerModule.attachGestureHandler as AttachGestureHandlerWeb
         )(
           this.handlerTag,
           newViewTag,
@@ -342,24 +369,28 @@ export default function createHandler<
         });
 
         const actionType = (() => {
-          if (
-            (this.props?.onGestureEvent &&
-              // @ts-ignore types not correct?
-              'current' in this.props.onGestureEvent) ||
-            (this.props?.onHandlerStateChange &&
-              // @ts-ignore types not correct?
-              'current' in this.props.onHandlerStateChange)
-          ) {
+          const onGestureEvent = this.props?.onGestureEvent;
+          const isGestureHandlerWorklet =
+            onGestureEvent &&
+            ('current' in onGestureEvent ||
+              'workletEventHandler' in onGestureEvent);
+          const onHandlerStateChange = this.props?.onHandlerStateChange;
+          const isStateChangeHandlerWorklet =
+            onHandlerStateChange &&
+            ('current' in onHandlerStateChange ||
+              'workletEventHandler' in onHandlerStateChange);
+          const isReanimatedHandler =
+            isGestureHandlerWorklet || isStateChangeHandlerWorklet;
+          if (isReanimatedHandler) {
             // Reanimated worklet
+            console.log("[SWM] worklet")
             return ActionType.REANIMATED_WORKLET;
-          } else if (
-            this.props?.onGestureEvent &&
-            // @ts-ignore types not correct?
-            '__isNative' in this.props.onGestureEvent
-          ) {
+          } else if (onGestureEvent && '__isNative' in onGestureEvent) {
             // Animated.event with useNativeDriver: true
+            console.log("[SWM] native animated event")
             return ActionType.NATIVE_ANIMATED_EVENT;
           } else {
+            console.log("[SWM] old_api")
             // JS callback or Animated.event with useNativeDriver: false
             return ActionType.JS_FUNCTION_OLD_API;
           }
@@ -373,6 +404,10 @@ export default function createHandler<
       }
 
       scheduleFlushOperations();
+
+      ghQueueMicrotask(() => {
+        MountRegistry.gestureHandlerWillMount(this);
+      });
     };
 
     private updateGestureHandler = (
@@ -395,7 +430,7 @@ export default function createHandler<
       // `ref={refObject}` it's possible that it won't be resolved in time. Seems like trying
       // again is easy enough fix.
       if (hasUnresolvedRefs(props) && remainingTries > 0) {
-        queueMicrotask(() => {
+        ghQueueMicrotask(() => {
           this.update(remainingTries - 1);
         });
       } else {
@@ -410,6 +445,7 @@ export default function createHandler<
       }
     }
 
+    // eslint-disable-next-line @eslint-react/no-unused-class-component-members
     setNativeProps(updates: any) {
       const mergedProps = { ...this.props, ...updates };
       const newConfig = filterConfig(
@@ -421,10 +457,10 @@ export default function createHandler<
     }
 
     render() {
-      if (__DEV__ && !this.context && !isJestEnv() && Platform.OS !== 'web') {
+      if (__DEV__ && !this.context && !isTestEnv() && 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.'
+            ' 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/fundamentals/installation for more details.'
         );
       }
 
@@ -532,11 +568,12 @@ export default function createHandler<
         {
           ref: this.refHandler,
           collapsable: false,
-          ...(isJestEnv()
+          ...(isTestEnv()
             ? {
-                handlerType: name,
-                handlerTag: this.handlerTag,
-              }
+              handlerType: name,
+              handlerTag: this.handlerTag,
+              enabled: this.props.enabled,
+            }
             : {}),
           testID: this.props.testID ?? child.props.testID,
           ...events,

package/src/handlers/createNativeWrapper.tsx

@@ -44,11 +44,15 @@ export default function createNativeWrapper<P>(
       },
       {
         gestureHandlerProps: { ...config }, // Watch out not to modify config
-        childProps: { enabled: props.enabled } as P,
+        childProps: {
+          enabled: props.enabled,
+          hitSlop: props.hitSlop,
+          testID: props.testID,
+        } as P,
       }
     );
-    const _ref = useRef<React.ComponentType<P>>();
-    const _gestureHandlerRef = useRef<React.ComponentType<P>>();
+    const _ref = useRef<React.ComponentType<P>>(null);
+    const _gestureHandlerRef = useRef<React.ComponentType<P>>(null);
     useImperativeHandle(
       ref,
       // @ts-ignore TODO(TS) decide how nulls work in this context

package/src/handlers/customDirectEventTypes.ts

@@ -0,0 +1,2 @@
+// @ts-ignore - its taken straight from RN
+export { customDirectEventTypes } from 'react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry';

package/src/handlers/customDirectEventTypes.web.ts

@@ -0,0 +1,5 @@
+// customDirectEventTypes doesn't exist in react-native-web, therefore importing it
+// directly in createHandler.tsx would end in crash.
+const customDirectEventTypes = {};
+
+export { customDirectEventTypes };

package/src/handlers/gestureHandlerCommon.ts

@@ -3,14 +3,11 @@
 // e.g. React.createRef<TapGestureHandler> -> React.createRef<typeof TapGestureHandler>.
 // See https://www.typescriptlang.org/docs/handbook/classes.html#constructor-functions for reference.
 import * as React from 'react';
-import { Platform, findNodeHandle as findNodeHandleRN } from 'react-native';
 
 import { State } from '../State';
 import { TouchEventType } from '../TouchEventType';
 import { ValueOf } from '../typeUtils';
-import { handlerIDToTag } from './handlersRegistry';
-import { toArray } from '../utils';
-import RNGestureHandlerModule from '../RNGestureHandlerModule';
+import { PointerType } from '../PointerType';
 
 const commonProps = [
   'id',
@@ -20,9 +17,16 @@ const commonProps = [
   'cancelsTouchesInView',
   'userSelect',
   'activeCursor',
+  'mouseButton',
+  'enableContextMenu',
+  'touchAction',
 ] as const;
 
-const componentInteractionProps = ['waitFor', 'simultaneousHandlers'] as const;
+const componentInteractionProps = [
+  'waitFor',
+  'simultaneousHandlers',
+  'blocksHandlers',
+] as const;
 
 export const baseGestureHandlerProps = [
   ...commonProps,
@@ -36,7 +40,7 @@ export const baseGestureHandlerProps = [
   'onHandlerStateChange',
 ] as const;
 
-export const baseGestureHandlerWithMonitorProps = [
+export const baseGestureHandlerWithDetectorProps = [
   ...commonProps,
   'needsPointerData',
   'manualActivation',
@@ -46,6 +50,7 @@ export interface GestureEventPayload {
   handlerTag: number;
   numberOfPointers: number;
   state: ValueOf<typeof State>;
+  pointerType: PointerType;
 }
 export interface HandlerStateChangeEventPayload extends GestureEventPayload {
   oldState: ValueOf<typeof State>;
@@ -53,6 +58,8 @@ export interface HandlerStateChangeEventPayload extends GestureEventPayload {
 
 export type HitSlop =
   | number
+  | null
+  | undefined
   | Partial<
       Record<
         'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal',
@@ -103,13 +110,39 @@ export type ActiveCursor =
   | 'zoom-in'
   | 'zoom-out';
 
-//TODO(TS) events in handlers
+export enum MouseButton {
+  LEFT = 1,
+  RIGHT = 2,
+  MIDDLE = 4,
+  BUTTON_4 = 8,
+  BUTTON_5 = 16,
+  ALL = 31,
+}
+
+export type TouchAction =
+  | 'auto'
+  | 'none'
+  | 'pan-x'
+  | 'pan-left'
+  | 'pan-right'
+  | 'pan-y'
+  | 'pan-up'
+  | 'pan-down'
+  | 'pinch-zoom'
+  | 'manipulation'
+  | 'inherit'
+  | 'initial'
+  | 'revert'
+  | 'revert-layer'
+  | 'unset';
+
+// TODO(TS) events in handlers
 
 export interface GestureEvent<ExtraEventPayloadT = Record<string, unknown>> {
   nativeEvent: Readonly<GestureEventPayload & ExtraEventPayloadT>;
 }
 export interface HandlerStateChangeEvent<
-  ExtraEventPayloadT = Record<string, unknown>
+  ExtraEventPayloadT = Record<string, unknown>,
 > {
   nativeEvent: Readonly<HandlerStateChangeEventPayload & ExtraEventPayloadT>;
 }
@@ -129,13 +162,14 @@ export type GestureTouchEvent = {
   eventType: TouchEventType;
   allTouches: TouchData[];
   changedTouches: TouchData[];
+  pointerType: PointerType;
 };
 
 export type GestureUpdateEvent<GestureEventPayloadT = Record<string, unknown>> =
   GestureEventPayload & GestureEventPayloadT;
 
 export type GestureStateChangeEvent<
-  GestureStateChangeEventPayloadT = Record<string, unknown>
+  GestureStateChangeEventPayloadT = Record<string, unknown>,
 > = HandlerStateChangeEventPayload & GestureStateChangeEventPayloadT;
 
 export type CommonGestureConfig = {
@@ -144,16 +178,20 @@ export type CommonGestureConfig = {
   hitSlop?: HitSlop;
   userSelect?: UserSelect;
   activeCursor?: ActiveCursor;
+  mouseButton?: MouseButton;
+  enableContextMenu?: boolean;
+  touchAction?: TouchAction;
 };
 
 // Events payloads are types instead of interfaces due to TS limitation.
 // See https://github.com/microsoft/TypeScript/issues/15300 for more info.
 export type BaseGestureHandlerProps<
-  ExtraEventPayloadT extends Record<string, unknown> = Record<string, unknown>
+  ExtraEventPayloadT extends Record<string, unknown> = Record<string, unknown>,
 > = CommonGestureConfig & {
   id?: string;
   waitFor?: React.Ref<unknown> | React.Ref<unknown>[];
   simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
+  blocksHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
   testID?: string;
   cancelsTouchesInView?: boolean;
   // TODO(TS) - fix event types
@@ -163,82 +201,11 @@ export type BaseGestureHandlerProps<
   onActivated?: (event: HandlerStateChangeEvent) => void;
   onEnded?: (event: HandlerStateChangeEvent) => void;
 
-  //TODO(TS) consider using NativeSyntheticEvent
+  // TODO(TS) consider using NativeSyntheticEvent
   onGestureEvent?: (event: GestureEvent<ExtraEventPayloadT>) => void;
   onHandlerStateChange?: (
     event: HandlerStateChangeEvent<ExtraEventPayloadT>
   ) => void;
-  // implicit `children` prop has been removed in @types/react^18.0.0
+  // Implicit `children` prop has been removed in @types/react^18.0.0
   children?: React.ReactNode;
 };
-
-function isConfigParam(param: unknown, name: string) {
-  // param !== Object(param) returns false if `param` is a function
-  // or an object and returns true if `param` is null
-  return (
-    param !== undefined &&
-    (param !== Object(param) ||
-      !('__isNative' in (param as Record<string, unknown>))) &&
-    name !== 'onHandlerStateChange' &&
-    name !== 'onGestureEvent'
-  );
-}
-
-export function filterConfig(
-  props: Record<string, unknown>,
-  validProps: string[],
-  defaults: Record<string, unknown> = {}
-) {
-  const filteredConfig = { ...defaults };
-  for (const key of validProps) {
-    let value = props[key];
-    if (isConfigParam(value, key)) {
-      if (key === 'simultaneousHandlers' || key === 'waitFor') {
-        value = transformIntoHandlerTags(props[key]);
-      } else if (key === 'hitSlop' && typeof value !== 'object') {
-        value = { top: value, left: value, bottom: value, right: value };
-      }
-      filteredConfig[key] = value;
-    }
-  }
-  return filteredConfig;
-}
-
-function transformIntoHandlerTags(handlerIDs: any) {
-  handlerIDs = toArray(handlerIDs);
-
-  if (Platform.OS === 'web') {
-    return handlerIDs
-      .map(({ current }: { current: any }) => current)
-      .filter((handle: any) => handle);
-  }
-  // converts handler string IDs into their numeric tags
-  return handlerIDs
-    .map(
-      (handlerID: any) =>
-        handlerIDToTag[handlerID] || handlerID.current?.handlerTag || -1
-    )
-    .filter((handlerTag: number) => handlerTag > 0);
-}
-
-export function findNodeHandle(
-  node: null | number | React.Component<any, any> | React.ComponentClass<any>
-): null | number | React.Component<any, any> | React.ComponentClass<any> {
-  if (Platform.OS === 'web') {
-    return node;
-  }
-  return findNodeHandleRN(node);
-}
-
-let flushOperationsScheduled = false;
-
-export function scheduleFlushOperations() {
-  if (!flushOperationsScheduled) {
-    flushOperationsScheduled = true;
-    queueMicrotask(() => {
-      RNGestureHandlerModule.flushOperations();
-
-      flushOperationsScheduled = false;
-    });
-  }
-}