mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-03-11 17:45:38 +00:00
replaced flatlist with flashlist for catalogscreen and libraryscreen
This commit is contained in:
parent
a48cc0f2be
commit
675e3c24a4
2 changed files with 23 additions and 25 deletions
|
|
@ -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}`}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in a new issue