fix(mobile): stop horizontal recognizers from hijacking diagonal vertical scrolls

packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx

@@ -3,7 +3,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { DrawerContentComponentProps } from '@react-navigation/drawer'
 import { createDrawerNavigator } from '@react-navigation/drawer'
 import { useNavigation } from '@react-navigation/native'
-import { Dimensions, Platform, View, StyleSheet } from 'react-native'
+import { Platform, View, StyleSheet } from 'react-native'
 
 import { IconAudiusLogoHorizontal } from '@audius/harmony-native'
 import { AudioPlayer } from 'app/components/audio/AudioPlayer'
@@ -15,7 +15,7 @@ import { AppScreen } from '../app-screen'
 import { AppDrawerContextProvider } from './AppDrawerContext'
 import { LeftNavDrawer } from './left-nav-drawer'
 
-const SCREEN_WIDTH = Dimensions.get('window').width
+const DRAWER_SWIPE_EDGE_WIDTH = 40
 
 const Drawer = createDrawerNavigator()
 
@@ -66,13 +66,14 @@ export const AppDrawerScreen = memo(() => {
 
   // Drawer swipe-to-open is enabled only when at the tab stack's root, so
   // the right-swipe gesture inside a nested stack falls through to the native
-  // stack's fullScreenSwipe back behavior. swipeEdgeWidth stays at the full
-  // screen width so opening the drawer from the root doesn't require a swipe
-  // from the screen edge.
+  // stack's fullScreenSwipe back behavior. The navigator's pan (fixed 5pt
+  // thresholds) is limited to the left edge so it can't take vertical scrolls;
+  // mid-screen opening uses `useOpenDrawerGesture`. swipeEdgeWidth only applies
+  // while closed, so swipe-to-close stays full-width.
   const drawerScreenOptions = useMemo(
     () => ({
       headerShown: false,
-      swipeEdgeWidth: SCREEN_WIDTH,
+      swipeEdgeWidth: DRAWER_SWIPE_EDGE_WIDTH,
       drawerType: 'slide' as const,
       drawerStyle: { width: '75%' as const },
       swipeEnabled:

packages/mobile/src/screens/app-drawer-screen/useOpenDrawerGesture.ts

@@ -0,0 +1,34 @@
+import { useContext, useMemo } from 'react'
+
+import { Gesture } from 'react-native-gesture-handler'
+
+import { AppDrawerContext } from './AppDrawerContext'
+
+// Rightward travel needed before the pan claims the touch.
+const OPEN_DRAWER_ACTIVE_OFFSET_X = 20
+// Fail on 12pt of vertical travel, so only drags within ~30 degrees of
+// horizontal open the drawer.
+const OPEN_DRAWER_FAIL_OFFSET_Y = 12
+
+/**
+ * Rightward, mostly horizontal pan that opens the left nav drawer from
+ * mid-screen. The drawer navigator's own pan has fixed 5pt thresholds, so it
+ * is limited to the screen edge.
+ */
+export const useOpenDrawerGesture = (enabled: boolean) => {
+  const { drawerHelpers } = useContext(AppDrawerContext)
+
+  return useMemo(
+    () =>
+      Gesture.Pan()
+        .enabled(enabled)
+        .activeOffsetX(OPEN_DRAWER_ACTIVE_OFFSET_X)
+        .failOffsetX(-OPEN_DRAWER_ACTIVE_OFFSET_X)
+        .failOffsetY([-OPEN_DRAWER_FAIL_OFFSET_Y, OPEN_DRAWER_FAIL_OFFSET_Y])
+        .runOnJS(true)
+        .onStart(() => {
+          drawerHelpers?.openDrawer()
+        }),
+    [enabled, drawerHelpers]
+  )
+}