react-native-gesture-handler 2.8.0 → 2.10.0

package/src/components/Swipeable.tsx

@@ -36,6 +36,11 @@ type SwipeableExcludes = Exclude<
   'onGestureEvent' | 'onHandlerStateChange'
 >;
 
+// Animated.AnimatedInterpolation has been converted to a generic type
+// in @types/react-native 0.70. This way we can maintain compatibility
+// with all versions of @types/react-native
+type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
+
 export interface SwipeableProps
   extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
   /**
@@ -68,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
@@ -150,8 +167,9 @@ export interface SwipeableProps
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
   renderLeftActions?: (
-    progressAnimatedValue: Animated.AnimatedInterpolation,
-    dragAnimatedValue: Animated.AnimatedInterpolation
+    progressAnimatedValue: AnimatedInterpolation,
+    dragAnimatedValue: AnimatedInterpolation,
+    swipeable: Swipeable
   ) => React.ReactNode;
   /**
    *
@@ -163,8 +181,8 @@ export interface SwipeableProps
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
   renderRightActions?: (
-    progressAnimatedValue: Animated.AnimatedInterpolation,
-    dragAnimatedValue: Animated.AnimatedInterpolation,
+    progressAnimatedValue: AnimatedInterpolation,
+    dragAnimatedValue: AnimatedInterpolation,
     swipeable: Swipeable
   ) => React.ReactNode;
 
@@ -242,11 +260,11 @@ export default class Swipeable extends Component<
   private onGestureEvent?: (
     event: GestureEvent<PanGestureHandlerEventPayload>
   ) => void;
-  private transX?: Animated.AnimatedInterpolation;
-  private showLeftAction?: Animated.AnimatedInterpolation | Animated.Value;
-  private leftActionTranslate?: Animated.AnimatedInterpolation;
-  private showRightAction?: Animated.AnimatedInterpolation | Animated.Value;
-  private rightActionTranslate?: Animated.AnimatedInterpolation;
+  private transX?: AnimatedInterpolation;
+  private showLeftAction?: AnimatedInterpolation | Animated.Value;
+  private leftActionTranslate?: AnimatedInterpolation;
+  private showRightAction?: AnimatedInterpolation | Animated.Value;
+  private rightActionTranslate?: AnimatedInterpolation;
 
   private updateAnimatedEvent = (
     props: SwipeableProps,
@@ -437,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
@@ -450,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 })
@@ -476,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}

@@ -3,7 +3,9 @@ import { StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import GestureHandlerRootView from './GestureHandlerRootView';
 
-export default function gestureHandlerRootHOC<P>(
+export default function gestureHandlerRootHOC<
+  P extends Record<string, unknown>
+>(
   Component: React.ComponentType<P>,
   containerStyles?: StyleProp<ViewStyle>
 ): React.ComponentType<P> {
@@ -19,6 +21,7 @@ export default function gestureHandlerRootHOC<P>(
     Component.displayName || Component.name
   })`;
 
+  // @ts-ignore - hoistNonReactStatics uses old version of @types/react
   hoistNonReactStatics(Wrapper, Component);
 
   return Wrapper;

package/src/handlers/LongPressGestureHandler.ts

@@ -82,5 +82,7 @@ export const LongPressGestureHandler = createHandler<
     ...baseGestureHandlerProps,
     ...longPressGestureHandlerProps,
   ] as const,
-  config: {},
+  config: {
+    shouldCancelWhenOutside: true,
+  },
 });

package/src/handlers/TapGestureHandler.ts

@@ -88,5 +88,7 @@ export const TapGestureHandler = createHandler<
     ...baseGestureHandlerProps,
     ...tapGestureHandlerProps,
   ] as const,
-  config: {},
+  config: {
+    shouldCancelWhenOutside: true,
+  },
 });

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;
     });
   }
 }

package/src/handlers/gestures/GestureDetector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, RefObject } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   GestureType,
   HandlerCallbacks,
@@ -42,7 +42,9 @@ import { Platform } from 'react-native';
 import type RNGestureHandlerModuleWeb from '../../RNGestureHandlerModule.web';
 import { onGestureHandlerEvent } from './eventReceiver';
 import { RNRenderer } from '../../RNRenderer';
-import { isExperimentalWebImplementationEnabled } from '../../EnableExperimentalWebImplementation';
+import { isNewWebImplementationEnabled } from '../../EnableNewWebImplementation';
+import { nativeViewGestureHandlerProps } from '../NativeViewGestureHandler';
+import GestureHandlerRootViewContext from '../../GestureHandlerRootViewContext';
 
 declare const global: {
   isFormsStackingContext: (node: unknown) => boolean | null; // JSI function
@@ -56,6 +58,7 @@ const ALLOWED_PROPS = [
   ...longPressGestureHandlerProps,
   ...forceTouchGestureHandlerProps,
   ...flingGestureHandlerProps,
+  ...nativeViewGestureHandlerProps,
 ];
 
 export type GestureConfigReference = {
@@ -130,6 +133,7 @@ interface AttachHandlersConfig {
   gesture: GestureType[];
   viewTag: number;
   webEventHandlersRef: React.RefObject<WebEventHandler>;
+  mountedRef: React.RefObject<boolean>;
 }
 
 function attachHandlers({
@@ -138,6 +142,7 @@ function attachHandlers({
   gesture,
   viewTag,
   webEventHandlersRef,
+  mountedRef,
 }: AttachHandlersConfig) {
   if (!preparedGesture.firstExecution) {
     gestureConfig.initialize();
@@ -145,9 +150,12 @@ function attachHandlers({
     preparedGesture.firstExecution = false;
   }
 
-  // use setImmediate to extract handlerTags, because all refs should be initialized
+  // use queueMicrotask to extract handlerTags, because all refs should be initialized
   // when it's ran
-  setImmediate(() => {
+  queueMicrotask(() => {
+    if (!mountedRef.current) {
+      return;
+    }
     gestureConfig.prepare();
   });
 
@@ -162,9 +170,12 @@ function attachHandlers({
     registerHandler(handler.handlerTag, handler, handler.config.testId);
   }
 
-  // use setImmediate to extract handlerTags, because all refs should be initialized
+  // use queueMicrotask to extract handlerTags, because all refs should be initialized
   // when it's ran
-  setImmediate(() => {
+  queueMicrotask(() => {
+    if (!mountedRef.current) {
+      return;
+    }
     for (const handler of gesture) {
       let requireToFail: number[] = [];
       if (handler.config.requireToFail) {
@@ -230,7 +241,7 @@ function updateHandlers(
   preparedGesture: GestureConfigReference,
   gestureConfig: ComposedGesture | GestureType,
   gesture: GestureType[],
-  mountedRef: RefObject<boolean>
+  mountedRef: React.RefObject<boolean>
 ) {
   gestureConfig.prepare();
 
@@ -246,10 +257,10 @@ function updateHandlers(
     }
   }
 
-  // use setImmediate to extract handlerTags, because when it's ran, all refs should be updated
+  // 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)
-  setImmediate(() => {
+  queueMicrotask(() => {
     if (!mountedRef.current) {
       return;
     }
@@ -588,7 +599,20 @@ interface GestureDetectorProps {
   userSelect?: UserSelect;
   children?: React.ReactNode;
 }
+interface GestureDetectorState {
+  firstRender: boolean;
+  viewRef: React.Component | null;
+  previousViewTag: number;
+  forceReattach: boolean;
+}
 export const GestureDetector = (props: GestureDetectorProps) => {
+  const rootViewContext = useContext(GestureHandlerRootViewContext);
+  if (__DEV__ && !rootViewContext) {
+    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/installation for more details.'
+    );
+  }
+
   const gestureConfig = props.gesture;
 
   if (props.userSelect) {
@@ -597,20 +621,31 @@ export const GestureDetector = (props: GestureDetectorProps) => {
 
   const gesture = gestureConfig.toGestureArray();
   const useReanimatedHook = gesture.some((g) => g.shouldUseReanimated);
-  const viewRef = useRef(null);
-  const firstRenderRef = useRef(true);
+
+  // store state in ref to prevent unnecessary renders
+  const state = useRef<GestureDetectorState>({
+    firstRender: true,
+    viewRef: null,
+    previousViewTag: -1,
+    forceReattach: false,
+  }).current;
   const mountedRef = useRef(false);
   const webEventHandlersRef = useRef<WebEventHandler>({
     onGestureHandlerEvent: (e: HandlerStateChangeEvent<unknown>) => {
       onGestureHandlerEvent(e.nativeEvent);
     },
-    onGestureHandlerStateChange: isExperimentalWebImplementationEnabled()
+    onGestureHandlerStateChange: isNewWebImplementationEnabled()
       ? (e: HandlerStateChangeEvent<unknown>) => {
           onGestureHandlerEvent(e.nativeEvent);
         }
       : undefined,
   });
 
+  const [renderState, setRenderState] = useState(false);
+  function forceRender() {
+    setRenderState(!renderState);
+  }
+
   const preparedGesture = React.useRef<GestureConfigReference>({
     config: gesture,
     animatedEventHandler: null,
@@ -627,10 +662,41 @@ export const GestureDetector = (props: GestureDetectorProps) => {
     );
   }
 
+  function onHandlersUpdate(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 forceReattach = viewTag !== state.previousViewTag;
+
+    if (forceReattach || needsToReattach(preparedGesture, gesture)) {
+      validateDetectorChildren(state.viewRef);
+      dropHandlers(preparedGesture);
+      attachHandlers({
+        preparedGesture,
+        gestureConfig,
+        gesture,
+        webEventHandlersRef,
+        viewTag,
+        mountedRef,
+      });
+
+      state.previousViewTag = viewTag;
+      state.forceReattach = forceReattach;
+      if (forceReattach) {
+        forceRender();
+      }
+    } else if (!skipConfigUpdate) {
+      updateHandlers(preparedGesture, gestureConfig, gesture, mountedRef);
+    }
+  }
+
   // 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 =
-    preparedGesture.firstExecution || needsToReattach(preparedGesture, gesture);
+    preparedGesture.firstExecution ||
+    needsToReattach(preparedGesture, gesture) ||
+    state.forceReattach;
+
+  state.forceReattach = false;
 
   if (preparedGesture.firstExecution) {
     gestureConfig.initialize();
@@ -643,17 +709,19 @@ export const GestureDetector = (props: GestureDetectorProps) => {
   }
 
   useEffect(() => {
-    firstRenderRef.current = true;
+    const viewTag = findNodeHandle(state.viewRef) as number;
+    state.firstRender = true;
     mountedRef.current = true;
-    const viewTag = findNodeHandle(viewRef.current) as number;
 
-    validateDetectorChildren(viewRef.current);
+    validateDetectorChildren(state.viewRef);
+
     attachHandlers({
       preparedGesture,
       gestureConfig,
       gesture,
-      viewTag,
       webEventHandlersRef,
+      viewTag,
+      mountedRef,
     });
 
     return () => {
@@ -663,31 +731,26 @@ export const GestureDetector = (props: GestureDetectorProps) => {
   }, []);
 
   useEffect(() => {
-    if (!firstRenderRef.current) {
-      const viewTag = findNodeHandle(viewRef.current) as number;
-
-      if (needsToReattach(preparedGesture, gesture)) {
-        validateDetectorChildren(viewRef.current);
-        dropHandlers(preparedGesture);
-        attachHandlers({
-          preparedGesture,
-          gestureConfig,
-          gesture,
-          viewTag,
-          webEventHandlersRef,
-        });
-      } else {
-        updateHandlers(preparedGesture, gestureConfig, gesture, mountedRef);
-      }
+    if (!state.firstRender) {
+      onHandlersUpdate();
     } else {
-      firstRenderRef.current = false;
+      state.firstRender = false;
     }
   }, [props]);
 
   const refFunction = (ref: unknown) => {
     if (ref !== null) {
-      //@ts-ignore Just setting the ref
-      viewRef.current = ref;
+      // @ts-ignore Just setting the view ref
+      state.viewRef = ref;
+
+      // if it's the first render, also set the previousViewTag to prevent reattaching gestures when not needed
+      if (state.previousViewTag === -1) {
+        state.previousViewTag = findNodeHandle(state.viewRef) as number;
+      }
+
+      // pass true as `skipConfigUpdate`, here we only want to trigger the eventual reattaching of handlers
+      // in case the view has changed, while config update would be handled be the `useEffect` above
+      onHandlersUpdate(true);
 
       if (isFabric()) {
         const node = getShadowNodeFromRef(ref);

package/src/handlers/gestures/longPressGesture.ts

@@ -11,6 +11,7 @@ export class LongPressGesture extends BaseGesture<LongPressGestureHandlerEventPa
     super();
 
     this.handlerName = 'LongPressGestureHandler';
+    this.shouldCancelWhenOutside(true);
   }
 
   minDuration(duration: number) {

package/src/handlers/gestures/reanimatedWrapper.ts

@@ -29,27 +29,28 @@ let Reanimated: {
 
 try {
   Reanimated = require('react-native-reanimated');
+} catch (e) {
+  // When 'react-native-reanimated' is not available we want to quietly continue
+  // @ts-ignore TS demands the variable to be initialized
+  Reanimated = undefined;
+}
 
-  if (!Reanimated.useSharedValue) {
-    // @ts-ignore Make sure the loaded module is actually Reanimated, if it's not
-    // reset the module to undefined so we can fallback to the default implementation
-    Reanimated = undefined;
-    throw new Error('react-native-reanimated is not found');
-  }
+if (!Reanimated?.useSharedValue) {
+  // @ts-ignore Make sure the loaded module is actually Reanimated, if it's not
+  // reset the module to undefined so we can fallback to the default implementation
+  Reanimated = undefined;
+}
 
-  if (!Reanimated.setGestureState) {
-    Reanimated.setGestureState = () => {
-      'worklet';
-      console.warn(
-        tagMessage(
-          'Please use newer version of react-native-reanimated in order to control state of the gestures.'
-        )
-      );
-    };
-  }
-  // When 'react-native-reanimated' is not available we want to
-  // quietly continue
-  // eslint-disable-next-line no-empty
-} catch (e) {}
+if (Reanimated !== undefined && !Reanimated.setGestureState) {
+  // The loaded module is Reanimated but it doesn't have the setGestureState defined
+  Reanimated.setGestureState = () => {
+    'worklet';
+    console.warn(
+      tagMessage(
+        'Please use newer version of react-native-reanimated in order to control state of the gestures.'
+      )
+    );
+  };
+}
 
 export { Reanimated };

package/src/handlers/gestures/tapGesture.ts

@@ -11,6 +11,7 @@ export class TapGesture extends BaseGesture<TapGestureHandlerEventPayload> {
     super();
 
     this.handlerName = 'TapGestureHandler';
+    this.shouldCancelWhenOutside(true);
   }
 
   minPointers(minPointers: number) {

package/src/index.ts

@@ -2,8 +2,8 @@ import { initialize } from './init';
 
 export { Directions } from './Directions';
 export { State } from './State';
-export { default as gestureHandlerRootHOC } from './gestureHandlerRootHOC';
-export { default as GestureHandlerRootView } from './GestureHandlerRootView';
+export { default as gestureHandlerRootHOC } from './components/gestureHandlerRootHOC';
+export { default as GestureHandlerRootView } from './components/GestureHandlerRootView';
 export type {
   // event types
   GestureEvent,
@@ -92,6 +92,7 @@ export {
   BaseButton,
   RectButton,
   BorderlessButton,
+  PureNativeButton,
 } from './components/GestureButtons';
 export {
   TouchableHighlight,
@@ -157,6 +158,9 @@ export type {
 } from './components/DrawerLayout';
 export { default as DrawerLayout } from './components/DrawerLayout';
 
-export { enableExperimentalWebImplementation } from './EnableExperimentalWebImplementation';
+export {
+  enableExperimentalWebImplementation,
+  enableLegacyWebImplementation,
+} from './EnableNewWebImplementation';
 
 initialize();

package/src/utils.ts

@@ -55,11 +55,6 @@ export function isFabric(): boolean {
   return !!global?.nativeFabricUIManager;
 }
 
-export function shouldUseCodegenNativeComponent(): boolean {
-  // use codegenNativeComponent starting with RN 0.68
-  return REACT_NATIVE_VERSION.minor >= 68 || REACT_NATIVE_VERSION.major > 0;
-}
-
 export function isRemoteDebuggingEnabled(): boolean {
   // react-native-reanimated checks if in remote debugging in the same way
   // @ts-ignore global is available but node types are not included

package/src/web/handlers/FlingGestureHandler.ts

@@ -159,11 +159,6 @@ export default class FlingGestureHandler extends GestureHandler {
     this.endFling();
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.reset();
-  }
-
   public activate(force?: boolean): void {
     super.activate(force);
     this.end();

package/src/web/handlers/GestureHandler.ts

@@ -352,6 +352,9 @@ export default abstract class GestureHandler {
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
+
+    this.cancel();
+    this.reset();
   }
   protected onPointerOutOfBounds(event: AdaptedEvent): void {
     this.tryToSendMoveEvent(true);

package/src/web/handlers/LongPressGestureHandler.ts

@@ -22,7 +22,6 @@ export default class LongPressGestureHandler extends GestureHandler {
 
   public init(ref: number, propsRef: React.RefObject<unknown>) {
     super.init(ref, propsRef);
-    this.setShouldCancelWhenOutside(true);
 
     this.view.oncontextmenu = () => false;
   }