zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/view/com/pager/PagerWithHeader.tsx
View File

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