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

Fix an issue that caused the shelf menu to show up at random

zio/stable
Paul Frazee 2023-01-17 21:01:52 -06:00
parent 80e035cede
commit 7328e80825
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -127,6 +127,7 @@ export const MobileShell: React.FC = observer(() => {
const scrollElRef = useRef<FlatList | undefined>() const scrollElRef = useRef<FlatList | undefined>()
const winDim = useWindowDimensions() const winDim = useWindowDimensions()
const [menuSwipingDirection, setMenuSwipingDirection] = useState(0) const [menuSwipingDirection, setMenuSwipingDirection] = useState(0)
const constZeroInterp = useAnimatedValue(0)
const swipeGestureInterp = useAnimatedValue(0) const swipeGestureInterp = useAnimatedValue(0)
const minimalShellInterp = useAnimatedValue(0) const minimalShellInterp = useAnimatedValue(0)
const tabMenuInterp = useAnimatedValue(0) const tabMenuInterp = useAnimatedValue(0)
@ -279,20 +280,20 @@ export const MobileShell: React.FC = observer(() => {
const swipeTransform = store.nav.tab.canGoBack const swipeTransform = store.nav.tab.canGoBack
? {transform: [{translateX: swipeTranslateX}]} ? {transform: [{translateX: swipeTranslateX}]}
: undefined : undefined
let shouldRenderMenu = false
let menuTranslateX let menuTranslateX
const menuDrawerWidth = winDim.width - 100 const menuDrawerWidth = winDim.width - 100
if (isMenuActive) { if (isMenuActive) {
// menu is active, interpret swipes as closes // menu is active, interpret swipes as closes
menuTranslateX = Animated.multiply(swipeGestureInterp, menuDrawerWidth * -1) menuTranslateX = Animated.multiply(swipeGestureInterp, menuDrawerWidth * -1)
shouldRenderMenu = true
} else if (!store.nav.tab.canGoBack) { } else if (!store.nav.tab.canGoBack) {
// at back of history, interpret swipes as opens // at back of history, interpret swipes as opens
menuTranslateX = Animated.subtract( menuTranslateX = Animated.subtract(
menuDrawerWidth * -1, menuDrawerWidth * -1,
Animated.multiply(swipeGestureInterp, menuDrawerWidth), Animated.multiply(swipeGestureInterp, menuDrawerWidth),
) )
} else { shouldRenderMenu = true
// not at back of history, leave off screen
menuTranslateX = menuDrawerWidth * -1
} }
const menuSwipeTransform = { const menuSwipeTransform = {
transform: [{translateX: menuTranslateX}], transform: [{translateX: menuTranslateX}],
@ -425,12 +426,14 @@ export const MobileShell: React.FC = observer(() => {
<Animated.View style={[styles.screenMask, menuSwipeOpacity]} /> <Animated.View style={[styles.screenMask, menuSwipeOpacity]} />
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
) : undefined} ) : undefined}
<Animated.View style={[styles.menuDrawer, menuSwipeTransform]}> {shouldRenderMenu && (
<Menu <Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
visible={isMenuActive} <Menu
onClose={() => store.shell.setMainMenuOpen(false)} visible={isMenuActive}
/> onClose={() => store.shell.setMainMenuOpen(false)}
</Animated.View> />
</Animated.View>
)}
</HorzSwipe> </HorzSwipe>
</View> </View>
{isTabsSelectorActive ? ( {isTabsSelectorActive ? (