diff options
Diffstat (limited to 'src/view/com/util')
| -rw-r--r-- | src/view/com/util/BottomSheetCustomBackdrop.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/util/List.tsx | 4 | ||||
| -rw-r--r-- | src/view/com/util/MainScrollProvider.tsx | 51 |
3 files changed, 30 insertions, 27 deletions
diff --git a/src/view/com/util/BottomSheetCustomBackdrop.tsx b/src/view/com/util/BottomSheetCustomBackdrop.tsx index 25e882e87..86751861f 100644 --- a/src/view/com/util/BottomSheetCustomBackdrop.tsx +++ b/src/view/com/util/BottomSheetCustomBackdrop.tsx @@ -18,7 +18,7 @@ export function createCustomBackdrop( // animated variables const opacity = useAnimatedStyle(() => ({ opacity: interpolate( - animatedIndex.value, // current snap index + animatedIndex.get(), // current snap index [-1, 0], // input range [0, 0.5], // output range Extrapolation.CLAMP, diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx index 52314f954..4ee4d7d0b 100644 --- a/src/view/com/util/List.tsx +++ b/src/view/com/util/List.tsx @@ -79,8 +79,8 @@ function ListImpl<ItemT>( onScrollFromContext?.(e, ctx) const didScrollDown = e.contentOffset.y > SCROLLED_DOWN_LIMIT - if (isScrolledDown.value !== didScrollDown) { - isScrolledDown.value = didScrollDown + if (isScrolledDown.get() !== didScrollDown) { + isScrolledDown.set(didScrollDown) if (onScrolledDownChange != null) { runOnJS(handleScrolledDownChange)(didScrollDown) } diff --git a/src/view/com/util/MainScrollProvider.tsx b/src/view/com/util/MainScrollProvider.tsx index 193d07d72..0d084993b 100644 --- a/src/view/com/util/MainScrollProvider.tsx +++ b/src/view/com/util/MainScrollProvider.tsx @@ -44,7 +44,7 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) { (v: boolean) => { 'worklet' cancelAnimation(headerMode) - headerMode.value = v ? V1.value : V0.value + headerMode.set(v ? V1.get() : V0.get()) }, [headerMode], ) @@ -52,9 +52,9 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) { useEffect(() => { if (isWeb) { return listenToForcedWindowScroll(() => { - startDragOffset.value = null - startMode.value = null - didJustRestoreScroll.value = true + startDragOffset.set(null) + startMode.set(null) + didJustRestoreScroll.set(true) }) } }) @@ -63,13 +63,14 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) { (e: NativeScrollEvent) => { 'worklet' if (isNative) { - if (startDragOffset.value === null) { + const startDragOffsetValue = startDragOffset.get() + if (startDragOffsetValue === null) { return } - const didScrollDown = e.contentOffset.y > startDragOffset.value - startDragOffset.value = null - startMode.value = null - if (e.contentOffset.y < headerHeight.value) { + const didScrollDown = e.contentOffset.y > startDragOffsetValue + startDragOffset.set(null) + startMode.set(null) + if (e.contentOffset.y < headerHeight.get()) { // If we're close to the top, show the shell. setMode(false) } else if (didScrollDown) { @@ -77,7 +78,7 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) { setMode(true) } else { // Snap to whichever state is the closest. - setMode(Math.round(headerMode.value) === 1) + setMode(Math.round(headerMode.get()) === 1) } } }, @@ -88,8 +89,8 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) { (e: NativeScrollEvent) => { 'worklet' if (isNative) { - startDragOffset.value = e.contentOffset.y - startMode.value = headerMode.value + startDragOffset.set(e.contentOffset.y) + startMode.set(headerMode.get()) } }, [headerMode, startDragOffset, startMode], @@ -123,10 +124,12 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) { (e: NativeScrollEvent) => { 'worklet' if (isNative) { - if (startDragOffset.value === null || startMode.value === null) { + const startDragOffsetValue = startDragOffset.get() + const startModeValue = startMode.get() + if (startDragOffsetValue === null || startModeValue === null) { if ( - headerMode.value !== 0 && - e.contentOffset.y < headerHeight.value + headerMode.get() !== 0 && + e.contentOffset.y < headerHeight.get() ) { // If we're close enough to the top, always show the shell. // Even if we're not dragging. @@ -137,29 +140,29 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) { // The "mode" value is always between 0 and 1. // Figure out how much to move it based on the current dragged distance. - const dy = e.contentOffset.y - startDragOffset.value + const dy = e.contentOffset.y - startDragOffsetValue const dProgress = interpolate( dy, - [-headerHeight.value, headerHeight.value], + [-headerHeight.get(), headerHeight.get()], [-1, 1], ) - const newValue = clamp(startMode.value + dProgress, 0, 1) - if (newValue !== headerMode.value) { + const newValue = clamp(startModeValue + dProgress, 0, 1) + if (newValue !== headerMode.get()) { // Manually adjust the value. This won't be (and shouldn't be) animated. // Cancel any any existing animation cancelAnimation(headerMode) - headerMode.value = newValue + headerMode.set(newValue) } } else { - if (didJustRestoreScroll.value) { - didJustRestoreScroll.value = false + if (didJustRestoreScroll.get()) { + didJustRestoreScroll.set(false) // Don't hide/show navbar based on scroll restoratoin. return } // On the web, we don't try to follow the drag because we don't know when it ends. // Instead, show/hide immediately based on whether we're scrolling up or down. - const dy = e.contentOffset.y - (startDragOffset.value ?? 0) - startDragOffset.value = e.contentOffset.y + const dy = e.contentOffset.y - (startDragOffset.get() ?? 0) + startDragOffset.set(e.contentOffset.y) if (dy < 0 || e.contentOffset.y < WEB_HIDE_SHELL_THRESHOLD) { setMode(false) |