From 675e3c24a47b59f14788bb1bd8f7f8cf396836dc Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Sat, 9 Aug 2025 17:37:03 +0530
Subject: [PATCH] replaced flatlist with flashlist for catalogscreen and
 libraryscreen

---
 src/screens/CatalogScreen.tsx | 14 ++++++++------
 src/screens/LibraryScreen.tsx | 34 +++++++++++++++-------------------
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/screens/CatalogScreen.tsx b/src/screens/CatalogScreen.tsx
index 4e20a6a0..f17d8361 100644
--- a/src/screens/CatalogScreen.tsx
+++ b/src/screens/CatalogScreen.tsx
@@ -3,7 +3,6 @@ import {
   View,
   Text,
   StyleSheet,
-  FlatList,
   TouchableOpacity,
   ActivityIndicator,
   SafeAreaView,
@@ -12,6 +11,7 @@ import {
   Dimensions,
   Platform,
 } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
 import { RouteProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from '../navigation/AppNavigator';
@@ -127,7 +127,7 @@ const createStyles = (colors: any) => StyleSheet.create({
   },
   item: {
     marginBottom: SPACING.lg,
-    borderRadius: 8,
+    borderRadius: 12,
     overflow: 'hidden',
     backgroundColor: colors.elevation2,
     shadowColor: '#000',
@@ -139,8 +139,8 @@ const createStyles = (colors: any) => StyleSheet.create({
   poster: {
     width: '100%',
     aspectRatio: 2/3,
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
     backgroundColor: colors.elevation3,
   },
   itemContent: {
@@ -564,7 +564,9 @@ const CatalogScreen: React.FC<CatalogScreenProps> = ({ route, navigation }) => {
           source={{ uri: item.poster || 'https://via.placeholder.com/300x450/333333/666666?text=No+Image' }}
           style={styles.poster}
           contentFit="cover"
-          transition={200}
+          cachePolicy="disk"
+          transition={0}
+          allowDownscaling
         />
         <View style={styles.itemContent}>
           <Text
@@ -675,7 +677,7 @@ const CatalogScreen: React.FC<CatalogScreenProps> = ({ route, navigation }) => {
       <Text style={styles.headerTitle}>{displayName || `${type.charAt(0).toUpperCase() + type.slice(1)}s`}</Text>
       
       {items.length > 0 ? (
-        <FlatList
+        <FlashList
           data={items}
           renderItem={renderItem}
           keyExtractor={(item) => `${item.id}-${item.type}`}
diff --git a/src/screens/LibraryScreen.tsx b/src/screens/LibraryScreen.tsx
index 9fe19c8d..48c3044d 100644
--- a/src/screens/LibraryScreen.tsx
+++ b/src/screens/LibraryScreen.tsx
@@ -3,7 +3,6 @@ import {
   View,
   Text,
   StyleSheet,
-  FlatList,
   TouchableOpacity,
   useColorScheme,
   useWindowDimensions,
@@ -14,6 +13,7 @@ import {
   Platform,
   ScrollView,
 } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
 import { useNavigation } from '@react-navigation/native';
 import { NavigationProp } from '@react-navigation/native';
 import { MaterialIcons } from '@expo/vector-icons';
@@ -101,8 +101,9 @@ const TraktItem = React.memo(({ item, width, navigation, currentTheme }: { item:
             source={{ uri: posterUrl }}
             style={styles.poster}
             contentFit="cover"
-            transition={300}
-            recyclingKey={`trakt-item-${item.id}`}
+            cachePolicy="disk"
+            transition={0}
+            allowDownscaling
           />
         ) : (
           <View style={[styles.poster, { backgroundColor: currentTheme.colors.elevation1, justifyContent: 'center', alignItems: 'center' }]}>
@@ -712,7 +713,7 @@ const LibraryScreen = () => {
 
       // Show collection folders
       return (
-        <FlatList
+         <FlashList
           data={traktFolders}
           renderItem={({ item }) => renderTraktCollectionFolder({ folder: item })}
           keyExtractor={item => item.id}
@@ -720,10 +721,8 @@ const LibraryScreen = () => {
           contentContainerStyle={styles.listContainer}
           showsVerticalScrollIndicator={false}
           columnWrapperStyle={styles.columnWrapper}
-          initialNumToRender={6}
-          maxToRenderPerBatch={6}
-          windowSize={5}
-          removeClippedSubviews={Platform.OS === 'android'}
+           onEndReachedThreshold={0.7}
+           onEndReached={() => {}}
         />
       );
     }
@@ -757,7 +756,7 @@ const LibraryScreen = () => {
     }
 
     return (
-      <FlatList
+      <FlashList
         data={folderItems}
         renderItem={({ item }) => renderTraktItem({ item })}
         keyExtractor={(item) => `${item.type}-${item.id}`}
@@ -766,10 +765,8 @@ const LibraryScreen = () => {
         style={styles.traktContainer}
         contentContainerStyle={{ paddingBottom: insets.bottom + 80 }}
         showsVerticalScrollIndicator={false}
-        initialNumToRender={10}
-        maxToRenderPerBatch={10}
-        windowSize={21}
-        removeClippedSubviews={Platform.OS === 'android'}
+        onEndReachedThreshold={0.7}
+        onEndReached={() => {}}
       />
     );
   };
@@ -850,7 +847,7 @@ const LibraryScreen = () => {
     }
 
     return (
-            <FlatList
+            <FlashList
         data={allItems}
         renderItem={({ item }) => {
           if (item.type === 'trakt-folder') {
@@ -863,10 +860,8 @@ const LibraryScreen = () => {
               contentContainerStyle={styles.listContainer}
               showsVerticalScrollIndicator={false}
               columnWrapperStyle={styles.columnWrapper}
-              initialNumToRender={6}
-              maxToRenderPerBatch={6}
-              windowSize={5}
-              removeClippedSubviews={Platform.OS === 'android'}
+              onEndReachedThreshold={0.7}
+              onEndReached={() => {}}
             />
     );
   };
@@ -1031,7 +1026,7 @@ const styles = StyleSheet.create({
     marginBottom: 16,
   },
   posterContainer: {
-    borderRadius: 8,
+    borderRadius: 12,
     overflow: 'hidden',
     backgroundColor: 'rgba(255,255,255,0.03)',
     aspectRatio: 2/3,
@@ -1043,6 +1038,7 @@ const styles = StyleSheet.create({
   poster: {
     width: '100%',
     height: '100%',
+    borderRadius: 12,
   },
   posterGradient: {
     position: 'absolute',