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,46 +200,50 @@ export function InterestTabs({
   }, [])
 
   return (
-    // `collapsable={false}` keeps this as a real host view on the new arch so
-    // that a wrapping GestureDetector (e.g. BlockDrawerGesture) can attach to
-    // it - otherwise this layout-only view gets flattened away.
-    <View collapsable={false} style={[a.relative, a.flex_row]}>
-      <DraggableScrollView
-        ref={listRef}
-        contentContainerStyle={[
-          a.gap_sm,
-          {paddingHorizontal: gutterWidth},
-          contentContainerStyle,
-        ]}
-        showsHorizontalScrollIndicator={false}
-        decelerationRate="fast"
-        snapToOffsets={
-          tabOffsets.filter(o => !!o).length === interests.length
-            ? tabOffsets.map(o => o.x - tokens.space.xl)
-            : undefined
-        }
-        onLayout={evt => setTotalWidth(evt.nativeEvent.layout.width)}
-        onContentSizeChange={width => setContentWidth(width)}
-        onScroll={evt => {
-          const newScrollX = evt.nativeEvent.contentOffset.x
-          setScrollX(newScrollX)
-        }}
-        scrollEventThrottle={16}>
-        {interests.map((interest, i) => {
-          const active = interest === selectedInterest && !disabled
-          return (
-            <TabComponent
-              key={interest}
-              onSelectTab={handleSelectTab}
-              active={active}
-              index={i}
-              interest={interest}
-              interestsDisplayName={interestsDisplayNames[interest]}
-              onLayout={handleTabLayout}
-            />
-          )
-        })}
-      </DraggableScrollView>
+    <View style={[a.relative, a.flex_row]}>
+      {/*
+       * BlockDrawerGesture must wrap the ScrollView directly - Gesture.Native()
+       * 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={[
+            a.gap_sm,
+            {paddingHorizontal: gutterWidth},
+            contentContainerStyle,
+          ]}
+          showsHorizontalScrollIndicator={false}
+          decelerationRate="fast"
+          snapToOffsets={
+            tabOffsets.filter(o => !!o).length === interests.length
+              ? tabOffsets.map(o => o.x - tokens.space.xl)
+              : undefined
+          }
+          onLayout={evt => setTotalWidth(evt.nativeEvent.layout.width)}
+          onContentSizeChange={width => setContentWidth(width)}
+          onScroll={evt => {
+            const newScrollX = evt.nativeEvent.contentOffset.x
+            setScrollX(newScrollX)
+          }}
+          scrollEventThrottle={16}>
+          {interests.map((interest, i) => {
+            const active = interest === selectedInterest && !disabled
+            return (
+              <TabComponent
+                key={interest}
+                onSelectTab={handleSelectTab}
+                active={active}
+                index={i}
+                interest={interest}
+                interestsDisplayName={interestsDisplayNames[interest]}
+                onLayout={handleTabLayout}
+              />
+            )
+          })}
+        </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,26 +70,24 @@ export function SuggestedAccountsTabBar({
     .sort(boostInterests(personalizedInterests))
 
   return (
-    <BlockDrawerGesture>
-      <InterestTabs
-        interests={hideDefaultTab ? interests : ['all', ...interests]}
-        selectedInterest={
-          selectedInterest || (hideDefaultTab ? interests[0] : 'all')
-        }
-        onSelectTab={tab => {
-          ax.metric('explore:suggestedAccounts:tabPressed', {tab: tab})
-          onSelectInterest(tab === 'all' ? null : tab)
-        }}
-        interestsDisplayNames={
-          hideDefaultTab
-            ? interestsDisplayNames
-            : {
-                all: defaultTabLabel || _(msg`For You`),
-                ...interestsDisplayNames,
-              }
-        }
-      />
-    </BlockDrawerGesture>
+    <InterestTabs
+      interests={hideDefaultTab ? interests : ['all', ...interests]}
+      selectedInterest={
+        selectedInterest || (hideDefaultTab ? interests[0] : 'all')
+      }
+      onSelectTab={tab => {
+        ax.metric('explore:suggestedAccounts:tabPressed', {tab: tab})
+        onSelectInterest(tab === 'all' ? null : tab)
+      }}
+      interestsDisplayNames={
+        hideDefaultTab
+          ? interestsDisplayNames
+          : {
+              all: defaultTabLabel || _(msg`For You`),
+              ...interestsDisplayNames,
+            }
+      }
+    />
   )
 }