feat: add entry pull up and release ui (#3770)

lawvs · web-flow · commit 9c270c78a0d9 · 2025-05-21T11:51:23.000+08:00
* feat: add ScrollViewBottom prop to SafeNavigationScrollView for additional content rendering

* feat: implement EntryPullUpToNext component for enhanced navigation experience

* feat: integrate EntryPullUpToNext component into EntryDetailScreen for improved navigation

* chore: add entry pull up and release messages to localization files
diff --git a/apps/mobile/src/components/layouts/views/SafeNavigationScrollView.tsx b/apps/mobile/src/components/layouts/views/SafeNavigationScrollView.tsx
@@ -39,6 +39,7 @@ type SafeNavigationScrollViewProps = Omit<ScrollViewProps, "onScroll"> & {
   contentViewClassName?: string
 
   Header?: React.ReactNode
+  ScrollViewBottom?: React.ReactNode
 } & PropsWithChildren
 
 export interface ForwardedSafeNavigationScrollView extends ScrollView {
@@ -54,6 +55,7 @@ export const SafeNavigationScrollView = ({
   contentViewClassName,
   contentViewStyle,
   Header,
+  ScrollViewBottom,
   ...props
 }: SafeNavigationScrollViewProps & { ref?: React.Ref<ScrollView | null> }) => {
   const insets = useSafeAreaInsets()
@@ -134,6 +136,7 @@ export const SafeNavigationScrollView = ({
           <View style={contentViewStyle} className={contentViewClassName}>
             {children}
           </View>
+          {ScrollViewBottom}
           <View style={{ height: tabBarHeight - (withBottomInset ? insets.bottom : 0) }} />
         </ReAnimatedScrollView>
       </SetNavigationHeaderHeightContext>
diff --git a/apps/mobile/src/modules/entry-content/use-pull-up-to-next.tsx b/apps/mobile/src/modules/entry-content/use-pull-up-to-next.tsx
@@ -1,10 +1,61 @@
+import { cn } from "@follow/utils"
 import * as Haptics from "expo-haptics"
 import { useCallback, useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
 import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native"
+import { Text, View } from "react-native"
 import type { ReanimatedScrollEvent } from "react-native-reanimated/lib/typescript/hook/commonTypes"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { useColor } from "react-native-uikit-colors"
+
+import { ArrowLeftCuteReIcon } from "@/src/icons/arrow_left_cute_re"
+
+interface EntryPullUpToNextProps {
+  active: boolean
+  hide?: boolean
+}
+
+/**
+ * Component that handles pulling up to navigate to the next unread entry
+ */
+const EntryPullUpToNext = ({ active, hide = false }: EntryPullUpToNextProps) => {
+  const { t } = useTranslation()
+  const insets = useSafeAreaInsets()
+  const textColor = useColor("secondaryLabel")
+  const iconColor = useColor("label")
+
+  return (
+    <View
+      className={cn(
+        "absolute bottom-0 flex w-full translate-y-full flex-row items-center justify-center gap-2 pt-4 transition-all duration-200",
+        hide ? "opacity-0" : "opacity-100",
+      )}
+      style={{ paddingBottom: insets.bottom + 20 }}
+    >
+      <View
+        className={cn(
+          "flex flex-row items-center gap-2 transition-all duration-200",
+          active ? "opacity-50" : "opacity-80",
+        )}
+      >
+        <View
+          className={cn(
+            "rotate-90 transition-all duration-200",
+            active ? "opacity-0" : "opacity-100",
+          )}
+        >
+          <ArrowLeftCuteReIcon width={16} height={16} color={iconColor} />
+        </View>
+        <Text style={{ color: textColor }}>
+          {active ? t("entry.release_to_next_entry") : t("entry.pull_up_to_next_entry")}
+        </Text>
+      </View>
+    </View>
+  )
+}
 
 export const usePullUpToNext = ({
-  enabled: enabled = true,
+  enabled = true,
   onRefresh,
   progressViewOffset = 70,
 }: {
@@ -14,6 +65,7 @@ export const usePullUpToNext = ({
 } = {}) => {
   const dragging = useRef(false)
   const isOverThreshold = useRef(false)
+  const [dragState, setDragState] = useState(false)
   const [refreshing, setRefreshing] = useState(false)
 
   const onScroll = useCallback(
@@ -50,13 +102,15 @@ export const usePullUpToNext = ({
         return
       }
       dragging.current = true
+      setDragState(true)
     },
     [dragging],
   )
 
   const onScrollEndDrag = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       dragging.current = false
+      setDragState(false)
       const velocity = event.nativeEvent.velocity?.y || 0
       if (isOverThreshold.current && velocity < 3) {
         onRefresh?.()
@@ -70,7 +124,10 @@ export const usePullUpToNext = ({
   if (!enabled) {
     return {
       scrollViewEventHandlers: {},
-      pullUpViewProps: {},
+      pullUpViewProps: {
+        active: false,
+        hide: dragState,
+      } satisfies EntryPullUpToNextProps,
       EntryPullUpToNext: () => null,
     }
   }
@@ -82,7 +139,9 @@ export const usePullUpToNext = ({
       onScrollEndDrag,
     },
     pullUpViewProps: {
-      refreshing,
-    },
+      active: refreshing,
+      hide: !dragState,
+    } satisfies EntryPullUpToNextProps,
+    EntryPullUpToNext,
   }
 }
diff --git a/apps/mobile/src/screens/(stack)/entries/[entryId]/EntryDetailScreen.tsx b/apps/mobile/src/screens/(stack)/entries/[entryId]/EntryDetailScreen.tsx
@@ -66,7 +66,7 @@ export const EntryDetailScreen: NavigationControllerView<{
     return entryIds[currentEntryIdx + 1]
   }, [entryId, entryIds])
 
-  const { scrollViewEventHandlers } = usePullUpToNext({
+  const { EntryPullUpToNext, scrollViewEventHandlers, pullUpViewProps } = usePullUpToNext({
     enabled: !!nextEntryId,
     onRefresh: useCallback(() => {
       if (!nextEntryId) return
@@ -85,6 +85,7 @@ export const EntryDetailScreen: NavigationControllerView<{
         <BottomTabBarHeightContext value={insets.bottom}>
           <SafeNavigationScrollView
             Header={<EntryNavigationHeader entryId={entryId} />}
+            ScrollViewBottom={<EntryPullUpToNext {...pullUpViewProps} />}
             automaticallyAdjustContentInsets={false}
             contentContainerClassName="flex min-h-full pb-16"
             {...scrollViewEventHandlers}
diff --git a/locales/mobile/default/en.json b/locales/mobile/default/en.json
@@ -1,4 +1,6 @@
 {
+  "entry.pull_up_to_next_entry": "Pull up to go to the next entry",
+  "entry.release_to_next_entry": "Release to go to the next entry",
   "login.back": "Back",
   "login.continueWith": "Continue with {{provider}}",
   "login.have_account": "Already have an account? <strong>Sign in</strong>",
diff --git a/locales/mobile/default/zh-CN.json b/locales/mobile/default/zh-CN.json
@@ -1,4 +1,6 @@
 {
+  "entry.pull_up_to_next_entry": "继续上拉查看下一条内容",
+  "entry.release_to_next_entry": "松开查看下一条内容",
   "login.back": "返回",
   "login.continueWith": "使用 {{provider}} 继续",
   "login.have_account": "已有账户？<strong>登录</strong>",

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
`1`	`1`	`{`
	`2`	`+ "entry.pull_up_to_next_entry": "Pull up to go to the next entry",`
	`3`	`+ "entry.release_to_next_entry": "Release to go to the next entry",`
`2`	`4`	`"login.back": "Back",`
`3`	`5`	`"login.continueWith": "Continue with {{provider}}",`
`4`	`6`	`"login.have_account": "Already have an account? <strong>Sign in</strong>",`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
`1`	`1`	`{`
	`2`	`+ "entry.pull_up_to_next_entry": "继续上拉查看下一条内容",`
	`3`	`+ "entry.release_to_next_entry": "松开查看下一条内容",`
`2`	`4`	`"login.back": "返回",`
`3`	`5`	`"login.continueWith": "使用 {{provider}} 继续",`
`4`	`6`	`"login.have_account": "已有账户？<strong>登录</strong>",`