react-native-gesture-handler 2.7.1 → 2.8.0

package/lib/typescript/components/DrawerLayout.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Component } from 'react';
 import { Animated, StatusBarAnimation, StyleProp, ViewStyle } from 'react-native';
+import { UserSelect } from '../handlers/gestureHandlerCommon';
 import { PanGestureHandler } from '../handlers/PanGestureHandler';
 export declare type DrawerPosition = 'left' | 'right';
 export declare type DrawerState = 'Idle' | 'Dragging' | 'Settling';
@@ -79,6 +80,12 @@ export interface DrawerLayoutProps {
     onDrawerSlide?: (position: number) => void;
     onGestureRef?: (ref: PanGestureHandler) => void;
     children?: React.ReactNode | ((openValue?: Animated.AnimatedInterpolation) => React.ReactNode);
+    /**
+     * @default 'none'
+     * Defines which userSelect property should be used.
+     * Values: 'none'|'text'|'auto'
+     */
+    userSelect?: UserSelect;
 }
 export declare type DrawerLayoutState = {
     dragX: Animated.Value;

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

@@ -22,7 +22,7 @@ export declare type NativeViewGestureHandlerPayload = {
      */
     pointerInside: boolean;
 };
-export declare const nativeViewProps: readonly ["id", "enabled", "shouldCancelWhenOutside", "hitSlop", "cancelsTouchesInView", "waitFor", "simultaneousHandlers", "onBegan", "onFailed", "onCancelled", "onActivated", "onEnded", "onGestureEvent", "onHandlerStateChange", "shouldActivateOnStart", "disallowInterruption"];
+export declare const nativeViewProps: readonly ["id", "enabled", "shouldCancelWhenOutside", "hitSlop", "cancelsTouchesInView", "userSelect", "waitFor", "simultaneousHandlers", "onBegan", "onFailed", "onCancelled", "onActivated", "onEnded", "onGestureEvent", "onHandlerStateChange", "shouldActivateOnStart", "disallowInterruption"];
 export declare const nativeViewHandlerName = "NativeViewGestureHandler";
 export declare type NativeViewGestureHandler = typeof NativeViewGestureHandler;
 export declare const NativeViewGestureHandler: import("react").ComponentType<NativeViewGestureHandlerProps & import("react").RefAttributes<any>>;

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

@@ -135,5 +135,5 @@ export interface PanGestureHandlerProps extends BaseGestureHandlerProps<PanGestu
 export declare const panHandlerName = "PanGestureHandler";
 export declare type PanGestureHandler = typeof PanGestureHandler;
 export declare const PanGestureHandler: import("react").ComponentType<PanGestureHandlerProps & import("react").RefAttributes<any>>;
-export declare function managePanProps(props: PanGestureHandlerProps): PanGestureHandlerProps & Partial<Record<"failOffsetXStart" | "failOffsetYStart" | "failOffsetXEnd" | "failOffsetYEnd" | "activeOffsetXStart" | "activeOffsetXEnd" | "activeOffsetYStart" | "activeOffsetYEnd", number>>;
+export declare function managePanProps(props: PanGestureHandlerProps): PanGestureHandlerProps & Partial<Record<"activeOffsetXStart" | "activeOffsetXEnd" | "failOffsetXStart" | "failOffsetXEnd" | "activeOffsetYStart" | "activeOffsetYEnd" | "failOffsetYStart" | "failOffsetYEnd", number>>;
 export {};

package/lib/typescript/handlers/gestureHandlerCommon.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { State } from '../State';
 import { TouchEventType } from '../TouchEventType';
 import { ValueOf } from '../typeUtils';
-export declare const baseGestureHandlerProps: readonly ["id", "enabled", "shouldCancelWhenOutside", "hitSlop", "cancelsTouchesInView", "waitFor", "simultaneousHandlers", "onBegan", "onFailed", "onCancelled", "onActivated", "onEnded", "onGestureEvent", "onHandlerStateChange"];
+export declare const baseGestureHandlerProps: readonly ["id", "enabled", "shouldCancelWhenOutside", "hitSlop", "cancelsTouchesInView", "userSelect", "waitFor", "simultaneousHandlers", "onBegan", "onFailed", "onCancelled", "onActivated", "onEnded", "onGestureEvent", "onHandlerStateChange"];
 export declare const baseGestureHandlerWithMonitorProps: string[];
 export interface GestureEventPayload {
     handlerTag: number;
@@ -13,6 +13,7 @@ export interface HandlerStateChangeEventPayload extends GestureEventPayload {
     oldState: ValueOf<typeof State>;
 }
 export declare type HitSlop = number | Partial<Record<'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal', number>> | Record<'width' | 'left', number> | Record<'width' | 'right', number> | Record<'height' | 'top', number> | Record<'height' | 'bottom', number>;
+export declare type UserSelect = 'none' | 'auto' | 'text';
 export interface GestureEvent<ExtraEventPayloadT = Record<string, unknown>> {
     nativeEvent: Readonly<GestureEventPayload & ExtraEventPayloadT>;
 }
@@ -40,6 +41,7 @@ export declare type CommonGestureConfig = {
     enabled?: boolean;
     shouldCancelWhenOutside?: boolean;
     hitSlop?: HitSlop;
+    userSelect?: UserSelect;
 };
 export declare type BaseGestureHandlerProps<ExtraEventPayloadT extends Record<string, unknown> = Record<string, unknown>> = CommonGestureConfig & {
     id?: string;

package/lib/typescript/handlers/gestures/GestureDetector.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { GestureType, HandlerCallbacks } from './gesture';
 import { SharedValue } from './reanimatedWrapper';
+import { UserSelect } from '../gestureHandlerCommon';
 import { ComposedGesture } from './gestureComposition';
 export declare type GestureConfigReference = {
     config: GestureType[];
@@ -10,7 +11,8 @@ export declare type GestureConfigReference = {
     useReanimatedHook: boolean;
 };
 interface GestureDetectorProps {
-    gesture?: ComposedGesture | GestureType;
+    gesture: ComposedGesture | GestureType;
+    userSelect?: UserSelect;
     children?: React.ReactNode;
 }
 export declare const GestureDetector: (props: GestureDetectorProps) => JSX.Element;

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

@@ -1,10 +1,12 @@
-import { AdaptedEvent } from '../interfaces';
+import { AdaptedEvent, Config } from '../interfaces';
 import GestureHandler from './GestureHandler';
 export default class ManualGestureHandler extends GestureHandler {
     init(ref: number, propsRef: React.RefObject<unknown>): void;
+    updateGestureConfig({ enabled, ...props }: Config): void;
     protected onPointerDown(event: AdaptedEvent): void;
     protected onPointerAdd(event: AdaptedEvent): void;
     protected onPointerMove(event: AdaptedEvent): void;
+    protected onPointerOutOfBounds(event: AdaptedEvent): void;
     protected onPointerUp(event: AdaptedEvent): void;
     protected onPointerRemove(event: AdaptedEvent): void;
     protected onPointerCancel(event: AdaptedEvent): void;

package/lib/typescript/web/interfaces.d.ts

@@ -1,3 +1,4 @@
+import { UserSelect } from '../handlers/gestureHandlerCommon';
 import { Directions } from '../Directions';
 import { State } from '../State';
 export interface HitSlop {
@@ -13,13 +14,14 @@ export interface HitSlop {
 export interface Handler {
     handlerTag: number;
 }
-declare type ConfigArgs = number | boolean | HitSlop | Directions | Handler[] | null | undefined;
+declare type ConfigArgs = number | boolean | HitSlop | UserSelect | Directions | Handler[] | null | undefined;
 export interface Config extends Record<string, ConfigArgs> {
     enabled?: boolean;
     simultaneousHandlers?: Handler[] | null;
     waitFor?: Handler[] | null;
     hitSlop?: HitSlop;
     shouldCancelWhenOutside?: boolean;
+    userSelect?: UserSelect;
     activateAfterLongPress?: number;
     failOffsetXStart?: number;
     failOffsetYStart?: number;

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

@@ -2,10 +2,10 @@ import { ValueOf } from '../../typeUtils';
 import { Gestures } from '../../RNGestureHandlerModule.web';
 export default abstract class NodeManager {
     private static gestures;
-    static getHandler(tag: number): import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/NativeViewGestureHandler").default | import("../handlers/ManualGestureHandler").default;
+    static getHandler(tag: number): import("../handlers/NativeViewGestureHandler").default | import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/ManualGestureHandler").default;
     static createGestureHandler(handlerTag: number, handler: InstanceType<ValueOf<typeof Gestures>>): void;
     static dropGestureHandler(handlerTag: number): void;
     static getNodes(): {
-        [x: number]: import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/NativeViewGestureHandler").default | import("../handlers/ManualGestureHandler").default;
+        [x: number]: import("../handlers/NativeViewGestureHandler").default | import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/ManualGestureHandler").default;
     };
 }

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
-    "prepare": "bob build",
+    "prepare": "bob build && husky install",
     "test": "jest",
     "build": "yarn tsc -p tsconfig.build.json",
     "precommit": "lint-staged",
     "release": "npm login && release-it",
     "ts-check": "yarn tsc --noEmit",
-    "lint-check": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check src/"
+    "format:js": "prettier --write --list-different './{src,example,FabricExample}/**/*.{js,jsx,ts,tsx}'",
+    "format:android": "node ./scripts/format-android.js",
+    "format:ios": "find ios/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i",
+    "lint:js": "eslint --ext '.js,.ts,.tsx' src/ example/src FabricExample/src && yarn prettier --check './{src,example,FabricExample}/**/*.{js,jsx,ts,tsx}'",
+    "lint:js-root": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check './src/**/*.{js,jsx,ts,tsx}'",
+    "lint:android": "./android/gradlew -p android spotlessCheck -q"
   },
   "react-native": "src/index.ts",
   "main": "lib/commonjs/index.js",
@@ -28,8 +33,6 @@
     "android/src/main/jni/",
     "android/src/fabric/java",
     "android/src/paper/java",
-    "android/lib/build.gradle",
-    "android/lib/src/main/java/",
     "android/common/src/main/java/",
     "android/reanimated/src/main/java/",
     "android/noreanimated/src/main/java/",
@@ -85,17 +88,18 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "babel-jest": "^26.6.3",
+    "clang-format": "^1.8.0",
     "eslint": "^7.15.0",
     "eslint-config-satya164": "^3.1.8",
     "eslint-import-resolver-babel-module": "^5.2.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^26.0.0",
     "expo": "^35.0.1",
-    "husky": "^0.14.3",
+    "husky": "^8.0.1",
     "jest": "^26.6.3",
     "lint-staged": "^12.3.2",
     "metro-react-native-babel-preset": "^0.64.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.7.1",
     "react": "^16.8.6",
     "react-dom": "^16.12.0",
     "react-native": "^0.64.0",
@@ -111,9 +115,9 @@
     "react-native": "*"
   },
   "lint-staged": {
-    "./src/*.{ts,tsx}": [
-      "prettier --write"
-    ]
+    "./{src,example,FabricExample}/**/*.{ts,tsx}": "yarn format:js",
+    "android/**/*.kt": "yarn format:android",
+    "ios/**/*.{h,m,mm,cpp}": "yarn format:ios"
   },
   "release-it": {
     "hooks": {

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;