xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: pager should not flicker when scrolling fast(#3858) 

* fix: correct initialPageIndex assignment

* chore: optimize event handlers with useCallback
This commit is contained in:
Whitewater 2025-06-03 11:32:16 +08:00 committed by GitHub
parent 14d4da3d28
commit 82fb9ce1dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/mobile/src/modules/screen/PagerList.ios.tsx
View File

@ -3,7 +3,7 @@ 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 { useEffect, useId, useMemo, useRef, useState } from "react"
import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
import type { StyleProp, ViewStyle } from "react-native"
import { PagerView } from "@/src/components/native/PagerView"
@ -27,6 +27,7 @@ export function PagerList({
() => activeViews.indexOf(viewId as FeedViewType),
[activeViews, viewId],
)
const [initialPageIndex] = useState(activeViewIndex)
const pagerRef = useRef<PagerRef>(null)
const rid = useId()
useEffect(() => {
@ -41,16 +42,19 @@ export function PagerList({
return (
<PagerView
ref={pagerRef}
initialPageIndex={activeViewIndex}
onScrollBegin={() => setDragging(true)}
onScrollEnd={() => setDragging(false)}
initialPageIndex={initialPageIndex}
onScrollBegin={useCallback(() => setDragging(true), [])}
onScrollEnd={useCallback(() => setDragging(false), [])}
pageContainerClassName="flex-1"
containerClassName="flex-1 absolute inset-0"
containerStyle={style}
onPageChange={(targetIndex) => {
selectTimeline({ type: "view", viewId: activeViews[targetIndex]! }, rid)
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
}}
onPageChange={useTypeScriptHappyCallback(
(targetIndex) => {
selectTimeline({ type: "view", viewId: activeViews[targetIndex]! }, rid)
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
},
[activeViews, rid],
)}
renderPage={useTypeScriptHappyCallback(
(index) => (
<PagerListVisibleContext value={index === activeViewIndex} key={activeViews[index]!}>