replaced flatlist with flashlist for catalogscreen and libraryscreen

This commit is contained in:
tapframe 2025-08-09 17:37:03 +05:30
parent a48cc0f2be
commit 675e3c24a4
2 changed files with 23 additions and 25 deletions

View file

@ -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}`}

View file

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