Fix some jank in the navigation swipes
parent
639c25821e
commit
46524d85d8
|
@ -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}],
|
||||||
|
|
Loading…
Reference in New Issue