feat: add blurview to headers as well

package-lock.json

@@ -13,6 +13,7 @@
         "@react-native-community/blur": "^4.3.0",
         "@react-native-community/netinfo": "^9.3.6",
         "@react-navigation/bottom-tabs": "^6.4.0",
+        "@react-navigation/elements": "^1.3.17",
         "@react-navigation/native": "^6.0.13",
         "@react-navigation/native-stack": "^6.9.1",
         "@react-navigation/stack": "^6.3.4",
@@ -3403,9 +3404,9 @@
       }
     },
     "node_modules/@react-navigation/elements": {
-      "version": "1.3.6",
+      "version": "1.3.17",
-      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.17.tgz",
-      "integrity": "sha512-pNJ8R9JMga6SXOw6wGVN0tjmE6vegwPmJBL45SEMX2fqTfAk2ykDnlJHodRpHpAgsv0DaI8qX76z3A+aqKSU0w==",
+      "integrity": "sha512-sui8AzHm6TxeEvWT/NEXlz3egYvCUog4tlXA4Xlb2Vxvy3purVXDq/XsM56lJl344U5Aj/jDzkVanOTMWyk4UA==",
       "peerDependencies": {
         "@react-navigation/native": "^6.0.0",
         "react": "*",
@@ -19014,9 +19015,9 @@
       }
     },
     "@react-navigation/elements": {
-      "version": "1.3.6",
+      "version": "1.3.17",
-      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.17.tgz",
-      "integrity": "sha512-pNJ8R9JMga6SXOw6wGVN0tjmE6vegwPmJBL45SEMX2fqTfAk2ykDnlJHodRpHpAgsv0DaI8qX76z3A+aqKSU0w=="
+      "integrity": "sha512-sui8AzHm6TxeEvWT/NEXlz3egYvCUog4tlXA4Xlb2Vxvy3purVXDq/XsM56lJl344U5Aj/jDzkVanOTMWyk4UA=="
     },
     "@react-navigation/native": {
       "version": "6.0.13",

package.json

@@ -17,6 +17,7 @@
     "@react-native-community/blur": "^4.3.0",
     "@react-native-community/netinfo": "^9.3.6",
     "@react-navigation/bottom-tabs": "^6.4.0",
+    "@react-navigation/elements": "^1.3.17",
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/native-stack": "^6.9.1",
     "@react-navigation/stack": "^6.3.4",

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>

src/screens/Search/index.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 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 Search from './stacks/Search';
 import Album from 'screens/Music/stacks/Album';
+import { StyleSheet } from 'react-native';
 
 const Stack = createStackNavigator<StackParams>();
 
@@ -17,6 +18,9 @@ function SearchStack() {
             headerTintColor: THEME_COLOR,
             headerTitleStyle: defaultStyles.stackHeader,
             cardStyle: defaultStyles.view,
+            headerTransparent: true,
+            headerBackground: () => <ColoredBlurView style={StyleSheet.absoluteFill} />,
+            
         }}>
             <Stack.Screen name="Search" component={Search} options={{ headerTitle: t('search'), headerShown: false }} />
             <Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />

src/screens/Settings/components/Cache.tsx

@@ -6,6 +6,7 @@ import Button from 'components/Button';
 import styled from 'styled-components/native';
 import { Text } from 'components/Typography';
 import { useAppDispatch } from 'store';
+import { useHeaderHeight } from '@react-navigation/elements';
 
 
 const ClearCache = styled(Button)`
@@ -17,6 +18,7 @@ const Container = styled.ScrollView`
 `;
 
 export default function CacheSettings() {
+    const headerHeight = useHeaderHeight();
     const dispatch = useAppDispatch();
     const handleClearCache = useCallback(() => {
         // Dispatch an action to reset the music subreducer state
@@ -27,7 +29,7 @@ export default function CacheSettings() {
     }, [dispatch]);
 
     return (
-        <Container>
+        <Container contentInset={{ top: headerHeight }}>
             <Text>{t('setting-cache-description')}</Text>
             <ClearCache title={t('reset-cache')} onPress={handleClearCache} />
         </Container>

src/screens/Settings/components/Library.tsx

@@ -7,6 +7,7 @@ import { useTypedSelector } from 'store';
 import { t } from '@localisation';
 import Button from 'components/Button';
 import { Text } from 'components/Typography';
+import { useHeaderHeight } from '@react-navigation/elements';
 
 
 const InputContainer = styled.View`
@@ -25,12 +26,13 @@ const Container = styled.ScrollView`
 
 export default function LibrarySettings() {
     const defaultStyles = useDefaultStyles();
+    const headerHeight = useHeaderHeight();
     const { jellyfin } = useTypedSelector(state => state.settings);
     const navigation = useNavigation<NavigationProp>();
     const handleSetLibrary = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
 
     return (
-        <Container>
+        <Container contentInset={{ top: headerHeight }}>
             <InputContainer>
                 <Text style={defaultStyles.text}>{t('jellyfin-server-url')}</Text>
                 <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={defaultStyles.input} />

src/screens/Settings/components/Sentry.tsx

@@ -9,8 +9,10 @@ import ChevronIcon from 'assets/icons/chevron-right.svg';
 import { THEME_COLOR } from 'CONSTANTS';
 import useDefaultStyles, { DefaultStylesProvider } from 'components/Colors';
 import { t } from '@localisation';
+import { ScrollView } from 'react-native';
+import { useHeaderHeight } from '@react-navigation/elements';
 
-const Container = styled.ScrollView`
+const Container = styled.View`
     padding: 24px;
 `;
 
@@ -25,7 +27,9 @@ const HeaderContainer = styled.View<{ isActive?: boolean }>`
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    margin: 16px 0 4px 0;
+    padding: 16px 24px;
+    border-radius: 8px;
+    overflow: hidden;
 
     ${props => props.isActive && css`
         background-color: ${THEME_COLOR};
@@ -37,7 +41,8 @@ const HeaderText = styled(Text)`
 `;
 
 const ContentContainer = styled.View`
-    margin-top: 8px;
+    margin-bottom: 8px;
+    padding: 8px 24px;
 `;
 
 const Label = styled(Text)`
@@ -94,6 +99,7 @@ function renderContent(question: Question) {
 
 export default function Sentry() {
     const defaultStyles = useDefaultStyles();
+    const headerHeight = useHeaderHeight();
     const [isReportingEnabled, setReporting] = useState(isSentryEnabled);
     const [activeSections, setActiveSections] = useState<number[]>([]);
 
@@ -104,14 +110,17 @@ export default function Sentry() {
     });
 
     return (
+        <ScrollView contentInset={{ top: headerHeight }}>
             <Container>
                 <Text>{t('error-reporting-description')}</Text>
                 <Text />
                 <Text>{t('error-reporting-rationale')}</Text>
+
                 <SwitchContainer>
                     <Label>{t('error-reporting')}</Label>
                     <Switch value={isReportingEnabled} onValueChange={toggleSwitch} />
                 </SwitchContainer>
+            </Container>
             <Accordion
                 sections={questions}
                 renderHeader={renderHeader}
@@ -120,6 +129,6 @@ export default function Sentry() {
                 onChange={setActiveSections}
                 underlayColor={defaultStyles.activeBackground.backgroundColor}
             />
-        </Container>
+        </ScrollView>
     );
 }

src/screens/Settings/index.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
-import { SafeAreaView, ScrollView } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import Library from './components/Library';
 import Cache from './components/Cache';
-import useDefaultStyles from 'components/Colors';
+import useDefaultStyles, { ColoredBlurView } from 'components/Colors';
 import { t } from '@localisation';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/native';
@@ -10,20 +10,20 @@ import ListButton from 'components/ListButton';
 import { THEME_COLOR } from 'CONSTANTS';
 import Sentry from './components/Sentry';
 import { SettingsNavigationProp } from './types';
+import { useHeaderHeight } from '@react-navigation/elements';
 
 export function SettingsList() {
+    const headerHeight = useHeaderHeight();
     const navigation = useNavigation<SettingsNavigationProp>();
     const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]);
     const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
     const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);
 
     return (
-        <ScrollView>
+        <ScrollView contentInset={{ top: headerHeight }}>
-            <SafeAreaView>
             <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
             <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
             <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
-            </SafeAreaView>
         </ScrollView>
     );
 }
@@ -36,7 +36,9 @@ export default function Settings() {
     return (
         <Stack.Navigator initialRouteName="SettingList" screenOptions={{
             headerTintColor: THEME_COLOR,
-            headerTitleStyle: defaultStyles.stackHeader
+            headerTitleStyle: defaultStyles.stackHeader,
+            headerTransparent: true,
+            headerBackground: () => <ColoredBlurView style={StyleSheet.absoluteFill} />,
         }}>
             <Stack.Screen name="SettingList" component={SettingsList} options={{ headerTitle: t('settings') }} />
             <Stack.Screen name="Library" component={Library} options={{ headerTitle: t('jellyfin-library') }} />

src/utility/SafeNavigatorView.tsx

@@ -0,0 +1,24 @@
+import { useHeaderHeight } from '@react-navigation/elements';
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+import useCurrentTrack from './useCurrentTrack';
+
+export function useNavigatorPadding() {
+    const headerHeight = useHeaderHeight();
+    const { index } = useCurrentTrack();
+
+    return {
+        paddingTop: headerHeight,
+        paddingBottom: index ? 68 : 0
+    };
+}
+
+function SafeNavigatorView({ style, ...props }: ViewProps) {
+    const headerHeight = useHeaderHeight();
+
+    return (
+        <View {...props} style={[{ paddingTop: headerHeight }, style]} />
+    );
+}
+
+export default SafeNavigatorView;