react-native-gesture-handler 2.9.0 → 2.10.0

package/lib/typescript/web/handlers/ManualGestureHandler.d.ts

@@ -9,5 +9,4 @@ export default class ManualGestureHandler extends GestureHandler {
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
     protected onPointerUp(event: AdaptedEvent): void;
     protected onPointerRemove(event: AdaptedEvent): void;
-    protected onPointerCancel(event: AdaptedEvent): void;
 }

package/lib/typescript/web/handlers/NativeViewGestureHandler.d.ts

@@ -18,7 +18,6 @@ export default class NativeViewGestureHandler extends GestureHandler {
     protected onPointerUp(event: AdaptedEvent): void;
     protected onPointerRemove(event: AdaptedEvent): void;
     private onUp;
-    protected onPointerCancel(event: AdaptedEvent): void;
     shouldRecognizeSimultaneously(handler: GestureHandler): boolean;
     shouldBeCancelledByOther(_handler: GestureHandler): boolean;
     disallowsInterruption(): boolean;

package/lib/typescript/web/handlers/PanGestureHandler.d.ts

@@ -47,7 +47,6 @@ export default class PanGestureHandler extends GestureHandler {
     protected onPointerUp(event: AdaptedEvent): void;
     protected onPointerRemove(event: AdaptedEvent): void;
     protected onPointerMove(event: AdaptedEvent): void;
-    protected onPointerCancel(event: AdaptedEvent): void;
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
     private shouldActivate;
     private shouldFail;

package/lib/typescript/web/handlers/PinchGestureHandler.d.ts

@@ -21,7 +21,6 @@ export default class PinchGestureHandler extends GestureHandler {
     protected onPointerRemove(event: AdaptedEvent): void;
     protected onPointerMove(event: AdaptedEvent): void;
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
-    protected onPointerCancel(event: AdaptedEvent): void;
     private tryBegin;
     activate(force?: boolean): void;
     protected onReset(): void;

package/lib/typescript/web/handlers/RotationGestureHandler.d.ts

@@ -23,7 +23,6 @@ export default class RotationGestureHandler extends GestureHandler {
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
     protected onPointerUp(event: AdaptedEvent): void;
     protected onPointerRemove(event: AdaptedEvent): void;
-    protected onPointerCancel(event: AdaptedEvent): void;
     protected tryBegin(): void;
     activate(_force?: boolean): void;
     protected onReset(): void;

package/lib/typescript/web/handlers/TapGestureHandler.d.ts

@@ -36,7 +36,6 @@ export default class TapGestureHandler extends GestureHandler {
     protected onPointerRemove(event: AdaptedEvent): void;
     protected onPointerMove(event: AdaptedEvent): void;
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
-    protected onPointerCancel(event: AdaptedEvent): void;
     private updateState;
     private trySettingPosition;
     private shouldFail;

package/lib/typescript/web/tools/CircularBuffer.d.ts

@@ -0,0 +1,11 @@
+export default class CircularBuffer<T> {
+    private bufferSize;
+    private buffer;
+    private index;
+    private actualSize;
+    constructor(size: number);
+    get size(): number;
+    push(element: T): void;
+    get(at: number): T;
+    clear(): void;
+}

package/lib/typescript/web/tools/LeastSquareSolver.d.ts

@@ -0,0 +1,12 @@
+declare class PolynomialFit {
+    coefficients: number[];
+    constructor(degree: number);
+}
+export default class LeastSquareSolver {
+    private x;
+    private y;
+    private w;
+    constructor(x: number[], y: number[], w: number[]);
+    solve(degree: number): PolynomialFit | null;
+}
+export {};

package/lib/typescript/web/tools/PointerEventManager.d.ts

@@ -1,6 +1,8 @@
 import { AdaptedEvent, EventTypes } from '../interfaces';
 import EventManager from './EventManager';
 export default class PointerEventManager extends EventManager {
+    private trackedPointers;
     setListeners(): void;
     protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent;
+    resetManager(): void;
 }

package/lib/typescript/web/tools/PointerTracker.d.ts

@@ -7,6 +7,7 @@ export interface TrackerElement {
     velocityY: number;
 }
 export default class PointerTracker {
+    private velocityTracker;
     private trackedPointers;
     private touchEventsIds;
     private lastMovedPointerId;

package/lib/typescript/web/tools/VelocityTracker.d.ts

@@ -0,0 +1,13 @@
+import { AdaptedEvent } from '../interfaces';
+export default class VelocityTracker {
+    private assumePointerMoveStoppedMilliseconds;
+    private historySize;
+    private horizonMilliseconds;
+    private minSampleSize;
+    private samples;
+    constructor();
+    add(event: AdaptedEvent): void;
+    private getVelocityEstimate;
+    getVelocity(): [number, number];
+    reset(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build && husky install",
@@ -142,11 +142,11 @@
   "eslintIgnore": [
     "node_modules/",
     "lib/",
-    "src/fabric/*NativeComponent.js"
+    "src/specs/*NativeComponent.js"
   ],
   "codegenConfig": {
     "name": "rngesturehandler_codegen",
     "type": "components",
-    "jsSrcsDir": "./src/fabric"
+    "jsSrcsDir": "./src/specs"
   }
 }

package/src/EnableNewWebImplementation.ts

@@ -0,0 +1,35 @@
+import { Platform } from 'react-native';
+
+let useNewWebImplementation = true;
+let getWasCalled = false;
+
+export function enableExperimentalWebImplementation(
+  _shouldEnable = true
+): void {
+  // NO-OP since the new implementation is now the default
+}
+
+export function enableLegacyWebImplementation(
+  shouldUseLegacyImplementation = true
+): void {
+  if (
+    Platform.OS !== 'web' ||
+    useNewWebImplementation === !shouldUseLegacyImplementation
+  ) {
+    return;
+  }
+
+  if (getWasCalled) {
+    console.error(
+      'Some parts of this application have already started using the new gesture handler implementation. No changes will be applied. You can try enabling legacy implementation earlier.'
+    );
+    return;
+  }
+
+  useNewWebImplementation = !shouldUseLegacyImplementation;
+}
+
+export function isNewWebImplementationEnabled(): boolean {
+  getWasCalled = true;
+  return useNewWebImplementation;
+}

package/src/GestureHandlerRootViewContext.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default React.createContext(false);

package/src/RNGestureHandlerModule.macos.ts

@@ -1,5 +1,5 @@
 import { ActionType } from './ActionType';
-import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
+import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
 
 //GestureHandlers
 import InteractionManager from './web/tools/InteractionManager';
@@ -57,7 +57,7 @@ export default {
     handlerTag: number,
     config: T
   ) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       if (!(handlerName in Gestures)) {
         throw new Error(
           `react-native-gesture-handler: ${handlerName} is not supported on web.`
@@ -92,14 +92,14 @@ export default {
     _actionType: ActionType,
     propsRef: React.RefObject<unknown>
   ) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.getHandler(handlerTag).init(newView, propsRef);
     } else {
       HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
     }
   },
   updateGestureHandler(handlerTag: number, newConfig: Config) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
 
       InteractionManager.getInstance().configureInteractions(
@@ -111,14 +111,14 @@ export default {
     }
   },
   getGestureHandlerNode(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       return NodeManager.getHandler(handlerTag);
     } else {
       return HammerNodeManager.getHandler(handlerTag);
     }
   },
   dropGestureHandler(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.dropGestureHandler(handlerTag);
     } else {
       HammerNodeManager.dropGestureHandler(handlerTag);

package/src/RNGestureHandlerModule.web.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ActionType } from './ActionType';
-import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
+import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
 
 //GestureHandlers
 import InteractionManager from './web/tools/InteractionManager';
@@ -59,7 +59,7 @@ export default {
     handlerTag: number,
     config: T
   ) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       if (!(handlerName in Gestures)) {
         throw new Error(
           `react-native-gesture-handler: ${handlerName} is not supported on web.`
@@ -101,7 +101,7 @@ export default {
       return;
     }
 
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       //@ts-ignore Types should be HTMLElement or React.Component
       NodeManager.getHandler(handlerTag).init(newView, propsRef);
     } else {
@@ -110,7 +110,7 @@ export default {
     }
   },
   updateGestureHandler(handlerTag: number, newConfig: Config) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
 
       InteractionManager.getInstance().configureInteractions(
@@ -122,14 +122,14 @@ export default {
     }
   },
   getGestureHandlerNode(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       return NodeManager.getHandler(handlerTag);
     } else {
       return HammerNodeManager.getHandler(handlerTag);
     }
   },
   dropGestureHandler(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.dropGestureHandler(handlerTag);
     } else {
       HammerNodeManager.dropGestureHandler(handlerTag);

package/src/RNGestureHandlerModule.windows.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ActionType } from './ActionType';
-import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
+import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
 
 //GestureHandlers
 import InteractionManager from './web/tools/InteractionManager';
@@ -59,7 +59,7 @@ export default {
     handlerTag: number,
     config: T
   ) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       if (!(handlerName in Gestures)) {
         throw new Error(
           `react-native-gesture-handler: ${handlerName} is not supported on web.`
@@ -101,7 +101,7 @@ export default {
       return;
     }
 
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       //@ts-ignore Types should be HTMLElement or React.Component
       NodeManager.getHandler(handlerTag).init(newView, propsRef);
     } else {
@@ -110,7 +110,7 @@ export default {
     }
   },
   updateGestureHandler(handlerTag: number, newConfig: Config) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
 
       InteractionManager.getInstance().configureInteractions(
@@ -122,14 +122,14 @@ export default {
     }
   },
   getGestureHandlerNode(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       return NodeManager.getHandler(handlerTag);
     } else {
       return HammerNodeManager.getHandler(handlerTag);
     }
   },
   dropGestureHandler(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.dropGestureHandler(handlerTag);
     } else {
       HammerNodeManager.dropGestureHandler(handlerTag);

package/src/components/GestureComponents.web.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  DrawerLayoutAndroid as RNDrawerLayoutAndroid,
   FlatList as RNFlatList,
   Switch as RNSwitch,
   TextInput as RNTextInput,
@@ -21,11 +20,11 @@ export const Switch = createNativeWrapper(RNSwitch, {
   disallowInterruption: true,
 });
 export const TextInput = createNativeWrapper(RNTextInput);
-export const DrawerLayoutAndroid = createNativeWrapper(RNDrawerLayoutAndroid, {
-  disallowInterruption: true,
-});
-// @ts-ignore -- TODO(TS) to investigate if it's needed
-DrawerLayoutAndroid.positions = RNDrawerLayoutAndroid.positions;
+export const DrawerLayoutAndroid = () => {
+  console.warn('DrawerLayoutAndroid is not supported on web!');
+  return <View />;
+};
+
 // RefreshControl is implemented as a functional component, rendering a View
 // NativeViewGestureHandler needs to set a ref on its child, which cannot be done
 // on functional components

package/src/components/GestureHandlerButton.tsx

@@ -1,10 +1,5 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import { HostComponent, requireNativeComponent } from 'react-native';
+import { HostComponent } from 'react-native';
 import { RawButtonProps } from './GestureButtons';
-import { shouldUseCodegenNativeComponent } from '../utils';
-
-const RNGestureHandlerButtonNativeComponent = shouldUseCodegenNativeComponent()
-  ? require('../fabric/RNGestureHandlerButtonNativeComponent').default
-  : requireNativeComponent('RNGestureHandlerButton');
+import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
 
 export default RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;

package/src/components/GestureHandlerRootView.android.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+import { maybeInitializeFabric } from '../init';
+import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
+import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';
+
+export interface GestureHandlerRootViewProps
+  extends PropsWithChildren<ViewProps> {}
+
+export default function GestureHandlerRootView(
+  props: GestureHandlerRootViewProps
+) {
+  // try initialize fabric on the first render, at this point we can
+  // reliably check if fabric is enabled (the function contains a flag
+  // to make sure it's called only once)
+  maybeInitializeFabric();
+
+  return (
+    <GestureHandlerRootViewContext.Provider value>
+      <GestureHandlerRootViewNativeComponent {...props} />
+    </GestureHandlerRootViewContext.Provider>
+  );
+}

package/src/{GestureHandlerRootView.tsx → components/GestureHandlerRootView.tsx}

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';
-import { maybeInitializeFabric } from './init';
+import { maybeInitializeFabric } from '../init';
+import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
@@ -14,5 +15,9 @@ export default function GestureHandlerRootView(
   // to make sure it's called only once)
   maybeInitializeFabric();
 
-  return <View {...props} />;
+  return (
+    <GestureHandlerRootViewContext.Provider value>
+      <View {...props} />
+    </GestureHandlerRootViewContext.Provider>
+  );
 }

package/src/{GestureHandlerRootView.web.tsx → components/GestureHandlerRootView.web.tsx}

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';
+import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
@@ -8,5 +9,9 @@ export interface GestureHandlerRootViewProps
 export default function GestureHandlerRootView(
   props: GestureHandlerRootViewProps
 ) {
-  return <View {...props} />;
+  return (
+    <GestureHandlerRootViewContext.Provider value>
+      <View {...props} />
+    </GestureHandlerRootViewContext.Provider>
+  );
 }

package/src/components/Swipeable.tsx

@@ -73,6 +73,18 @@ export interface SwipeableProps
    */
   rightThreshold?: number;
 
+  /**
+   * Distance that the panel must be dragged from the left edge to be considered
+   * a swipe. The default value is 10.
+   */
+  dragOffsetFromLeftEdge?: number;
+
+  /**
+   * Distance that the panel must be dragged from the right edge to be considered
+   * a swipe. The default value is 10.
+   */
+  dragOffsetFromRightEdge?: number;
+
   /**
    * Value indicating if the swipeable panel can be pulled further than the left
    * actions panel's width. It is set to true by default as long as the left
@@ -156,7 +168,8 @@ export interface SwipeableProps
    * */
   renderLeftActions?: (
     progressAnimatedValue: AnimatedInterpolation,
-    dragAnimatedValue: AnimatedInterpolation
+    dragAnimatedValue: AnimatedInterpolation,
+    swipeable: Swipeable
   ) => React.ReactNode;
   /**
    *
@@ -442,9 +455,22 @@ export default class Swipeable extends Component<
     this.animateRow(this.currentOffset(), -rightWidth);
   };
 
+  reset = () => {
+    const { dragX, rowTranslation } = this.state;
+    dragX.setValue(0);
+    rowTranslation.setValue(0);
+    this.setState({ rowState: 0 });
+  };
+
   render() {
     const { rowState } = this.state;
-    const { children, renderLeftActions, renderRightActions } = this.props;
+    const {
+      children,
+      renderLeftActions,
+      renderRightActions,
+      dragOffsetFromLeftEdge = 10,
+      dragOffsetFromRightEdge = 10,
+    } = this.props;
 
     const left = renderLeftActions && (
       <Animated.View
@@ -455,7 +481,7 @@ export default class Swipeable extends Component<
           // it for some reason
           { transform: [{ translateX: this.leftActionTranslate! }] },
         ]}>
-        {renderLeftActions(this.showLeftAction!, this.transX!)}
+        {renderLeftActions(this.showLeftAction!, this.transX!, this)}
         <View
           onLayout={({ nativeEvent }) =>
             this.setState({ leftWidth: nativeEvent.layout.x })
@@ -481,7 +507,7 @@ export default class Swipeable extends Component<
 
     return (
       <PanGestureHandler
-        activeOffsetX={[-10, 10]}
+        activeOffsetX={[-dragOffsetFromRightEdge, dragOffsetFromLeftEdge]}
         {...this.props}
         onGestureEvent={this.onGestureEvent}
         onHandlerStateChange={this.onHandlerStateChange}>

package/src/{gestureHandlerRootHOC.tsx → components/gestureHandlerRootHOC.tsx}

@@ -4,7 +4,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 import GestureHandlerRootView from './GestureHandlerRootView';
 
 export default function gestureHandlerRootHOC<
-  P extends JSX.IntrinsicAttributes
+  P extends Record<string, unknown>
 >(
   Component: React.ComponentType<P>,
   containerStyles?: StyleProp<ViewStyle>

package/src/handlers/createHandler.tsx

@@ -28,6 +28,7 @@ import { ValueOf } from '../typeUtils';
 import { isFabric, isJestEnv, tagMessage } from '../utils';
 import { ActionType } from '../ActionType';
 import { PressabilityDebugView } from './PressabilityDebugView';
+import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 const UIManagerAny = UIManager as any;
 
@@ -168,13 +169,14 @@ export default function createHandler<
     HandlerState
   > {
     static displayName = name;
+    static contextType = GestureHandlerRootViewContext;
 
     private handlerTag: number;
     private config: Record<string, unknown>;
     private propsRef: React.MutableRefObject<unknown>;
+    private isMountedRef: React.MutableRefObject<boolean | null>;
     private viewNode: any;
     private viewTag?: number;
-    private updateEnqueued: ReturnType<typeof setImmediate> | null = null;
     private inspectorToggleListener?: EmitterSubscription;
 
     constructor(props: T & InternalEventHandlers) {
@@ -182,6 +184,7 @@ export default function createHandler<
       this.handlerTag = getNextHandlerTag();
       this.config = {};
       this.propsRef = React.createRef();
+      this.isMountedRef = React.createRef();
       this.state = { allowTouches };
       if (props.id) {
         if (handlerIDToTag[props.id] !== undefined) {
@@ -193,6 +196,7 @@ export default function createHandler<
 
     componentDidMount() {
       const props: HandlerProps<U> = this.props;
+      this.isMountedRef.current = true;
 
       if (DEV_ON_ANDROID) {
         this.inspectorToggleListener = DeviceEventEmitter.addListener(
@@ -207,11 +211,10 @@ export default function createHandler<
         // If there are unresolved refs (e.g. ".current" has not yet been set)
         // passed as `simultaneousHandlers` or `waitFor`, we enqueue a call to
         // _update method that will try to update native handler props using
-        // setImmediate. This makes it so update() function gets called after all
+        // 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.
-        this.updateEnqueued = setImmediate(() => {
-          this.updateEnqueued = null;
+        queueMicrotask(() => {
           this.update(UNRESOLVED_REFS_RETRY_LIMIT);
         });
       }
@@ -237,11 +240,9 @@ export default function createHandler<
 
     componentWillUnmount() {
       this.inspectorToggleListener?.remove();
+      this.isMountedRef.current = false;
       RNGestureHandlerModule.dropGestureHandler(this.handlerTag);
       scheduleFlushOperations();
-      if (this.updateEnqueued) {
-        clearImmediate(this.updateEnqueued);
-      }
       // 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
       const handlerID: string | undefined = this.props.id;
       if (handlerID) {
@@ -365,14 +366,17 @@ export default function createHandler<
     };
 
     private update(remainingTries: number) {
+      if (!this.isMountedRef.current) {
+        return;
+      }
+
       const props: HandlerProps<U> = this.props;
 
       // When ref is set via a function i.e. `ref={(r) => refObject.current = r}` instead of
       // `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) {
-        this.updateEnqueued = setImmediate(() => {
-          this.updateEnqueued = null;
+        queueMicrotask(() => {
           this.update(remainingTries - 1);
         });
       } else {
@@ -398,6 +402,13 @@ export default function createHandler<
     }
 
     render() {
+      if (__DEV__ && !this.context) {
+        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.'
+        );
+      }
+
       let gestureEventHandler = this.onGestureHandlerEvent;
       // Another instance of https://github.com/microsoft/TypeScript/issues/13995
       type OnGestureEventHandlers = {

package/src/handlers/gestureHandlerCommon.ts

@@ -191,16 +191,15 @@ export function findNodeHandle(
   return findNodeHandleRN(node);
 }
 
-let scheduledFlushOperationsId: ReturnType<
-  typeof requestAnimationFrame
-> | null = null;
+let flushOperationsScheduled = false;
 
 export function scheduleFlushOperations() {
-  if (scheduledFlushOperationsId === null) {
-    scheduledFlushOperationsId = requestAnimationFrame(() => {
+  if (!flushOperationsScheduled) {
+    flushOperationsScheduled = true;
+    queueMicrotask(() => {
       RNGestureHandlerModule.flushOperations();
 
-      scheduledFlushOperationsId = null;
+      flushOperationsScheduled = false;
     });
   }
 }