Remove early onPageSelected call
It was added to try to do some work eagerly when we're sure which way the scroll is snapping. This is not necessarily a good idea though. It schedules a potentially expensive re-render right during the deceleration animation, which is not great. Whatever we're optimizing there, we should optimize smarter (e.g. prewarm just the network call). The other thing it used to help with is triggering the pager header autoscroll earlier. But we're going to rewrite that part differently anyway so that's not relevant either.
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
import React, {forwardRef} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import PagerView, {
|
||||
PagerViewOnPageScrollEvent,
|
||||
PagerViewOnPageSelectedEvent,
|
||||
PageScrollStateChangedNativeEvent,
|
||||
} from 'react-native-pager-view'
|
||||
@@ -43,9 +42,6 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
|
||||
ref,
|
||||
) {
|
||||
const [selectedPage, setSelectedPage] = React.useState(0)
|
||||
const lastOffset = React.useRef(0)
|
||||
const lastDirection = React.useRef(0)
|
||||
const scrollState = React.useRef('')
|
||||
const pagerView = React.useRef<PagerView>(null)
|
||||
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
@@ -62,50 +58,11 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
|
||||
[setSelectedPage, onPageSelected],
|
||||
)
|
||||
|
||||
const onPageScroll = React.useCallback(
|
||||
(e: PagerViewOnPageScrollEvent) => {
|
||||
const {position, offset} = e.nativeEvent
|
||||
if (offset === 0) {
|
||||
// offset hits 0 in some awkward spots so we ignore it
|
||||
return
|
||||
}
|
||||
// NOTE
|
||||
// we want to call `onPageSelecting` as soon as the scroll-gesture
|
||||
// enters the "settling" phase, which means the user has released it
|
||||
// we can't infer directionality from the scroll information, so we
|
||||
// track the offset changes. if the offset delta is consistent with
|
||||
// the existing direction during the settling phase, we can say for
|
||||
// certain where it's going and can fire
|
||||
// -prf
|
||||
if (scrollState.current === 'settling') {
|
||||
if (lastDirection.current === -1 && offset < lastOffset.current) {
|
||||
setSelectedPage(position)
|
||||
lastDirection.current = 0
|
||||
} else if (
|
||||
lastDirection.current === 1 &&
|
||||
offset > lastOffset.current
|
||||
) {
|
||||
setSelectedPage(position + 1)
|
||||
lastDirection.current = 0
|
||||
}
|
||||
} else {
|
||||
if (offset < lastOffset.current) {
|
||||
lastDirection.current = -1
|
||||
} else if (offset > lastOffset.current) {
|
||||
lastDirection.current = 1
|
||||
}
|
||||
}
|
||||
lastOffset.current = offset
|
||||
},
|
||||
[lastOffset, lastDirection],
|
||||
)
|
||||
|
||||
const handlePageScrollStateChanged = React.useCallback(
|
||||
(e: PageScrollStateChangedNativeEvent) => {
|
||||
scrollState.current = e.nativeEvent.pageScrollState
|
||||
onPageScrollStateChanged?.(e.nativeEvent.pageScrollState)
|
||||
},
|
||||
[scrollState, onPageScrollStateChanged],
|
||||
[onPageScrollStateChanged],
|
||||
)
|
||||
|
||||
const onTabBarSelect = React.useCallback(
|
||||
@@ -126,8 +83,7 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
|
||||
style={[a.flex_1]}
|
||||
initialPage={initialPage}
|
||||
onPageScrollStateChanged={handlePageScrollStateChanged}
|
||||
onPageSelected={onPageSelectedInner}
|
||||
onPageScroll={onPageScroll}>
|
||||
onPageSelected={onPageSelectedInner}>
|
||||
{children}
|
||||
</PagerView>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user