Remove old scroll sync logic

This commit is contained in:
Dan Abramov
2023-11-10 02:16:53 +00:00
parent 53aa7d14c0
commit 8d60937a25
+4 -23
View File
@@ -1,12 +1,10 @@
import * as React from 'react' import * as React from 'react'
import {LayoutChangeEvent, StyleSheet, View} from 'react-native' import {LayoutChangeEvent, StyleSheet, View} from 'react-native'
import Animated, { import Animated, {
Easing,
useAnimatedReaction, useAnimatedReaction,
useAnimatedScrollHandler, useAnimatedScrollHandler,
useAnimatedStyle, useAnimatedStyle,
useSharedValue, useSharedValue,
withTiming,
runOnJS, runOnJS,
useAnimatedRef, useAnimatedRef,
} from 'react-native-reanimated' } from 'react-native-reanimated'
@@ -52,21 +50,14 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
) { ) {
const {isMobile} = useWebMediaQueries() const {isMobile} = useWebMediaQueries()
const [currentPage, setCurrentPage] = React.useState(0) const [currentPage, setCurrentPage] = React.useState(0)
const scrollYs = React.useRef<Record<number, number>>({}) const scrollY = useSharedValue(0)
const scrollY = useSharedValue(scrollYs.current[currentPage] || 0)
const [tabBarHeight, setTabBarHeight] = React.useState(0) const [tabBarHeight, setTabBarHeight] = React.useState(0)
const [headerOnlyHeight, setHeaderOnlyHeight] = React.useState(0) const [headerOnlyHeight, setHeaderOnlyHeight] = React.useState(0)
const [isScrolledDown, setIsScrolledDown] = React.useState( const [isScrolledDown, setIsScrolledDown] = React.useState(false)
scrollYs.current[currentPage] > SCROLLED_DOWN_LIMIT,
)
const headerHeight = headerOnlyHeight + tabBarHeight const headerHeight = headerOnlyHeight + tabBarHeight
// react to scroll updates
function onScrollUpdate(v: number) { function onScrollUpdate(v: number) {
// track each page's current scroll position
scrollYs.current[currentPage] = Math.min(v, headerOnlyHeight)
// update the 'is scrolled down' value
setIsScrolledDown(v > SCROLLED_DOWN_LIMIT) setIsScrolledDown(v > SCROLLED_DOWN_LIMIT)
} }
useAnimatedReaction( useAnimatedReaction(
@@ -157,19 +148,9 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
[onPageSelected, setCurrentPage], [onPageSelected, setCurrentPage],
) )
const onPageSelecting = React.useCallback( const onPageSelecting = React.useCallback((index: number) => {
(index: number) => {
setCurrentPage(index) setCurrentPage(index)
if (scrollY.value > headerHeight) { }, [])
scrollY.value = headerHeight
}
scrollY.value = withTiming(scrollYs.current[index] || 0, {
duration: 170,
easing: Easing.inOut(Easing.quad),
})
},
[scrollY, setCurrentPage, scrollYs, headerHeight],
)
return ( return (
<Pager <Pager