Fix drawer swipe (#7007)
* Fix drawer swipe * Remove existing setDrawerSwipeDisabled management This is already pretty error-prone. And with tracking whether we're idle it's going to get more complicated. Let's pause and think. * Move setDrawerSwipeDisabled logic into Pager * Remove win/2 threshold It feels super arbitrary and breaks muscle memory. If the gesture is reliable, we shouldn't need it. * Maybe work around iOS freeze * Tweak gestures, add comments * Tune gestures
This commit is contained in:
@@ -90,6 +90,7 @@ function ShellInner() {
|
||||
}
|
||||
}, [dedupe, navigation])
|
||||
|
||||
const swipeEnabled = !canGoBack && hasSession && !isDrawerSwipeDisabled
|
||||
return (
|
||||
<>
|
||||
<View style={[a.h_full]}>
|
||||
@@ -98,12 +99,35 @@ function ShellInner() {
|
||||
<Drawer
|
||||
renderDrawerContent={renderDrawerContent}
|
||||
drawerStyle={{width: Math.min(400, winDim.width * 0.8)}}
|
||||
configureGestureHandler={handler => {
|
||||
if (swipeEnabled) {
|
||||
if (isDrawerOpen) {
|
||||
return handler.activeOffsetX([-1, 1])
|
||||
} else {
|
||||
return (
|
||||
handler
|
||||
// Any movement to the left is a pager swipe
|
||||
// so fail the drawer gesture immediately.
|
||||
.failOffsetX(-1)
|
||||
// Don't rush declaring that a movement to the right
|
||||
// is a drawer swipe. It could be a vertical scroll.
|
||||
.activeOffsetX(5)
|
||||
)
|
||||
}
|
||||
} else {
|
||||
// Fail the gesture immediately.
|
||||
// This seems more reliable than the `swipeEnabled` prop.
|
||||
// With `swipeEnabled` alone, the gesture may freeze after toggling off/on.
|
||||
return handler.failOffsetX([0, 0]).failOffsetY([0, 0])
|
||||
}
|
||||
}}
|
||||
open={isDrawerOpen}
|
||||
onOpen={onOpenDrawer}
|
||||
onClose={onCloseDrawer}
|
||||
swipeEdgeWidth={winDim.width / 2}
|
||||
swipeEdgeWidth={winDim.width}
|
||||
swipeMinVelocity={100}
|
||||
swipeMinDistance={10}
|
||||
drawerType={isIOS ? 'slide' : 'front'}
|
||||
swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}
|
||||
overlayStyle={{
|
||||
backgroundColor: select(t.name, {
|
||||
light: 'rgba(0, 57, 117, 0.1)',
|
||||
|
||||
Reference in New Issue
Block a user