Fix trending swipe gesture (#7417)

2 files changed, 18 insertions, 2 deletions

diff --git a/src/view/shell/TrendingGestureContext.tsx b/src/view/shell/TrendingGestureContext.tsx
new file mode 100644
index 000000000..8f21f444b
--- /dev/null
+++ b/src/view/shell/TrendingGestureContext.tsx
@@ -0,0 +1,7 @@
+import {createContext} from 'react'
+import {Gesture} from 'react-native-gesture-handler'
+
+// Not really used but serves as a fallback for types.
+const noopGesture = Gesture.Native()
+
+export const TrendingGestureContext = createContext(noopGesture)
diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index a5e97610d..80e63c6bc 100644
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@@ -1,6 +1,7 @@
-import {useCallback, useEffect} from 'react'
+import {useCallback, useEffect, useState} from 'react'
 import {BackHandler, useWindowDimensions, View} from 'react-native'
 import {Drawer} from 'react-native-drawer-layout'
+import {Gesture} from 'react-native-gesture-handler'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {StatusBar} from 'expo-status-bar'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
@@ -33,6 +34,7 @@ import {BottomSheetOutlet} from '../../../modules/bottom-sheet'
 import {updateActiveViewAsync} from '../../../modules/expo-bluesky-swiss-army/src/VisibilityView'
 import {Composer} from './Composer'
 import {DrawerContent} from './Drawer'
+import {TrendingGestureContext} from './TrendingGestureContext'
 
 function ShellInner() {
   const t = useTheme()
@@ -92,6 +94,7 @@ function ShellInner() {
   }, [dedupe, navigation])
 
   const swipeEnabled = !canGoBack && hasSession && !isDrawerSwipeDisabled
+  const [trendingScrollGesture] = useState(() => Gesture.Native())
   return (
     <>
       <View style={[a.h_full]}>
@@ -101,6 +104,10 @@ function ShellInner() {
             renderDrawerContent={renderDrawerContent}
             drawerStyle={{width: Math.min(400, winDim.width * 0.8)}}
             configureGestureHandler={handler => {
+              handler = handler.requireExternalGestureToFail(
+                trendingScrollGesture,
+              )
+
               if (swipeEnabled) {
                 if (isDrawerOpen) {
                   return handler.activeOffsetX([-1, 1])
@@ -138,7 +145,9 @@ function ShellInner() {
                 dim: 'rgba(10, 13, 16, 0.8)',
               }),
             }}>
-            <TabsNavigator />
+            <TrendingGestureContext.Provider value={trendingScrollGesture}>
+              <TabsNavigator />
+            </TrendingGestureContext.Provider>
           </Drawer>
         </ErrorBoundary>
       </View>