Remove old scroll sync logic
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user