feat: enhance scroll interactions in TimelineSelector (#3952)

lawvs · web-flow · commit 524ad0500260 · 2025-06-19T07:17:27.000Z
* feat: enhance PagerView onScroll event to include position parameter for iOS

* feat: add TimelineSelectorDragProgress context and provider for managing drag state

* feat: enhance TimelineViewSelector with drag progress and animated item transitions

* feat: integrate drag progress into PagerList and TimelineViewSelector for enhanced user interaction

* feat: add animated icon transitions in ViewItem based on drag progress

* fix: add scrollViewDidEndDecelerating to trigger onScrollEnd callback

* fix: enhance PagerList to synchronize drag progress with timeline selection
diff --git a/apps/mobile/native/example/src/components/Pager.tsx b/apps/mobile/native/example/src/components/Pager.tsx
@@ -8,7 +8,7 @@ const EnhancePageView = requireNativeView("EnhancePageView")
 
 interface PagerProps {
   onPageChange?: (e: NativeSyntheticEvent<{ index: number }>) => void
-  onScroll?: (e: NativeSyntheticEvent<{ percent: number; direction: "left" | "right" }>) => void
+  onScroll?: (e: NativeSyntheticEvent<{ percent: number; direction: "left" | "right" | "none"; position: number }>) => void
   onScrollBegin?: () => void
   onScrollEnd?: () => void
   onPageWillAppear?: (e: NativeSyntheticEvent<{ index: number }>) => void
@@ -30,7 +30,7 @@ type PagerViewProps = {
   transitionStyle?: "scroll" | "pageCurl"
   page?: number
   onPageChange?: (index: number) => void
-  onScroll?: (percent: number, direction: "left" | "right") => void
+  onScroll?: (percent: number, direction: "left" | "right" | "none") => void
   onScrollBegin?: () => void
   onScrollEnd?: () => void
   onPageWillAppear?: (index: number) => void
diff --git a/apps/mobile/native/ios/Modules/PagerView/EnhancePagerController.swift b/apps/mobile/native/ios/Modules/PagerView/EnhancePagerController.swift
@@ -63,7 +63,7 @@ class EnhancePagerController: UIPageViewController, UIScrollViewDelegate {
 
   // Events
   var onPageIndexChange: ((Int) -> Void)?
-  var onScroll: ((CGFloat, PagerDirection) -> Void)?
+  var onScroll: ((CGFloat, PagerDirection, Int) -> Void)?
   var onScrollEnd: ((Int) -> Void)?
   var onScrollStart: ((Int) -> Void)?
   var onPageWillAppear: ((Int) -> Void)?
@@ -130,9 +130,10 @@ class EnhancePagerController: UIPageViewController, UIScrollViewDelegate {
 
     let positionFromStartOfCurrentPage = abs(startOffset - scrollView.contentOffset.x)
     let percent = positionFromStartOfCurrentPage / view.frame.width
+    let position = currentPageIndex
 
-    debugPrint(percent, direction)
-    onScroll?(percent, direction)
+    debugPrint(percent, direction, position)
+    onScroll?(percent, direction, position)
   }
 
   public func scrollViewDidEndDragging(
@@ -143,6 +144,11 @@ class EnhancePagerController: UIPageViewController, UIScrollViewDelegate {
       onScrollEnd?(currentPageIndex)
     }
   }
+
+  public func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
+    isDragging = false
+    onScrollEnd?(currentPageIndex)
+  }
 }
 
 // Add this extension to implement UIPageViewControllerDataSource
diff --git a/apps/mobile/native/ios/Modules/PagerView/EnhancePagerViewModule.swift b/apps/mobile/native/ios/Modules/PagerView/EnhancePagerViewModule.swift
@@ -127,8 +127,8 @@ private class EnhancePagerView: ExpoView, UIGestureRecognizerDelegate {
     pageController.onScrollStart = { [weak self] index in
       self?.onScrollBegin(["index": index])
     }
-    pageController.onScroll = { [weak self] percent, direction in
-      self?.onScroll(["percent": percent, "direction": direction.rawValue])
+    pageController.onScroll = { [weak self] percent, direction, position in
+      self?.onScroll(["percent": percent, "direction": direction.rawValue, "position": position])
     }
     pageController.onScrollEnd = { [weak self] index in
       self?.onScrollEnd(["index": index])
diff --git a/apps/mobile/src/components/native/PagerView/index.tsx b/apps/mobile/src/components/native/PagerView/index.tsx
@@ -20,7 +20,7 @@ interface PagerViewProps {
   transitionStyle?: "scroll" | "pageCurl"
   page?: number
   onPageChange?: (index: number) => void
-  onScroll?: (percent: number, direction: "left" | "right") => void
+  onScroll?: (percent: number, direction: "left" | "right" | "none", position: number) => void
   onScrollBegin?: () => void
   onScrollEnd?: (index: number) => void
   onPageWillAppear?: (index: number) => void
@@ -76,7 +76,7 @@ export const PagerView: FC<PagerViewProps> = ({
         onPageChange?.(e.nativeEvent.index)
       }}
       onScroll={(e) => {
-        onScroll?.(e.nativeEvent.percent, e.nativeEvent.direction)
+        onScroll?.(e.nativeEvent.percent, e.nativeEvent.direction, e.nativeEvent.position)
       }}
       onScrollBegin={() => {
         onScrollBegin?.()
diff --git a/apps/mobile/src/components/native/PagerView/specs.ts b/apps/mobile/src/components/native/PagerView/specs.ts
@@ -11,7 +11,13 @@ export const EnhancePageView = requireNativeView("EnhancePageView")
 
 export interface PagerProps {
   onPageChange?: (e: NativeSyntheticEvent<{ index: number }>) => void
-  onScroll?: (e: NativeSyntheticEvent<{ percent: number; direction: "left" | "right" }>) => void
+  onScroll?: (
+    e: NativeSyntheticEvent<{
+      percent: number
+      direction: "left" | "right" | "none"
+      position: number
+    }>,
+  ) => void
   onScrollBegin?: () => void
   onScrollEnd?: (e: NativeSyntheticEvent<{ index: number }>) => void
   onPageWillAppear?: (e: NativeSyntheticEvent<{ index: number }>) => void
diff --git a/apps/mobile/src/modules/screen/PagerList.ios.tsx b/apps/mobile/src/modules/screen/PagerList.ios.tsx
@@ -3,13 +3,14 @@ import { useTypeScriptHappyCallback } from "@follow/hooks"
 import { useViewWithSubscription } from "@follow/store/subscription/hooks"
 import { EventBus } from "@follow/utils/event-bus"
 import * as Haptics from "expo-haptics"
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
+import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react"
 import type { StyleProp, ViewStyle } from "react-native"
+import { clamp, withTiming } from "react-native-reanimated"
 
 import { PagerView } from "@/src/components/native/PagerView"
 import type { PagerRef } from "@/src/components/native/PagerView/specs"
 
-import { selectTimeline, useSelectedFeed } from "./atoms"
+import { selectTimeline, useSelectedFeed, useTimelineSelectorDragProgress } from "./atoms"
 import { PagerListVisibleContext, PagerListWillVisibleContext } from "./PagerListContext"
 
 export function PagerList({
@@ -30,21 +31,39 @@ export function PagerList({
   const [initialPageIndex] = useState(activeViewIndex)
   const pagerRef = useRef<PagerRef>(null)
   const rid = useId()
-  useEffect(() => {
+  const dragProgress = useTimelineSelectorDragProgress()
+
+  useLayoutEffect(() => {
     return EventBus.subscribe("SELECT_TIMELINE", (data) => {
       if (data.target !== rid) {
-        pagerRef.current?.setPage(activeViews.indexOf(data.view.viewId))
+        const targetIndex = activeViews.indexOf(data.view.viewId)
+        pagerRef.current?.setPage(targetIndex)
+        dragProgress.set(withTiming(targetIndex))
       }
     })
-  }, [activeViews, pagerRef, rid])
+  }, [activeViews, dragProgress, pagerRef, rid])
   const [dragging, setDragging] = useState(false)
 
   return (
     <PagerView
       ref={pagerRef}
       initialPageIndex={initialPageIndex}
+      onScroll={(percent, direction, position) => {
+        const progress = clamp(
+          percent * (direction === "left" ? -1 : direction === "right" ? 1 : 0) + position,
+          0,
+          activeViews.length - 1,
+        )
+        dragProgress.set(progress)
+      }}
       onScrollBegin={useCallback(() => setDragging(true), [])}
-      onScrollEnd={useCallback(() => setDragging(false), [])}
+      onScrollEnd={useCallback(
+        (index: number) => {
+          setDragging(false)
+          dragProgress.set(withTiming(index))
+        },
+        [dragProgress],
+      )}
       pageContainerClassName="flex-1"
       containerClassName="flex-1 absolute inset-0"
       containerStyle={style}
diff --git a/apps/mobile/src/modules/screen/PagerList.tsx b/apps/mobile/src/modules/screen/PagerList.tsx
@@ -2,17 +2,21 @@ import type { FeedViewType } from "@follow/constants"
 import { useViewWithSubscription } from "@follow/store/subscription/hooks"
 import { EventBus } from "@follow/utils/event-bus"
 import * as Haptics from "expo-haptics"
-import { useCallback, useEffect, useId, useMemo, useRef } from "react"
+import { useEffect, useId, useMemo, useRef } from "react"
 import type { StyleProp, ViewStyle } from "react-native"
-import { Animated, StyleSheet, View } from "react-native"
+import { StyleSheet, View } from "react-native"
+import type {
+  PagerViewOnPageScrollEventData,
+  PagerViewOnPageSelectedEventData,
+  PageScrollStateChangedNativeEventData,
+} from "react-native-pager-view"
 import PagerView from "react-native-pager-view"
-import { useSharedValue } from "react-native-reanimated"
-
-import { selectTimeline, useSelectedFeed } from "@/src/modules/screen/atoms"
+import Animated, { runOnJS, useEvent, useHandler } from "react-native-reanimated"
 
+import { selectTimeline, useSelectedFeed, useTimelineSelectorDragProgress } from "./atoms"
 import { PagerListVisibleContext, PagerListWillVisibleContext } from "./PagerListContext"
 
-const AnimatedPagerView = Animated.createAnimatedComponent<typeof PagerView>(PagerView)
+const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
 
 export function PagerList({
   renderItem,
@@ -30,6 +34,7 @@ export function PagerList({
     () => activeViews.indexOf(viewId as FeedViewType),
     [activeViews, viewId],
   )
+  const dragProgress = useTimelineSelectorDragProgress()
 
   const pagerRef = useRef<PagerView>(null)
 
@@ -41,42 +46,33 @@ export function PagerList({
       }
     })
   }, [activeViews, pagerRef, rid])
-  const userInitiatedDragRef = useSharedValue(false)
-
-  // const [dragging, setDragging] = useState(false)
-  const pageScrollHandler = useCallback(
-    (e: {
-      nativeEvent: {
-        position: number
-        offset: number
-      }
-    }) => {
-      "worklet"
-
-      const { position, offset } = e.nativeEvent
-
-      if (!userInitiatedDragRef.value) {
-        return
-      }
-
-      let targetIndex: number
 
-      if (offset > 0.6 && position < activeViews.length - 1) {
-        targetIndex = position + 1
-      } else if (offset < 0.4 && position === activeViewIndex - 1) {
-        targetIndex = position
-      } else if (offset === 0 && position === activeViewIndex) {
-        targetIndex = activeViewIndex
-      } else {
-        targetIndex = activeViewIndex
-      }
+  const handlePageScroll = usePagerHandlers(
+    {
+      onPageScroll(e: PagerViewOnPageScrollEventData) {
+        "worklet"
+        const { position, offset } = e
+        dragProgress.set(offset + position)
+      },
+      onPageScrollStateChanged(e: PageScrollStateChangedNativeEventData) {
+        "worklet"
+        const { pageScrollState } = e
+        if (pageScrollState === "dragging") {
+          // setDragging(true)
+        } else if (pageScrollState === "idle") {
+          // setDragging(false)
+        }
 
-      if (targetIndex !== activeViewIndex) {
-        selectTimeline({ type: "view", viewId: activeViews[targetIndex]! }, rid)
-        userInitiatedDragRef.value = false
-      }
+        if (pageScrollState === "settling") {
+          runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Light)
+        }
+      },
+      onPageSelected(e: PagerViewOnPageSelectedEventData) {
+        "worklet"
+        runOnJS(selectTimeline)({ type: "view", viewId: activeViews[e.position]! }, rid)
+      },
     },
-    [activeViewIndex, activeViews, rid, userInitiatedDragRef],
+    [],
   )
 
   return (
@@ -88,21 +84,7 @@ export function PagerList({
       layoutDirection="ltr"
       offscreenPageLimit={1}
       overdrag
-      onPageScroll={pageScrollHandler}
-      onPageScrollStateChanged={(e) => {
-        const { pageScrollState } = e.nativeEvent
-        if (pageScrollState === "dragging") {
-          // setDragging(true)
-          userInitiatedDragRef.value = true
-        } else if (pageScrollState === "idle") {
-          // setDragging(false)
-        }
-
-        if (pageScrollState === "settling") {
-          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
-        }
-      }}
-      pageMargin={100}
+      onPageScroll={handlePageScroll}
       orientation="horizontal"
     >
       {useMemo(
@@ -127,6 +109,37 @@ export function PagerList({
   )
 }
 
+/**
+ * Ported from bluesky-social/social-app
+ * https://github.com/bluesky-social/social-app/blob/bf95345b333c56876cabf4c5b8516c431cc8ce9b/src/view/com/pager/Pager.tsx#L159-L190
+ */
+function usePagerHandlers(
+  handlers: {
+    onPageScroll: (e: PagerViewOnPageScrollEventData) => void
+    onPageScrollStateChanged: (e: PageScrollStateChangedNativeEventData) => void
+    onPageSelected?: (e: PagerViewOnPageSelectedEventData) => void
+  },
+  dependencies: unknown[],
+) {
+  const { doDependenciesDiffer } = useHandler(handlers as any, dependencies)
+  const subscribeForEvents = ["onPageScroll", "onPageScrollStateChanged", "onPageSelected"]
+  return useEvent(
+    (event) => {
+      "worklet"
+      const { onPageScroll, onPageScrollStateChanged, onPageSelected } = handlers
+      if (event.eventName.endsWith("onPageScroll")) {
+        onPageScroll(event as any as PagerViewOnPageScrollEventData)
+      } else if (event.eventName.endsWith("onPageScrollStateChanged")) {
+        onPageScrollStateChanged(event as any as PageScrollStateChangedNativeEventData)
+      } else if (event.eventName.endsWith("onPageSelected")) {
+        onPageSelected?.(event as any as PagerViewOnPageSelectedEventData)
+      }
+    },
+    subscribeForEvents,
+    doDependenciesDiffer,
+  )
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
diff --git a/apps/mobile/src/modules/screen/TimelineViewSelector.tsx b/apps/mobile/src/modules/screen/TimelineViewSelector.tsx
diff --git a/apps/mobile/src/modules/screen/atoms.ts b/apps/mobile/src/modules/screen/atoms.ts
diff --git a/apps/mobile/src/providers/index.tsx b/apps/mobile/src/providers/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -127,8 +127,8 @@ private class EnhancePagerView: ExpoView, UIGestureRecognizerDelegate {`
`127`	`127`	`pageController.onScrollStart = { [weak self] index in`
`128`	`128`	`self?.onScrollBegin(["index": index])`
`129`	`129`	`}`
`130`		`- pageController.onScroll = { [weak self] percent, direction in`
`131`		`- self?.onScroll(["percent": percent, "direction": direction.rawValue])`
	`130`	`+ pageController.onScroll = { [weak self] percent, direction, position in`
	`131`	`+ self?.onScroll(["percent": percent, "direction": direction.rawValue, "position": position])`
`132`	`132`	`}`
`133`	`133`	`pageController.onScrollEnd = { [weak self] index in`
`134`	`134`	`self?.onScrollEnd(["index": index])`