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.
This commit is contained in:
Gauvain
2026-06-16 23:25:06 +02:00
parent 3478f7a040
commit 4d9fc1d615

View File

@@ -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'>