feat: improve pull-up-to-next by add transition animation (#3832)

lawvs · web-flow · commit a86ef8acdd67 · 2025-05-28T11:24:29.000+08:00
* feat: add  replaceControllerView method for enhanced navigation

* refactor: simplify screen options merging in WrappedScreenItem component

* feat: improve pull-up threshold handling in usePullUpToNext hook

* feat: enhance navigation by replacing controller view with animation in EntryDetailScreen
diff --git a/apps/mobile/src/lib/navigation/Navigation.ts b/apps/mobile/src/lib/navigation/Navigation.ts
@@ -59,6 +59,11 @@ export class Navigation {
       sheetGrabberVisible: view.sheetGrabberVisible ?? true,
       sheetInitialDetentIndex: view.sheetInitialDetentIndex ?? 0,
       sheetLargestUndimmedDetentIndex: view.sheetLargestUndimmedDetentIndex ?? "medium",
+      // Transition-related props
+      stackAnimation: view.stackAnimation ?? "default",
+      // Default to "pop" but we specified it as "push" making it more intuitive
+      replaceAnimation: view.replaceAnimation ?? "push",
+      transitionDuration: view.transitionDuration ?? 500,
     }
   }
 
@@ -73,6 +78,24 @@ export class Navigation {
     })
   }
 
+  replaceControllerView<T>(
+    view: NavigationControllerView<T>,
+    props?: T,
+    extractScreenOptions?: NavigationControllerViewExtraProps,
+  ) {
+    const screenOptions = this.resolveScreenOptions(view)
+    this.__replace({
+      id: screenOptions.id,
+      type: "push",
+      Component: view,
+      props,
+      screenOptions: {
+        ...screenOptions,
+        ...extractScreenOptions,
+      },
+    })
+  }
+
   presentControllerView<T>(
     view: NavigationControllerView<T>,
     props?: T,
@@ -98,6 +121,16 @@ export class Navigation {
     this.emit("screenChange", { screenId: lastRoute.id, type: "disappear", route: lastRoute })
   }
 
+  private __replace(route: Route) {
+    const routes = jotaiStore.get(this.ctxValue.routesAtom)
+    const hasRoute = routes.some((r) => r.id === route.id)
+    if (hasRoute) {
+      route.id = `${route.id}-${this.viewIdCounter++}`
+    }
+    jotaiStore.set(this.ctxValue.routesAtom, [...routes.slice(0, -1), route])
+    this.emit("screenChange", { screenId: route.id, type: "appear", route })
+  }
+
   /**
    * Dismiss the current modal.
    */
diff --git a/apps/mobile/src/lib/navigation/WrappedScreenItem.tsx b/apps/mobile/src/lib/navigation/WrappedScreenItem.tsx
@@ -104,16 +104,6 @@ export const WrappedScreenItem: FC<
 
     const backgroundColor = useColor("systemBackground")
 
-    // Priority: Ctx > Define on Component
-
-    const mergedScreenOptions = useMemo(
-      () => ({
-        ...screenOptionsProp,
-        ...resolveScreenOptions(screenOptionsFromCtx),
-      }),
-      [screenOptionsFromCtx, screenOptionsProp],
-    )
-
     const handleDismiss = useCallback(
       (
         e: NativeSyntheticEvent<{
@@ -149,8 +139,10 @@ export const WrappedScreenItem: FC<
               { backgroundColor: screenOptionsProp?.transparent ? undefined : backgroundColor },
               style,
             ]}
+            // Priority: Ctx > Define on Component
             {...rest}
-            {...mergedScreenOptions}
+            {...screenOptionsProp}
+            {...resolveScreenOptions(screenOptionsFromCtx)}
             onDismissed={handleDismiss}
             onNativeDismissCancelled={handleDismiss}
           >
diff --git a/apps/mobile/src/lib/navigation/types.ts b/apps/mobile/src/lib/navigation/types.ts
@@ -16,6 +16,10 @@ export interface NavigationControllerViewExtraProps
     | "sheetGrabberVisible"
     | "sheetInitialDetentIndex"
     | "sheetLargestUndimmedDetentIndex"
+    // Transition-related props
+    | "stackAnimation"
+    | "replaceAnimation"
+    | "transitionDuration"
   > {
   /**
    * Unique identifier for the view.
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
@@ -73,13 +73,15 @@ export const usePullUpToNext = ({
       if (!dragging.current) return
       const overOffset = e.contentOffset.y - e.contentSize.height + e.layoutMeasurement.height
 
+      // Ratio used to determine when to deactivate the pulling threshold
+      const thresholdRatio = 0.95
       if (overOffset > progressViewOffset) {
         if (!isOverThreshold.current && onRefresh) {
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
         }
         isOverThreshold.current = true
         setRefreshing(true)
-      } else {
+      } else if (overOffset < progressViewOffset * thresholdRatio) {
         if (isOverThreshold.current && onRefresh) {
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft)
         }
diff --git a/apps/mobile/src/screens/(stack)/entries/[entryId]/EntryDetailScreen.tsx b/apps/mobile/src/screens/(stack)/entries/[entryId]/EntryDetailScreen.tsx
@@ -72,12 +72,19 @@ export const EntryDetailScreen: NavigationControllerView<{
     enabled: !!nextEntryId,
     onRefresh: useCallback(() => {
       if (!nextEntryId) return
-      navigation.back()
-      navigation.pushControllerView(EntryDetailScreen, {
-        entryId: nextEntryId,
-        entryIds,
-        view: viewType,
-      })
+      navigation.replaceControllerView(
+        EntryDetailScreen,
+        {
+          entryId: nextEntryId,
+          entryIds,
+          view: viewType,
+        },
+        {
+          // Ensure that the replace animation is used
+          stackAnimation: "fade_from_bottom",
+          transitionDuration: 150,
+        },
+      )
     }, [entryIds, navigation, nextEntryId, viewType]),
   })
 
