From 89414dbce3e714184915854c3cd488371e902974 Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Fri, 15 May 2026 12:03:16 -0700
Subject: [PATCH] feat(mobile): port feed filter button to native app

Replace the chronological-feed SelectablePill pills with the new
FilterButton (replaceLabel variant), matching the web change from
#14315 that was never ported to the React Native mobile app.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/screens/feed-screen/FeedFilters.tsx   | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/packages/mobile/src/screens/feed-screen/FeedFilters.tsx b/packages/mobile/src/screens/feed-screen/FeedFilters.tsx
index 8e8ace3f1e4..b12b33f8c7b 100644
--- a/packages/mobile/src/screens/feed-screen/FeedFilters.tsx
+++ b/packages/mobile/src/screens/feed-screen/FeedFilters.tsx
@@ -1,18 +1,19 @@
-import { FeedFilter } from '@audius/common/models'
-import { ScrollView, View } from 'react-native'
+import { useCallback } from 'react'
 
-import { Flex, SelectablePill, useTheme } from '@audius/harmony-native'
+import { FeedFilter } from '@audius/common/models'
+import { FilterButton, useTheme } from '@audius/harmony-native'
+import { View } from 'react-native'
 
-const filterLabels: Record<FeedFilter, string> = {
-  [FeedFilter.ALL]: 'All Posts',
-  [FeedFilter.ORIGINAL]: 'Original Posts',
-  [FeedFilter.REPOST]: 'Reposts'
+const messages = {
+  allPosts: 'All Posts',
+  originalPosts: 'Original Posts',
+  reposts: 'Reposts'
 }
 
-const filters: FeedFilter[] = [
-  FeedFilter.ALL,
-  FeedFilter.ORIGINAL,
-  FeedFilter.REPOST
+const filterOptions = [
+  { label: messages.allPosts, value: FeedFilter.ALL },
+  { label: messages.originalPosts, value: FeedFilter.ORIGINAL },
+  { label: messages.reposts, value: FeedFilter.REPOST }
 ]
 
 type FeedFiltersProps = {
@@ -25,36 +26,33 @@ export const FeedFilters = ({
   onSelectFilter
 }: FeedFiltersProps) => {
   const { spacing, color } = useTheme()
+
+  const handleChange = useCallback(
+    (value: string | undefined) => {
+      if (!value) return
+      onSelectFilter(value as FeedFilter)
+    },
+    [onSelectFilter]
+  )
+
   return (
     <View
       style={{
         backgroundColor: color.background.white,
-        paddingBottom: spacing.s
+        paddingHorizontal: spacing.l,
+        paddingBottom: spacing.s,
+        alignItems: 'flex-start'
       }}
     >
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={{ paddingHorizontal: spacing.l }}
-      >
-        <Flex direction='row' alignItems='center' gap='s'>
-          {filters.map((filter) => (
-            <SelectablePill
-              key={filter}
-              type='radio'
-              size='small'
-              value={filter}
-              label={filterLabels[filter]}
-              isSelected={currentFilter === filter}
-              onChange={(value, isSelected) => {
-                if (!isSelected) return
-                onSelectFilter(value as FeedFilter)
-              }}
-              disableUnselectAnimation
-            />
-          ))}
-        </Flex>
-      </ScrollView>
+      <FilterButton
+        label={messages.allPosts}
+        value={currentFilter}
+        variant='replaceLabel'
+        onChange={handleChange}
+        options={filterOptions}
+        size='small'
+        disableSearch
+      />
     </View>
   )
 }