Fix trending swipe gesture (#7417)

src/components/interstitials/Trending.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, {useContext} from 'react'
-import {View} from 'react-native'
+import {ScrollView, View} from 'react-native'
-import {ScrollView} from 'react-native-gesture-handler'
+import {GestureDetector} from 'react-native-gesture-handler'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -12,6 +12,7 @@ import {
 import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
 import {useTrendingConfig} from '#/state/trending-config'
 import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {TrendingGestureContext} from '#/view/shell/TrendingGestureContext'
 import {atoms as a, useGutters, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
@@ -40,8 +41,12 @@ export function Inner() {
     setTrendingDisabled(true)
   }, [setTrendingDisabled])
 
+  // This is coordinated to take precedence over the drawer pan gesture.
+  const trendingScrollGesture = useContext(TrendingGestureContext)
+
   return error || noTopics ? null : (
     <View style={[t.atoms.border_contrast_low, a.border_t]}>
+      <GestureDetector gesture={trendingScrollGesture}>
         <ScrollView
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -78,7 +83,11 @@ export function Inner() {
                   style={{alignSelf: 'stretch'}}
                 />
                 <Text
-                style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
+                  style={[
+                    t.atoms.text_contrast_medium,
+                    a.text_sm,
+                    a.font_bold,
+                  ]}>
                   {' '}
                 </Text>
               </View>
@@ -117,6 +126,7 @@ export function Inner() {
             )}
           </View>
         </ScrollView>
+      </GestureDetector>
 
       <Prompt.Basic
         control={trendingPrompt}

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)

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)',
               }),
             }}>
+            <TrendingGestureContext.Provider value={trendingScrollGesture}>
               <TabsNavigator />
+            </TrendingGestureContext.Provider>
           </Drawer>
         </ErrorBoundary>
       </View>