diff --git a/apps/mobile/src/components/ui/pressable/ItemPressable.tsx b/apps/mobile/src/components/ui/pressable/ItemPressable.tsx index e1779a6a3..02b91d75a 100644 --- 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 = memo( } }) - const timerRef = useRef(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 ( - - {})} - delayLongPress={props.delayLongPress ?? 100} - className={cn("relative overflow-hidden", props.className)} - style={StyleSheet.flatten([ - props.style, - !isUnStyled && { backgroundColor: itemNormalColor }, - ])} - > - {useTypeScriptHappyCallback( - (props) => { - return ( - - {touchHighlight && ( - - )} - {typeof children === "function" ? children(props) : children} - - ) - }, - [children, colorStyle], - )} - - + 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 ( + + {touchHighlight && ( + + )} + {typeof children === "function" ? children(props) : children} + + ) + }, + [children, colorStyle], + )} + ) }, )