feat: add blurview to headers as well

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 (
-        <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>
+        <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>
-            <SafeAreaView>
-                <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
-                <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
-                <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
-            </SafeAreaView>
+        <ScrollView contentInset={{ top: headerHeight }}>
+            <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
+            <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
+            <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
         </ScrollView>
     );
 }
@@ -34,9 +34,11 @@ export default function Settings() {
     const defaultStyles = useDefaultStyles();
 
     return (
-        <Stack.Navigator initialRouteName="SettingList"  screenOptions={{
+        <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') }} />