From 9e3f2f43745eed9c71cb985e48135b7363d91aa9 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Fri, 17 Jan 2025 01:17:13 +0000
Subject: Prevent Drawer gesture conflicting with Suggestions scroll (#7468)

* Extract BlockDrawerGeesture

* Block drawer when scrolling interstitials
---
 src/components/FeedInterstitials.tsx | 118 +++++++++++++++++++----------------
 1 file changed, 63 insertions(+), 55 deletions(-)

(limited to 'src/components/FeedInterstitials.tsx')

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>
   )
-- 
cgit 1.4.1