react-native-gesture-handler 2.7.0 → 2.8.0

package/src/RNGestureHandlerModule.macos.ts

@@ -68,7 +68,7 @@ export default {
       NodeManager.createGestureHandler(handlerTag, new GestureClass());
       InteractionManager.getInstance().configureInteractions(
         NodeManager.getHandler(handlerTag),
-        (config as unknown) as Config
+        config as unknown as Config
       );
     } else {
       if (!(handlerName in HammerGestures)) {
@@ -84,7 +84,7 @@ export default {
       HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
     }
 
-    this.updateGestureHandler(handlerTag, (config as unknown) as Config);
+    this.updateGestureHandler(handlerTag, config as unknown as Config);
   },
   attachGestureHandler(
     handlerTag: number,

package/src/RNGestureHandlerModule.web.ts

@@ -70,7 +70,7 @@ export default {
       NodeManager.createGestureHandler(handlerTag, new GestureClass());
       InteractionManager.getInstance().configureInteractions(
         NodeManager.getHandler(handlerTag),
-        (config as unknown) as Config
+        config as unknown as Config
       );
     } else {
       if (!(handlerName in HammerGestures)) {
@@ -86,7 +86,7 @@ export default {
       HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
     }
 
-    this.updateGestureHandler(handlerTag, (config as unknown) as Config);
+    this.updateGestureHandler(handlerTag, config as unknown as Config);
   },
   attachGestureHandler(
     handlerTag: number,

package/src/RNGestureHandlerModule.windows.ts

@@ -0,0 +1,140 @@
+import React from 'react';
+
+import { ActionType } from './ActionType';
+import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
+
+//GestureHandlers
+import InteractionManager from './web/tools/InteractionManager';
+import NodeManager from './web/tools/NodeManager';
+import PanGestureHandler from './web/handlers/PanGestureHandler';
+import TapGestureHandler from './web/handlers/TapGestureHandler';
+import LongPressGestureHandler from './web/handlers/LongPressGestureHandler';
+import PinchGestureHandler from './web/handlers/PinchGestureHandler';
+import RotationGestureHandler from './web/handlers/RotationGestureHandler';
+import FlingGestureHandler from './web/handlers/FlingGestureHandler';
+import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
+import ManualGestureHandler from './web/handlers/ManualGestureHandler';
+
+//Hammer Handlers
+import * as HammerNodeManager from './web_hammer/NodeManager';
+import HammerNativeViewGestureHandler from './web_hammer/NativeViewGestureHandler';
+import HammerPanGestureHandler from './web_hammer/PanGestureHandler';
+import HammerTapGestureHandler from './web_hammer/TapGestureHandler';
+import HammerLongPressGestureHandler from './web_hammer/LongPressGestureHandler';
+import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
+import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
+import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
+import { Config } from './web/interfaces';
+
+export const Gestures = {
+  NativeViewGestureHandler,
+  PanGestureHandler,
+  TapGestureHandler,
+  LongPressGestureHandler,
+  PinchGestureHandler,
+  RotationGestureHandler,
+  FlingGestureHandler,
+  ManualGestureHandler,
+};
+
+export const HammerGestures = {
+  NativeViewGestureHandler: HammerNativeViewGestureHandler,
+  PanGestureHandler: HammerPanGestureHandler,
+  TapGestureHandler: HammerTapGestureHandler,
+  LongPressGestureHandler: HammerLongPressGestureHandler,
+  PinchGestureHandler: HammerPinchGestureHandler,
+  RotationGestureHandler: HammerRotationGestureHandler,
+  FlingGestureHandler: HammerFlingGestureHandler,
+};
+
+export default {
+  handleSetJSResponder(_tag: number, _blockNativeResponder: boolean) {
+    // NO-OP
+  },
+  handleClearJSResponder() {
+    // NO-OP
+  },
+  createGestureHandler<T>(
+    handlerName: keyof typeof Gestures,
+    handlerTag: number,
+    config: T
+  ) {
+    if (isExperimentalWebImplementationEnabled()) {
+      if (!(handlerName in Gestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
+
+      const GestureClass = Gestures[handlerName];
+      NodeManager.createGestureHandler(handlerTag, new GestureClass());
+      InteractionManager.getInstance().configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        config as unknown as Config
+      );
+    } else {
+      if (!(handlerName in HammerGestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
+
+      // @ts-ignore If it doesn't exist, the error is thrown
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const GestureClass = HammerGestures[handlerName];
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
+    }
+
+    this.updateGestureHandler(handlerTag, config as unknown as Config);
+  },
+  attachGestureHandler(
+    handlerTag: number,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    newView: any,
+    _actionType: ActionType,
+    propsRef: React.RefObject<unknown>
+  ) {
+    if (
+      !(newView instanceof HTMLElement || newView instanceof React.Component)
+    ) {
+      return;
+    }
+
+    if (isExperimentalWebImplementationEnabled()) {
+      //@ts-ignore Types should be HTMLElement or React.Component
+      NodeManager.getHandler(handlerTag).init(newView, propsRef);
+    } else {
+      //@ts-ignore Types should be HTMLElement or React.Component
+      HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
+    }
+  },
+  updateGestureHandler(handlerTag: number, newConfig: Config) {
+    if (isExperimentalWebImplementationEnabled()) {
+      NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+
+      InteractionManager.getInstance().configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        newConfig
+      );
+    } else {
+      HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+    }
+  },
+  getGestureHandlerNode(handlerTag: number) {
+    if (isExperimentalWebImplementationEnabled()) {
+      return NodeManager.getHandler(handlerTag);
+    } else {
+      return HammerNodeManager.getHandler(handlerTag);
+    }
+  },
+  dropGestureHandler(handlerTag: number) {
+    if (isExperimentalWebImplementationEnabled()) {
+      NodeManager.dropGestureHandler(handlerTag);
+    } else {
+      HammerNodeManager.dropGestureHandler(handlerTag);
+    }
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  flushOperations() {},
+};

package/src/components/DrawerLayout.tsx

@@ -26,6 +26,7 @@ import {
 import {
   GestureEvent,
   HandlerStateChangeEvent,
+  UserSelect,
 } from '../handlers/gestureHandlerCommon';
 import {
   PanGestureHandler,
@@ -153,6 +154,13 @@ export interface DrawerLayoutProps {
   children?:
     | React.ReactNode
     | ((openValue?: Animated.AnimatedInterpolation) => React.ReactNode);
+
+  /**
+   * @default 'none'
+   * Defines which userSelect property should be used.
+   * Values: 'none'|'text'|'auto'
+   */
+  userSelect?: UserSelect;
 }
 
 export type DrawerLayoutState = {
@@ -650,18 +658,15 @@ export default class DrawerLayout extends Component<
   private setPanGestureRef = (ref: PanGestureHandler) => {
     // TODO(TS): make sure it is OK taken from
     // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842
-    (this
-      .panGestureHandler as React.MutableRefObject<PanGestureHandler>).current = ref;
+    (
+      this.panGestureHandler as React.MutableRefObject<PanGestureHandler>
+    ).current = ref;
     this.props.onGestureRef?.(ref);
   };
 
   render() {
-    const {
-      drawerPosition,
-      drawerLockMode,
-      edgeWidth,
-      minSwipeDistance,
-    } = this.props;
+    const { drawerPosition, drawerLockMode, edgeWidth, minSwipeDistance } =
+      this.props;
 
     const fromLeft = drawerPosition === 'left';
 
@@ -681,6 +686,7 @@ export default class DrawerLayout extends Component<
     return (
       <PanGestureHandler
         // @ts-ignore could be fixed in handler types
+        userSelect={this.props.userSelect}
         ref={this.setPanGestureRef}
         hitSlop={hitSlop}
         activeOffsetX={gestureOrientation * minSwipeDistance!}

package/src/components/Swipeable.tsx

@@ -257,10 +257,8 @@ export default class Swipeable extends Component<
     const { rightOffset = rowWidth } = state;
     const rightWidth = Math.max(0, rowWidth - rightOffset);
 
-    const {
-      overshootLeft = leftWidth > 0,
-      overshootRight = rightWidth > 0,
-    } = props;
+    const { overshootLeft = leftWidth > 0, overshootRight = rightWidth > 0 } =
+      props;
 
     const transX = Animated.add(
       rowTranslation,

package/src/components/touchables/TouchableOpacity.tsx

@@ -63,7 +63,7 @@ export default class TouchableOpacity extends Component<
         style={[
           style,
           {
-            opacity: (this.opacity as unknown) as number, // TODO: fix this
+            opacity: this.opacity as unknown as number, // TODO: fix this
           },
         ]}
         onStateChange={this.onStateChange}>

package/src/getShadowNodeFromRef.ts

@@ -8,9 +8,9 @@ export function getShadowNodeFromRef(ref: any) {
   // load findHostInstance_DEPRECATED lazily because it may not be available before render
   if (findHostInstance_DEPRECATED === undefined) {
     try {
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      findHostInstance_DEPRECATED = require('react-native/Libraries/Renderer/shims/ReactFabric')
-        .findHostInstance_DEPRECATED;
+      findHostInstance_DEPRECATED =
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
     } catch (e) {
       findHostInstance_DEPRECATED = (_ref: any) => null;
     }

package/src/handlers/createHandler.tsx

@@ -132,15 +132,14 @@ const stateToPropMappings = {
   [State.END]: 'onEnded',
 } as const;
 
-type CreateHandlerArgs<
-  HandlerPropsT extends Record<string, unknown>
-> = Readonly<{
-  name: string;
-  allowedProps: Readonly<Extract<keyof HandlerPropsT, string>[]>;
-  config: Readonly<Record<string, unknown>>;
-  transformProps?: (props: HandlerPropsT) => HandlerPropsT;
-  customNativeProps?: Readonly<string[]>;
-}>;
+type CreateHandlerArgs<HandlerPropsT extends Record<string, unknown>> =
+  Readonly<{
+    name: string;
+    allowedProps: Readonly<Extract<keyof HandlerPropsT, string>[]>;
+    config: Readonly<Record<string, unknown>>;
+    transformProps?: (props: HandlerPropsT) => HandlerPropsT;
+    customNativeProps?: Readonly<string[]>;
+  }>;
 
 // TODO(TS) fix event types
 type InternalEventHandlers = {
@@ -313,7 +312,9 @@ export default function createHandler<
 
       if (Platform.OS === 'web') {
         // typecast due to dynamic resolution, attachGestureHandler should have web version signature in this branch
-        (RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler)(
+        (
+          RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler
+        )(
           this.handlerTag,
           newViewTag,
           ActionType.JS_FUNCTION_OLD_API, // ignored on web
@@ -403,11 +404,8 @@ export default function createHandler<
         onGestureEvent?: BaseGestureHandlerProps<U>['onGestureEvent'];
         onGestureHandlerEvent?: InternalEventHandlers['onGestureHandlerEvent'];
       };
-      const {
-        onGestureEvent,
-        onGestureHandlerEvent,
-      }: OnGestureEventHandlers = this.props;
-
+      const { onGestureEvent, onGestureHandlerEvent }: OnGestureEventHandlers =
+        this.props;
       if (onGestureEvent && typeof onGestureEvent !== 'function') {
         // If it's not a method it should be an native Animated.event
         // object. We set it directly as the handler for the view

package/src/handlers/gestureHandlerCommon.ts

@@ -18,6 +18,7 @@ const commonProps = [
   'shouldCancelWhenOutside',
   'hitSlop',
   'cancelsTouchesInView',
+  'userSelect',
 ] as const;
 
 const componentInteractionProps = ['waitFor', 'simultaneousHandlers'] as const;
@@ -62,6 +63,8 @@ export type HitSlop =
   | Record<'height' | 'top', number>
   | Record<'height' | 'bottom', number>;
 
+export type UserSelect = 'none' | 'auto' | 'text';
+
 //TODO(TS) events in handlers
 
 export interface GestureEvent<ExtraEventPayloadT = Record<string, unknown>> {
@@ -90,9 +93,8 @@ export type GestureTouchEvent = {
   changedTouches: TouchData[];
 };
 
-export type GestureUpdateEvent<
-  GestureEventPayloadT = Record<string, unknown>
-> = GestureEventPayload & GestureEventPayloadT;
+export type GestureUpdateEvent<GestureEventPayloadT = Record<string, unknown>> =
+  GestureEventPayload & GestureEventPayloadT;
 
 export type GestureStateChangeEvent<
   GestureStateChangeEventPayloadT = Record<string, unknown>
@@ -102,6 +104,7 @@ export type CommonGestureConfig = {
   enabled?: boolean;
   shouldCancelWhenOutside?: boolean;
   hitSlop?: HitSlop;
+  userSelect?: UserSelect;
 };
 
 // Events payloads are types instead of interfaces due to TS limitation.
@@ -182,7 +185,9 @@ function transformIntoHandlerTags(handlerIDs: any) {
 export function findNodeHandle(
   node: null | number | React.Component<any, any> | React.ComponentClass<any>
 ): null | number | React.Component<any, any> | React.ComponentClass<any> {
-  if (Platform.OS === 'web') return node;
+  if (Platform.OS === 'web') {
+    return node;
+  }
   return findNodeHandleRN(node);
 }
 

package/src/handlers/gestureHandlerTypesCompat.ts

@@ -45,33 +45,50 @@ import {
 
 // events
 export type GestureHandlerGestureEventNativeEvent = GestureEventPayload;
-export type GestureHandlerStateChangeNativeEvent = HandlerStateChangeEventPayload;
+export type GestureHandlerStateChangeNativeEvent =
+  HandlerStateChangeEventPayload;
 export type GestureHandlerGestureEvent = GestureEvent;
 export type GestureHandlerStateChangeEvent = HandlerStateChangeEvent;
 // gesture handlers events
-export type NativeViewGestureHandlerGestureEvent = GestureEvent<NativeViewGestureHandlerPayload>;
-export type NativeViewGestureHandlerStateChangeEvent = HandlerStateChangeEvent<NativeViewGestureHandlerPayload>;
+export type NativeViewGestureHandlerGestureEvent =
+  GestureEvent<NativeViewGestureHandlerPayload>;
+export type NativeViewGestureHandlerStateChangeEvent =
+  HandlerStateChangeEvent<NativeViewGestureHandlerPayload>;
 
-export type TapGestureHandlerGestureEvent = GestureEvent<TapGestureHandlerEventPayload>;
-export type TapGestureHandlerStateChangeEvent = HandlerStateChangeEvent<TapGestureHandlerEventPayload>;
+export type TapGestureHandlerGestureEvent =
+  GestureEvent<TapGestureHandlerEventPayload>;
+export type TapGestureHandlerStateChangeEvent =
+  HandlerStateChangeEvent<TapGestureHandlerEventPayload>;
 
-export type ForceTouchGestureHandlerGestureEvent = GestureEvent<ForceTouchGestureHandlerEventPayload>;
-export type ForceTouchGestureHandlerStateChangeEvent = HandlerStateChangeEvent<ForceTouchGestureHandlerEventPayload>;
+export type ForceTouchGestureHandlerGestureEvent =
+  GestureEvent<ForceTouchGestureHandlerEventPayload>;
+export type ForceTouchGestureHandlerStateChangeEvent =
+  HandlerStateChangeEvent<ForceTouchGestureHandlerEventPayload>;
 
-export type LongPressGestureHandlerGestureEvent = GestureEvent<LongPressGestureHandlerEventPayload>;
-export type LongPressGestureHandlerStateChangeEvent = HandlerStateChangeEvent<LongPressGestureHandlerEventPayload>;
+export type LongPressGestureHandlerGestureEvent =
+  GestureEvent<LongPressGestureHandlerEventPayload>;
+export type LongPressGestureHandlerStateChangeEvent =
+  HandlerStateChangeEvent<LongPressGestureHandlerEventPayload>;
 
-export type PanGestureHandlerGestureEvent = GestureEvent<PanGestureHandlerEventPayload>;
-export type PanGestureHandlerStateChangeEvent = HandlerStateChangeEvent<PanGestureHandlerEventPayload>;
+export type PanGestureHandlerGestureEvent =
+  GestureEvent<PanGestureHandlerEventPayload>;
+export type PanGestureHandlerStateChangeEvent =
+  HandlerStateChangeEvent<PanGestureHandlerEventPayload>;
 
-export type PinchGestureHandlerGestureEvent = GestureEvent<PinchGestureHandlerEventPayload>;
-export type PinchGestureHandlerStateChangeEvent = HandlerStateChangeEvent<PinchGestureHandlerEventPayload>;
+export type PinchGestureHandlerGestureEvent =
+  GestureEvent<PinchGestureHandlerEventPayload>;
+export type PinchGestureHandlerStateChangeEvent =
+  HandlerStateChangeEvent<PinchGestureHandlerEventPayload>;
 
-export type RotationGestureHandlerGestureEvent = GestureEvent<RotationGestureHandlerEventPayload>;
-export type RotationGestureHandlerStateChangeEvent = HandlerStateChangeEvent<RotationGestureHandlerEventPayload>;
+export type RotationGestureHandlerGestureEvent =
+  GestureEvent<RotationGestureHandlerEventPayload>;
+export type RotationGestureHandlerStateChangeEvent =
+  HandlerStateChangeEvent<RotationGestureHandlerEventPayload>;
 
-export type FlingGestureHandlerGestureEvent = GestureEvent<FlingGestureHandlerEventPayload>;
-export type FlingGestureHandlerStateChangeEvent = HandlerStateChangeEvent<FlingGestureHandlerEventPayload>;
+export type FlingGestureHandlerGestureEvent =
+  GestureEvent<FlingGestureHandlerEventPayload>;
+export type FlingGestureHandlerStateChangeEvent =
+  HandlerStateChangeEvent<FlingGestureHandlerEventPayload>;
 
 // handlers properties
 export type NativeViewGestureHandlerProperties = NativeViewGestureHandlerProps;

package/src/handlers/gestures/GestureDetector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, RefObject } from 'react';
 import {
   GestureType,
   HandlerCallbacks,
@@ -18,6 +18,7 @@ import {
   GestureStateChangeEvent,
   HandlerStateChangeEvent,
   scheduleFlushOperations,
+  UserSelect,
 } from '../gestureHandlerCommon';
 import {
   GestureStateManager,
@@ -125,7 +126,7 @@ interface WebEventHandler {
 
 interface AttachHandlersConfig {
   preparedGesture: GestureConfigReference;
-  gestureConfig: ComposedGesture | GestureType | undefined;
+  gestureConfig: ComposedGesture | GestureType;
   gesture: GestureType[];
   viewTag: number;
   webEventHandlersRef: React.RefObject<WebEventHandler>;
@@ -139,7 +140,7 @@ function attachHandlers({
   webEventHandlersRef,
 }: AttachHandlersConfig) {
   if (!preparedGesture.firstExecution) {
-    gestureConfig?.initialize();
+    gestureConfig.initialize();
   } else {
     preparedGesture.firstExecution = false;
   }
@@ -147,7 +148,7 @@ function attachHandlers({
   // use setImmediate to extract handlerTags, because all refs should be initialized
   // when it's ran
   setImmediate(() => {
-    gestureConfig?.prepare();
+    gestureConfig.prepare();
   });
 
   for (const handler of gesture) {
@@ -197,7 +198,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 +218,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,10 +228,11 @@ function attachHandlers({
 
 function updateHandlers(
   preparedGesture: GestureConfigReference,
-  gestureConfig: ComposedGesture | GestureType | undefined,
-  gesture: GestureType[]
+  gestureConfig: ComposedGesture | GestureType,
+  gesture: GestureType[],
+  mountedRef: RefObject<boolean>
 ) {
-  gestureConfig?.prepare();
+  gestureConfig.prepare();
 
   for (let i = 0; i < gesture.length; i++) {
     const handler = preparedGesture.config[i];
@@ -246,6 +250,9 @@ function updateHandlers(
   // and handlerTags in BaseGesture references should be updated in the loop above (we need to wait
   // in case of external relations)
   setImmediate(() => {
+    if (!mountedRef.current) {
+      return;
+    }
     for (let i = 0; i < gesture.length; i++) {
       const handler = preparedGesture.config[i];
 
@@ -274,9 +281,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>
       >[];
 
@@ -546,9 +553,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) {
@@ -565,16 +574,32 @@ 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;
 }
 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);
+  const mountedRef = useRef(false);
   const webEventHandlersRef = useRef<WebEventHandler>({
     onGestureHandlerEvent: (e: HandlerStateChangeEvent<unknown>) => {
       onGestureHandlerEvent(e.nativeEvent);
@@ -608,7 +633,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
     preparedGesture.firstExecution || needsToReattach(preparedGesture, gesture);
 
   if (preparedGesture.firstExecution) {
-    gestureConfig?.initialize?.();
+    gestureConfig.initialize();
   }
 
   if (useReanimatedHook) {
@@ -619,6 +644,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
 
   useEffect(() => {
     firstRenderRef.current = true;
+    mountedRef.current = true;
     const viewTag = findNodeHandle(viewRef.current) as number;
 
     validateDetectorChildren(viewRef.current);
@@ -631,6 +657,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
     });
 
     return () => {
+      mountedRef.current = false;
       dropHandlers(preparedGesture);
     };
   }, []);
@@ -650,7 +677,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
           webEventHandlersRef,
         });
       } else {
-        updateHandlers(preparedGesture, gestureConfig, gesture);
+        updateHandlers(preparedGesture, gestureConfig, gesture, mountedRef);
       }
     } else {
       firstRenderRef.current = false;

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