category icons

src/features/gifPicker/components/GifCategoryPills.tsx

@@ -1,4 +1,4 @@
-import {ScrollView, View} from 'react-native'
+import {View} from 'react-native'
 import {i18n, type MessageDescriptor} from '@lingui/core'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -51,29 +51,32 @@ export function GifCategoryPills({
   useLingui()
 
   return (
-    <View style={[a.mb_sm]}>
+    <View
-      <ScrollView
+      style={[
-        horizontal
+        a.flex_row,
-        showsHorizontalScrollIndicator={false}
+        a.justify_between,
-        contentContainerStyle={[a.flex_row, a.gap_xs, a.px_xl]}>
+        a.align_center,
-        {GIF_CATEGORIES.map(category => {
+        a.gap_xs,
-          if (category.id === 'recents' && !hasRecents) return null
+        a.px_xl,
-          const isActive = category.id === activeId
+        a.mb_sm,
-          const label = i18n._(category.label)
+      ]}>
-          return (
+      {GIF_CATEGORIES.map(category => {
-            <Button
+        if (category.id === 'recents' && !hasRecents) return null
-              key={category.id}
+        const isActive = category.id === activeId
-              label={label}
+        const label = i18n._(category.label)
-              onPress={() => onSelect(category)}
+        return (
-              size="small"
+          <Button
-              variant={isActive ? 'solid' : 'outline'}
+            key={category.id}
-              color={isActive ? 'primary' : 'secondary'}
+            label={label}
-              shape="round">
+            onPress={() => onSelect(category)}
-              <ButtonIcon icon={category.icon} />
+            size="small"
-            </Button>
+            variant={isActive ? 'solid' : 'outline'}
-          )
+            color={isActive ? 'primary' : 'secondary'}
-        })}
+            shape="round">
-      </ScrollView>
+            <ButtonIcon icon={category.icon} />
+          </Button>
+        )
+      })}
     </View>
   )
 }