refactor(mobile): replace ItemPressable with NativePressable in multiple components

- Updated RelativeDateTime, EntryNormalItem, and CategoryGrouped components to use NativePressable for improved touch handling.
- Introduced NativePressable and IosItemPressable components to streamline pressable functionality across iOS and native views.
- Enhanced code organization by separating NativePressable types and implementations.

Signed-off-by: Innei <tukon479@gmail.com>

apps/mobile/src/components/ui/datetime/RelativeDateTime.tsx

@@ -4,8 +4,7 @@ import { useTranslation } from "react-i18next"
 import type { TextProps } from "react-native"
 import Animated, { FadeOut } from "react-native-reanimated"
 
-import { ItemPressableStyle } from "../pressable/enum"
-import { ItemPressable } from "../pressable/ItemPressable"
+import { NativePressable } from "../pressable/NativePressable"
 
 const formatTemplateString = "lll"
 
@@ -78,9 +77,7 @@ export const RelativeDateTime = ({
   }, [date, displayAbsoluteTimeAfterDay, dateFormatTemplate, mode])
 
   return (
-    <ItemPressable
-      touchHighlight={false}
-      itemStyle={ItemPressableStyle.UnStyled}
+    <NativePressable
       hitSlop={10}
       onPress={() => {
         setMode((mode) => (mode === "relative" ? "absolute" : "relative"))
@@ -91,6 +88,6 @@ export const RelativeDateTime = ({
           ? `${relative}${t("space")}${postfixText ?? t("words.ago")}`
           : memoizedFormatTime}
       </Animated.Text>
-    </ItemPressable>
+    </NativePressable>
   )
 }

apps/mobile/src/components/ui/pressable/IosItemPressable.ios.tsx

@@ -0,0 +1,14 @@
+import { requireNativeView } from "expo"
+import { cssInterop } from "nativewind"
+import type { ViewProps } from "react-native"
+
+const NativeItemPressable = requireNativeView<
+  ViewProps & {
+    onItemPress: () => any
+    touchHighlight?: boolean
+  }
+>("ItemPressable")
+cssInterop(NativeItemPressable, {
+  className: "style",
+})
+export { NativeItemPressable }

apps/mobile/src/components/ui/pressable/IosItemPressable.tsx

@@ -0,0 +1,12 @@
+import type { FC } from "react"
+import type { ViewProps } from "react-native"
+
+const NativeItemPressable: FC<
+  ViewProps & {
+    onItemPress?: () => any
+    touchHighlight?: boolean
+  }
+> = () => {
+  throw new Error("NativeItemPressable is not supported on iOS")
+}
+export { NativeItemPressable }

apps/mobile/src/components/ui/pressable/ItemPressable.ios.tsx

@@ -1,26 +1,16 @@
 import { cn } from "@follow/utils"
-import { requireNativeView } from "expo"
-import { cssInterop } from "nativewind"
 import type { FC } from "react"
 import { memo } from "react"
 import type { ViewProps } from "react-native"
 
 import { ItemPressableStyle } from "./enum"
+import { NativeItemPressable } from "./IosItemPressable"
 
 export interface ItemPressableProps extends ViewProps {
   itemStyle?: ItemPressableStyle
   touchHighlight?: boolean
   onPress?: () => any
 }
-const NativeItemPressable = requireNativeView<
-  ViewProps & {
-    onItemPress: () => any
-    touchHighlight?: boolean
-  }
->("ItemPressable")
-cssInterop(NativeItemPressable, {
-  className: "style",
-})
 
 export const ItemPressable: FC<ItemPressableProps> = memo(
   ({ children, itemStyle = ItemPressableStyle.Grouped, className, ...props }) => {

apps/mobile/src/components/ui/pressable/NativePressable.ios.tsx

@@ -0,0 +1,10 @@
+import { NativeItemPressable } from "./IosItemPressable"
+import type { NativePressableProps } from "./NativePressable.types"
+
+export const NativePressable = ({ children, onPress, ...props }: NativePressableProps) => {
+  return (
+    <NativeItemPressable touchHighlight={false} onItemPress={onPress} {...props}>
+      {children}
+    </NativeItemPressable>
+  )
+}

apps/mobile/src/components/ui/pressable/NativePressable.tsx

@@ -0,0 +1,11 @@
+import { Pressable } from "react-native"
+
+import type { NativePressableProps } from "./NativePressable.types"
+
+/**
+ * In order to resolve the conflict between the gesture handling of the native view and the RCTSurfaceGestureHandler in React Native.
+ *
+ */
+export const NativePressable = ({ children, ...props }: NativePressableProps) => {
+  return <Pressable {...props}>{children}</Pressable>
+}

apps/mobile/src/components/ui/pressable/NativePressable.types.tsx

@@ -0,0 +1,5 @@
+import type { ViewProps } from "react-native"
+
+export interface NativePressableProps extends ViewProps {
+  onPress?: () => any
+}

apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx

@@ -13,6 +13,7 @@ import { Image } from "@/src/components/ui/image/Image"
 import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformActivityIndicator"
 import { ItemPressableStyle } from "@/src/components/ui/pressable/enum"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
+import { NativePressable } from "@/src/components/ui/pressable/NativePressable"
 import { PauseCuteFiIcon } from "@/src/icons/pause_cute_fi"
 import { PlayCuteFiIcon } from "@/src/icons/play_cute_fi"
 import { useNavigation } from "@/src/lib/navigation/hooks"
@@ -146,9 +147,7 @@ export const EntryNormalItem = memo(
                 ))}
 
               {audio && (
-                <ItemPressable
-                  touchHighlight={false}
-                  itemStyle={ItemPressableStyle.UnStyled}
+                <NativePressable
                   className="absolute inset-0 flex items-center justify-center"
                   onPress={() => {
                     if (isLoading) return
@@ -174,7 +173,7 @@ export const EntryNormalItem = memo(
                       <PlayCuteFiIcon color="white" width={24} height={24} />
                     )}
                   </View>
-                </ItemPressable>
+                </NativePressable>
               )}
             </View>
           )}

apps/mobile/src/modules/subscription/CategoryGrouped.tsx

@@ -6,6 +6,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-na
 import { GROUPED_LIST_MARGIN } from "@/src/components/ui/grouped/constants"
 import { ItemPressableStyle } from "@/src/components/ui/pressable/enum"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
+import { NativePressable } from "@/src/components/ui/pressable/NativePressable"
 import { RightCuteFiIcon } from "@/src/icons/right_cute_fi"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { closeDrawer, selectFeed } from "@/src/modules/screen/atoms"
@@ -64,9 +65,7 @@ export const CategoryGrouped = memo(
                 "rounded-b-[10px]": isLast && !expanded,
               })}
             >
-              <ItemPressable
-                touchHighlight={false}
-                itemStyle={ItemPressableStyle.UnStyled}
+              <NativePressable
                 hitSlop={10}
                 onPress={() => {
                   rotateSharedValue.value = withSpring(expanded ? 0 : 90, {})
@@ -77,7 +76,7 @@ export const CategoryGrouped = memo(
                 <Animated.View style={rotateStyle} className="ml-2">
                   <RightCuteFiIcon color={secondaryLabelColor} height={14} width={14} />
                 </Animated.View>
-              </ItemPressable>
+              </NativePressable>
               <Text className="text-text ml-4 font-medium">{category}</Text>
               <UnreadCount unread={unreadCounts} className="text-secondary-label ml-auto text-xs" />
             </ItemPressable>