fix(wallet-mobile): scroll back category filters when toggling one (#…

…3624)
Emurgo · Sep 12, 2024 · a0b76f6 · a0b76f6
2 parents c4123f9 + b877a52
commit a0b76f6
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/apps/wallet-mobile/src/features/Discover/useCases/SelectDappFromList/DAppTypes/DAppTypes.tsx b/apps/wallet-mobile/src/features/Discover/useCases/SelectDappFromList/DAppTypes/DAppTypes.tsx
@@ -12,13 +12,32 @@ type Props = {
 }
 export const DAppTypes = ({types, onToggle, selectedTypes}: Props) => {
   const {styles} = useStyles()
+  const scrollViewRef = React.useRef<ScrollView | null>(null)
   const sorted = React.useMemo(() => sortTypes(types, selectedTypes), [types, selectedTypes])
 
   return (
-    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.contentContainer}>
+    <ScrollView
+      ref={scrollViewRef}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.contentContainer}
+    >
       {sorted.map((type) => {
         const isSelected = selectedTypes.includes(type)
-        return <TypeItem key={type} isActive={isSelected} name={type} onToggle={() => onToggle(type)} />
+        return (
+          <TypeItem
+            key={type}
+            isActive={isSelected}
+            name={type}
+            onToggle={() => {
+              scrollViewRef.current?.scrollTo({
+                x: 0,
+                animated: true,
+              })
+              onToggle(type)
+            }}
+          />
+        )
       })}
 
       <Spacer width={8} />