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
+    <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
-      <DraggableScrollView
+       * arch (Android), attaching it to a wrapper view breaks scrolling.
-        ref={listRef}
+       */}
-        contentContainerStyle={[
+      <BlockDrawerGesture>
-          a.gap_sm,
+        <DraggableScrollView
-          {paddingHorizontal: gutterWidth},
+          ref={listRef}
-          contentContainerStyle,
+          contentContainerStyle={[
-        ]}
+            a.gap_sm,
-        showsHorizontalScrollIndicator={false}
+            {paddingHorizontal: gutterWidth},
-        decelerationRate="fast"
+            contentContainerStyle,
-        snapToOffsets={
+          ]}
-          tabOffsets.filter(o => !!o).length === interests.length
+          showsHorizontalScrollIndicator={false}
-            ? tabOffsets.map(o => o.x - tokens.space.xl)
+          decelerationRate="fast"
-            : undefined
+          snapToOffsets={
-        }
+            tabOffsets.filter(o => !!o).length === interests.length
-        onLayout={evt => setTotalWidth(evt.nativeEvent.layout.width)}
+              ? tabOffsets.map(o => o.x - tokens.space.xl)
-        onContentSizeChange={width => setContentWidth(width)}
+              : undefined
-        onScroll={evt => {
+          }
-          const newScrollX = evt.nativeEvent.contentOffset.x
+          onLayout={evt => setTotalWidth(evt.nativeEvent.layout.width)}
-          setScrollX(newScrollX)
+          onContentSizeChange={width => setContentWidth(width)}
-        }}
+          onScroll={evt => {
-        scrollEventThrottle={16}>
+            const newScrollX = evt.nativeEvent.contentOffset.x
-        {interests.map((interest, i) => {
+            setScrollX(newScrollX)
-          const active = interest === selectedInterest && !disabled
+          }}
-          return (
+          scrollEventThrottle={16}>
-            <TabComponent
+          {interests.map((interest, i) => {
-              key={interest}
+            const active = interest === selectedInterest && !disabled
-              onSelectTab={handleSelectTab}
+            return (
-              active={active}
+              <TabComponent
-              index={i}
+                key={interest}
-              interest={interest}
+                onSelectTab={handleSelectTab}
-              interestsDisplayName={interestsDisplayNames[interest]}
+                active={active}
-              onLayout={handleTabLayout}
+                index={i}
-            />
+                interest={interest}
-          )
+                interestsDisplayName={interestsDisplayNames[interest]}
-        })}
+                onLayout={handleTabLayout}
-      </DraggableScrollView>
+              />
+            )
+          })}
+        </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
-      <InterestTabs
+      interests={hideDefaultTab ? interests : ['all', ...interests]}
-        interests={hideDefaultTab ? interests : ['all', ...interests]}
+      selectedInterest={
-        selectedInterest={
+        selectedInterest || (hideDefaultTab ? interests[0] : 'all')
-          selectedInterest || (hideDefaultTab ? interests[0] : 'all')
+      }
-        }
+      onSelectTab={tab => {
-        onSelectTab={tab => {
+        ax.metric('explore:suggestedAccounts:tabPressed', {tab: tab})
-          ax.metric('explore:suggestedAccounts:tabPressed', {tab: tab})
+        onSelectInterest(tab === 'all' ? null : tab)
-          onSelectInterest(tab === 'all' ? null : tab)
+      }}
-        }}
+      interestsDisplayNames={
-        interestsDisplayNames={
+        hideDefaultTab
-          hideDefaultTab
+          ? interestsDisplayNames
-            ? interestsDisplayNames
+          : {
-            : {
+              all: defaultTabLabel || _(msg`For You`),
-                all: defaultTabLabel || _(msg`For You`),
+              ...interestsDisplayNames,
-                ...interestsDisplayNames,
+            }
-              }
+      }
-        }
+    />
-      />
-    </BlockDrawerGesture>
   )
 }