fix(mobile): Scroll to the top when the main tab is clicked

hoarder-app · Mar 15, 2024 · c4d7223 · c4d7223
1 parent 77b7892
commit c4d7223
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/apps/mobile/app.json b/apps/mobile/app.json
@@ -3,7 +3,7 @@
     "name": "Hoarder App",
     "slug": "hoarder",
     "scheme": "hoarder",
-    "version": "1.2.2",
+    "version": "1.2.3",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",

diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { FlatList, View } from "react-native";
+import { FlatList, View, Text, Pressable } from "react-native";
 import { Link } from "expo-router";
 import { api } from "@/lib/trpc";
 import { ChevronRight } from "lucide-react-native";
@@ -53,12 +53,14 @@ export default function Lists() {
         marginTop: 5,
       }}
       renderItem={(l) => (
-        <View className="mx-2 flex flex-row justify-between rounded-xl border border-gray-100 bg-white px-4 py-2">
-          <Link key={l.item.id} href={l.item.href} className="text-lg">
-            {l.item.logo} {l.item.name}
-          </Link>
-          <ChevronRight />
-        </View>
+        <Link asChild key={l.item.id} href={l.item.href}>
+          <Pressable className="mx-2 flex flex-row justify-between rounded-xl border border-gray-100 bg-white px-4 py-2">
+            <Text className="text-lg">
+              {l.item.logo} {l.item.name}
+            </Text>
+            <ChevronRight />
+          </Pressable>
+        </Link>
       )}
       data={links}
       refreshing={refreshing}

diff --git a/apps/mobile/components/bookmarks/BookmarkList.tsx b/apps/mobile/components/bookmarks/BookmarkList.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Text, View, Keyboard } from "react-native";
 import Animated, { LinearTransition } from "react-native-reanimated";
 import { api } from "@/lib/trpc";
 
 import FullPageSpinner from "../ui/FullPageSpinner";
 import BookmarkCard from "./BookmarkCard";
+import { useScrollToTop } from '@react-navigation/native';
 
 export default function BookmarkList({
   favourited,
@@ -17,6 +18,8 @@ export default function BookmarkList({
 }) {
   const apiUtils = api.useUtils();
   const [refreshing, setRefreshing] = useState(false);
+  const flatListRef = useRef(null);
+  useScrollToTop(flatListRef);
   const { data, isPending, isPlaceholderData } =
     api.bookmarks.getBookmarks.useQuery({
       favourited,
@@ -39,6 +42,7 @@ export default function BookmarkList({
 
   return (
     <Animated.FlatList
+      ref={flatListRef}
       itemLayoutAnimation={LinearTransition}
       contentContainerStyle={{
         gap: 15,