fix(rn): clicking on the avatar under the category will trigger two jump logics, fixed #3415

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

apps/mobile/src/lib/navigation/Navigation.ts

@@ -87,6 +87,7 @@ export class Navigation {
       screenOptions,
     })
   }
+
   private __pop() {
     const routes = jotaiStore.get(this.ctxValue.routesAtom)
     const lastRoute = routes.at(-1)

apps/mobile/src/lib/navigation/StackNavigation.tsx

@@ -105,6 +105,7 @@ const StateHandler = () => {
   }, [jotaiStore, nameAtom, navigation, navigationInstance])
   return null
 }
+
 const ScreenItemsMapper = () => {
   const chainCtxValue = use(ChainNavigationContext)
   const routes = useAtomValue(chainCtxValue.routesAtom)

apps/mobile/src/lib/navigation/types.ts

@@ -5,7 +5,18 @@ export interface NavigationPushOptions<T> {
   Component?: NavigationControllerView<T>
   element?: React.ReactElement
 }
-export type NavigationControllerViewExtraProps = {
+
+export interface NavigationControllerViewExtraProps
+  extends Pick<
+    ScreenProps,
+    | "sheetAllowedDetents"
+    | "sheetCornerRadius"
+    | "sheetExpandsWhenScrolledToEdge"
+    | "sheetElevation"
+    | "sheetGrabberVisible"
+    | "sheetInitialDetentIndex"
+    | "sheetLargestUndimmedDetentIndex"
+  > {
   /**
    * Unique identifier for the view.
    */
@@ -20,17 +31,7 @@ export type NavigationControllerViewExtraProps = {
    * Whether the view is transparent.
    */
   transparent?: boolean
-} & Pick<
-  ScreenProps,
-  | "sheetAllowedDetents"
-  | "sheetCornerRadius"
-  | "sheetExpandsWhenScrolledToEdge"
-  | "sheetElevation"
-  | "sheetGrabberVisible"
-  | "sheetInitialDetentIndex"
-  | "sheetLargestUndimmedDetentIndex"
->
-
+}
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export type NavigationControllerView<P = {}> = FC<P> & NavigationControllerViewExtraProps
 export type NavigationControllerViewType = StackPresentationTypes

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

@@ -11,6 +11,7 @@ import { Galeria } from "@/src/components/ui/image/galeria"
 import { Image } from "@/src/components/ui/image/Image"
 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 { VideoPlayer } from "@/src/components/ui/video/VideoPlayer"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { EntryDetailScreen } from "@/src/screens/(stack)/entries/[entryId]/EntryDetailScreen"
@@ -53,6 +54,14 @@ export const EntrySocialItem = memo(({ entryId }: { entryId: string }) => {
       .filter(Boolean) || []) as string[]
   }, [entry])
 
+  const navigationToFeedEntryList = useCallback(() => {
+    if (!entry) return
+    if (!entry.feedId) return
+    navigation.pushControllerView(FeedScreen, {
+      feedId: entry.feedId,
+    })
+  }, [entry?.feedId, navigation])
+
   if (!entry) return <EntryItemSkeleton />
 
   const { description, publishedAt, media } = entry
@@ -67,26 +76,25 @@ export const EntrySocialItem = memo(({ entryId }: { entryId: string }) => {
         {!entry.read && <View className="bg-red absolute left-1.5 top-[25] size-2 rounded-full" />}
 
         <View className="flex flex-1 flex-row items-start gap-4">
-          <Pressable
-            hitSlop={10}
-            onPress={() => {
-              if (!entry.feedId) return
-              navigation.pushControllerView(FeedScreen, {
-                feedId: entry.feedId,
-              })
-            }}
-          >
+          <NativePressable hitSlop={10} onPress={navigationToFeedEntryList}>
             {entry.authorAvatar ? (
-              <UserAvatar size={28} name={entry.author ?? ""} image={entry.authorAvatar} />
+              <UserAvatar
+                preview={false}
+                size={28}
+                name={entry.author ?? ""}
+                image={entry.authorAvatar}
+              />
             ) : (
               feed && <FeedIcon feed={feed} size={28} />
             )}
-          </Pressable>
+          </NativePressable>
 
           <View className="flex-1 flex-row items-center gap-1.5">
-            <Text numberOfLines={1} className="text-label shrink text-base font-semibold">
-              {entry.author || feed?.title}
-            </Text>
+            <NativePressable hitSlop={10} onPress={navigationToFeedEntryList}>
+              <Text numberOfLines={1} className="text-label shrink text-base font-semibold">
+                {entry.author || feed?.title}
+              </Text>
+            </NativePressable>
             <Text className="text-secondary-label">·</Text>
             <RelativeDateTime date={publishedAt} className="text-secondary-label text-[14px]" />
           </View>