fix(mobile): remove GestureDetector on ItemPressable (#3544)

lawvs · web-flow · commit 7e2be7ba2fb6 · 2025-04-21T08:46:45.000Z
diff --git a/apps/mobile/src/components/ui/pressable/ItemPressable.tsx b/apps/mobile/src/components/ui/pressable/ItemPressable.tsx
@@ -1,10 +1,9 @@
 import { useTypeScriptHappyCallback } from "@follow/hooks"
 import { cn, composeEventHandlers } from "@follow/utils"
 import type { FC } from "react"
-import { Fragment, memo, useEffect, useMemo, useRef, useState } from "react"
+import { Fragment, memo, useEffect, useState } from "react"
 import type { PressableProps } from "react-native"
 import { StyleSheet } from "react-native"
-import { Gesture, GestureDetector } from "react-native-gesture-handler"
 import Animated, {
   cancelAnimation,
   interpolateColor,
@@ -53,51 +52,39 @@ export const ItemPressable: FC<ItemPressableProps> = memo(
       }
     })
 
-    const timerRef = useRef<NodeJS.Timeout | null>(null)
-    const tapGesture = useMemo(() => {
-      return Gesture.Tap()
-        .numberOfTaps(1)
-        .maxDuration(100)
-        .runOnJS(true)
-        .onStart(() => {
-          setIsPressing(true)
-          timerRef.current && clearTimeout(timerRef.current)
-          timerRef.current = setTimeout(() => {
-            setIsPressing(false)
-          }, 100)
-        })
-    }, [setIsPressing])
     const isUnStyled = itemStyle === ItemPressableStyle.UnStyled
 
     return (
-      <GestureDetector gesture={tapGesture}>
-        <ReAnimatedPressable
-          {...props}
-          // This is a workaround to prevent context menu crash when release too quickly
-          // https://github.com/nandorojo/zeego/issues/61
-          onLongPress={composeEventHandlers(props.onLongPress, () => {})}
-          delayLongPress={props.delayLongPress ?? 100}
-          className={cn("relative overflow-hidden", props.className)}
-          style={StyleSheet.flatten([
-            props.style,
-            !isUnStyled && { backgroundColor: itemNormalColor },
-          ])}
-        >
-          {useTypeScriptHappyCallback(
-            (props) => {
-              return (
-                <Fragment>
-                  {touchHighlight && (
-                    <Animated.View className="absolute inset-0" style={colorStyle} />
-                  )}
-                  {typeof children === "function" ? children(props) : children}
-                </Fragment>
-              )
-            },
-            [children, colorStyle],
-          )}
-        </ReAnimatedPressable>
-      </GestureDetector>
+      <ReAnimatedPressable
+        {...props}
+        onPressIn={composeEventHandlers(props.onPressIn, () => setIsPressing(true))}
+        onPressOut={composeEventHandlers(props.onPressOut, () => setIsPressing(false))}
+        onHoverIn={composeEventHandlers(props.onHoverIn, () => setIsPressing(true))}
+        onHoverOut={composeEventHandlers(props.onHoverOut, () => setIsPressing(false))}
+        // This is a workaround to prevent context menu crash when release too quickly
+        // https://github.com/nandorojo/zeego/issues/61
+        onLongPress={composeEventHandlers(props.onLongPress, () => {})}
+        delayLongPress={props.delayLongPress ?? 100}
+        className={cn("relative overflow-hidden", props.className)}
+        style={StyleSheet.flatten([
+          props.style,
+          !isUnStyled && { backgroundColor: itemNormalColor },
+        ])}
+      >
+        {useTypeScriptHappyCallback(
+          (props) => {
+            return (
+              <Fragment>
+                {touchHighlight && (
+                  <Animated.View className="absolute inset-0" style={colorStyle} />
+                )}
+                {typeof children === "function" ? children(props) : children}
+              </Fragment>
+            )
+          },
+          [children, colorStyle],
+        )}
+      </ReAnimatedPressable>
     )
   },
 )
