building out artist navigation from the main home screen

components/Artist/component.tsx

@@ -1,8 +1,12 @@
 import { ScrollView } from "tamagui";
+import Avatar from "../helpers/avatar";
 
-export default function Artist({ artistId }: { artistId: string }): React.JSX.Element {
+export default function Artist({ artistId, artistName }: { artistId: string, artistName: string  }): React.JSX.Element {
     return (
         <ScrollView>
+            <Avatar itemId={artistId}>
+                {artistName}
+            </Avatar>
         </ScrollView>
     )
 }

components/Home/component.tsx

@@ -1,6 +1,6 @@
 import { ScrollView, YStack } from "tamagui";
 import _ from "lodash";
-import { H2 } from "../helpers/text";
+import { H2, Text } from "../helpers/text";
 import RecentlyPlayed from "./helpers/recently-played";
 import { useApiClientContext } from "../jellyfin-api-provider";
 import RecentArtists from "./helpers/recent-artists";
@@ -17,8 +17,25 @@ export default function Home(): React.JSX.Element {
     return (
         <HomeProvider>
             <Stack.Navigator id="Home" initialRouteName="Home">
-                <Stack.Screen name="Home" component={ProvidedHome} />
-                <Stack.Screen name="Artist" component={HomeArtistScreen} />
+                <Stack.Screen 
+                    name="Home" 
+                    component={ProvidedHome} 
+                    options={{
+                        headerShown: false
+                    }}
+                />
+
+                <Stack.Screen 
+                    name="Artist" 
+                    component={HomeArtistScreen} 
+                    options={({ route }) => ({
+                        title: route.params.artistName,
+                        headerLargeTitle: true,
+                        headerLargeTitleStyle: {
+                            fontFamily: 'Aileron-Black'
+                        }
+                    })}
+                />
             </Stack.Navigator>
         </HomeProvider>
     );

components/Home/helpers/recent-artists.tsx

@@ -25,12 +25,12 @@ export default function RecentArtists({ navigation }: ProvidedHomeProps): React.
             <ScrollView horizontal>
                 { recentArtists && recentArtists.map((recentArtist) => {
                     return (
-                        <Button onPress={() => navigation.navigate('Artist', { artistId: recentArtist.Id! })}>
+                        <Button onPress={() => navigation.navigate('Artist', { artistId: recentArtist.Id!, artistName: recentArtist.Name ?? "Unknown Artist" })}>
                             <YStack 
                             gap="$4" 
                             alignContent="center"
                             justifyContent="center"
-                            padding="$3"
+                            marginHorizontal="$3"
                             width="$10"
                             >
                                 <Avatar circular size="$10">

components/Home/types.tsx

@@ -3,7 +3,10 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack";
 
 export type HomeStackParamList = {
     Home: undefined;
-    Artist: { artistId: string };
+    Artist: { 
+        artistId: string,
+        artistName: string
+    };
 }
 
 export type ProvidedHomeProps = NativeStackScreenProps<HomeStackParamList>;

components/helpers/avatar.tsx

@@ -0,0 +1,28 @@
+import { Avatar as TamaguiAvatar } from "tamagui"
+import { Label, Text } from "./text"
+import { useApiClientContext } from "../jellyfin-api-provider"
+import { Colors } from "../../enums/colors";
+
+interface AvatarProps {
+    circular?: boolean | undefined;
+    itemId: string;
+    children: string;
+}
+
+export default function Avatar(props: AvatarProps): React.JSX.Element {
+
+    const { server } = useApiClientContext();
+
+    return (
+        <>
+            <TamaguiAvatar 
+                circular={props.circular} 
+                size="$10"
+            >
+                <TamaguiAvatar.Image src={`${server!.url}/Items/${props.itemId!}/Images/Primary`} />
+                <TamaguiAvatar.Fallback backgroundColor={Colors.Secondary}/>
+            </TamaguiAvatar>
+            <Label htmlFor={""} size={"$3"}>{props.children}</Label>
+        </>
+    )
+}