feat: implement auto-scroll to entry after pull-up navigation

Author: lawvs

apps/mobile/src/modules/entry-list/EntryListSelector.tsx

@@ -1,14 +1,17 @@
 import { FeedViewType } from "@follow/constants"
 import { useWhoami } from "@follow/store/user/hooks"
 import type { FlashList } from "@shopify/flash-list"
+import type { RefObject } from "react"
 import { useEffect } from "react"
 
 import { useGeneralSettingKey } from "@/src/atoms/settings/general"
 import { withErrorBoundary } from "@/src/components/common/ErrorBoundary"
 import { NoLoginInfo } from "@/src/components/common/NoLoginInfo"
 import { ListErrorView } from "@/src/components/errors/ListErrorView"
 import { useRegisterNavigationScrollView } from "@/src/components/layouts/tabbar/hooks"
+import { useNavigation } from "@/src/lib/navigation/hooks"
 import { EntryListContentPicture } from "@/src/modules/entry-list/EntryListContentPicture"
+import { EntryDetailScreen } from "@/src/screens/(stack)/entries/[entryId]/EntryDetailScreen"
 
 import { useFetchEntriesControls } from "../screen/atoms"
 import { EntryListContentArticle } from "./EntryListContentArticle"
@@ -69,6 +72,8 @@ function EntryListSelectorImpl({ entryIds, viewId, active = true }: EntryListSel
     }
   }, [isRefetching, ref])
 
+  useAutoScrollToEntryAfterPullUpToNext(ref, entryIds || [])
+
   return <ContentComponent ref={ref} entryIds={entryIds} active={active} view={viewId} />
 }
 
@@ -82,3 +87,32 @@ export const EntryListSelector = withErrorBoundary(
   },
   ListErrorView,
 )
+
+const useAutoScrollToEntryAfterPullUpToNext = (
+  ref: RefObject<FlashList<any> | null>,
+  entryIds: string[],
+) => {
+  const navigation = useNavigation()
+  useEffect(() => {
+    return navigation.on("screenChange", (payload) => {
+      if (!payload.route) return
+      if (payload.type !== "appear") return
+      if (payload.route.Component !== EntryDetailScreen) return
+      if (payload.route.screenOptions?.stackAnimation !== "fade_from_bottom") return
+      const nextEntryId =
+        payload.route.props &&
+        typeof payload.route.props === "object" &&
+        "entryId" in payload.route.props &&
+        typeof payload.route.props.entryId === "string"
+          ? payload.route.props.entryId
+          : undefined
+      const idx = nextEntryId ? (entryIds?.indexOf(nextEntryId || "") ?? -1) : -1
+      if (idx === -1) return
+      ref?.current?.scrollToIndex({
+        index: idx,
+        animated: false,
+        viewOffset: 70,
+      })
+    })
+  }, [entryIds, navigation, ref])
+}