improved large album/playlist performance

switched to flatlist for all of those

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