feat: add blurview to headers as well

src/screens/Music/index.tsx

@@ -3,7 +3,7 @@ import { createStackNavigator } from '@react-navigation/stack';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { THEME_COLOR } from 'CONSTANTS';
 import { t } from '@localisation';
-import useDefaultStyles from 'components/Colors';
+import useDefaultStyles, { ColoredBlurView } from 'components/Colors';
 import { StackParams } from 'screens/types';
 import NowPlaying from './overlays/NowPlaying';
 
@@ -12,6 +12,7 @@ import Albums from './stacks/Albums';
 import Album from './stacks/Album';
 import Playlists from './stacks/Playlists';
 import Playlist from './stacks/Playlist';
+import { StyleSheet } from 'react-native';
 
 const Stack = createStackNavigator<StackParams>();
 
@@ -24,8 +25,10 @@ function MusicStack() {
                 headerTintColor: THEME_COLOR,
                 headerTitleStyle: defaultStyles.stackHeader,
                 cardStyle: defaultStyles.view,
+                headerTransparent: true,
+                headerBackground: () => <ColoredBlurView style={StyleSheet.absoluteFill} />,
             }}>
-                <Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: t('recent-albums') }} />
+                <Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: t('recent-albums'), headerShown: false }} />
                 <Stack.Screen name="Albums" component={Albums} options={{ headerTitle: t('albums') }} />
                 <Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />
                 <Stack.Screen name="Playlists" component={Playlists} options={{ headerTitle: t('playlists') }} />

src/screens/Music/stacks/Album.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect } from 'react';
-import { MusicStackParams } from '../types';
 import { useRoute, RouteProp } from '@react-navigation/native';
 import { useAppDispatch, useTypedSelector } from 'store';
 import TrackListView from './components/TrackListView';
@@ -7,8 +6,9 @@ import { fetchTracksByAlbum } from 'store/music/actions';
 import { differenceInDays } from 'date-fns';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import { t } from '@localisation';
+import { StackParams } from 'screens/types';
 
-type Route = RouteProp<MusicStackParams, 'Album'>;
+type Route = RouteProp<StackParams, 'Album'>;
 
 const Album: React.FC = () => {
     const { params: { id } } = useRoute<Route>();

src/screens/Music/stacks/Albums.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, ReactText, useMemo } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
-import { SafeAreaView, SectionList, View } from 'react-native';
+import { SectionList, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { differenceInDays } from 'date-fns';
 import { useAppDispatch, useTypedSelector } from 'store';
@@ -17,6 +17,7 @@ import { Album } from 'store/music/types';
 import { Text } from 'components/Typography';
 import { ShadowWrapper } from 'components/Shadow';
 import { NavigationProp } from 'screens/types';
+import { useNavigatorPadding } from 'utility/SafeNavigatorView';
 
 const HeadingHeight = 50;
 
@@ -79,6 +80,8 @@ const GeneratedAlbumItem = React.memo(function GeneratedAlbumItem(props: Generat
 });
 
 const Albums: React.FC = () => {
+    const navigatorPadding = useNavigatorPadding();
+
     // Retrieve data from store
     const { entities: albums } = useTypedSelector((state) => state.music.albums);
     const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
@@ -168,9 +171,11 @@ const Albums: React.FC = () => {
     });
     
     return (
-        <SafeAreaView>
+        <>
             <AlphabetScroller onSelect={selectLetter} />
             <SectionList
+                contentInset={{ top: navigatorPadding.paddingTop }}
+                contentContainerStyle={navigatorPadding}
                 sections={sections} 
                 refreshing={isLoading}
                 onRefresh={retrieveData}
@@ -180,7 +185,7 @@ const Albums: React.FC = () => {
                 renderSectionHeader={generateSection}
                 renderItem={generateItem}
             />
-        </SafeAreaView>
+        </>
     );
 };
 

src/screens/Music/stacks/Playlist.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect } from 'react';
-import { MusicStackParams } from '../types';
 import { useRoute, RouteProp } from '@react-navigation/native';
 import { useAppDispatch, useTypedSelector } from 'store';
 import TrackListView from './components/TrackListView';
@@ -7,8 +6,9 @@ import { fetchTracksByPlaylist } from 'store/music/actions';
 import { differenceInDays } from 'date-fns';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import { t } from '@localisation';
+import { StackParams } from 'screens/types';
 
-type Route = RouteProp<MusicStackParams, 'Album'>;
+type Route = RouteProp<StackParams, 'Album'>;
 
 const Playlist: React.FC = () => {
     const { params: { id } } = useRoute<Route>();

src/screens/Music/stacks/Playlists.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, ReactText } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
-import { Text, View, FlatList, ListRenderItem } from 'react-native';
+import { Text, View, FlatList, ListRenderItem, RefreshControl } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { differenceInDays } from 'date-fns';
 import { useAppDispatch, useTypedSelector } from 'store';
@@ -11,6 +11,7 @@ import AlbumImage, { AlbumItem } from './components/AlbumImage';
 import { EntityId } from '@reduxjs/toolkit';
 import useDefaultStyles from 'components/Colors';
 import { NavigationProp } from 'screens/types';
+import { useNavigatorPadding } from 'utility/SafeNavigatorView';
 
 interface GeneratedAlbumItemProps {
     id: ReactText;
@@ -34,6 +35,8 @@ const GeneratedPlaylistItem = React.memo(function GeneratedPlaylistItem(props: G
 });
 
 const Playlists: React.FC = () => {
+    const navigatorPadding = useNavigatorPadding();
+
     // Retrieve data from store
     const { entities, ids } = useTypedSelector((state) => state.music.playlists);
     const isLoading = useTypedSelector((state) => state.music.playlists.isLoading);
@@ -94,9 +97,11 @@ const Playlists: React.FC = () => {
     
     return (
         <FlatList
+            refreshControl={
+                <RefreshControl refreshing={isLoading} onRefresh={retrieveData} progressViewOffset={navigatorPadding.paddingTop} />
+            }
+            contentContainerStyle={navigatorPadding}
             data={ids} 
-            refreshing={isLoading}
-            onRefresh={retrieveData}
             getItemLayout={getItemLayout}
             ref={listRef}
             keyExtractor={(item, index) => `${item}_${index}`}

src/screens/Music/stacks/components/TrackListView.tsx

@@ -25,6 +25,7 @@ import { Text } from 'components/Typography';
 
 import CoverImage from 'components/CoverImage';
 import ticksToDuration from 'utility/ticksToDuration';
+import { useNavigatorPadding } from 'utility/SafeNavigatorView';
 
 const styles = StyleSheet.create({
     index: {
@@ -79,6 +80,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     listNumberingStyle = 'album',
 }) => {
     const defaultStyles = useDefaultStyles();
+    const navigatorPadding = useNavigatorPadding();
 
     // Retrieve state
     const tracks = useTypedSelector((state) => state.music.tracks.entities);
@@ -113,9 +115,9 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     return (
         <ScrollView
             style={defaultStyles.view}
-            contentContainerStyle={{ padding: 24, paddingTop: 32, paddingBottom: 64 }}
+            contentContainerStyle={[{ padding: 24, paddingTop: 32 + navigatorPadding.paddingTop, paddingBottom: 64 + navigatorPadding.paddingBottom } ]}
             refreshControl={
-                <RefreshControl refreshing={isLoading} onRefresh={refresh} />
+                <RefreshControl refreshing={isLoading} onRefresh={refresh} progressViewOffset={navigatorPadding.paddingTop} />
             }
         >
             <AlbumImageContainer>