improved large album/playlist performance

switched to flatlist for all of those

app/components/BackgroundHeaderFlatList.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { FlatList, FlatListProps, useWindowDimensions, View, StyleSheet } from 'react-native'
+import colors from '@app/styles/colors'
+import GradientBackground, { GradientBackgroundProps } from '@app/components/GradientBackground'
+import { useLayout } from '@react-native-community/hooks'
+import NothingHere from './NothingHere'
+import ImageGradientBackground, { ImageGradientBackgroundProps } from './ImageGradientBackground'
+
+export type BackgroundHeaderFlatListPropsBase<ItemT> = FlatListProps<ItemT> & {
+  contentMarginTop?: number
+}
+
+export type BackgroundHeaderFlatListProp<ItemT> = BackgroundHeaderFlatListPropsBase<ItemT> & {
+  BackgroundComponent: typeof ImageGradientBackground | typeof GradientBackground
+  backgroundProps?: ImageGradientBackgroundProps | GradientBackgroundProps
+}
+
+function BackgroundHeaderFlatList<ItemT>(props: BackgroundHeaderFlatListProp<ItemT>) {
+  const window = useWindowDimensions()
+  const headerLayout = useLayout()
+
+  let marginBottom = -window.height + (props.contentMarginTop || 0)
+  if (props.ListHeaderComponent) {
+    marginBottom += headerLayout.height || window.height
+  }
+
+  const headerStyle = { marginBottom }
+
+  return (
+    <FlatList
+      {...props}
+      contentContainerStyle={[props.contentContainerStyle, { minHeight: window.height }]}
+      style={[props.style, styles.list]}
+      ListHeaderComponent={
+        <props.BackgroundComponent position="relative" {...props.backgroundProps}>
+          <View onLayout={headerLayout.onLayout}>{props.ListHeaderComponent}</View>
+        </props.BackgroundComponent>
+      }
+      ListHeaderComponentStyle={[headerStyle]}
+      ListEmptyComponent={<NothingHere style={styles.nothing} />}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  list: {
+    backgroundColor: colors.gradient.low,
+  },
+  nothing: {
+    width: '100%',
+  },
+})
+
+export default BackgroundHeaderFlatList

app/components/GradientBackground.tsx

@@ -3,14 +3,27 @@ import { useWindowDimensions, ViewStyle } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import colorStyles from '@app/styles/colors'
 
-const GradientBackground: React.FC<{
+export type GradientBackgroundPropsBase = {
   height?: number | string
   width?: number | string
   position?: 'relative' | 'absolute'
   style?: ViewStyle
+}
+
+export type GradientBackgroundProps = GradientBackgroundPropsBase & {
   colors?: string[]
   locations?: number[]
-}> = ({ height, width, position, style, colors, locations, children }) => {
+}
+
+const GradientBackground: React.FC<GradientBackgroundProps> = ({
+  height,
+  width,
+  position,
+  style,
+  colors,
+  locations,
+  children,
+}) => {
   const layout = useWindowDimensions()
 
   return (

app/components/GradientFlatList.tsx

@@ -1,28 +1,13 @@
+import GradientBackground, { GradientBackgroundProps } from '@app/components/GradientBackground'
 import React from 'react'
-import { FlatList, FlatListProps, StyleSheet, useWindowDimensions } from 'react-native'
-import colors from '@app/styles/colors'
-import GradientBackground from '@app/components/GradientBackground'
+import BackgroundHeaderFlatList, { BackgroundHeaderFlatListPropsBase } from './BackgroundHeaderFlatList'
 
-function GradientFlatList<ItemT>(props: FlatListProps<ItemT>) {
-  const layout = useWindowDimensions()
+export type GradientFlatListProps<ItemT> = BackgroundHeaderFlatListPropsBase<ItemT> & {
+  backgroundProps?: GradientBackgroundProps
+}
 
-  const contentContainerStyle = StyleSheet.flatten(props.contentContainerStyle)
-
-  return (
-    <FlatList
-      {...props}
-      style={{
-        ...(props.style as any),
-        backgroundColor: colors.gradient.low,
-      }}
-      ListHeaderComponent={() => <GradientBackground position="relative" />}
-      ListHeaderComponentStyle={{
-        marginBottom: -layout.height,
-        marginHorizontal: -(contentContainerStyle.paddingHorizontal || 0),
-        top: -(contentContainerStyle.paddingTop || 0),
-      }}
-    />
-  )
+function GradientFlatList<ItemT>(props: GradientFlatListProps<ItemT>) {
+  return <BackgroundHeaderFlatList BackgroundComponent={GradientBackground} {...props} />
 }
 
 export default GradientFlatList

app/components/ImageGradientBackground.tsx

@@ -1,16 +1,11 @@
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect, useState } from 'react'
-import { ViewStyle } from 'react-native'
 import ImageColors from 'react-native-image-colors'
 import { AndroidImageColors } from 'react-native-image-colors/lib/typescript/types'
 import colors from '@app/styles/colors'
-import GradientBackground from '@app/components/GradientBackground'
+import GradientBackground, { GradientBackgroundPropsBase } from '@app/components/GradientBackground'
 
-export type ImageGradientBackgroundProps = {
-  height?: number | string
-  width?: number | string
-  position?: 'relative' | 'absolute'
-  style?: ViewStyle
+export type ImageGradientBackgroundProps = GradientBackgroundPropsBase & {
   imagePath?: string
   onGetColor?: (color: string) => void
 }

app/components/ImageGradientFlatList.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import BackgroundHeaderFlatList, { BackgroundHeaderFlatListPropsBase } from './BackgroundHeaderFlatList'
+import ImageGradientBackground, { ImageGradientBackgroundProps } from './ImageGradientBackground'
+
+export type ImageGradientFlatListProps<ItemT> = BackgroundHeaderFlatListPropsBase<ItemT> & {
+  backgroundProps?: ImageGradientBackgroundProps
+}
+
+function ImageGradientFlatList<ItemT>(props: ImageGradientFlatListProps<ItemT>) {
+  return <BackgroundHeaderFlatList BackgroundComponent={ImageGradientBackground} {...props} />
+}
+
+export default ImageGradientFlatList

app/components/ListItem.tsx

@@ -7,7 +7,7 @@ import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
 import { AlbumContextPressable, ArtistContextPressable, SongContextPressable } from './ContextMenu'
@@ -55,7 +55,8 @@ const ListItem: React.FC<{
   showStar?: boolean
   listStyle?: 'big' | 'small'
   subtitle?: string
-}> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle }) => {
+  style?: StyleProp<ViewStyle>
+}> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style }) => {
   const navigation = useNavigation()
   const starred = useStarred(item.id, item.itemType)
 
@@ -156,7 +157,7 @@ const ListItem: React.FC<{
   }
 
   return (
-    <View style={[styles.container, sizeStyle.container]}>
+    <View style={[styles.container, sizeStyle.container, style]}>
       <PressableComponent>
         {showArt && coverArt}
         <View style={styles.text}>