Prevent Drawer gesture conflicting with Suggestions scroll (#7468)

* Extract BlockDrawerGeesture

* Block drawer when scrolling interstitials

3 files changed, 76 insertions, 64 deletions

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index ec224eeae..268a5ff5b 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import {View} from 'react-native'
-import {ScrollView} from 'react-native-gesture-handler'
+import {ScrollView, View} from 'react-native'
 import {AppBskyActorDefs, AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -17,6 +16,7 @@ import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows
 import {useSession} from '#/state/session'
 import * as userActionHistory from '#/state/userActionHistory'
 import {SeenPost} from '#/state/userActionHistory'
+import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
 import {atoms as a, useBreakpoints, useTheme, ViewStyleProp, web} from '#/alf'
 import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
@@ -336,33 +336,37 @@ export function ProfileGrid({
           </View>
         </View>
       ) : (
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
-          decelerationRate="fast">
-          <View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}>
-            {content}
-
-            <Button
-              label={_(msg`Browse more accounts on the Explore page`)}
-              onPress={() => {
-                navigation.navigate('SearchTab')
-              }}>
-              <CardOuter style={[a.flex_1, {borderWidth: 0}]}>
-                <View style={[a.flex_1, a.justify_center]}>
-                  <View style={[a.flex_row, a.px_lg]}>
-                    <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
-                      <Trans>Browse more suggestions on the Explore page</Trans>
-                    </Text>
-
-                    <Arrow size="xl" />
+        <BlockDrawerGesture>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
+            decelerationRate="fast">
+            <View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}>
+              {content}
+
+              <Button
+                label={_(msg`Browse more accounts on the Explore page`)}
+                onPress={() => {
+                  navigation.navigate('SearchTab')
+                }}>
+                <CardOuter style={[a.flex_1, {borderWidth: 0}]}>
+                  <View style={[a.flex_1, a.justify_center]}>
+                    <View style={[a.flex_row, a.px_lg]}>
+                      <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
+                        <Trans>
+                          Browse more suggestions on the Explore page
+                        </Trans>
+                      </Text>
+
+                      <Arrow size="xl" />
+                    </View>
                   </View>
-                </View>
-              </CardOuter>
-            </Button>
-          </View>
-        </ScrollView>
+                </CardOuter>
+              </Button>
+            </View>
+          </ScrollView>
+        </BlockDrawerGesture>
       )}
     </View>
   )
@@ -469,34 +473,38 @@ export function SuggestedFeeds() {
           </View>
         </View>
       ) : (
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
-          decelerationRate="fast">
-          <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
-            {content}
-
-            <Button
-              label={_(msg`Browse more feeds on the Explore page`)}
-              onPress={() => {
-                navigation.navigate('SearchTab')
-              }}
-              style={[a.flex_col]}>
-              <CardOuter style={[a.flex_1]}>
-                <View style={[a.flex_1, a.justify_center]}>
-                  <View style={[a.flex_row, a.px_lg]}>
-                    <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
-                      <Trans>Browse more suggestions on the Explore page</Trans>
-                    </Text>
-
-                    <Arrow size="xl" />
+        <BlockDrawerGesture>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
+            decelerationRate="fast">
+            <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
+              {content}
+
+              <Button
+                label={_(msg`Browse more feeds on the Explore page`)}
+                onPress={() => {
+                  navigation.navigate('SearchTab')
+                }}
+                style={[a.flex_col]}>
+                <CardOuter style={[a.flex_1]}>
+                  <View style={[a.flex_1, a.justify_center]}>
+                    <View style={[a.flex_row, a.px_lg]}>
+                      <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
+                        <Trans>
+                          Browse more suggestions on the Explore page
+                        </Trans>
+                      </Text>
+
+                      <Arrow size="xl" />
+                    </View>
                   </View>
-                </View>
-              </CardOuter>
-            </Button>
-          </View>
-        </ScrollView>
+                </CardOuter>
+              </Button>
+            </View>
+          </ScrollView>
+        </BlockDrawerGesture>
       )}
     </View>
   )
diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx
index a9d7778a9..7412c6f0a 100644
--- a/src/components/interstitials/Trending.tsx
+++ b/src/components/interstitials/Trending.tsx
@@ -1,7 +1,5 @@
-import React, {useContext} from 'react'
+import React from 'react'
 import {ScrollView, View} from 'react-native'
-import {DrawerGestureContext} from 'react-native-drawer-layout'
-import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -13,6 +11,7 @@ import {
 import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
 import {useTrendingConfig} from '#/state/trending-config'
 import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
 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'
@@ -41,13 +40,9 @@ export function Inner() {
     setTrendingDisabled(true)
   }, [setTrendingDisabled])
 
-  const drawerGesture = useContext(DrawerGestureContext) ?? Gesture.Native() // noop for web
-  const trendingScrollGesture =
-    Gesture.Native().blocksExternalGesture(drawerGesture)
-
   return error || noTopics ? null : (
     <View style={[t.atoms.border_contrast_low, a.border_t]}>
-      <GestureDetector gesture={trendingScrollGesture}>
+      <BlockDrawerGesture>
         <ScrollView
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -127,7 +122,7 @@ export function Inner() {
             )}
           </View>
         </ScrollView>
-      </GestureDetector>
+      </BlockDrawerGesture>
 
       <Prompt.Basic
         control={trendingPrompt}
diff --git a/src/view/shell/BlockDrawerGesture.tsx b/src/view/shell/BlockDrawerGesture.tsx
new file mode 100644
index 000000000..bae9a8db8
--- /dev/null
+++ b/src/view/shell/BlockDrawerGesture.tsx
@@ -0,0 +1,9 @@
+import {useContext} from 'react'
+import {DrawerGestureContext} from 'react-native-drawer-layout'
+import {Gesture, GestureDetector} from 'react-native-gesture-handler'
+
+export function BlockDrawerGesture({children}: {children: React.ReactNode}) {
+  const drawerGesture = useContext(DrawerGestureContext) ?? Gesture.Native() // noop for web
+  const scrollGesture = Gesture.Native().blocksExternalGesture(drawerGesture)
+  return <GestureDetector gesture={scrollGesture}>{children}</GestureDetector>
+}