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

54
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,37 +138,29 @@ 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() .onUpdate(e => {
} if (store.nav.tab.canGoBack) {
}, [store.nav.tab]) swipeGestureInterp.value = Math.max(e.translationX / winDim.width, 0)
const swipeGesture = useMemo( }
() => })
Gesture.Pan() .onEnd(e => {
.onUpdate(e => { if (
if (store.nav.tab.canGoBack) { swipeGestureInterp.value >= SWIPE_GESTURE_DIST_TRIGGER ||
swipeGestureInterp.value = Math.max( e.velocityX > SWIPE_GESTURE_VEL_TRIGGER
e.translationX / winDim.width, ) {
0, swipeGestureInterp.value = withTiming(1, {duration: 100}, () => {
) runOnJS(goBack)()
}
}) })
.onEnd(e => { } else {
if ( swipeGestureInterp.value = withTiming(0, {duration: 100})
swipeGestureInterp.value >= SWIPE_GESTURE_DIST_TRIGGER || }
e.velocityX > SWIPE_GESTURE_VEL_TRIGGER })
) { useEffect(() => {
runOnJS(goBack)() // reset the swipe interopolation when the page changes
swipeGestureInterp.value = withTiming(1, {duration: 100}, () => { swipeGestureInterp.value = 0
swipeGestureInterp.value = 0 }, [swipeGestureInterp, store.nav.tab.current])
})
} else {
swipeGestureInterp.value = withTiming(0, {duration: 100})
}
}),
[swipeGestureInterp, winDim, store.nav.tab.canGoBack, goBack],
)
const swipeTransform = useAnimatedStyle(() => ({ const swipeTransform = useAnimatedStyle(() => ({
transform: [{translateX: swipeGestureInterp.value * winDim.width}], transform: [{translateX: swipeGestureInterp.value * winDim.width}],