From 4d9fc1d61523c0de142733929e1c38e9764cc2b0 Mon Sep 17 00:00:00 2001
From: Gauvain <contact@uruk.dev>
Date: Tue, 16 Jun 2026 23:25:06 +0200
Subject: [PATCH] fix(library): scroll the grid back to the top when filters
 change

Resetting or changing a filter/sort refetches from page 1, but the
FlashList kept its previous offset, leaving the user stranded mid-list.
Hold a FlashListRef and scrollToOffset(0) whenever the active
filters/sort change.
---
 app/(auth)/(tabs)/(libraries)/[libraryId].tsx | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
index 9a2239f6..b8b9d132 100644
--- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
+++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
@@ -9,12 +9,12 @@ import {
   getItemsApi,
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
-import { FlashList } from "@shopify/flash-list";
+import { FlashList, type FlashListRef } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import {
   FlatList,
@@ -376,6 +376,21 @@ const Page = () => {
     );
   }, [data]);
 
+  const flashListRef = useRef<FlashListRef<BaseItemDto>>(null);
+
+  // Reset the grid to the top whenever the active filters/sort change (e.g.
+  // pressing reset) — otherwise the list stays stuck at the previous offset.
+  useEffect(() => {
+    flashListRef.current?.scrollToOffset({ offset: 0, animated: false });
+  }, [
+    selectedGenres,
+    selectedYears,
+    selectedTags,
+    sortBy,
+    sortOrder,
+    filterBy,
+  ]);
+
   const renderItem = useCallback(
     ({ item, index }: { item: BaseItemDto; index: number }) => (
       <TouchableItemRouter
@@ -868,6 +883,7 @@ const Page = () => {
   if (!Platform.isTV) {
     return (
       <FlashList
+        ref={flashListRef}
         key={orientation}
         ListEmptyComponent={
           <View className='flex flex-col items-center justify-center h-full'>