fix(mobile): reduce timeline indicator jank on iOS (#4857)

Author: DIYgod

apps/mobile/native/ios/Modules/PagerView/EnhancePagerController.swift

@@ -114,7 +114,6 @@ class EnhancePagerController: UIPageViewController, UIScrollViewDelegate {
 
   func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
     startOffset = scrollView.contentOffset.x
-    debugPrint(scrollView.contentOffset.x)
     isDragging = true
     onScrollStart?(currentPageIndex)
   }
@@ -128,12 +127,14 @@ class EnhancePagerController: UIPageViewController, UIScrollViewDelegate {
       direction = .left
     }
 
+    guard view.frame.width > 0 else { return }
     let positionFromStartOfCurrentPage = abs(startOffset - scrollView.contentOffset.x)
     let percent = positionFromStartOfCurrentPage / view.frame.width
     let position = currentPageIndex
 
-    debugPrint(percent, direction, position)
-    onScroll?(percent, direction, position)
+    if direction != .none || percent > 0 {
+      onScroll?(percent, direction, position)
+    }
   }
 
   public func scrollViewDidEndDragging(

apps/mobile/native/ios/Modules/PagerView/EnhancePagerViewModule.swift

@@ -68,6 +68,7 @@ enum TransitionStyle: String, Enumerable {
 
 private class EnhancePagerView: ExpoView, UIGestureRecognizerDelegate {
   fileprivate var pageController: EnhancePagerController?
+  private var isInitialized = false
 
   private let onScroll = EventDispatcher()
   private let onScrollBegin = EventDispatcher()
@@ -104,6 +105,11 @@ private class EnhancePagerView: ExpoView, UIGestureRecognizerDelegate {
   var transitionStyle: TransitionStyle = .scroll
   var panGestureRecognizer: UIGestureRecognizer?
   func initialize() {
+    if isInitialized {
+      return
+    }
+    isInitialized = true
+
     let panGestureRecognizer = UIPanGestureRecognizer()
     panGestureRecognizer.delegate = self
     self.panGestureRecognizer = panGestureRecognizer

apps/mobile/src/modules/screen/PagerList.ios.tsx

@@ -31,6 +31,7 @@ export function PagerList({
   )
   const [initialPageIndex] = useState(activeViewIndex)
   const pagerRef = useRef<PagerRef>(null)
+  const lastProgressRef = useRef(activeViewIndex)
   const rid = useId()
   const dragProgress = useTimelineSelectorDragProgress()
 
@@ -39,11 +40,22 @@ export function PagerList({
       if (data.target !== rid) {
         const targetIndex = activeViews.indexOf(data.view.viewId)
         pagerRef.current?.setPage(targetIndex)
+        lastProgressRef.current = targetIndex
         dragProgress.set(withTiming(targetIndex))
       }
     })
   }, [activeViews, dragProgress, pagerRef, rid])
   const [dragging, setDragging] = useState(false)
+  const updateDragProgress = useCallback(
+    (nextProgress: number) => {
+      if (Math.abs(nextProgress - lastProgressRef.current) < 0.001) {
+        return
+      }
+      lastProgressRef.current = nextProgress
+      dragProgress.set(nextProgress)
+    },
+    [dragProgress],
+  )
 
   return (
     <PagerView
@@ -56,12 +68,16 @@ export function PagerList({
           0,
           activeViews.length - 1,
         )
-        dragProgress.set(progress)
+        updateDragProgress(progress)
       }}
-      onScrollBegin={useCallback(() => setDragging(true), [])}
+      onScrollBegin={useCallback(() => {
+        setDragging(true)
+        lastProgressRef.current = activeViewIndex
+      }, [activeViewIndex])}
       onScrollEnd={useCallback(
         (index: number) => {
           setDragging(false)
+          lastProgressRef.current = index
           dragProgress.set(withTiming(index))
         },
         [dragProgress],