imprv CoverArt perf and interface

app/screens/AlbumView.tsx

@@ -28,9 +28,7 @@ const AlbumDetails: React.FC<{
       imageKey={`${album.name}${album.artist}`}
       style={styles.container}>
       <View style={styles.content}>
-        <View style={styles.cover}>
-          <CoverArt coverArtUri={album.coverArtUri} height="100%" width="100%" />
-        </View>
+        <CoverArt coverArtUri={album.coverArtUri} style={styles.cover} />
         <Text style={styles.title}>{album.name}</Text>
         <Text style={styles.subtitle}>
           {album.artist}

app/screens/ArtistView.tsx

@@ -26,7 +26,7 @@ const AlbumItem = React.memo<{
     <PressableOpacity
       onPress={() => navigation.navigate('AlbumView', { id: album.id, title: album.name })}
       style={[styles.albumItem, { width }]}>
-      <CoverArt coverArtUri={album.coverArtThumbUri} height={height} width={width} />
+      <CoverArt coverArtUri={album.coverArtThumbUri} style={{ height, width }} />
       <Text style={styles.albumTitle}>{album.name}</Text>
       <Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
     </PressableOpacity>
@@ -73,11 +73,9 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
       style={styles.scroll}
       contentContainerStyle={styles.scrollContent}>
       <CoverArt
-        PlaceholderComponent={ArtistCoverFallback}
+        FallbackComponent={ArtistCoverFallback}
         coverArtUri={artist.largeImageUrl}
         style={styles.artistCover}
-        height={artistCoverHeight}
-        width={coverLayout.width}
         resizeMode={FastImage.resizeMode.cover}
       />
       <View style={styles.titleContainer}>
@@ -151,8 +149,8 @@ const styles = StyleSheet.create({
   },
   artistCover: {
     position: 'absolute',
-    width: '100%',
     height: artistCoverHeight,
+    width: '100%',
   },
   albums: {
     width: '100%',

app/screens/Home.tsx

@@ -6,11 +6,19 @@ import { homeListsAtom, homeListsUpdatingAtom, useUpdateHomeLists } from '@app/s
 import { homeListTypesAtom, useActiveServerRefresh } from '@app/state/settings'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
+import { GetAlbumListType } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React from 'react'
 import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
 
+const titles: { [key in GetAlbumListType]?: string } = {
+  recent: 'Recent Albums',
+  random: 'Random Albums',
+  frequent: 'Frequent Albums',
+  starred: 'Starred Albums',
+}
+
 const AlbumItem = React.memo<{
   album: AlbumListItem
 }>(({ album }) => {
@@ -21,7 +29,7 @@ const AlbumItem = React.memo<{
       onPress={() => navigation.navigate('AlbumView', { id: album.id, title: album.name })}
       key={album.id}
       style={styles.item}>
-      <CoverArt coverArtUri={album.coverArtThumbUri} height={styles.item.width} width={styles.item.width} />
+      <CoverArt coverArtUri={album.coverArtThumbUri} style={{ height: styles.item.width, width: styles.item.width }} />
       <Text style={styles.title} numberOfLines={1}>
         {album.name}
       </Text>
@@ -33,7 +41,7 @@ const AlbumItem = React.memo<{
 })
 
 const Category = React.memo<{
-  name: string
+  name?: string
   data: AlbumListItem[]
 }>(({ name, data }) => {
   return (
@@ -75,7 +83,7 @@ const Home = () => {
       }>
       <View style={styles.content}>
         {types.map(type => (
-          <Category key={type} name={type} data={type in lists ? lists[type] : []} />
+          <Category key={type} name={titles[type as GetAlbumListType]} data={type in lists ? lists[type] : []} />
         ))}
       </View>
     </GradientScrollView>

app/screens/LibraryAlbums.tsx

@@ -25,7 +25,7 @@ const AlbumItem = React.memo<{
     <PressableOpacity
       style={[styles.item, { maxWidth: size, height }]}
       onPress={() => navigation.navigate('AlbumView', { id, title: name })}>
-      <CoverArt coverArtUri={coverArtUri} height={size} width={size} />
+      <CoverArt coverArtUri={coverArtUri} style={{ height: size, width: size }} />
       <View style={styles.itemDetails}>
         <Text style={styles.title} numberOfLines={1}>
           {name}

app/screens/NowPlayingLayout.tsx

@@ -73,7 +73,7 @@ const SongCoverArt = () => {
 
   return (
     <View style={coverArtStyles.container}>
-      <CoverArt height="100%" width="100%" coverArtUri={track?.artwork as string} />
+      <CoverArt coverArtUri={track?.artwork as string} style={coverArtStyles.image} />
     </View>
   )
 }
@@ -84,6 +84,10 @@ const coverArtStyles = StyleSheet.create({
     alignItems: 'center',
     paddingBottom: 20,
   },
+  image: {
+    height: '100%',
+    width: '100%',
+  },
 })
 
 const SongInfo = () => {