Clean up pager refs to fix crash (#2195)

zio/stable
dan 2023-12-12 23:11:20 +00:00 committed by GitHub
parent 5c701f8e0b
commit bf9cedb67b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 12 deletions

View File

@ -121,13 +121,16 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
)
const scrollRefs = useSharedValue<AnimatedRef<any>[]>([])
const registerRef = (scrollRef: AnimatedRef<any>, index: number) => {
const registerRef = React.useCallback(
(scrollRef: AnimatedRef<any> | null, atIndex: number) => {
scrollRefs.modify(refs => {
'worklet'
refs[index] = scrollRef
refs[atIndex] = scrollRef
return refs
})
}
},
[scrollRefs],
)
const lastForcedScrollY = useSharedValue(0)
const adjustScrollForOtherPages = () => {
@ -138,8 +141,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
lastForcedScrollY.value = forcedScrollY
const refs = scrollRefs.value
for (let i = 0; i < refs.length; i++) {
if (i !== currentPage) {
// This needs to run on the UI thread.
if (i !== currentPage && refs[i] != null) {
scrollTo(refs[i], 0, forcedScrollY, false)
}
}
@ -206,11 +208,12 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
<View key={i} collapsable={false}>
<PagerItem
headerHeight={headerHeight}
index={i}
isReady={isReady}
isFocused={i === currentPage}
isScrolledDown={isScrolledDown}
onScrollWorklet={i === currentPage ? onScrollWorklet : noop}
registerRef={(r: AnimatedRef<any>) => registerRef(r, i)}
registerRef={registerRef}
renderTab={child}
/>
</View>
@ -287,6 +290,7 @@ PagerTabBar = React.memo(PagerTabBar)
function PagerItem({
headerHeight,
index,
isReady,
isFocused,
isScrolledDown,
@ -295,15 +299,22 @@ function PagerItem({
registerRef,
}: {
headerHeight: number
index: number
isFocused: boolean
isReady: boolean
isScrolledDown: boolean
registerRef: (scrollRef: AnimatedRef<any>) => void
registerRef: (scrollRef: AnimatedRef<any> | null, atIndex: number) => void
onScrollWorklet: (e: NativeScrollEvent) => void
renderTab: ((props: PagerWithHeaderChildParams) => JSX.Element) | null
}) {
const scrollElRef = useAnimatedRef()
registerRef(scrollElRef)
React.useEffect(() => {
registerRef(scrollElRef, index)
return () => {
registerRef(null, index)
}
}, [scrollElRef, registerRef, index])
const scrollHandler = React.useMemo(
() => ({onScroll: onScrollWorklet}),