Added top padding to support header transparency

components/Albums/component.tsx

@@ -8,6 +8,7 @@ import { fetchFavoriteAlbums } from "../../api/queries/functions/favorites";
 import { fetchRecentlyAdded } from "../../api/queries/functions/recents";
 import { QueryConfig } from "../../api/queries/query.config";
 import { fetchAlbums } from "../../api/queries/functions/albums";
+import { useHeaderHeight } from "@react-navigation/elements";
 
 export default function Albums({ navigation, route }: AlbumsProps) : React.JSX.Element {
 
@@ -23,9 +24,11 @@ export default function Albums({ navigation, route }: AlbumsProps) : React.JSX.E
         });
 
     const { width } = useSafeAreaFrame();
+    const headerHeight = useHeaderHeight();
 
         return (
             <FlatList
+                style={{ paddingTop: headerHeight }}
                 contentInsetAdjustmentBehavior="automatic"
                 numColumns={2}
                 data={albums}

components/Artists/component.tsx

@@ -9,6 +9,7 @@ import { fetchArtists } from "../../api/queries/functions/artists";
 import { fetchRecentlyPlayedArtists } from "../../api/queries/functions/recents";
 import { fetchFavoriteArtists } from "../../api/queries/functions/favorites";
 import { QueryConfig } from "../../api/queries/query.config";
+import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function Artists({ 
     navigation,
@@ -33,11 +34,14 @@ export default function Artists({
             })
 
     const { width } = useSafeAreaFrame();
+    const headerHeight = useHeaderHeight();
+
 
     return (
         <FlatList
+            style={{ paddingTop: headerHeight }}
             contentInsetAdjustmentBehavior="automatic"
-            numColumns={2}
+            numColumns={3}
             data={artists}
             refreshControl={
                 <RefreshControl
@@ -52,7 +56,7 @@ export default function Artists({
                     onPress={() => {
                         navigation.navigate("Artist", { artist })
                     }}
-                    width={width / 2.1}
+                    width={width / 3.3}
                 />
             }
         />

components/Favorites/component.tsx

@@ -8,6 +8,7 @@ import { ScrollView, View } from "tamagui";
 import Button from "../Global/helpers/button";
 import Categories from "./categories";
 import LibraryTopBar from "../Library/component";
+import { useHeaderHeight } from "@react-navigation/elements";
 
 export default function Favorites({ 
     route, 
@@ -18,9 +19,11 @@ export default function Favorites({
 }): React.JSX.Element {
 
     const { width } = useSafeAreaFrame();
+    const headerHeight = useHeaderHeight();
 
     return (
         <FlatList
+            style={{ paddingTop: headerHeight }}
             contentInsetAdjustmentBehavior="automatic"
             data={Categories}
             numColumns={2}

components/Genres/component.tsx

@@ -0,0 +1,43 @@
+import { StackParamList } from "../types";
+import { ScrollView, RefreshControl } from "react-native";
+import { YStack } from "tamagui";
+import Genre from "./helpers/genre";
+import { useGenresContext } from "./provider";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { useHeaderHeight } from "@react-navigation/elements";
+
+// to implement
+// map through provided genres data to generate carosels 
+
+export function GenresScreen({ 
+    navigation 
+} : { 
+    navigation: NativeStackNavigationProp<StackParamList>
+}): React.JSX.Element {
+
+    const { refreshing: refetching, onRefresh } = useGenresContext()
+
+    const headerHeight = useHeaderHeight();
+
+    return (
+        <ScrollView 
+            style={{ paddingTop: headerHeight }}
+            contentInsetAdjustmentBehavior="automatic"
+            refreshControl={
+                <RefreshControl 
+                refreshing={refetching} 
+                onRefresh={onRefresh}
+                />
+            }
+            removeClippedSubviews // Save memory usage
+        >
+            <YStack alignContent='flex-start' paddingHorizontal='$2'>
+                {
+
+                }
+                <Genre navigation={navigation} genre={{ name: "Dance" }} />
+
+            </YStack>
+        </ScrollView>
+    );
+}

components/Playlists/component.tsx

@@ -10,15 +10,16 @@ import { useQuery } from "@tanstack/react-query";
 
 export default function FavoritePlaylists({ navigation }: FavoritePlaylistsProps) : React.JSX.Element {
 
-    navigation.setOptions({
-        headerRight: () => {
-            return <Icon 
-                name="plus-circle-outline" 
-                color={getToken("$color.telemagenta")} 
-                onPress={() => navigation.navigate('AddPlaylist')}
-            />
-        }
-    });
+    // To reimplement below header buttons
+    // navigation.setOptions({
+    //     headerRight: () => {
+    //         return <Icon 
+    //             name="plus-circle-outline" 
+    //             color={getToken("$color.telemagenta")} 
+    //             onPress={() => navigation.navigate('AddPlaylist')}
+    //         />
+    //     }
+    // });
 
     const { data: playlists, isPending, refetch } = useQuery({
         queryKey: [QueryKeys.UserPlaylists],