@amazon-devices/react-native-gesture-handler 4.0.0 → 4.0.2

package/src/handlers/gestures/GestureDetector/index.tsx

@@ -1,191 +0,0 @@
-/* eslint-disable react/no-unused-prop-types */
-import React, {
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from 'react';
-import { Platform } from 'react-native';
-import findNodeHandle from '../../../findNodeHandle';
-import { GestureType } from '../gesture';
-import { UserSelect, TouchAction } from '../../gestureHandlerCommon';
-import { ComposedGesture } from '../gestureComposition';
-import { isTestEnv } from '../../../utils';
-
-import GestureHandlerRootViewContext from '../../../GestureHandlerRootViewContext';
-import { AttachedGestureState, GestureDetectorState } from './types';
-import { useAnimatedGesture } from './useAnimatedGesture';
-import { attachHandlers } from './attachHandlers';
-import { needsToReattach } from './needsToReattach';
-import { dropHandlers } from './dropHandlers';
-import { useWebEventHandlers } from './utils';
-import { Wrap, AnimatedWrap } from './Wrap';
-import { useDetectorUpdater } from './useDetectorUpdater';
-import { useViewRefHandler } from './useViewRefHandler';
-import { useMountReactions } from './useMountReactions';
-
-function propagateDetectorConfig(
-  props: GestureDetectorProps,
-  gesture: ComposedGesture | GestureType
-) {
-  const keysToPropagate: (keyof GestureDetectorProps)[] = [
-    'userSelect',
-    'enableContextMenu',
-    'touchAction',
-  ];
-
-  for (const key of keysToPropagate) {
-    const value = props[key];
-    if (value === undefined) {
-      continue;
-    }
-
-    for (const g of gesture.toGestureArray()) {
-      const config = g.config as { [key: string]: unknown };
-      config[key] = value;
-    }
-  }
-}
-
-interface GestureDetectorProps {
-  children?: React.ReactNode;
-  /**
-   * A gesture object containing the configuration and callbacks.
-   * Can be any of:
-   * - base gestures (`Tap`, `Pan`, ...)
-   * - `ComposedGesture` (`Race`, `Simultaneous`, `Exclusive`)
-   */
-  gesture: ComposedGesture | GestureType;
-  /**
-   * #### Web only
-   * This parameter allows to specify which `userSelect` property should be applied to underlying view.
-   * Possible values are `"none" | "auto" | "text"`. Default value is set to `"none"`.
-   */
-  userSelect?: UserSelect;
-  /**
-   * #### Web only
-   * Specifies whether context menu should be enabled after clicking on underlying view with right mouse button.
-   * Default value is set to `false`.
-   */
-  enableContextMenu?: boolean;
-  /**
-   * #### Web only
-   * This parameter allows to specify which `touchAction` property should be applied to underlying view.
-   * Supports all CSS touch-action values (e.g. `"none"`, `"pan-y"`). Default value is set to `"none"`.
-   */
-  touchAction?: TouchAction;
-}
-
-/**
- * `GestureDetector` is responsible for creating and updating native gesture handlers based on the config of provided gesture.
- *
- * ### Props
- * - `gesture`
- * - `userSelect` (**Web only**)
- * - `enableContextMenu` (**Web only**)
- * - `touchAction` (**Web only**)
- *
- * ### Remarks
- * - Gesture Detector will use first native view in its subtree to recognize gestures, however if this view is used only to group its children it may get automatically collapsed.
- * - Using the same instance of a gesture across multiple Gesture Detectors is not possible.
- *
- * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector
- */
-export const GestureDetector = (props: GestureDetectorProps) => {
-  const rootViewContext = useContext(GestureHandlerRootViewContext);
-  if (__DEV__ && !rootViewContext && !isTestEnv() && Platform.OS !== 'web') {
-    throw new Error(
-      'GestureDetector 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.'
-    );
-  }
-
-  // Gesture config should be wrapped with useMemo to prevent unnecessary re-renders
-  const gestureConfig = props.gesture;
-  propagateDetectorConfig(props, gestureConfig);
-
-  const gesturesToAttach = useMemo(
-    () => gestureConfig.toGestureArray(),
-    [gestureConfig]
-  );
-  const shouldUseReanimated = gesturesToAttach.some(
-    (g) => g.shouldUseReanimated
-  );
-
-  const webEventHandlersRef = useWebEventHandlers();
-  // Store state in ref to prevent unnecessary renders
-  const state = useRef<GestureDetectorState>({
-    firstRender: true,
-    viewRef: null,
-    previousViewTag: -1,
-    forceRebuildReanimatedEvent: false,
-  }).current;
-
-  const preparedGesture = React.useRef<AttachedGestureState>({
-    attachedGestures: [],
-    animatedEventHandler: null,
-    animatedHandlers: null,
-    shouldUseReanimated: shouldUseReanimated,
-    isMounted: false,
-  }).current;
-
-  const updateAttachedGestures = useDetectorUpdater(
-    state,
-    preparedGesture,
-    gesturesToAttach,
-    gestureConfig,
-    webEventHandlersRef
-  );
-
-  const refHandler = useViewRefHandler(state, updateAttachedGestures);
-
-  // Reanimated event should be rebuilt only when gestures are reattached, otherwise
-  // config update will be enough as all necessary items are stored in shared values anyway
-  const needsToRebuildReanimatedEvent =
-    state.firstRender ||
-    state.forceRebuildReanimatedEvent ||
-    needsToReattach(preparedGesture, gesturesToAttach);
-  state.forceRebuildReanimatedEvent = false;
-
-  useAnimatedGesture(preparedGesture, needsToRebuildReanimatedEvent);
-
-  useLayoutEffect(() => {
-    const viewTag = findNodeHandle(state.viewRef) as number;
-    preparedGesture.isMounted = true;
-
-    attachHandlers({
-      preparedGesture,
-      gestureConfig,
-      gesturesToAttach,
-      webEventHandlersRef,
-      viewTag,
-    });
-
-    return () => {
-      preparedGesture.isMounted = false;
-      dropHandlers(preparedGesture);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (state.firstRender) {
-      state.firstRender = false;
-    } else {
-      updateAttachedGestures();
-    }
-  }, [props]);
-
-  useMountReactions(updateAttachedGestures, preparedGesture);
-
-  if (shouldUseReanimated) {
-    return (
-      <AnimatedWrap
-        ref={refHandler}
-        onGestureHandlerEvent={preparedGesture.animatedEventHandler}>
-        {props.children}
-      </AnimatedWrap>
-    );
-  } else {
-    return <Wrap ref={refHandler}>{props.children}</Wrap>;
-  }
-};

package/src/handlers/gestures/GestureDetector/needsToReattach.ts

@@ -1,27 +0,0 @@
-import { GestureType } from '../gesture';
-import { AttachedGestureState } from './types';
-
-// Checks whether the gesture should be reattached to the view, this will happen when:
-// - The number of gestures in the preparedGesture is different than the number of gestures in the gesture
-// - The handlerName is different in any of the gestures
-// - At least one of the gestures changed the thread it runs on
-export function needsToReattach(
-  preparedGesture: AttachedGestureState,
-  newGestures: GestureType[]
-) {
-  if (newGestures.length !== preparedGesture.attachedGestures.length) {
-    return true;
-  }
-  for (let i = 0; i < newGestures.length; i++) {
-    if (
-      newGestures[i].handlerName !==
-        preparedGesture.attachedGestures[i].handlerName ||
-      newGestures[i].shouldUseReanimated !==
-        preparedGesture.attachedGestures[i].shouldUseReanimated
-    ) {
-      return true;
-    }
-  }
-
-  return false;
-}

package/src/handlers/gestures/GestureDetector/types.ts

@@ -1,32 +0,0 @@
-import { GestureType, HandlerCallbacks } from '../gesture';
-import { SharedValue } from '../reanimatedWrapper';
-import { HandlerStateChangeEvent } from '../../gestureHandlerCommon';
-
-export interface AttachedGestureState {
-  // Array of gestures that should be attached to the view under that gesture detector
-  attachedGestures: GestureType[];
-  // Event handler for the gesture, returned by `useEvent` from Reanimated
-  animatedEventHandler: unknown;
-  // Shared value that's responsible for transferring the callbacks to the UI thread handler
-  animatedHandlers: SharedValue<
-    HandlerCallbacks<Record<string, unknown>>[] | null
-  > | null;
-  // Whether `useAnimatedGesture` should be called inside detector
-  shouldUseReanimated: boolean;
-  // Whether the GestureDetector is mounted
-  isMounted: boolean;
-}
-
-export interface GestureDetectorState {
-  firstRender: boolean;
-  viewRef: React.Component | null;
-  previousViewTag: number;
-  forceRebuildReanimatedEvent: boolean;
-}
-
-export interface WebEventHandler {
-  onGestureHandlerEvent: (event: HandlerStateChangeEvent<unknown>) => void;
-  onGestureHandlerStateChange?: (
-    event: HandlerStateChangeEvent<unknown>
-  ) => void;
-}

package/src/handlers/gestures/GestureDetector/updateHandlers.ts

@@ -1,92 +0,0 @@
-import { GestureType, HandlerCallbacks } from '../gesture';
-import { registerHandler } from '../../handlersRegistry';
-import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
-import { filterConfig, scheduleFlushOperations } from '../../utils';
-import { ComposedGesture } from '../gestureComposition';
-import { ghQueueMicrotask } from '../../../ghQueueMicrotask';
-import { AttachedGestureState } from './types';
-import {
-  extractGestureRelations,
-  checkGestureCallbacksForWorklets,
-  ALLOWED_PROPS,
-} from './utils';
-
-export function updateHandlers(
-  preparedGesture: AttachedGestureState,
-  gestureConfig: ComposedGesture | GestureType,
-  newGestures: GestureType[]
-) {
-  gestureConfig.prepare();
-
-  for (let i = 0; i < newGestures.length; i++) {
-    const handler = preparedGesture.attachedGestures[i];
-    checkGestureCallbacksForWorklets(handler);
-
-    // Only update handlerTag when it's actually different, it may be the same
-    // if gesture config object is wrapped with useMemo
-    if (newGestures[i].handlerTag !== handler.handlerTag) {
-      newGestures[i].handlerTag = handler.handlerTag;
-      newGestures[i].handlers.handlerTag = handler.handlerTag;
-    }
-  }
-
-  // Store attached gestures to avoid crash when gestures changed after queueing micro task
-  const attachedGestures = preparedGesture.attachedGestures;
-
-  // Use queueMicrotask to extract handlerTags, because when it's ran, all refs should be updated
-  // and handlerTags in BaseGesture references should be updated in the loop above (we need to wait
-  // in case of external relations)
-  ghQueueMicrotask(() => {
-    if (!preparedGesture.isMounted) {
-      return;
-    }
-
-    // Stop if attached gestures changed after queueing micro task
-    if (attachedGestures !== preparedGesture.attachedGestures) {
-      return;
-    }
-
-    // If amount of gesture configs changes, we need to update the callbacks in shared value
-    let shouldUpdateSharedValueIfUsed =
-      attachedGestures.length !== newGestures.length;
-
-    for (let i = 0; i < newGestures.length; i++) {
-      const handler = attachedGestures[i];
-
-      // If the gestureId is different (gesture isn't wrapped with useMemo or its dependencies changed),
-      // we need to update the shared value, assuming the gesture runs on UI thread or the thread changed
-      if (
-        handler.handlers.gestureId !== newGestures[i].handlers.gestureId &&
-        (newGestures[i].shouldUseReanimated || handler.shouldUseReanimated)
-      ) {
-        shouldUpdateSharedValueIfUsed = true;
-      }
-
-      handler.config = newGestures[i].config;
-      handler.handlers = newGestures[i].handlers;
-
-      RNGestureHandlerModule.updateGestureHandler(
-        handler.handlerTag,
-        filterConfig(
-          handler.config,
-          ALLOWED_PROPS,
-          extractGestureRelations(handler)
-        )
-      );
-
-      registerHandler(handler.handlerTag, handler, handler.config.testId);
-    }
-
-    if (preparedGesture.animatedHandlers && shouldUpdateSharedValueIfUsed) {
-      const newHandlersValue = attachedGestures
-        .filter((g) => g.shouldUseReanimated) // Ignore gestures that shouldn't run on UI
-        .map((g) => g.handlers) as unknown as HandlerCallbacks<
-        Record<string, unknown>
-      >[];
-
-      preparedGesture.animatedHandlers.value = newHandlersValue;
-    }
-
-    scheduleFlushOperations();
-  });
-}

package/src/handlers/gestures/GestureDetector/useAnimatedGesture.ts

@@ -1,209 +0,0 @@
-import { HandlerCallbacks, CALLBACK_TYPE } from '../gesture';
-import { Reanimated } from '../reanimatedWrapper';
-import {
-  GestureTouchEvent,
-  GestureUpdateEvent,
-  GestureStateChangeEvent,
-} from '../../gestureHandlerCommon';
-import {
-  GestureStateManager,
-  GestureStateManagerType,
-} from '../gestureStateManager';
-import { State } from '../../../State';
-import { TouchEventType } from '../../../TouchEventType';
-import { tagMessage } from '../../../utils';
-import { AttachedGestureState } from './types';
-
-function getHandler(
-  type: CALLBACK_TYPE,
-  gesture: HandlerCallbacks<Record<string, unknown>>
-) {
-  'worklet';
-  switch (type) {
-    case CALLBACK_TYPE.BEGAN:
-      return gesture.onBegin;
-    case CALLBACK_TYPE.START:
-      return gesture.onStart;
-    case CALLBACK_TYPE.UPDATE:
-      return gesture.onUpdate;
-    case CALLBACK_TYPE.CHANGE:
-      return gesture.onChange;
-    case CALLBACK_TYPE.END:
-      return gesture.onEnd;
-    case CALLBACK_TYPE.FINALIZE:
-      return gesture.onFinalize;
-    case CALLBACK_TYPE.TOUCHES_DOWN:
-      return gesture.onTouchesDown;
-    case CALLBACK_TYPE.TOUCHES_MOVE:
-      return gesture.onTouchesMove;
-    case CALLBACK_TYPE.TOUCHES_UP:
-      return gesture.onTouchesUp;
-    case CALLBACK_TYPE.TOUCHES_CANCELLED:
-      return gesture.onTouchesCancelled;
-  }
-}
-
-function touchEventTypeToCallbackType(
-  eventType: TouchEventType
-): CALLBACK_TYPE {
-  'worklet';
-  switch (eventType) {
-    case TouchEventType.TOUCHES_DOWN:
-      return CALLBACK_TYPE.TOUCHES_DOWN;
-    case TouchEventType.TOUCHES_MOVE:
-      return CALLBACK_TYPE.TOUCHES_MOVE;
-    case TouchEventType.TOUCHES_UP:
-      return CALLBACK_TYPE.TOUCHES_UP;
-    case TouchEventType.TOUCHES_CANCELLED:
-      return CALLBACK_TYPE.TOUCHES_CANCELLED;
-  }
-  return CALLBACK_TYPE.UNDEFINED;
-}
-
-function runWorklet(
-  type: CALLBACK_TYPE,
-  gesture: HandlerCallbacks<Record<string, unknown>>,
-  event: GestureStateChangeEvent | GestureUpdateEvent | GestureTouchEvent,
-  ...args: unknown[]
-) {
-  'worklet';
-  const handler = getHandler(type, gesture);
-  if (gesture.isWorklet[type]) {
-    // @ts-ignore Logic below makes sure the correct event is send to the
-    // correct handler.
-    handler?.(event, ...args);
-  } else if (handler) {
-    console.warn(tagMessage('Animated gesture callback must be a worklet'));
-  }
-}
-
-function isStateChangeEvent(
-  event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
-): event is GestureStateChangeEvent {
-  'worklet';
-  // @ts-ignore Yes, the oldState prop is missing on GestureTouchEvent, that's the point
-  return event.oldState != null;
-}
-
-function isTouchEvent(
-  event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
-): event is GestureTouchEvent {
-  'worklet';
-  return event.eventType != null;
-}
-
-export function useAnimatedGesture(
-  preparedGesture: AttachedGestureState,
-  needsRebuild: boolean
-) {
-  if (!Reanimated) {
-    return;
-  }
-
-  // Hooks are called conditionally, but the condition is whether the
-  // react-native-reanimated is installed, which shouldn't change while running
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const sharedHandlersCallbacks = Reanimated.useSharedValue<
-    HandlerCallbacks<Record<string, unknown>>[] | null
-  >(null);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const lastUpdateEvent = Reanimated.useSharedValue<
-    (GestureUpdateEvent | undefined)[]
-  >([]);
-
-  // not every gesture needs a state controller, init them lazily
-  const stateControllers: GestureStateManagerType[] = [];
-
-  const callback = (
-    event: GestureStateChangeEvent | GestureUpdateEvent | GestureTouchEvent
-  ) => {
-    'worklet';
-
-    const currentCallback = sharedHandlersCallbacks.value;
-    if (!currentCallback) {
-      return;
-    }
-
-    for (let i = 0; i < currentCallback.length; i++) {
-      const gesture = currentCallback[i];
-
-      if (event.handlerTag !== gesture.handlerTag) {
-        continue;
-      }
-
-      if (isStateChangeEvent(event)) {
-        if (
-          event.oldState === State.UNDETERMINED &&
-          event.state === State.BEGAN
-        ) {
-          runWorklet(CALLBACK_TYPE.BEGAN, gesture, event);
-        } else if (
-          (event.oldState === State.BEGAN ||
-            event.oldState === State.UNDETERMINED) &&
-          event.state === State.ACTIVE
-        ) {
-          runWorklet(CALLBACK_TYPE.START, gesture, event);
-          lastUpdateEvent.value[gesture.handlerTag] = undefined;
-        } else if (
-          event.oldState !== event.state &&
-          event.state === State.END
-        ) {
-          if (event.oldState === State.ACTIVE) {
-            runWorklet(CALLBACK_TYPE.END, gesture, event, true);
-          }
-          runWorklet(CALLBACK_TYPE.FINALIZE, gesture, event, true);
-        } else if (
-          (event.state === State.FAILED || event.state === State.CANCELLED) &&
-          event.state !== event.oldState
-        ) {
-          if (event.oldState === State.ACTIVE) {
-            runWorklet(CALLBACK_TYPE.END, gesture, event, false);
-          }
-          runWorklet(CALLBACK_TYPE.FINALIZE, gesture, event, false);
-        }
-      } else if (isTouchEvent(event)) {
-        if (
-          !stateControllers[i] ||
-          stateControllers[i].handlerTag !== event.handlerTag
-        ) {
-          stateControllers[i] = GestureStateManager.create(event.handlerTag);
-        }
-
-        if (event.eventType !== TouchEventType.UNDETERMINED) {
-          runWorklet(
-            touchEventTypeToCallbackType(event.eventType),
-            gesture,
-            event,
-            stateControllers[i]
-          );
-        }
-      } else {
-        runWorklet(CALLBACK_TYPE.UPDATE, gesture, event);
-
-        if (gesture.onChange && gesture.changeEventCalculator) {
-          runWorklet(
-            CALLBACK_TYPE.CHANGE,
-            gesture,
-            gesture.changeEventCalculator?.(
-              event,
-              lastUpdateEvent.value[gesture.handlerTag]
-            )
-          );
-
-          lastUpdateEvent.value[gesture.handlerTag] = event;
-        }
-      }
-    }
-  };
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const event = Reanimated.useEvent(
-    callback,
-    ['onGestureHandlerStateChange', 'onGestureHandlerEvent'],
-    needsRebuild
-  );
-
-  preparedGesture.animatedEventHandler = event;
-  preparedGesture.animatedHandlers = sharedHandlersCallbacks;
-}

package/src/handlers/gestures/GestureDetector/useDetectorUpdater.ts

@@ -1,69 +0,0 @@
-import React, { useCallback } from 'react';
-import { GestureType } from '../gesture';
-import { ComposedGesture } from '../gestureComposition';
-
-import {
-  AttachedGestureState,
-  GestureDetectorState,
-  WebEventHandler,
-} from './types';
-import { attachHandlers } from './attachHandlers';
-import { updateHandlers } from './updateHandlers';
-import { needsToReattach } from './needsToReattach';
-import { dropHandlers } from './dropHandlers';
-import { useForceRender, validateDetectorChildren } from './utils';
-import findNodeHandle from '../../../findNodeHandle';
-
-// Returns a function that's responsible for updating the attached gestures
-// If the view has changed, it will reattach the handlers to the new view
-// If the view remains the same, it will update the handlers with the new config
-export function useDetectorUpdater(
-  state: GestureDetectorState,
-  preparedGesture: AttachedGestureState,
-  gesturesToAttach: GestureType[],
-  gestureConfig: ComposedGesture | GestureType,
-  webEventHandlersRef: React.RefObject<WebEventHandler>
-) {
-  const forceRender = useForceRender();
-  const updateAttachedGestures = useCallback(
-    // skipConfigUpdate is used to prevent unnecessary updates when only checking if the view has changed
-    (skipConfigUpdate?: boolean) => {
-      // If the underlying view has changed we need to reattach handlers to the new view
-      const viewTag = findNodeHandle(state.viewRef) as number;
-      const didUnderlyingViewChange = viewTag !== state.previousViewTag;
-
-      if (
-        didUnderlyingViewChange ||
-        needsToReattach(preparedGesture, gesturesToAttach)
-      ) {
-        validateDetectorChildren(state.viewRef);
-        dropHandlers(preparedGesture);
-        attachHandlers({
-          preparedGesture,
-          gestureConfig,
-          gesturesToAttach,
-          webEventHandlersRef,
-          viewTag,
-        });
-
-        if (didUnderlyingViewChange) {
-          state.previousViewTag = viewTag;
-          state.forceRebuildReanimatedEvent = true;
-          forceRender();
-        }
-      } else if (!skipConfigUpdate) {
-        updateHandlers(preparedGesture, gestureConfig, gesturesToAttach);
-      }
-    },
-    [
-      forceRender,
-      gestureConfig,
-      gesturesToAttach,
-      preparedGesture,
-      state,
-      webEventHandlersRef,
-    ]
-  );
-
-  return updateAttachedGestures;
-}

package/src/handlers/gestures/GestureDetector/useMountReactions.ts

@@ -1,51 +0,0 @@
-import { transformIntoHandlerTags } from '../../utils';
-import { MountRegistry } from '../../../mountRegistry';
-import { AttachedGestureState } from './types';
-import { useEffect } from 'react';
-import { GestureRef } from '../gesture';
-
-function shouldUpdateDetector(
-  relation: GestureRef[] | undefined,
-  gesture: { handlerTag: number }
-) {
-  if (relation === undefined) {
-    return false;
-  }
-
-  for (const tag of transformIntoHandlerTags(relation)) {
-    if (tag === gesture.handlerTag) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-export function useMountReactions(
-  updateDetector: () => void,
-  state: AttachedGestureState
-) {
-  useEffect(() => {
-    return MountRegistry.addMountListener((gesture) => {
-      // At this point the ref in the gesture config should be updated, so we can check if one of the gestures
-      // set in a relation with the gesture got mounted. If so, we need to update the detector to propagate
-      // the changes to the native side.
-      for (const attachedGesture of state.attachedGestures) {
-        const blocksHandlers = attachedGesture.config.blocksHandlers;
-        const requireToFail = attachedGesture.config.requireToFail;
-        const simultaneousWith = attachedGesture.config.simultaneousWith;
-
-        if (
-          shouldUpdateDetector(blocksHandlers, gesture) ||
-          shouldUpdateDetector(requireToFail, gesture) ||
-          shouldUpdateDetector(simultaneousWith, gesture)
-        ) {
-          updateDetector();
-
-          // We can safely return here, if any other gestures should be updated, they will be by the above call
-          return;
-        }
-      }
-    });
-  }, [updateDetector, state]);
-}