diff --git a/apps/native/package.json b/apps/native/package.json index 54fe1cc..06f3c44 100644 --- a/apps/native/package.json +++ b/apps/native/package.json @@ -25,6 +25,7 @@ "@orpc/tanstack-query": "catalog:", "@react-native-menu/menu": "2.0.0", "@react-navigation/elements": "2.9.10", + "@shopify/flash-list": "2.3.0", "@sofa/api": "workspace:*", "@sofa/tmdb": "workspace:*", "@tabler/icons-react-native": "3.40.0", diff --git a/apps/native/src/app/(tabs)/(search)/index.tsx b/apps/native/src/app/(tabs)/(search)/index.tsx index 1a2aac3..a6d5b23 100644 --- a/apps/native/src/app/(tabs)/(search)/index.tsx +++ b/apps/native/src/app/(tabs)/(search)/index.tsx @@ -1,7 +1,8 @@ +import { FlashList } from "@shopify/flash-list"; import { useMutation, useQuery } from "@tanstack/react-query"; import { Stack, useRouter } from "expo-router"; import { useCallback, useMemo, useRef, useState } from "react"; -import { FlatList, View } from "react-native"; +import { View } from "react-native"; import Animated, { FadeIn } from "react-native-reanimated"; import { RecentlyViewedList } from "@/components/search/recently-viewed-list"; import { @@ -154,7 +155,7 @@ export default function SearchScreen() { ) : ( - ( - + - item.titleId} - renderItem={renderFilmographyItem} - numColumns={2} - columnWrapperStyle={{ - gap: FILMOGRAPHY_GAP, - paddingHorizontal: FILMOGRAPHY_PADDING, - }} - contentContainerStyle={{ - paddingBottom: insets.bottom + 32, - gap: FILMOGRAPHY_GAP, - }} - ListHeaderComponent={listHeader} - className="bg-background" - initialNumToRender={6} - maxToRenderPerBatch={8} - windowSize={5} - /> + + item.titleId} + renderItem={renderFilmographyItem} + numColumns={2} + contentContainerStyle={{ + paddingBottom: insets.bottom + 32, + paddingHorizontal: FILMOGRAPHY_PADDING, + }} + ListHeaderComponent={listHeader} + /> + ); } diff --git a/apps/native/src/components/search/recently-viewed-list.tsx b/apps/native/src/components/search/recently-viewed-list.tsx index 3cbdc16..b37d161 100644 --- a/apps/native/src/components/search/recently-viewed-list.tsx +++ b/apps/native/src/components/search/recently-viewed-list.tsx @@ -1,7 +1,8 @@ +import { FlashList } from "@shopify/flash-list"; import { IconHistory, IconSearch } from "@tabler/icons-react-native"; import { useRouter } from "expo-router"; import { useCallback } from "react"; -import { Alert, FlatList, Pressable, View } from "react-native"; +import { Alert, Pressable, View } from "react-native"; import Animated, { FadeIn, FadeInDown } from "react-native-reanimated"; import { useCSSVariable } from "uniwind"; import { RecentlyViewedRow } from "@/components/search/recently-viewed-row"; @@ -84,7 +85,7 @@ export function RecentlyViewedList() { return ( -