zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Fix some jank in the navigation swipes

zio/stable
Paul Frazee 2022-09-09 13:11:30 -05:00
parent 639c25821e
commit 46524d85d8
1 changed files with 23 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/view/shell/mobile/index.tsx
View File

@ -1,4 +1,4 @@
import React, {useState, useRef, useMemo} from 'react' import React, {useState, useRef, useEffect} from 'react'
import {observer} from 'mobx-react-lite' import {observer} from 'mobx-react-lite'
import { import {
useWindowDimensions, useWindowDimensions,
@ -138,20 +138,11 @@ export const MobileShell: React.FC = observer(() => {
const onChangeTab = (tabIndex: number) => store.nav.setActiveTab(tabIndex) const onChangeTab = (tabIndex: number) => store.nav.setActiveTab(tabIndex)
const onCloseTab = (tabIndex: number) => store.nav.closeTab(tabIndex) const onCloseTab = (tabIndex: number) => store.nav.closeTab(tabIndex)
const goBack = useMemo(() => { const goBack = () => store.nav.tab.goBack()
return () => { const swipeGesture = Gesture.Pan()
store.nav.tab.goBack()
}
}, [store.nav.tab])
const swipeGesture = useMemo(
() =>
Gesture.Pan()
.onUpdate(e => { .onUpdate(e => {
if (store.nav.tab.canGoBack) { if (store.nav.tab.canGoBack) {
swipeGestureInterp.value = Math.max( swipeGestureInterp.value = Math.max(e.translationX / winDim.width, 0)
e.translationX / winDim.width,
0,
)
} }
}) })
.onEnd(e => { .onEnd(e => {
@ -159,16 +150,17 @@ export const MobileShell: React.FC = observer(() => {
swipeGestureInterp.value >= SWIPE_GESTURE_DIST_TRIGGER || swipeGestureInterp.value >= SWIPE_GESTURE_DIST_TRIGGER ||
e.velocityX > SWIPE_GESTURE_VEL_TRIGGER e.velocityX > SWIPE_GESTURE_VEL_TRIGGER
) { ) {
runOnJS(goBack)()
swipeGestureInterp.value = withTiming(1, {duration: 100}, () => { swipeGestureInterp.value = withTiming(1, {duration: 100}, () => {
swipeGestureInterp.value = 0 runOnJS(goBack)()
}) })
} else { } else {
swipeGestureInterp.value = withTiming(0, {duration: 100}) swipeGestureInterp.value = withTiming(0, {duration: 100})
} }
}), })
[swipeGestureInterp, winDim, store.nav.tab.canGoBack, goBack], useEffect(() => {
) // reset the swipe interopolation when the page changes
swipeGestureInterp.value = 0
}, [swipeGestureInterp, store.nav.tab.current])
const swipeTransform = useAnimatedStyle(() => ({ const swipeTransform = useAnimatedStyle(() => ({
transform: [{translateX: swipeGestureInterp.value * winDim.width}], transform: [{translateX: swipeGestureInterp.value * winDim.width}],