react-native-gesture-handler 2.22.1 → 2.23.0

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

@@ -6,7 +6,7 @@ export interface MeasureResult {
     height: number;
 }
 export interface GestureHandlerDelegate<TComponent, THandler> {
-    getView(): TComponent;
+    view: TComponent;
     init(viewRef: number, handler: THandler): void;
     isPointerInBounds({ x, y }: {
         x: number;

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

@@ -1,7 +1,7 @@
 import { State } from '../../State';
 import type IGestureHandler from '../handlers/IGestureHandler';
 export default class GestureHandlerOrchestrator {
-    private static instance;
+    private static _instance;
     private gestureHandlers;
     private awaitingHandlers;
     private awaitingHandlersTags;
@@ -27,5 +27,5 @@ export default class GestureHandlerOrchestrator {
     private checkOverlap;
     private isFinished;
     cancelMouseAndPenGestures(currentHandler: IGestureHandler): void;
-    static getInstance(): GestureHandlerOrchestrator;
+    static get instance(): GestureHandlerOrchestrator;
 }

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

@@ -3,11 +3,10 @@ import { GestureHandlerDelegate, MeasureResult } from './GestureHandlerDelegate'
 import { Config } from '../interfaces';
 export declare class GestureHandlerWebDelegate implements GestureHandlerDelegate<HTMLElement, IGestureHandler> {
     private isInitialized;
-    private view;
+    private _view;
     private gestureHandler;
     private eventManagers;
     private defaultViewStyles;
-    getView(): HTMLElement;
     init(viewRef: number, handler: IGestureHandler): void;
     isPointerInBounds({ x, y }: {
         x: number;
@@ -31,4 +30,6 @@ export declare class GestureHandlerWebDelegate implements GestureHandlerDelegate
     onCancel(): void;
     onFail(): void;
     destroy(config: Config): void;
+    get view(): HTMLElement;
+    set view(value: HTMLElement);
 }

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

@@ -1,7 +1,7 @@
 import type IGestureHandler from '../handlers/IGestureHandler';
 import { Config } from '../interfaces';
 export default class InteractionManager {
-    private static instance;
+    private static _instance;
     private readonly waitForRelations;
     private readonly simultaneousRelations;
     private readonly blocksHandlersRelations;
@@ -13,5 +13,5 @@ export default class InteractionManager {
     shouldHandlerBeCancelledBy(_handler: IGestureHandler, otherHandler: IGestureHandler): boolean;
     dropRelationsForHandlerWithTag(handlerTag: number): void;
     reset(): void;
-    static getInstance(): InteractionManager;
+    static get instance(): InteractionManager;
 }

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

@@ -6,7 +6,7 @@ export default abstract class NodeManager {
     static getHandler(tag: number): IGestureHandler;
     static createGestureHandler(handlerTag: number, handler: InstanceType<ValueOf<typeof Gestures>>): void;
     static dropGestureHandler(handlerTag: number): void;
-    static getNodes(): {
+    static get nodes(): {
         [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 | import("../handlers/HoverGestureHandler").default;
     };
 }

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

@@ -8,7 +8,7 @@ export interface TrackerElement {
 }
 export default class PointerTracker {
     private velocityTracker;
-    private trackedPointers;
+    private readonly _trackedPointers;
     private touchEventsIds;
     private lastMovedPointerId;
     private cachedAbsoluteAverages;
@@ -42,9 +42,9 @@ export default class PointerTracker {
         x: number;
         y: number;
     };
-    getTrackedPointersCount(): number;
-    getTrackedPointersID(): number[];
-    getData(): Map<number, TrackerElement>;
     resetTracker(): void;
     static shareCommonPointers(stPointers: number[], ndPointers: number[]): boolean;
+    get trackedPointersCount(): number;
+    get trackedPointersIDs(): number[];
+    get trackedPointers(): Map<number, TrackerElement>;
 }

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

@@ -8,6 +8,6 @@ export default class VelocityTracker {
     constructor();
     add(event: AdaptedEvent): void;
     private getVelocityEstimate;
-    getVelocity(): [number, number];
+    get velocity(): [number, number];
     reset(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.22.1",
+  "version": "2.23.0",
   "description": "Declarative API exposing native platform touch and gesture system to React Native",
   "scripts": {
     "prepare": "bob build && husky install",
@@ -99,7 +99,7 @@
     "react": "18.3.1",
     "react-native": "0.77.0-rc.3",
     "react-native-builder-bob": "^0.17.1",
-    "react-native-reanimated": "^3.12.0",
+    "react-native-reanimated": "^3.16.3",
     "react-test-renderer": "18.2.0",
     "release-it": "^13.6.5",
     "typescript": "5.0.4"

package/src/RNGestureHandlerModule.web.ts

@@ -40,7 +40,7 @@ export default {
         handlerTag,
         new GestureClass(new GestureHandlerWebDelegate())
       );
-      InteractionManager.getInstance().configureInteractions(
+      InteractionManager.instance.configureInteractions(
         NodeManager.getHandler(handlerTag),
         config as unknown as Config
       );
@@ -93,7 +93,7 @@ export default {
     if (isNewWebImplementationEnabled()) {
       NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
 
-      InteractionManager.getInstance().configureInteractions(
+      InteractionManager.instance.configureInteractions(
         NodeManager.getHandler(handlerTag),
         newConfig
       );

package/src/components/DrawerLayout.tsx

@@ -44,20 +44,39 @@ const IDLE: DrawerState = 'Idle';
 const DRAGGING: DrawerState = 'Dragging';
 const SETTLING: DrawerState = 'Settling';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerPosition = 'left' | 'right';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerState = 'Idle' | 'Dragging' | 'Settling';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerType = 'front' | 'back' | 'slide';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
 
 // Animated.AnimatedInterpolation has been converted to a generic type
 // in @types/react-native 0.70. This way we can maintain compatibility
 // with all versions of @types/react-native`
 type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
+
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export interface DrawerLayoutProps {
   /**
    * This attribute is present in the standard implementation already and is one
@@ -186,6 +205,9 @@ export interface DrawerLayoutProps {
   enableContextMenu?: boolean;
 }
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerLayoutState = {
   dragX: Animated.Value;
   touchX: Animated.Value;
@@ -195,10 +217,17 @@ export type DrawerLayoutState = {
   drawerOpened: boolean;
 };
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerMovementOption = {
   velocity?: number;
   speed?: number;
 };
+
+/**
+ * @deprecated use Reanimated version of DrawerLayout instead
+ */
 export default class DrawerLayout extends Component<
   DrawerLayoutProps,
   DrawerLayoutState

package/src/components/GestureButtons.tsx

@@ -18,12 +18,15 @@ import type {
   BorderlessButtonWithRefProps,
   BorderlessButtonProps,
 } from './GestureButtonsProps';
+import { isFabric } from '../utils';
 
 export const RawButton = createNativeWrapper(GestureHandlerButton, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: false,
 });
 
+let IS_FABRIC: null | boolean = null;
+
 class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
   static defaultProps = {
     delayLongPress: 600,
@@ -120,12 +123,20 @@ class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
   };
 
   render() {
-    const { rippleColor, style, ...rest } = this.props;
+    const { rippleColor: unprocessedRippleColor, style, ...rest } = this.props;
+
+    if (IS_FABRIC === null) {
+      IS_FABRIC = isFabric();
+    }
+
+    const rippleColor = IS_FABRIC
+      ? unprocessedRippleColor
+      : processColor(unprocessedRippleColor ?? undefined);
 
     return (
       <RawButton
         ref={this.props.innerRef}
-        rippleColor={processColor(rippleColor)}
+        rippleColor={rippleColor}
         style={[style, Platform.OS === 'ios' && { cursor: undefined }]}
         {...rest}
         onGestureEvent={this.onGestureEvent}

package/src/components/GestureButtonsProps.ts

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+import {
+  AccessibilityProps,
+  ColorValue,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import type { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
 
 export interface RawButtonProps
@@ -16,7 +21,7 @@ export interface RawButtonProps
    *
    * Defines color of native ripple animation used since API level 21.
    */
-  rippleColor?: any; // it was present in BaseButtonProps before but is used here in code
+  rippleColor?: number | ColorValue | null;
 
   /**
    * Android only.
@@ -50,6 +55,30 @@ export interface RawButtonProps
    * Style object, use it to set additional styles.
    */
   style?: StyleProp<ViewStyle>;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onPress?: Function | null;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onPressIn?: Function | null;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onPressOut?: Function | null;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onLongPress?: Function | null;
 }
 interface ButtonWithRefProps {
   innerRef?: React.ForwardedRef<React.ComponentType<any>>;

package/src/components/Pressable/Pressable.tsx

@@ -20,9 +20,12 @@ import {
 } from './utils';
 import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
 import { GestureTouchEvent } from '../../handlers/gestureHandlerCommon';
-import { INT32_MAX } from '../../utils';
+import { INT32_MAX, isFabric, isTestEnv } from '../../utils';
 
 const DEFAULT_LONG_PRESS_DURATION = 500;
+const IS_TEST_ENV = isTestEnv();
+
+let IS_FABRIC: null | boolean = null;
 
 export default function Pressable(props: PressableProps) {
   const {
@@ -366,8 +369,6 @@ export default function Pressable(props: PressableProps) {
 
   const gesture = Gesture.Simultaneous(...gestures);
 
-  const defaultRippleColor = android_ripple ? undefined : 'transparent';
-
   // `cursor: 'pointer'` on `RNButton` crashes iOS
   const pointerStyle: StyleProp<ViewStyle> =
     Platform.OS === 'web' ? { cursor: 'pointer' } : {};
@@ -380,6 +381,18 @@ export default function Pressable(props: PressableProps) {
       ? children({ pressed: pressedState })
       : children;
 
+  const rippleColor = useMemo(() => {
+    if (IS_FABRIC === null) {
+      IS_FABRIC = isFabric();
+    }
+
+    const defaultRippleColor = android_ripple ? undefined : 'transparent';
+    const unprocessedRippleColor = android_ripple?.color ?? defaultRippleColor;
+    return IS_FABRIC
+      ? unprocessedRippleColor
+      : processColor(unprocessedRippleColor);
+  }, [android_ripple]);
+
   return (
     <GestureDetector gesture={gesture}>
       <NativeButton
@@ -388,9 +401,13 @@ export default function Pressable(props: PressableProps) {
         hitSlop={appliedHitSlop}
         enabled={isPressableEnabled}
         touchSoundDisabled={android_disableSound ?? undefined}
-        rippleColor={processColor(android_ripple?.color ?? defaultRippleColor)}
+        rippleColor={rippleColor}
         rippleRadius={android_ripple?.radius ?? undefined}
-        style={[pointerStyle, styleProp]}>
+        style={[pointerStyle, styleProp]}
+        testOnly_onPress={IS_TEST_ENV ? onPress : undefined}
+        testOnly_onPressIn={IS_TEST_ENV ? onPressIn : undefined}
+        testOnly_onPressOut={IS_TEST_ENV ? onPressOut : undefined}
+        testOnly_onLongPress={IS_TEST_ENV ? onLongPress : undefined}>
         {childrenProp}
         {__DEV__ ? (
           <PressabilityDebugView color="red" hitSlop={normalizedHitSlop} />

package/src/components/Pressable/PressableProps.tsx

@@ -1,22 +1,15 @@
 import {
-  ColorValue,
   AccessibilityProps,
   ViewProps,
   Insets,
   StyleProp,
   ViewStyle,
+  PressableStateCallbackType as RNPressableStateCallbackType,
+  PressableAndroidRippleConfig as RNPressableAndroidRippleConfig,
 } from 'react-native';
 
-export interface PressableStateCallbackType {
-  readonly pressed: boolean;
-}
-
-export interface PressableAndroidRippleConfig {
-  color?: null | ColorValue | undefined;
-  borderless?: null | boolean | undefined;
-  radius?: null | number | undefined;
-  foreground?: null | boolean | undefined;
-}
+export type PressableStateCallbackType = RNPressableStateCallbackType;
+export type PressableAndroidRippleConfig = RNPressableAndroidRippleConfig;
 
 export type InnerPressableEvent = {
   changedTouches: InnerPressableEvent[];

package/src/components/Pressable/index.ts

@@ -1,2 +1,5 @@
-export type { PressableProps } from './PressableProps';
+export type {
+  PressableProps,
+  PressableStateCallbackType,
+} from './PressableProps';
 export { default } from './Pressable';

package/src/components/ReanimatedSwipeable.tsx

@@ -9,6 +9,7 @@ import React, {
   useImperativeHandle,
   useMemo,
 } from 'react';
+import { GestureRef } from '../handlers/gestures/gesture';
 import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
 import { GestureDetector } from '../handlers/gestures/GestureDetector';
 import {
@@ -202,6 +203,14 @@ export interface SwipeableProps
    * apply `flex: 1`
    */
   childrenContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the swipeable's gesture handler.
+   */
+  simultaneousWithExternalGesture?:
+    | Exclude<GestureRef, number>
+    | Exclude<GestureRef, number>[];
 }
 
 export interface SwipeableMethods {
@@ -247,6 +256,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       onSwipeableClose,
       renderLeftActions,
       renderRightActions,
+      simultaneousWithExternalGesture,
       ...remainingProps
     } = props;
 
@@ -456,7 +466,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       rightLayoutRef,
       leftWidth,
       rightWidth,
-      rowWidth.value,
+      rowWidth,
     ]);
 
     const swipeableMethods = useMemo<SwipeableMethods>(
@@ -635,73 +645,94 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
 
     const dragStarted = useSharedValue<boolean>(false);
 
-    const tapGesture = useMemo(
-      () =>
-        Gesture.Tap()
-          .shouldCancelWhenOutside(true)
-          .onStart(() => {
-            if (rowState.value !== 0) {
-              close();
-            }
-          }),
-      [close, rowState]
-    );
-
-    const panGesture = useMemo(
-      () =>
-        Gesture.Pan()
-          .enabled(enabled !== false)
-          .enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture)
-          .activeOffsetX([-dragOffsetFromRightEdge, dragOffsetFromLeftEdge])
-          .onStart(updateElementWidths)
-          .onUpdate(
-            (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
-              userDrag.value = event.translationX;
-
-              const direction =
-                rowState.value === -1
-                  ? SwipeDirection.RIGHT
-                  : rowState.value === 1
-                    ? SwipeDirection.LEFT
-                    : event.translationX > 0
-                      ? SwipeDirection.RIGHT
-                      : SwipeDirection.LEFT;
-
-              if (!dragStarted.value) {
-                dragStarted.value = true;
-                if (rowState.value === 0 && onSwipeableOpenStartDrag) {
-                  runOnJS(onSwipeableOpenStartDrag)(direction);
-                } else if (onSwipeableCloseStartDrag) {
-                  runOnJS(onSwipeableCloseStartDrag)(direction);
-                }
+    const tapGesture = useMemo(() => {
+      const tap = Gesture.Tap()
+        .shouldCancelWhenOutside(true)
+        .onStart(() => {
+          if (rowState.value !== 0) {
+            close();
+          }
+        });
+
+      if (!simultaneousWithExternalGesture) {
+        return tap;
+      }
+
+      if (Array.isArray(simultaneousWithExternalGesture)) {
+        tap.simultaneousWithExternalGesture(...simultaneousWithExternalGesture);
+      } else {
+        tap.simultaneousWithExternalGesture(simultaneousWithExternalGesture);
+      }
+
+      return tap;
+    }, [close, rowState, simultaneousWithExternalGesture]);
+
+    const panGesture = useMemo(() => {
+      const pan = Gesture.Pan()
+        .enabled(enabled !== false)
+        .enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture)
+        .activeOffsetX([-dragOffsetFromRightEdge, dragOffsetFromLeftEdge])
+        .onStart(updateElementWidths)
+        .onUpdate(
+          (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+            userDrag.value = event.translationX;
+
+            const direction =
+              rowState.value === -1
+                ? SwipeDirection.RIGHT
+                : rowState.value === 1
+                  ? SwipeDirection.LEFT
+                  : event.translationX > 0
+                    ? SwipeDirection.RIGHT
+                    : SwipeDirection.LEFT;
+
+            if (!dragStarted.value) {
+              dragStarted.value = true;
+              if (rowState.value === 0 && onSwipeableOpenStartDrag) {
+                runOnJS(onSwipeableOpenStartDrag)(direction);
+              } else if (onSwipeableCloseStartDrag) {
+                runOnJS(onSwipeableCloseStartDrag)(direction);
               }
-
-              updateAnimatedEvent();
-            }
-          )
-          .onEnd(
-            (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
-              handleRelease(event);
             }
-          )
-          .onFinalize(() => {
-            dragStarted.value = false;
-          }),
-      [
-        dragOffsetFromLeftEdge,
-        dragOffsetFromRightEdge,
-        dragStarted,
-        enableTrackpadTwoFingerGesture,
-        enabled,
-        handleRelease,
-        onSwipeableCloseStartDrag,
-        onSwipeableOpenStartDrag,
-        rowState,
-        updateAnimatedEvent,
-        updateElementWidths,
-        userDrag,
-      ]
-    );
+
+            updateAnimatedEvent();
+          }
+        )
+        .onEnd(
+          (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+            handleRelease(event);
+          }
+        )
+        .onFinalize(() => {
+          dragStarted.value = false;
+        });
+
+      if (!simultaneousWithExternalGesture) {
+        return pan;
+      }
+
+      if (Array.isArray(simultaneousWithExternalGesture)) {
+        pan.simultaneousWithExternalGesture(...simultaneousWithExternalGesture);
+      } else {
+        pan.simultaneousWithExternalGesture(simultaneousWithExternalGesture);
+      }
+
+      return pan;
+    }, [
+      dragOffsetFromLeftEdge,
+      dragOffsetFromRightEdge,
+      dragStarted,
+      enableTrackpadTwoFingerGesture,
+      enabled,
+      handleRelease,
+      onSwipeableCloseStartDrag,
+      onSwipeableOpenStartDrag,
+      rowState,
+      updateAnimatedEvent,
+      updateElementWidths,
+      userDrag,
+      simultaneousWithExternalGesture,
+    ]);
 
     useImperativeHandle(ref, () => swipeableMethods, [swipeableMethods]);
 

package/src/components/Text.tsx

@@ -11,11 +11,13 @@ import {
   TextProps as RNTextProps,
 } from 'react-native';
 
-import { Gesture, GestureDetector } from '../';
+import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
+import { GestureDetector } from '../handlers/gestures/GestureDetector';
 
 export const Text = forwardRef(
   (props: RNTextProps, ref: ForwardedRef<RNText>) => {
-    const { onPress, ...rest } = props;
+    const { onPress, onLongPress, ...rest } = props;
+
     const textRef = useRef<RNText | null>(null);
     const native = Gesture.Native().runOnJS(true);
 
@@ -49,10 +51,17 @@ export const Text = forwardRef(
       );
     }, []);
 
-    return (
+    return onPress || onLongPress ? (
       <GestureDetector gesture={native}>
-        <RNText onPress={onPress} ref={refHandler} {...rest} />
+        <RNText
+          onPress={onPress}
+          onLongPress={onLongPress}
+          ref={refHandler}
+          {...rest}
+        />
       </GestureDetector>
+    ) : (
+      <RNText ref={ref} {...rest} />
     );
   }
 );

package/src/components/touchables/TouchableHighlight.tsx

@@ -19,10 +19,15 @@ interface State {
   };
 }
 
+/**
+ * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler.
+ */
 export type TouchableHighlightProps = RNTouchableHighlightProps &
   GenericTouchableProps;
 
 /**
+ * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler.
+ *
  * TouchableHighlight follows RN's implementation
  */
 export default class TouchableHighlight extends Component<

package/src/components/touchables/TouchableNativeFeedback.android.tsx

@@ -8,6 +8,8 @@ import {
 } from './TouchableNativeFeedbackProps';
 
 /**
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
+ *
  * TouchableNativeFeedback behaves slightly different than RN's TouchableNativeFeedback.
  * There's small difference with handling long press ripple since RN's implementation calls
  * ripple animation via bridge. This solution leaves all animations' handling for native components so

package/src/components/touchables/TouchableNativeFeedback.tsx

@@ -1,3 +1,8 @@
-import { TouchableNativeFeedback } from 'react-native';
+import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native';
+
+/**
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
+ */
+const TouchableNativeFeedback = RNTouchableNativeFeedback;
 
 export default TouchableNativeFeedback;