Consider upgrading to the new Gesture API from react-native-gesture-handler v2

[andreibarabas]

This actually happened for us in practice. As you know, we live on the bleeding edge and are running our app on RN 0.70.1 with Turbo Modules enabled. And I can tell you that the warning above starts to actually break things. For example, the TapGestureHandler from the MessageActionListItem no longer works, meaning you can't press on an menu item anymore.

The solution is rather simple, just replace the TapGestureHandler with a GestureDetector and the useAnimatedGestureHandler with the new Gesture.Tap() api.

See here for a possible patch

diff --git a/src/components/MessageOverlay/MessageActionListItem.tsx b/src/components/MessageOverlay/MessageActionListItem.tsx
index 8c7d210f59795c6f962cd85f31012e6a4aded03e..b59debee3d3080425baebb0d6ac5ad80091bf8c7 100644
--- a/src/components/MessageOverlay/MessageActionListItem.tsx
+++ b/src/components/MessageOverlay/MessageActionListItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
-import { TapGestureHandler } from 'react-native-gesture-handler';
+import { GestureDetector, TapGestureHandler } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 
 import { useMessageActionAnimation } from './hooks/useMessageActionAnimation';
@@ -83,13 +83,13 @@ const MessageActionListItemWithContext = <
   const { animatedStyle, onTap } = useMessageActionAnimation({ action });
 
   return (
-    <TapGestureHandler onHandlerStateChange={onTap}>
+    <GestureDetector gesture={onTap}>
       <Animated.View
         style={[
           styles.row,
           index !== length - 1 ? { ...styles.bottomBorder, borderBottomColor: border } : {},
           animatedStyle,
-          messageActions.actionContainer,
+          messageActions.actionContainer
         ]}
         testID={`${actionType}-list-item`}
       >
@@ -98,7 +98,7 @@ const MessageActionListItemWithContext = <
           {title}
         </Text>
       </Animated.View>
-    </TapGestureHandler>
+    </GestureDetector>
   );
 };
 
diff --git a/src/components/MessageOverlay/hooks/useMessageActionAnimation.tsx b/src/components/MessageOverlay/hooks/useMessageActionAnimation.tsx
index c141646a94ce8853ff6f48cd5415e59a96894c9d..6d1a1e245ca14854ce618f2b6fdffb6fdd833995 100644
--- a/src/components/MessageOverlay/hooks/useMessageActionAnimation.tsx
+++ b/src/components/MessageOverlay/hooks/useMessageActionAnimation.tsx
@@ -1,5 +1,5 @@
 import type { ViewStyle } from 'react-native';
-import type { TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
+import { Gesture, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
 import {
   runOnJS,
   useAnimatedGestureHandler,
@@ -17,20 +17,17 @@ export const useMessageActionAnimation = ({
 }) => {
   const opacity = useSharedValue(1);
 
-  const onTap = useAnimatedGestureHandler<TapGestureHandlerStateChangeEvent>(
-    {
-      onEnd: () => {
-        runOnJS(action)();
-      },
-      onFinish: () => {
-        opacity.value = 1;
-      },
-      onStart: () => {
-        opacity.value = activeOpacity;
-      },
-    },
-    [action],
-  );
+  const onTap = Gesture.Tap().onEnd((_event, success) => {
+    if (success) {
+      runOnJS(action)();
+    }
+  }).onFinalize((_event, success) => {
+    if(success) {
+      opacity.value = 1;
+    }
+  }).onStart(() => {
+    opacity.value = activeOpacity;
+  });
 
   const animatedStyle = useAnimatedStyle<ViewStyle>(() => ({
     opacity: opacity.value,