From b877a52057b410401287f9de4f784aa7b6228bfe Mon Sep 17 00:00:00 2001
From: jorbuedo <jorbuedo@gmail.com>
Date: Thu, 12 Sep 2024 15:59:53 +0200
Subject: [PATCH] Scroll back category filters when toggling one

---
 .../DAppTypes/DAppTypes.tsx                   | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 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
index 805e57194f..b4119b6b52 100644
--- 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} />