improved large album/playlist performance

switched to flatlist for all of those

app/screens/NowPlayingQueue.tsx

@@ -1,49 +1,56 @@
-import GradientScrollView from '@app/components/GradientScrollView'
+import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
 import NowPlayingBar from '@app/components/NowPlayingBar'
 import { useSkipTo } from '@app/hooks/trackplayer'
+import { Song } from '@app/models/music'
 import { useStore } from '@app/state/store'
 import { selectTrackPlayer } from '@app/state/trackplayer'
 import { selectTrackPlayerMap } from '@app/state/trackplayermap'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
+const SongRenderItem: React.FC<{
+  item: {
+    song: Song
+    i: number
+    onPress: () => void
+  }
+}> = ({ item }) => (
+  <ListItem
+    item={item.song}
+    queueId={item.i}
+    onPress={item.onPress}
+    showArt={true}
+    style={styles.listItem}
+    subtitle={`${item.song.artist} • ${item.song.album}`}
+  />
+)
+
 const NowPlayingQueue = React.memo<{}>(() => {
   const queue = useStore(selectTrackPlayer.queue)
   const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong)
   const skipTo = useSkipTo()
 
   return (
-    <View style={styles.outerContainer}>
-      <GradientScrollView style={styles.container}>
-        <View style={styles.content}>
-          {queue.map(mapTrackExtToSong).map((song, i) => (
-            <ListItem
-              key={i}
-              item={song}
-              queueId={i}
-              onPress={() => skipTo(i)}
-              showArt={true}
-              subtitle={`${song.artist} • ${song.album}`}
-            />
-          ))}
-        </View>
-      </GradientScrollView>
+    <View style={styles.container}>
+      <GradientFlatList
+        data={queue.map(mapTrackExtToSong).map((song, i) => ({ song, i, onPress: () => skipTo(i) }))}
+        renderItem={SongRenderItem}
+        keyExtractor={(item, i) => i.toString()}
+        overScrollMode="never"
+        windowSize={7}
+        contentMarginTop={10}
+      />
       <NowPlayingBar />
     </View>
   )
 })
 
 const styles = StyleSheet.create({
-  outerContainer: {
-    flex: 1,
-  },
   container: {
     flex: 1,
   },
-  content: {
-    alignItems: 'center',
-    paddingTop: 10,
+  listItem: {
     paddingHorizontal: 20,
   },
 })