react-native-gesture-handler 2.7.1 → 2.9.0

package/src/handlers/gestures/GestureDetector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, RefObject } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   GestureType,
   HandlerCallbacks,
@@ -18,6 +18,7 @@ import {
   GestureStateChangeEvent,
   HandlerStateChangeEvent,
   scheduleFlushOperations,
+  UserSelect,
 } from '../gestureHandlerCommon';
 import {
   GestureStateManager,
@@ -125,10 +126,11 @@ interface WebEventHandler {
 
 interface AttachHandlersConfig {
   preparedGesture: GestureConfigReference;
-  gestureConfig: ComposedGesture | GestureType | undefined;
+  gestureConfig: ComposedGesture | GestureType;
   gesture: GestureType[];
   viewTag: number;
   webEventHandlersRef: React.RefObject<WebEventHandler>;
+  mountedRef: React.RefObject<boolean>;
 }
 
 function attachHandlers({
@@ -137,9 +139,10 @@ function attachHandlers({
   gesture,
   viewTag,
   webEventHandlersRef,
+  mountedRef,
 }: AttachHandlersConfig) {
   if (!preparedGesture.firstExecution) {
-    gestureConfig?.initialize();
+    gestureConfig.initialize();
   } else {
     preparedGesture.firstExecution = false;
   }
@@ -147,7 +150,10 @@ function attachHandlers({
   // use setImmediate to extract handlerTags, because all refs should be initialized
   // when it's ran
   setImmediate(() => {
-    gestureConfig?.prepare();
+    if (!mountedRef.current) {
+      return;
+    }
+    gestureConfig.prepare();
   });
 
   for (const handler of gesture) {
@@ -164,6 +170,9 @@ function attachHandlers({
   // use setImmediate to extract handlerTags, because all refs should be initialized
   // when it's ran
   setImmediate(() => {
+    if (!mountedRef.current) {
+      return;
+    }
     for (const handler of gesture) {
       let requireToFail: number[] = [];
       if (handler.config.requireToFail) {
@@ -197,7 +206,9 @@ function attachHandlers({
       : ActionType.JS_FUNCTION_NEW_API;
 
     if (Platform.OS === 'web') {
-      (RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler)(
+      (
+        RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler
+      )(
         gesture.handlerTag,
         viewTag,
         ActionType.JS_FUNCTION_OLD_API, // ignored on web
@@ -215,9 +226,9 @@ function attachHandlers({
   if (preparedGesture.animatedHandlers) {
     const isAnimatedGesture = (g: GestureType) => g.shouldUseReanimated;
 
-    preparedGesture.animatedHandlers.value = (gesture
+    preparedGesture.animatedHandlers.value = gesture
       .filter(isAnimatedGesture)
-      .map((g) => g.handlers) as unknown) as HandlerCallbacks<
+      .map((g) => g.handlers) as unknown as HandlerCallbacks<
       Record<string, unknown>
     >[];
   }
@@ -225,11 +236,11 @@ function attachHandlers({
 
 function updateHandlers(
   preparedGesture: GestureConfigReference,
-  gestureConfig: ComposedGesture | GestureType | undefined,
+  gestureConfig: ComposedGesture | GestureType,
   gesture: GestureType[],
-  mountedRef: RefObject<boolean>
+  mountedRef: React.RefObject<boolean>
 ) {
-  gestureConfig?.prepare();
+  gestureConfig.prepare();
 
   for (let i = 0; i < gesture.length; i++) {
     const handler = preparedGesture.config[i];
@@ -278,9 +289,9 @@ function updateHandlers(
     if (preparedGesture.animatedHandlers) {
       const previousHandlersValue =
         preparedGesture.animatedHandlers.value ?? [];
-      const newHandlersValue = (preparedGesture.config
+      const newHandlersValue = preparedGesture.config
         .filter((g) => g.shouldUseReanimated) // ignore gestures that shouldn't run on UI
-        .map((g) => g.handlers) as unknown) as HandlerCallbacks<
+        .map((g) => g.handlers) as unknown as HandlerCallbacks<
         Record<string, unknown>
       >[];
 
@@ -550,9 +561,11 @@ function validateDetectorChildren(ref: any) {
           ref._reactInternals.elementType
         : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           ref._reactInternalFiber.elementType;
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-    let instance = RNRenderer.findHostInstance_DEPRECATED(ref)
-      ._internalFiberInstanceHandleDEV;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    let instance =
+      RNRenderer.findHostInstance_DEPRECATED(
+        ref
+      )._internalFiberInstanceHandleDEV;
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     while (instance && instance.elementType !== wrapType) {
@@ -569,16 +582,43 @@ function validateDetectorChildren(ref: any) {
   }
 }
 
+const applyUserSelectProp = (
+  userSelect: UserSelect,
+  gesture: ComposedGesture | GestureType
+): void => {
+  for (const g of gesture.toGestureArray()) {
+    g.config.userSelect = userSelect;
+  }
+};
+
 interface GestureDetectorProps {
-  gesture?: ComposedGesture | GestureType;
+  gesture: ComposedGesture | GestureType;
+  userSelect?: UserSelect;
   children?: React.ReactNode;
 }
+interface GestureDetectorState {
+  firstRender: boolean;
+  viewRef: React.Component | null;
+  previousViewTag: number;
+  forceReattach: boolean;
+}
 export const GestureDetector = (props: GestureDetectorProps) => {
   const gestureConfig = props.gesture;
-  const gesture = gestureConfig?.toGestureArray?.() ?? [];
+
+  if (props.userSelect) {
+    applyUserSelectProp(props.userSelect, gestureConfig);
+  }
+
+  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>) => {
@@ -591,6 +631,11 @@ export const GestureDetector = (props: GestureDetectorProps) => {
       : undefined,
   });
 
+  const [renderState, setRenderState] = useState(false);
+  function forceRender() {
+    setRenderState(!renderState);
+  }
+
   const preparedGesture = React.useRef<GestureConfigReference>({
     config: gesture,
     animatedEventHandler: null,
@@ -607,13 +652,44 @@ 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?.();
+    gestureConfig.initialize();
   }
 
   if (useReanimatedHook) {
@@ -623,17 +699,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 () => {
@@ -643,31 +721,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/eventReceiver.ts

@@ -14,7 +14,8 @@ import {
 } from './gestureStateManager';
 
 let gestureHandlerEventSubscription: EmitterSubscription | null = null;
-let gestureHandlerStateChangeEventSubscription: EmitterSubscription | null = null;
+let gestureHandlerStateChangeEventSubscription: EmitterSubscription | null =
+  null;
 
 const gestureStateManagers: Map<number, GestureStateManagerType> = new Map<
   number,

package/src/handlers/gestures/gesture.ts

@@ -202,9 +202,8 @@ export abstract class BaseGesture<
   onTouchesDown(callback: TouchEventHandlerType) {
     this.config.needsPointerData = true;
     this.handlers.onTouchesDown = callback;
-    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_DOWN] = this.isWorklet(
-      callback
-    );
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_DOWN] =
+      this.isWorklet(callback);
 
     return this;
   }
@@ -212,9 +211,8 @@ export abstract class BaseGesture<
   onTouchesMove(callback: TouchEventHandlerType) {
     this.config.needsPointerData = true;
     this.handlers.onTouchesMove = callback;
-    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_MOVE] = this.isWorklet(
-      callback
-    );
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_MOVE] =
+      this.isWorklet(callback);
 
     return this;
   }
@@ -222,9 +220,8 @@ export abstract class BaseGesture<
   onTouchesUp(callback: TouchEventHandlerType) {
     this.config.needsPointerData = true;
     this.handlers.onTouchesUp = callback;
-    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_UP] = this.isWorklet(
-      callback
-    );
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_UP] =
+      this.isWorklet(callback);
 
     return this;
   }
@@ -232,9 +229,8 @@ export abstract class BaseGesture<
   onTouchesCancelled(callback: TouchEventHandlerType) {
     this.config.needsPointerData = true;
     this.handlers.onTouchesCancelled = callback;
-    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_CANCELLED] = this.isWorklet(
-      callback
-    );
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_CANCELLED] =
+      this.isWorklet(callback);
 
     return this;
   }

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/tapGesture.ts

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

package/src/jestUtils/jestUtils.ts

@@ -464,9 +464,8 @@ export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
   componentOrGesture: ReactTestInstance | GestureType,
   eventList: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[] = []
 ): void {
-  const { emitEvent, handlerType, handlerTag } = getHandlerData(
-    componentOrGesture
-  );
+  const { emitEvent, handlerType, handlerTag } =
+    getHandlerData(componentOrGesture);
 
   let _ = fillMissingStatesTransitions(
     eventList,
@@ -478,7 +477,7 @@ export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
   // @ts-ignore TODO
   _ = _.map(wrapWithNativeEvent);
 
-  const events = (_ as unknown) as WrappedGestureHandlerTestEvent[];
+  const events = _ as unknown as WrappedGestureHandlerTestEvent[];
 
   const firstEvent = events.shift()!;
 

package/src/web/detectors/RotationGestureDetector.ts

@@ -8,7 +8,8 @@ export interface RotationGestureListener {
 }
 
 export default class RotationGestureDetector
-  implements RotationGestureListener {
+  implements RotationGestureListener
+{
   onRotationBegin: (detector: RotationGestureDetector) => boolean;
   onRotation: (detector: RotationGestureDetector) => boolean;
   onRotationEnd: (detector: RotationGestureDetector) => void;

package/src/web/handlers/FlingGestureHandler.ts

@@ -30,8 +30,6 @@ export default class FlingGestureHandler extends GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.direction) {
       this.direction = this.config.direction;
     }
@@ -124,7 +122,8 @@ export default class FlingGestureHandler extends GestureHandler {
       this.tracker.getTrackedPointersCount() >
       this.maxNumberOfPointersSimultaneously
     ) {
-      this.maxNumberOfPointersSimultaneously = this.tracker.getTrackedPointersCount();
+      this.maxNumberOfPointersSimultaneously =
+        this.tracker.getTrackedPointersCount();
     }
   }
 

package/src/web/handlers/GestureHandler.ts

@@ -70,13 +70,18 @@ export default abstract class GestureHandler {
       );
     }
 
-    this.view = (findNodeHandle(this.ref) as unknown) as HTMLElement;
+    this.view = findNodeHandle(this.ref) as unknown as HTMLElement;
     this.view.style['touchAction'] = 'none';
-    this.view.style['webkitUserSelect'] = 'none';
-    this.view.style['userSelect'] = 'none';
-
     //@ts-ignore This one disables default events on Safari
     this.view.style['WebkitTouchCallout'] = 'none';
+
+    if (!this.config.userSelect) {
+      this.view.style['webkitUserSelect'] = 'none';
+      this.view.style['userSelect'] = 'none';
+    } else {
+      this.view.style['webkitUserSelect'] = this.config.userSelect;
+      this.view.style['userSelect'] = this.config.userSelect;
+    }
   }
 
   private addEventManager(manager: EventManager): void {
@@ -322,6 +327,18 @@ export default abstract class GestureHandler {
     }
   }
   protected onPointerOut(event: AdaptedEvent): void {
+    if (this.shouldCancellWhenOutside) {
+      switch (this.currentState) {
+        case State.ACTIVE:
+          this.cancel();
+          break;
+        case State.BEGAN:
+          this.fail();
+          break;
+      }
+      return;
+    }
+
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
@@ -360,9 +377,8 @@ export default abstract class GestureHandler {
     const { onGestureHandlerEvent }: PropsRef = this.propsRef
       .current as PropsRef;
 
-    const touchEvent: ResultTouchEvent | undefined = this.transformTouchEvent(
-      event
-    );
+    const touchEvent: ResultTouchEvent | undefined =
+      this.transformTouchEvent(event);
 
     if (touchEvent) {
       invokeNullableMethod(onGestureHandlerEvent, touchEvent);
@@ -374,10 +390,8 @@ export default abstract class GestureHandler {
   //
 
   public sendEvent = (newState: State, oldState: State): void => {
-    const {
-      onGestureHandlerEvent,
-      onGestureHandlerStateChange,
-    }: PropsRef = this.propsRef.current as PropsRef;
+    const { onGestureHandlerEvent, onGestureHandlerStateChange }: PropsRef =
+      this.propsRef.current as PropsRef;
 
     const resultEvent: ResultEvent = this.transformEventData(
       newState,
@@ -576,6 +590,11 @@ export default abstract class GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     this.config = { enabled: enabled, ...props };
     this.enabled = enabled;
+
+    if (this.config.shouldCancelWhenOutside !== undefined) {
+      this.setShouldCancelWhenOutside(this.config.shouldCancelWhenOutside);
+    }
+
     this.validateHitSlops();
 
     if (this.enabled) {

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;
   }
@@ -42,8 +41,6 @@ export default class LongPressGestureHandler extends GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.minDurationMs !== undefined) {
       this.minDurationMs = this.config.minDurationMs;
     }

package/src/web/handlers/ManualGestureHandler.ts

@@ -1,4 +1,4 @@
-import { AdaptedEvent } from '../interfaces';
+import { AdaptedEvent, Config } from '../interfaces';
 import GestureHandler from './GestureHandler';
 
 export default class ManualGestureHandler extends GestureHandler {
@@ -6,6 +6,10 @@ export default class ManualGestureHandler extends GestureHandler {
     super.init(ref, propsRef);
   }
 
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+  }
+
   protected onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
@@ -22,6 +26,11 @@ export default class ManualGestureHandler extends GestureHandler {
     super.onPointerMove(event);
   }
 
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+    this.tracker.track(event);
+    super.onPointerOutOfBounds(event);
+  }
+
   protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
     this.tracker.removeFromTracker(event.pointerId);

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -29,8 +29,6 @@ export default class NativeViewGestureHandler extends GestureHandler {
       this.buttonRole = true;
     } else {
       this.buttonRole = false;
-      this.view.style['webkitUserSelect'] = 'auto';
-      this.view.style['userSelect'] = 'auto';
     }
   }
 

package/src/web/handlers/PanGestureHandler.ts

@@ -65,8 +65,6 @@ export default class PanGestureHandler extends GestureHandler {
     super.updateGestureConfig({ enabled: enabled, ...props });
     this.checkCustomActivationCriteria(this.customActivationProperties);
 
-    this.enabled = enabled;
-
     if (this.config.minDist !== undefined) {
       this.minDistSq = this.config.minDist * this.config.minDist;
     } else if (this.hasCustomActivationCriteria) {
@@ -98,10 +96,6 @@ export default class PanGestureHandler extends GestureHandler {
       this.activateAfterLongPress = this.config.activateAfterLongPress;
     }
 
-    if (this.config.shouldCancelWhenOutside !== undefined) {
-      this.setShouldCancelWhenOutside(this.config.shouldCancelWhenOutside);
-    }
-
     if (this.config.activeOffsetXStart !== undefined) {
       this.activeOffsetXStart = this.config.activeOffsetXStart;
 

package/src/web/handlers/PinchGestureHandler.ts

@@ -57,8 +57,6 @@ export default class PinchGestureHandler extends GestureHandler {
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
-
-    this.enabled = enabled;
   }
 
   protected transformNativeEvent() {

package/src/web/handlers/RotationGestureHandler.ts

@@ -41,9 +41,8 @@ export default class RotationGestureHandler extends GestureHandler {
     },
   };
 
-  private rotationGestureDetector: RotationGestureDetector = new RotationGestureDetector(
-    this.rotationGestureListener
-  );
+  private rotationGestureDetector: RotationGestureDetector =
+    new RotationGestureDetector(this.rotationGestureListener);
 
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
@@ -53,8 +52,6 @@ export default class RotationGestureHandler extends GestureHandler {
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
-
-    this.enabled = enabled;
   }
 
   protected transformNativeEvent() {

package/src/web/handlers/TapGestureHandler.ts

@@ -33,14 +33,11 @@ export default class TapGestureHandler extends GestureHandler {
 
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
-    this.setShouldCancelWhenOutside(true);
   }
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.numberOfTaps !== undefined) {
       this.numberOfTaps = this.config.numberOfTaps;
     }

package/src/web/interfaces.ts

@@ -1,3 +1,4 @@
+import { UserSelect } from '../handlers/gestureHandlerCommon';
 import { Directions } from '../Directions';
 import { State } from '../State';
 
@@ -20,6 +21,7 @@ type ConfigArgs =
   | number
   | boolean
   | HitSlop
+  | UserSelect
   | Directions
   | Handler[]
   | null
@@ -31,6 +33,7 @@ export interface Config extends Record<string, ConfigArgs> {
   waitFor?: Handler[] | null;
   hitSlop?: HitSlop;
   shouldCancelWhenOutside?: boolean;
+  userSelect?: UserSelect;
 
   activateAfterLongPress?: number;
   failOffsetXStart?: number;

package/src/web/tools/InteractionManager.ts

@@ -69,9 +69,8 @@ export default class InteractionManager {
     handler: GestureHandler,
     otherHandler: GestureHandler
   ): boolean {
-    const simultaneousHandlers:
-      | number[]
-      | undefined = this.simultaneousRelations.get(handler.getTag());
+    const simultaneousHandlers: number[] | undefined =
+      this.simultaneousRelations.get(handler.getTag());
     if (!simultaneousHandlers) {
       return false;
     }