Add: FlatList to CustomScroll

sawyerf · Dec 27, 2024 · a8b8687 · a8b8687
1 parent b670e4f
commit a8b8687
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 157 deletions.
diff --git a/app/components/Header.js b/app/components/Header.js
@@ -25,14 +25,15 @@ const Header = ({ title }) => {
 					name="angle-left"
 					size={34}
 					color={theme.primaryLight}
-					style={{ paddingEnd: 10}}
+					style={{ paddingEnd: 10 }}
 				/>
-				<Text style={{
-					color: theme.primaryLight,
-					fontSize: 24,
-					fontWeight: 'bold',
-					lineHeight: 0,
-				}} >
+				<Text numberOfLines={1}
+					style={{
+						color: theme.primaryLight,
+						fontSize: 24,
+						fontWeight: 'bold',
+						lineHeight: 0,
+					}} >
 					{title}
 				</Text>
 			</Pressable>

diff --git a/app/components/lists/CustomScroll.js b/app/components/lists/CustomScroll.js
@@ -1,22 +1,25 @@
 import React from 'react';
-import { View, ScrollView } from 'react-native';
+import { View, FlatList } from 'react-native';
 import IconButton from '~/components/button/IconButton';
 import { ThemeContext } from '~/contexts/theme';
 import { SettingsContext } from '~/contexts/settings';
 
-const CustomScroll = ({ children, style = { width: '100%' }, contentContainerStyle = { paddingHorizontal: 20, columnGap: 10 } }) => {
+const CustomScroll = ({ children, data, renderItem, style = { width: '100%' }, contentContainerStyle = { paddingHorizontal: 20, columnGap: 10 } }) => {
   const refScroll = React.useRef(null)
-  const refPosition = React.useRef(0)
   const theme = React.useContext(ThemeContext)
   const settings = React.useContext(SettingsContext)
+  const indexScroll = React.useRef(0)
 
   const goRight = () => {
-    // (160 + 10) * 3 = 510
-    refScroll.current.scrollTo({ x: refPosition.current + 510, animated: false })
+    if (indexScroll.current + 3 >= data.length) indexScroll.current = data.length - 1
+    else indexScroll.current = indexScroll.current + 3
+    refScroll.current.scrollToIndex({ index: indexScroll.current, animated: true, viewOffset: 10})
   }
 
   const goLeft = () => {
-    refScroll.current.scrollTo({ x: refPosition.current - 510, animated: false })
+    if (indexScroll.current < 3) indexScroll.current = 0
+    else indexScroll.current = indexScroll.current - 3
+    refScroll.current.scrollToIndex({ index: indexScroll.current, animated: true, viewOffset: 10})
   }
 
   return (
@@ -52,16 +55,17 @@ const CustomScroll = ({ children, style = { width: '100%' }, contentContainerSty
             alignItems: 'center',
           }} />
       </View>}
-      <ScrollView
-        ref={refScroll}
-        onScroll={(event) => { refPosition.current = event.nativeEvent.contentOffset.x }}
+      <FlatList
+        data={data}
+        keyExtractor={(item, index) => index}
+        renderItem={renderItem}
         horizontal={true}
         style={style}
         contentContainerStyle={contentContainerStyle}
         showsHorizontalScrollIndicator={false}
-      >
-        {children}
-      </ScrollView >
+        ref={refScroll}
+      />
+      {children}
     </View>
   )
 }

diff --git a/app/components/lists/HorizontalAlbums.js b/app/components/lists/HorizontalAlbums.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, Image, TouchableOpacity } from 'react-native';
+import { Text, Image, TouchableOpacity, FlatList } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 import { ThemeContext } from '~/contexts/theme';
@@ -15,24 +15,27 @@ const HorizontalAlbums = ({ config, albums }) => {
 	const [infoAlbum, setInfoAlbum] = React.useState(null)
 
 	return (
-		<CustomScroll>
-			{albums?.map((album, index) => (
-				<TouchableOpacity
-					style={styles.album}
-					key={album.id}
-					onLongPress={() => setIndexOptions(index)}
-					delayLongPress={200}
-					onPress={() => navigation.navigate('Album', { album: album })}>
-					<Image
-						style={styles.albumCover}
-						source={{
-							uri: urlCover(config, album.id),
-						}}
-					/>
-					<Text numberOfLines={1} style={styles.titleAlbum(theme)}>{album.name}</Text>
-					<Text numberOfLines={1} style={{ ...styles.artist(theme) }}>{album.artist}</Text>
-				</TouchableOpacity >
-			))}
+		<>
+			<CustomScroll
+				data={albums}
+				renderItem={({ item, index }) => (
+					<TouchableOpacity
+						style={styles.album}
+						key={item.id}
+						onLongPress={() => setIndexOptions(index)}
+						delayLongPress={200}
+						onPress={() => navigation.navigate('Album', { album: item })}>
+						<Image
+							style={styles.albumCover}
+							source={{
+								uri: urlCover(config, item.id),
+							}}
+						/>
+						<Text numberOfLines={1} style={styles.titleAlbum(theme)}>{item.name}</Text>
+						<Text numberOfLines={1} style={{ ...styles.artist(theme) }}>{item.artist}</Text>
+					</TouchableOpacity >
+				)} />
+
 			<InfoPopup info={infoAlbum} close={() => setInfoAlbum(null)} />
 			<OptionsPopup
 				visible={indexOptions >= 0}
@@ -48,7 +51,7 @@ const HorizontalAlbums = ({ config, albums }) => {
 					}
 				]}
 			/>
-		</CustomScroll>
+		</>
 	)
 }
 

diff --git a/app/components/lists/HorizontalArtists.js b/app/components/lists/HorizontalArtists.js
@@ -7,23 +7,24 @@ import { urlCover } from '~/utils/api';
 import CustomScroll from '~/components/lists/CustomScroll';
 
 const HorizontalArtists = ({ config, artists }) => {
-  const theme = React.useContext(ThemeContext)
+	const theme = React.useContext(ThemeContext)
 	const navigation = useNavigation();
 
 	return (
-		<CustomScroll>
-			{artists?.map((artist) => (
-				<TouchableOpacity style={styles.artist} key={artist.id} onPress={() => navigation.navigate('Artist', { artist })} >
+		<CustomScroll
+			data={artists}
+			renderItem={({ item }) => (
+				<TouchableOpacity style={styles.artist} key={item.id} onPress={() => navigation.navigate('Artist', { artist: item })} >
 					<Image
 						style={styles.artistCover}
 						source={{
-							uri: urlCover(config, artist.id),
+							uri: urlCover(config, item.id),
 						}}
 					/>
-					<Text numberOfLines={1} style={{ color: theme.primaryLight, fontSize: 16, marginBottom: 2, width: 100, textAlign: 'center' }}>{artist.name}</Text>
+					<Text numberOfLines={1} style={{ color: theme.primaryLight, fontSize: 16, marginBottom: 2, width: 100, textAlign: 'center' }}>{item.name}</Text>
 				</TouchableOpacity>
-			))}
-		</CustomScroll>
+			)}
+		/>
 	)
 }
 

diff --git a/app/components/lists/HorizontalGenres.js b/app/components/lists/HorizontalGenres.js
@@ -13,16 +13,16 @@ const HorizontalGenres = ({ config, genres }) => {
 		<CustomScroll
 			style={styles.genreList}
 			contentContainerStyle={styles.scrollContainer}
-		>
-			{genres?.map((genre) => (
+			data={genres}
+			renderItem={({item}) => (
 				<TouchableOpacity
 					style={styles.genreBox(theme)}
-					key={genre?.value}
-					onPress={() => navigation.navigate('Genre', { genre })}>
-					<Text numberOfLines={1} style={styles.genreText(theme)}>{genre.value}</Text>
+					key={item?.value}
+					onPress={() => navigation.navigate('Genre', { genre: item })}>
+					<Text numberOfLines={1} style={styles.genreText(theme)}>{item.value}</Text>
 				</TouchableOpacity>
-			))}
-		</CustomScroll>
+			)}
+		/>
 	)
 }
 
@@ -41,7 +41,9 @@ const styles = {
 		rowGap: 10,
 	},
 	genreBox: theme => ({
+		flex: 1,
 		height: 55,
+		borderRadius: 3,
 		paddingHorizontal: 40,
 		backgroundColor: theme.primaryTouch,
 		justifyContent: 'center',

diff --git a/app/components/lists/HorizontalLBStat.js b/app/components/lists/HorizontalLBStat.js
@@ -2,9 +2,6 @@ import React from 'react';
 import { Text, View } from 'react-native';
 
 import { ThemeContext } from '~/contexts/theme';
-import { SettingsContext } from '~/contexts/settings';
-import CustomScroll from '~/components/lists/CustomScroll';
-
 
 const HorizontalLBStat = ({ stats }) => {
   const theme = React.useContext(ThemeContext)
@@ -20,38 +17,34 @@ const HorizontalLBStat = ({ stats }) => {
   }, [stats])
 
   return (
-    <CustomScroll
-      style={styles.custScroll}
-      contentContainerStyle={styles.scrollContainer(stats?.length)}
-    >
+    <View style={styles.scrollContainer(stats?.length)} >
       {
-        stats?.map((stat) => {
-          const time = new Date(stat.time_range)
+        stats.map((item, index) => {
+          const time = new Date(item.time_range)
           const day = days[time.getDay()]
+
           return (
             <View
-              key={stat.time_range}
+              key={index}
               style={{
-                flex: 1,
                 flexDirection: 'column-reverse',
                 alignItems: 'center',
+                flex: 1,
               }}>
               <Text style={{ color: theme.primaryLight, fontSize: 12, textAlign: 'center' }}>{time.getDate()}</Text>
               <View
                 style={{
-                  height: (stat.listen_count / maxCount) * 120,
+                  height: (item.listen_count / maxCount) * 120,
                   width: '100%',
-                  maxWidth: 55,
                   backgroundColor: theme.primaryTouch,
                 }}
-              >
-              </View>
-              <Text style={{ color: theme.secondaryLight, fontSize: 10, textAlign: 'center' }}>{stat.listen_count}</Text>
+              />
+              <Text style={{ color: theme.secondaryLight, fontSize: 10, textAlign: 'center' }}>{item.listen_count}</Text>
             </View>
           )
         })
       }
-    </CustomScroll>
+    </View>
   )
 }
 
@@ -60,6 +53,7 @@ const styles = {
     width: '100%',
   },
   scrollContainer: length => ({
+    display: 'flex',
     width: '100%',
     maxWidth: length * 60,
     paddingStart: 20,