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

package/src/handlers/gestureHandlerTypesCompat.ts

@@ -1,55 +1,41 @@
-import {
+import type {
   BaseButtonProps,
   BorderlessButtonProps,
   RawButtonProps,
   RectButtonProps,
-} from '../components/GestureButtons';
+} from '../components/GestureButtonsProps';
 import {
   GestureEvent,
   GestureEventPayload,
   HandlerStateChangeEvent,
   HandlerStateChangeEventPayload,
 } from './gestureHandlerCommon';
-import {
+import type { FlingGestureHandlerProps } from './FlingGestureHandler';
+import type {
   FlingGestureHandlerEventPayload,
-  FlingGestureHandlerProps,
-} from './FlingGestureHandler';
-import {
   ForceTouchGestureHandlerEventPayload,
-  ForceTouchGestureHandlerProps,
-} from './ForceTouchGestureHandler';
-import {
   LongPressGestureHandlerEventPayload,
-  LongPressGestureHandlerProps,
-} from './LongPressGestureHandler';
-import {
   PanGestureHandlerEventPayload,
-  PanGestureHandlerProps,
-} from './PanGestureHandler';
-import {
   PinchGestureHandlerEventPayload,
-  PinchGestureHandlerProps,
-} from './PinchGestureHandler';
-import {
   RotationGestureHandlerEventPayload,
-  RotationGestureHandlerProps,
-} from './RotationGestureHandler';
-import {
   TapGestureHandlerEventPayload,
-  TapGestureHandlerProps,
-} from './TapGestureHandler';
-import {
   NativeViewGestureHandlerPayload,
-  NativeViewGestureHandlerProps,
-} from './NativeViewGestureHandler';
+} from './GestureHandlerEventPayload';
+import type { ForceTouchGestureHandlerProps } from './ForceTouchGestureHandler';
+import type { LongPressGestureHandlerProps } from './LongPressGestureHandler';
+import type { PanGestureHandlerProps } from './PanGestureHandler';
+import type { PinchGestureHandlerProps } from './PinchGestureHandler';
+import type { RotationGestureHandlerProps } from './RotationGestureHandler';
+import type { TapGestureHandlerProps } from './TapGestureHandler';
+import type { NativeViewGestureHandlerProps } from './NativeViewGestureHandler';
 
-// events
+// Events
 export type GestureHandlerGestureEventNativeEvent = GestureEventPayload;
 export type GestureHandlerStateChangeNativeEvent =
   HandlerStateChangeEventPayload;
 export type GestureHandlerGestureEvent = GestureEvent;
 export type GestureHandlerStateChangeEvent = HandlerStateChangeEvent;
-// gesture handlers events
+// Gesture handlers events
 export type NativeViewGestureHandlerGestureEvent =
   GestureEvent<NativeViewGestureHandlerPayload>;
 export type NativeViewGestureHandlerStateChangeEvent =
@@ -60,8 +46,14 @@ export type TapGestureHandlerGestureEvent =
 export type TapGestureHandlerStateChangeEvent =
   HandlerStateChangeEvent<TapGestureHandlerEventPayload>;
 
+/**
+ * @deprecated ForceTouchGestureHandler is deprecated and will be removed in the future.
+ */
 export type ForceTouchGestureHandlerGestureEvent =
   GestureEvent<ForceTouchGestureHandlerEventPayload>;
+/**
+ * @deprecated ForceTouchGestureHandler is deprecated and will be removed in the future.
+ */
 export type ForceTouchGestureHandlerStateChangeEvent =
   HandlerStateChangeEvent<ForceTouchGestureHandlerEventPayload>;
 
@@ -90,7 +82,7 @@ export type FlingGestureHandlerGestureEvent =
 export type FlingGestureHandlerStateChangeEvent =
   HandlerStateChangeEvent<FlingGestureHandlerEventPayload>;
 
-// handlers properties
+// Handlers properties
 export type NativeViewGestureHandlerProperties = NativeViewGestureHandlerProps;
 export type TapGestureHandlerProperties = TapGestureHandlerProps;
 export type LongPressGestureHandlerProperties = LongPressGestureHandlerProps;
@@ -98,8 +90,11 @@ export type PanGestureHandlerProperties = PanGestureHandlerProps;
 export type PinchGestureHandlerProperties = PinchGestureHandlerProps;
 export type RotationGestureHandlerProperties = RotationGestureHandlerProps;
 export type FlingGestureHandlerProperties = FlingGestureHandlerProps;
+/**
+ * @deprecated ForceTouch gesture is deprecated and will be removed in the future.
+ */
 export type ForceTouchGestureHandlerProperties = ForceTouchGestureHandlerProps;
-// button props
+// Button props
 export type RawButtonProperties = RawButtonProps;
 export type BaseButtonProperties = BaseButtonProps;
 export type RectButtonProperties = RectButtonProps;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Reanimated } from '../reanimatedWrapper';
+import { tagMessage } from '../../../utils';
+
+export class Wrap extends React.Component<{
+  onGestureHandlerEvent?: unknown;
+  // Implicit `children` prop has been removed in @types/react^18.0.0
+  children?: React.ReactNode;
+}> {
+  render() {
+    try {
+      // I don't think that fighting with types over such a simple function is worth it
+      // The only thing it does is add 'collapsable: false' to the child component
+      // to make sure it is in the native view hierarchy so the detector can find
+      // correct viewTag to attach to.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const child: any = React.Children.only(this.props.children);
+      return React.cloneElement(
+        child,
+        { collapsable: false },
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        child.props.children
+      );
+    } catch (e) {
+      throw new Error(
+        tagMessage(
+          `GestureDetector got more than one view as a child. If you want the gesture to work on multiple views, wrap them with a common parent and attach the gesture to that view.`
+        )
+      );
+    }
+  }
+}
+
+export const AnimatedWrap =
+  Reanimated?.default?.createAnimatedComponent(Wrap) ?? Wrap;

package/src/handlers/gestures/GestureDetector/Wrap.web.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react';
+import type { LegacyRef, PropsWithChildren } from 'react';
+import { tagMessage } from '../../../utils';
+import { isRNSVGNode } from '../../../web/utils';
+
+export const Wrap = forwardRef<HTMLDivElement, PropsWithChildren<{}>>(
+  ({ children }, ref) => {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const child: any = React.Children.only(children);
+
+      if (isRNSVGNode(child)) {
+        const clone = React.cloneElement(
+          child,
+          { ref },
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          child.props.children
+        );
+
+        return clone;
+      }
+
+      return (
+        <div
+          ref={ref as LegacyRef<HTMLDivElement>}
+          style={{ display: 'contents' }}>
+          {child}
+        </div>
+      );
+    } catch (e) {
+      throw new Error(
+        tagMessage(
+          `GestureDetector got more than one view as a child. If you want the gesture to work on multiple views, wrap them with a common parent and attach the gesture to that view.`
+        )
+      );
+    }
+  }
+);
+
+// On web we never take a path with Reanimated,
+// therefore we can simply export Wrap
+export const AnimatedWrap = Wrap;

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import { GestureType, HandlerCallbacks } from '../gesture';
+import { registerHandler } from '../../handlersRegistry';
+import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
+import { filterConfig, scheduleFlushOperations } from '../../utils';
+import { ComposedGesture } from '../gestureComposition';
+import { ActionType } from '../../../ActionType';
+import { Platform } from 'react-native';
+import type RNGestureHandlerModuleWeb from '../../../RNGestureHandlerModule.web';
+import { ghQueueMicrotask } from '../../../ghQueueMicrotask';
+import { AttachedGestureState, WebEventHandler } from './types';
+import {
+  extractGestureRelations,
+  checkGestureCallbacksForWorklets,
+  ALLOWED_PROPS,
+} from './utils';
+import { MountRegistry } from '../../../mountRegistry';
+
+interface AttachHandlersConfig {
+  preparedGesture: AttachedGestureState;
+  gestureConfig: ComposedGesture | GestureType;
+  gesturesToAttach: GestureType[];
+  viewTag: number;
+  webEventHandlersRef: React.RefObject<WebEventHandler>;
+}
+
+export function attachHandlers({
+  preparedGesture,
+  gestureConfig,
+  gesturesToAttach,
+  viewTag,
+  webEventHandlersRef,
+}: AttachHandlersConfig) {
+  gestureConfig.initialize();
+
+  // Use queueMicrotask to extract handlerTags, because all refs should be initialized
+  // when it's ran
+  ghQueueMicrotask(() => {
+    if (!preparedGesture.isMounted) {
+      return;
+    }
+    gestureConfig.prepare();
+  });
+
+  for (const handler of gesturesToAttach) {
+    checkGestureCallbacksForWorklets(handler);
+    RNGestureHandlerModule.createGestureHandler(
+      handler.handlerName,
+      handler.handlerTag,
+      filterConfig(handler.config, ALLOWED_PROPS)
+    );
+
+    registerHandler(handler.handlerTag, handler, handler.config.testId);
+  }
+
+  // Use queueMicrotask to extract handlerTags, because all refs should be initialized
+  // when it's ran
+  ghQueueMicrotask(() => {
+    if (!preparedGesture.isMounted) {
+      return;
+    }
+    for (const handler of gesturesToAttach) {
+      RNGestureHandlerModule.updateGestureHandler(
+        handler.handlerTag,
+        filterConfig(
+          handler.config,
+          ALLOWED_PROPS,
+          extractGestureRelations(handler)
+        )
+      );
+    }
+
+    scheduleFlushOperations();
+  });
+
+  for (const gesture of gesturesToAttach) {
+    const actionType = gesture.shouldUseReanimated
+      ? ActionType.REANIMATED_WORKLET
+      : ActionType.JS_FUNCTION_NEW_API;
+
+    if (Platform.OS === 'web') {
+      (
+        RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler
+      )(
+        gesture.handlerTag,
+        viewTag,
+        ActionType.JS_FUNCTION_OLD_API, // Ignored on web
+        webEventHandlersRef
+      );
+    } else {
+      RNGestureHandlerModule.attachGestureHandler(
+        gesture.handlerTag,
+        viewTag,
+        actionType
+      );
+    }
+
+    MountRegistry.gestureWillMount(gesture);
+  }
+
+  preparedGesture.attachedGestures = gesturesToAttach;
+
+  if (preparedGesture.animatedHandlers) {
+    const isAnimatedGesture = (g: GestureType) => g.shouldUseReanimated;
+
+    preparedGesture.animatedHandlers.value = gesturesToAttach
+      .filter(isAnimatedGesture)
+      .map((g) => g.handlers) as unknown as HandlerCallbacks<
+      Record<string, unknown>
+    >[];
+  }
+}

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

@@ -0,0 +1,17 @@
+import { unregisterHandler } from '../../handlersRegistry';
+import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
+import { scheduleFlushOperations } from '../../utils';
+import { AttachedGestureState } from './types';
+import { MountRegistry } from '../../../mountRegistry';
+
+export function dropHandlers(preparedGesture: AttachedGestureState) {
+  for (const handler of preparedGesture.attachedGestures) {
+    RNGestureHandlerModule.dropGestureHandler(handler.handlerTag);
+
+    unregisterHandler(handler.handlerTag, handler.config.testId);
+
+    MountRegistry.gestureWillUnmount(handler);
+  }
+
+  scheduleFlushOperations();
+}

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

@@ -0,0 +1,191 @@
+/* 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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,92 @@
+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();
+  });
+}