build out artist view

clean up mapping methods a bit

app/components/ArtistArt.tsx

@@ -164,7 +164,13 @@ const ArtistArt = React.memo<ArtistArtProps>(({ id, height, width }) => {
 
   return (
     <View style={[styles.container, { borderRadius: height / 2 }]}>
-      <CoverArt PlaceholderComponent={Placeholder} height={height} width={width} coverArtUri={artistArt?.uri} />
+      <CoverArt
+        PlaceholderComponent={Placeholder}
+        height={height}
+        width={width}
+        coverArtUri={artistArt?.uri}
+        resizeMode={FastImage.resizeMode.cover}
+      />
     </View>
   )
 })

app/components/CoverArt.tsx

@@ -11,7 +11,8 @@ const CoverArt: React.FC<{
   height?: string | number
   width?: string | number
   coverArtUri?: string
-}> = ({ PlaceholderComponent, placeholderIcon, height, width, coverArtUri }) => {
+  resizeMode?: keyof typeof FastImage.resizeMode
+}> = ({ PlaceholderComponent, placeholderIcon, height, width, coverArtUri, resizeMode }) => {
   const [placeholderVisible, setPlaceholderVisible] = useState(false)
   const [loading, setLoading] = useState(true)
   const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
@@ -26,7 +27,7 @@ const CoverArt: React.FC<{
     <FastImage
       source={{ uri: coverArtUri, priority: 'high' }}
       style={{ ...styles.image, opacity: placeholderVisible ? 0 : 1 }}
-      resizeMode={FastImage.resizeMode.contain}
+      resizeMode={resizeMode || FastImage.resizeMode.contain}
       onError={() => {
         setLoading(false)
         setPlaceholderVisible(true)

app/components/GradientBackground.tsx

@@ -17,12 +17,14 @@ const GradientBackground: React.FC<{
     <LinearGradient
       colors={colors || [colorStyles.gradient.high, colorStyles.gradient.low]}
       locations={locations || [0.01, 0.7]}
-      style={{
-        ...style,
-        width: width || '100%',
-        height: height || layout.height,
-        position: position || 'absolute',
-      }}>
+      style={[
+        style,
+        {
+          width: width || '100%',
+          height: height || layout.height,
+          position: position || 'absolute',
+        },
+      ]}>
       {children}
     </LinearGradient>
   )

app/components/GradientScrollView.tsx

@@ -4,7 +4,11 @@ import dimensions from '@app/styles/dimensions'
 import React from 'react'
 import { ScrollView, ScrollViewProps, useWindowDimensions } from 'react-native'
 
-const GradientScrollView: React.FC<ScrollViewProps> = props => {
+const GradientScrollView: React.FC<
+  ScrollViewProps & {
+    offset?: number
+  }
+> = props => {
   const layout = useWindowDimensions()
 
   const minHeight = layout.height - (dimensions.top() + dimensions.bottom())
@@ -15,7 +19,7 @@ const GradientScrollView: React.FC<ScrollViewProps> = props => {
       {...props}
       style={[props.style, { backgroundColor: colors.gradient.low }]}
       contentContainerStyle={[props.contentContainerStyle, { minHeight }]}>
-      <GradientBackground />
+      <GradientBackground style={{ top: props.offset }} />
       {props.children}
     </ScrollView>
   )