Fix pills are not scrollable horizontally in Suggested Accounts

src/components/InterestTabs.tsx

@@ -10,6 +10,7 @@ import {useLingui} from '@lingui/react'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {DraggableScrollView} from '#/view/com/pager/DraggableScrollView'
+import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
 import {atoms as a, tokens, useTheme, web} from '#/alf'
 import {transparentifyColor} from '#/alf/util/colorGeneration'
 import {Button, ButtonIcon} from '#/components/Button'
@@ -199,10 +200,13 @@ export function InterestTabs({
   }, [])
 
   return (
-    // `collapsable={false}` keeps this as a real host view on the new arch so
+    <View style={[a.relative, a.flex_row]}>
-    // that a wrapping GestureDetector (e.g. BlockDrawerGesture) can attach to
+      {/*
-    // it - otherwise this layout-only view gets flattened away.
+       * BlockDrawerGesture must wrap the ScrollView directly - Gesture.Native()
-    <View collapsable={false} style={[a.relative, a.flex_row]}>
+       * only works when attached to the natively scrollable view. On the new
+       * arch (Android), attaching it to a wrapper view breaks scrolling.
+       */}
+      <BlockDrawerGesture>
         <DraggableScrollView
           ref={listRef}
           contentContainerStyle={[
@@ -239,6 +243,7 @@ export function InterestTabs({
             )
           })}
         </DraggableScrollView>
+      </BlockDrawerGesture>
       {IS_WEB && canScrollLeft && (
         <View
           style={[

src/screens/Search/modules/ExploreSuggestedAccounts.tsx

@@ -8,7 +8,6 @@ import {type InfiniteData} from '@tanstack/react-query'
 import {popularInterests, useInterestsDisplayNames} from '#/lib/interests'
 import {logger} from '#/logger'
 import {usePreferencesQuery} from '#/state/queries/preferences'
-import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
 import {atoms as a, useTheme} from '#/alf'
 import {boostInterests, InterestTabs} from '#/components/InterestTabs'
 import * as ProfileCard from '#/components/ProfileCard'
@@ -71,7 +70,6 @@ export function SuggestedAccountsTabBar({
     .sort(boostInterests(personalizedInterests))
 
   return (
-    <BlockDrawerGesture>
     <InterestTabs
       interests={hideDefaultTab ? interests : ['all', ...interests]}
       selectedInterest={
@@ -90,7 +88,6 @@ export function SuggestedAccountsTabBar({
             }
       }
     />
-    </BlockDrawerGesture>
   )
 }