get safe area working

other style fixes

components/Artist/component.tsx

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

components/Home/component.tsx

@@ -9,6 +9,7 @@ import { HomeProvider, useHomeContext } from "./provider";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { HomeStackParamList, ProvidedHomeProps } from "./types";
 import { HomeArtistScreen } from "./screens/artist";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export const Stack = createNativeStackNavigator<HomeStackParamList>();
 
@@ -48,20 +49,21 @@ function ProvidedHome({ route, navigation }: ProvidedHomeProps): React.JSX.Eleme
     const { refreshing: refetching, onRefresh: onRefetch } = useHomeContext()
 
     return (
-        <ScrollView 
-            paddingLeft={10}
-            refreshControl={
-            <RefreshControl 
-                refreshing={refetching} 
-                onRefresh={onRefetch}
-            />
-        }>
-            <YStack alignContent='flex-start'>
-                <H2>{`Hi, ${user!.name}`}</H2>
-                
-                <RecentArtists route={route} navigation={navigation} />
-                <RecentlyPlayed />
-            </YStack>
-        </ScrollView>
+        <SafeAreaView>
+            <ScrollView 
+                paddingLeft={10}
+                refreshControl={
+                    <RefreshControl 
+                    refreshing={refetching} 
+                    onRefresh={onRefetch}
+                    />
+                }>
+                <YStack alignContent='flex-start'>
+                    <H2>{`Hi, ${user!.name}`}</H2>
+                    <RecentArtists route={route} navigation={navigation} />
+                    <RecentlyPlayed />
+                </YStack>
+            </ScrollView>
+        </SafeAreaView>
     );
 }

components/jellify.tsx

@@ -8,6 +8,7 @@ import { DarkTheme, DefaultTheme, NavigationContainer } from "@react-navigation/
 import Navigation from "./navigation";
 import Login from "./Login/component";
 import { JellyfinAuthenticationProvider } from "./Login/provider";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export default function Jellify(): React.JSX.Element {
 
@@ -29,11 +30,13 @@ function App(): React.JSX.Element {
   
   return (
     <NavigationContainer theme={isDarkMode ? DarkTheme : DefaultTheme}>
+      <SafeAreaProvider>
         { library ? <Navigation /> : (
           <JellyfinAuthenticationProvider>
             <Login /> 
           </JellyfinAuthenticationProvider>
         )}
+      </SafeAreaProvider>
     </NavigationContainer>
   );
 }