react-native-gesture-handler 2.16.0-rc.0 → 2.16.1

package/src/components/GestureComponents.tsx

@@ -1,148 +1,41 @@
 import * as React from 'react';
 import {
-  PropsWithChildren,
-  ForwardedRef,
-  RefAttributes,
-  ReactElement,
-} from 'react';
-import {
-  ScrollView as RNScrollView,
-  ScrollViewProps as RNScrollViewProps,
+  FlatList as RNFlatList,
   Switch as RNSwitch,
-  SwitchProps as RNSwitchProps,
   TextInput as RNTextInput,
-  TextInputProps as RNTextInputProps,
-  DrawerLayoutAndroid as RNDrawerLayoutAndroid,
-  DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,
-  FlatList as RNFlatList,
-  FlatListProps as RNFlatListProps,
-  RefreshControl as RNRefreshControl,
+  ScrollView as RNScrollView,
+  FlatListProps,
+  View,
 } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
 
-import {
-  NativeViewGestureHandlerProps,
-  nativeViewProps,
-} from '../handlers/NativeViewGestureHandler';
-
-import { toArray } from '../utils';
-
-export const RefreshControl = createNativeWrapper(RNRefreshControl, {
-  disallowInterruption: true,
-  shouldCancelWhenOutside: false,
+export const ScrollView = createNativeWrapper(RNScrollView, {
+  disallowInterruption: false,
 });
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type RefreshControl = typeof RefreshControl & RNRefreshControl;
-
-const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
-  RNScrollView,
-  {
-    disallowInterruption: true,
-    shouldCancelWhenOutside: false,
-  }
-);
-export const ScrollView = React.forwardRef<
-  RNScrollView,
-  RNScrollViewProps & NativeViewGestureHandlerProps
->((props, ref) => {
-  const refreshControlGestureRef = React.useRef<RefreshControl>(null);
-  const { refreshControl, waitFor, ...rest } = props;
 
-  return (
-    <GHScrollView
-      {...rest}
-      // @ts-ignore `ref` exists on `GHScrollView`
-      ref={ref}
-      waitFor={[...toArray(waitFor ?? []), refreshControlGestureRef]}
-      // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
-      refreshControl={
-        refreshControl
-          ? React.cloneElement(refreshControl, {
-              // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
-              ref: refreshControlGestureRef,
-            })
-          : undefined
-      }
-    />
-  );
-});
-// backward type compatibility with https://github.com/software-mansion/react-native-gesture-handler/blob/db78d3ca7d48e8ba57482d3fe9b0a15aa79d9932/react-native-gesture-handler.d.ts#L440-L457
-// include methods of wrapped components by creating an intersection type with the RN component instead of duplicating them.
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type ScrollView = typeof GHScrollView & RNScrollView;
-
-export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
+export const Switch = createNativeWrapper(RNSwitch, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: true,
   disallowInterruption: true,
 });
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type Switch = typeof Switch & RNSwitch;
-
-export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type TextInput = typeof TextInput & RNTextInput;
-
-export const DrawerLayoutAndroid = createNativeWrapper<
-  PropsWithChildren<RNDrawerLayoutAndroidProps>
->(RNDrawerLayoutAndroid, { disallowInterruption: true });
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid &
-  RNDrawerLayoutAndroid;
-
-export const FlatList = React.forwardRef((props, ref) => {
-  const refreshControlGestureRef = React.useRef<RefreshControl>(null);
-
-  const { waitFor, refreshControl, ...rest } = props;
-
-  const flatListProps = {};
-  const scrollViewProps = {};
-  for (const [propName, value] of Object.entries(rest)) {
-    // https://github.com/microsoft/TypeScript/issues/26255
-    if ((nativeViewProps as readonly string[]).includes(propName)) {
-      // @ts-ignore - this function cannot have generic type so we have to ignore this error
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      scrollViewProps[propName] = value;
-    } else {
-      // @ts-ignore - this function cannot have generic type so we have to ignore this error
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      flatListProps[propName] = value;
-    }
-  }
-
-  return (
-    // @ts-ignore - this function cannot have generic type so we have to ignore this error
+export const TextInput = createNativeWrapper(RNTextInput);
+export const DrawerLayoutAndroid = () => {
+  console.warn('DrawerLayoutAndroid is not supported on web!');
+  return <View />;
+};
+
+// RefreshControl is implemented as a functional component, rendering a View
+// NativeViewGestureHandler needs to set a ref on its child, which cannot be done
+// on functional components
+export const RefreshControl = createNativeWrapper(View);
+
+export const FlatList = React.forwardRef(
+  <ItemT extends any>(props: FlatListProps<ItemT>, ref: any) => (
     <RNFlatList
       ref={ref}
-      {...flatListProps}
-      renderScrollComponent={(scrollProps) => (
-        <ScrollView
-          {...{
-            ...scrollProps,
-            ...scrollViewProps,
-            waitFor: [...toArray(waitFor ?? []), refreshControlGestureRef],
-          }}
-        />
-      )}
-      // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
-      refreshControl={
-        refreshControl
-          ? React.cloneElement(refreshControl, {
-              // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
-              ref: refreshControlGestureRef,
-            })
-          : undefined
-      }
+      {...props}
+      renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
     />
-  );
-}) as <ItemT = any>(
-  props: PropsWithChildren<
-    RNFlatListProps<ItemT> &
-      RefAttributes<FlatList<ItemT>> &
-      NativeViewGestureHandlerProps
-  >,
-  ref: ForwardedRef<FlatList<ItemT>>
-) => ReactElement | null;
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;
+  )
+);

package/src/components/GestureHandlerButton.native.tsx

@@ -0,0 +1,5 @@
+import { HostComponent } from 'react-native';
+import { RawButtonProps } from './GestureButtons';
+import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
+
+export default RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;

package/src/components/GestureHandlerButton.tsx

@@ -1,5 +1,6 @@
-import { HostComponent } from 'react-native';
-import { RawButtonProps } from './GestureButtons';
-import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
+import * as React from 'react';
+import { View } from 'react-native';
 
-export default RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;
+export default React.forwardRef<View>((props, ref) => (
+  <View ref={ref} accessibilityRole="button" {...props} />
+));

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { View, ViewProps, StyleSheet } from 'react-native';
+import { maybeInitializeFabric } from '../init';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 export interface GestureHandlerRootViewProps
@@ -10,6 +11,11 @@ export default function GestureHandlerRootView({
   style,
   ...rest
 }: GestureHandlerRootViewProps) {
+  // try initialize fabric on the first render, at this point we can
+  // reliably check if fabric is enabled (the function contains a flag
+  // to make sure it's called only once)
+  maybeInitializeFabric();
+
   return (
     <GestureHandlerRootViewContext.Provider value>
       <View style={style ?? styles.container} {...rest} />

package/src/components/GestureHandlerRootView.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { View, ViewProps, StyleSheet } from 'react-native';
-import { maybeInitializeFabric } from '../init';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 export interface GestureHandlerRootViewProps
@@ -11,11 +10,6 @@ export default function GestureHandlerRootView({
   style,
   ...rest
 }: GestureHandlerRootViewProps) {
-  // try initialize fabric on the first render, at this point we can
-  // reliably check if fabric is enabled (the function contains a flag
-  // to make sure it's called only once)
-  maybeInitializeFabric();
-
   return (
     <GestureHandlerRootViewContext.Provider value>
       <View style={style ?? styles.container} {...rest} />

package/src/components/Swipeable.tsx

@@ -541,6 +541,7 @@ export default class Swipeable extends Component<
     return (
       <PanGestureHandler
         activeOffsetX={[-dragOffsetFromRightEdge, dragOffsetFromLeftEdge]}
+        touchAction="pan-y"
         {...this.props}
         onGestureEvent={this.onGestureEvent}
         onHandlerStateChange={this.onHandlerStateChange}>
@@ -551,6 +552,7 @@ export default class Swipeable extends Component<
           {right}
           <TapGestureHandler
             enabled={rowState !== 0}
+            touchAction="pan-y"
             onHandlerStateChange={this.onTapHandlerStateChange}>
             <Animated.View
               pointerEvents={rowState === 0 ? 'auto' : 'box-only'}

package/src/components/touchables/GenericTouchable.tsx

@@ -15,6 +15,7 @@ import { BaseButton } from '../GestureButtons';
 import {
   GestureEvent,
   HandlerStateChangeEvent,
+  UserSelect,
 } from '../../handlers/gestureHandlerCommon';
 import { NativeViewGestureHandlerPayload } from '../../handlers/NativeViewGestureHandler';
 import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedback.android';
@@ -51,6 +52,7 @@ export interface GenericTouchableProps
 
   containerStyle?: StyleProp<ViewStyle>;
   hitSlop?: Insets | number;
+  userSelect?: UserSelect;
 }
 
 interface InternalProps {
@@ -286,6 +288,7 @@ export default class GenericTouchable extends Component<
         }
         onGestureEvent={this.onGestureEvent}
         hitSlop={hitSlop}
+        userSelect={this.props.userSelect}
         shouldActivateOnStart={this.props.shouldActivateOnStart}
         disallowInterruption={this.props.disallowInterruption}
         testID={this.props.testID}

package/src/getReactNativeVersion.native.ts

@@ -0,0 +1,11 @@
+import pack from 'react-native/package.json';
+
+const [majorStr, minorStr] = pack.version.split('.');
+const REACT_NATIVE_VERSION = {
+  major: parseInt(majorStr, 10),
+  minor: parseInt(minorStr, 10),
+};
+
+export function getReactNativeVersion() {
+  return REACT_NATIVE_VERSION;
+}

package/src/getReactNativeVersion.ts

@@ -1,11 +1,3 @@
-import pack from 'react-native/package.json';
-
-const [majorStr, minorStr] = pack.version.split('.');
-const REACT_NATIVE_VERSION = {
-  major: parseInt(majorStr, 10),
-  minor: parseInt(minorStr, 10),
-};
-
 export function getReactNativeVersion() {
-  return REACT_NATIVE_VERSION;
+  throw new Error('getReactNativeVersion is not supported on web');
 }

package/src/getShadowNodeFromRef.native.ts

@@ -0,0 +1,44 @@
+// Used by GestureDetector (unsupported on web at the moment) to check whether the
+// attached view may get flattened on Fabric. This implementation causes errors
+// on web due to the static resolution of `require` statements by webpack breaking
+// the conditional importing. Solved by making .web file.
+let findHostInstance_DEPRECATED: (ref: unknown) => void;
+let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
+  stateNode: { node: unknown };
+};
+
+export function getShadowNodeFromRef(ref: unknown) {
+  // load findHostInstance_DEPRECATED lazily because it may not be available before render
+  if (findHostInstance_DEPRECATED === undefined) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      findHostInstance_DEPRECATED =
+        // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access
+        require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
+    } catch (e) {
+      findHostInstance_DEPRECATED = (_ref: unknown) => null;
+    }
+  }
+
+  // load findHostInstance_DEPRECATED lazily because it may not be available before render
+  if (getInternalInstanceHandleFromPublicInstance === undefined) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      getInternalInstanceHandleFromPublicInstance =
+        // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access
+        require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance')
+          .getInternalInstanceHandleFromPublicInstance ??
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+        ((ref: any) => ref._internalInstanceHandle);
+    } catch (e) {
+      getInternalInstanceHandleFromPublicInstance = (ref: any) =>
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+        ref._internalInstanceHandle;
+    }
+  }
+
+  // @ts-ignore Fabric
+  return getInternalInstanceHandleFromPublicInstance(
+    findHostInstance_DEPRECATED(ref)
+  ).stateNode.node;
+}

package/src/getShadowNodeFromRef.ts

@@ -1,44 +1,7 @@
 // Used by GestureDetector (unsupported on web at the moment) to check whether the
-// attached view may get flattened on Fabric. This implementation causes errors
+// attached view may get flattened on Fabric. Original implementation causes errors
 // on web due to the static resolution of `require` statements by webpack breaking
-// the conditional importing. Solved by making .web file.
-let findHostInstance_DEPRECATED: (ref: unknown) => void;
-let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
-  stateNode: { node: unknown };
-};
-
-export function getShadowNodeFromRef(ref: unknown) {
-  // load findHostInstance_DEPRECATED lazily because it may not be available before render
-  if (findHostInstance_DEPRECATED === undefined) {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      findHostInstance_DEPRECATED =
-        // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access
-        require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
-    } catch (e) {
-      findHostInstance_DEPRECATED = (_ref: unknown) => null;
-    }
-  }
-
-  // load findHostInstance_DEPRECATED lazily because it may not be available before render
-  if (getInternalInstanceHandleFromPublicInstance === undefined) {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      getInternalInstanceHandleFromPublicInstance =
-        // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access
-        require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance')
-          .getInternalInstanceHandleFromPublicInstance ??
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
-        ((ref: any) => ref._internalInstanceHandle);
-    } catch (e) {
-      getInternalInstanceHandleFromPublicInstance = (ref: any) =>
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
-        ref._internalInstanceHandle;
-    }
-  }
-
-  // @ts-ignore Fabric
-  return getInternalInstanceHandleFromPublicInstance(
-    findHostInstance_DEPRECATED(ref)
-  ).stateNode.node;
+// the conditional importing.
+export function getShadowNodeFromRef(_ref: any) {
+  return null;
 }

package/src/handlers/PanGestureHandler.ts

@@ -150,7 +150,9 @@ export interface PanGestureHandlerProps
    * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
    * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
    */
-  activeOffsetY?: number | number[];
+  activeOffsetY?:
+    | number
+    | [activeOffsetYStart: number, activeOffsetYEnd: number];
 
   /**
    * Range along X axis (in points) where fingers travels without activation of
@@ -160,7 +162,9 @@ export interface PanGestureHandlerProps
    * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
    * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
    */
-  activeOffsetX?: number | number[];
+  activeOffsetX?:
+    | number
+    | [activeOffsetXStart: number, activeOffsetXEnd: number];
 
   /**
    * When the finger moves outside this range (in points) along Y axis and
@@ -170,7 +174,7 @@ export interface PanGestureHandlerProps
    * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
    * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
    */
-  failOffsetY?: number | number[];
+  failOffsetY?: number | [failOffsetYStart: number, failOffsetYEnd: number];
 
   /**
    * When the finger moves outside this range (in points) along X axis and
@@ -180,7 +184,7 @@ export interface PanGestureHandlerProps
    * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
    * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
    */
-  failOffsetX?: number | number[];
+  failOffsetX?: number | [failOffsetXStart: number, failOffsetXEnd: number];
 }
 
 export const panHandlerName = 'PanGestureHandler';

package/src/handlers/PressabilityDebugView.native.tsx

@@ -0,0 +1,2 @@
+// @ts-ignore it's not exported so we need to import it from path
+export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug';

package/src/handlers/PressabilityDebugView.tsx

@@ -1,2 +1,4 @@
-// @ts-ignore it's not exported so we need to import it from path
-export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug';
+// PressabilityDebugView is not implemented in react-native-web
+export function PressabilityDebugView() {
+  return null;
+}

package/src/handlers/createHandler.tsx

@@ -5,12 +5,10 @@ import {
   DeviceEventEmitter,
   EmitterSubscription,
 } from 'react-native';
-// @ts-ignore - its taken straight from RN
-import { customDirectEventTypes } from 'react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry';
+import { customDirectEventTypes } from './customDirectEventTypes';
 // @ts-ignore - it isn't typed by TS & don't have definitelyTyped types
 import deepEqual from 'lodash/isEqual';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
-import type RNGestureHandlerModuleWeb from '../RNGestureHandlerModule.web';
 import { State } from '../State';
 import {
   handlerIDToTag,
@@ -155,6 +153,14 @@ type InternalEventHandlers = {
   onGestureHandlerStateChange?: (event: any) => void;
 };
 
+type AttachGestureHandlerWeb = (
+  handlerTag: number,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  newView: any,
+  _actionType: ActionType,
+  propsRef: React.RefObject<unknown>
+) => void;
+
 const UNRESOLVED_REFS_RETRY_LIMIT = 1;
 
 // TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
@@ -321,7 +327,7 @@ 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 AttachGestureHandlerWeb
         )(
           this.handlerTag,
           newViewTag,
@@ -335,18 +341,22 @@ export default function createHandler<
         });
 
         const actionType = (() => {
-          if (
-            (this.props?.onGestureEvent &&
-              'current' in this.props.onGestureEvent) ||
-            (this.props?.onHandlerStateChange &&
-              'current' in this.props.onHandlerStateChange)
-          ) {
+          const onGestureEvent = this.props?.onGestureEvent;
+          const isGestureHandlerWorklet =
+            onGestureEvent &&
+            ('current' in onGestureEvent ||
+              'workletEventHandler' in onGestureEvent);
+          const onHandlerStateChange = this.props?.onHandlerStateChange;
+          const isStateChangeHandlerWorklet =
+            onHandlerStateChange &&
+            ('current' in onHandlerStateChange ||
+              'workletEventHandler' in onHandlerStateChange);
+          const isReanimatedHandler =
+            isGestureHandlerWorklet || isStateChangeHandlerWorklet;
+          if (isReanimatedHandler) {
             // Reanimated worklet
             return ActionType.REANIMATED_WORKLET;
-          } else if (
-            this.props?.onGestureEvent &&
-            '__isNative' in this.props.onGestureEvent
-          ) {
+          } else if (onGestureEvent && '__isNative' in onGestureEvent) {
             // Animated.event with useNativeDriver: true
             return ActionType.NATIVE_ANIMATED_EVENT;
           } else {

package/src/handlers/customDirectEventTypes.native.ts

@@ -0,0 +1,2 @@
+// @ts-ignore - its taken straight from RN
+export { customDirectEventTypes } from 'react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry';

package/src/handlers/customDirectEventTypes.ts

@@ -0,0 +1,5 @@
+// customDirectEventTypes doesn't exist in react-native-web, therefore importing it
+// directly in createHandler.tsx would end in crash.
+const customDirectEventTypes = {};
+
+export { customDirectEventTypes };

package/src/handlers/gestureHandlerCommon.ts

@@ -12,7 +12,6 @@ import { handlerIDToTag } from './handlersRegistry';
 import { toArray } from '../utils';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 import { ghQueueMicrotask } from '../ghQueueMicrotask';
-import { MouseButton } from '../web/interfaces';
 import { PointerType } from '../PointerType';
 
 const commonProps = [
@@ -25,6 +24,7 @@ const commonProps = [
   'activeCursor',
   'mouseButton',
   'enableContextMenu',
+  'touchAction',
 ] as const;
 
 const componentInteractionProps = [
@@ -113,6 +113,32 @@ export type ActiveCursor =
   | 'zoom-in'
   | 'zoom-out';
 
+export enum MouseButton {
+  LEFT = 1,
+  RIGHT = 2,
+  MIDDLE = 4,
+  BUTTON_4 = 8,
+  BUTTON_5 = 16,
+  ALL = 31,
+}
+
+export type TouchAction =
+  | 'auto'
+  | 'none'
+  | 'pan-x'
+  | 'pan-left'
+  | 'pan-right'
+  | 'pan-y'
+  | 'pan-up'
+  | 'pan-down'
+  | 'pinch-zoom'
+  | 'manipulation'
+  | 'inherit'
+  | 'initial'
+  | 'revert'
+  | 'revert-layer'
+  | 'unset';
+
 //TODO(TS) events in handlers
 
 export interface GestureEvent<ExtraEventPayloadT = Record<string, unknown>> {
@@ -156,6 +182,7 @@ export type CommonGestureConfig = {
   activeCursor?: ActiveCursor;
   mouseButton?: MouseButton;
   enableContextMenu?: boolean;
+  touchAction?: TouchAction;
 };
 
 // Events payloads are types instead of interfaces due to TS limitation.