forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Clean up pager refs to fix crash (#2195)
+23
-12
+23
-12
src/view/com/pager/PagerWithHeader.tsx
+23
-12
src/view/com/pager/PagerWithHeader.tsx
···
121
121
)
122
122
123
123
const scrollRefs = useSharedValue<AnimatedRef<any>[]>([])
124
-
const registerRef = (scrollRef: AnimatedRef<any>, index: number) => {
125
-
scrollRefs.modify(refs => {
126
-
'worklet'
127
-
refs[index] = scrollRef
128
-
return refs
129
-
})
130
-
}
124
+
const registerRef = React.useCallback(
125
+
(scrollRef: AnimatedRef<any> | null, atIndex: number) => {
126
+
scrollRefs.modify(refs => {
127
+
'worklet'
128
+
refs[atIndex] = scrollRef
129
+
return refs
130
+
})
131
+
},
132
+
[scrollRefs],
133
+
)
131
134
132
135
const lastForcedScrollY = useSharedValue(0)
133
136
const adjustScrollForOtherPages = () => {
···
138
141
lastForcedScrollY.value = forcedScrollY
139
142
const refs = scrollRefs.value
140
143
for (let i = 0; i < refs.length; i++) {
141
-
if (i !== currentPage) {
142
-
// This needs to run on the UI thread.
144
+
if (i !== currentPage && refs[i] != null) {
143
145
scrollTo(refs[i], 0, forcedScrollY, false)
144
146
}
145
147
}
···
206
208
<View key={i} collapsable={false}>
207
209
<PagerItem
208
210
headerHeight={headerHeight}
211
+
index={i}
209
212
isReady={isReady}
210
213
isFocused={i === currentPage}
211
214
isScrolledDown={isScrolledDown}
212
215
onScrollWorklet={i === currentPage ? onScrollWorklet : noop}
213
-
registerRef={(r: AnimatedRef<any>) => registerRef(r, i)}
216
+
registerRef={registerRef}
214
217
renderTab={child}
215
218
/>
216
219
</View>
···
287
290
288
291
function PagerItem({
289
292
headerHeight,
293
+
index,
290
294
isReady,
291
295
isFocused,
292
296
isScrolledDown,
···
295
299
registerRef,
296
300
}: {
297
301
headerHeight: number
302
+
index: number
298
303
isFocused: boolean
299
304
isReady: boolean
300
305
isScrolledDown: boolean
301
-
registerRef: (scrollRef: AnimatedRef<any>) => void
306
+
registerRef: (scrollRef: AnimatedRef<any> | null, atIndex: number) => void
302
307
onScrollWorklet: (e: NativeScrollEvent) => void
303
308
renderTab: ((props: PagerWithHeaderChildParams) => JSX.Element) | null
304
309
}) {
305
310
const scrollElRef = useAnimatedRef()
306
-
registerRef(scrollElRef)
311
+
312
+
React.useEffect(() => {
313
+
registerRef(scrollElRef, index)
314
+
return () => {
315
+
registerRef(null, index)
316
+
}
317
+
}, [scrollElRef, registerRef, index])
307
318
308
319
const scrollHandler = React.useMemo(
309
320
() => ({onScroll: onScrollWorklet}),