fix(mobile): remount Favorites lists on numColumns change (GOON-11)

The new Scenes tab uses a 2-column FlatList while Performers/Studios/Movies are
1-column. Switching tabs reused the same FlatList instance, so numColumns changed on
the fly and RN threw "Changing numColumns on the fly is not supported" (5 users).
Give the Scenes list a distinct key ("fav-scenes") from the shared single-column key
("fav-list") so React remounts a fresh FlatList across the 1<->2 boundary.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jtrzupek 2026-06-12 16:19:19 +02:00
parent e618087eae
commit 86b3e88f08

View file

@ -181,6 +181,9 @@ export function FavoritesScreen() {
{tab === 'scenes' ? ( {tab === 'scenes' ? (
<FlatList <FlatList
// key per tab: scenes używa numColumns=2, reszta 1 — bez remountu RN rzuca
// "Changing numColumns on the fly is not supported" (GOON-11).
key="fav-scenes"
data={scenesQuery.data?.items ?? []} data={scenesQuery.data?.items ?? []}
keyExtractor={(s) => s.id} keyExtractor={(s) => s.id}
numColumns={2} numColumns={2}
@ -220,6 +223,7 @@ export function FavoritesScreen() {
/> />
) : tab === 'movies' ? ( ) : tab === 'movies' ? (
<FlatList <FlatList
key="fav-list"
data={moviesQuery.data?.items ?? []} data={moviesQuery.data?.items ?? []}
keyExtractor={(f) => f.movie_id} keyExtractor={(f) => f.movie_id}
renderItem={({ item }) => ( renderItem={({ item }) => (
@ -258,6 +262,7 @@ export function FavoritesScreen() {
/> />
) : tab === 'performers' ? ( ) : tab === 'performers' ? (
<FlatList <FlatList
key="fav-list"
data={performersQuery.data?.items ?? []} data={performersQuery.data?.items ?? []}
keyExtractor={(f) => f.performer_id} keyExtractor={(f) => f.performer_id}
renderItem={({ item }) => ( renderItem={({ item }) => (
@ -303,6 +308,7 @@ export function FavoritesScreen() {
/> />
) : ( ) : (
<FlatList <FlatList
key="fav-list"
data={studiosQuery.data?.items ?? []} data={studiosQuery.data?.items ?? []}
keyExtractor={(f) => f.studio_id} keyExtractor={(f) => f.studio_id}
renderItem={({ item }) => ( renderItem={({ item }) => (