feat: finish offsets on new navigation views

src/screens/Settings/components/Cache.tsx

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

src/screens/Settings/components/Library.tsx

@@ -7,8 +7,7 @@ import { useTypedSelector } from 'store';
 import { t } from '@localisation';
 import Button from 'components/Button';
 import { Paragraph } from 'components/Typography';
-import { useHeaderHeight } from '@react-navigation/elements';
-
+import { SafeScrollView } from 'components/SafeNavigatorView';
 
 const InputContainer = styled.View`
     margin: 10px 0;
@@ -20,19 +19,18 @@ const Input = styled.TextInput`
     border-radius: 5px;
 `;
 
-const Container = styled.ScrollView`
+const Container = styled(SafeScrollView)`
     padding: 24px;
 `;
 
 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 contentContainerStyle={{ paddingTop: headerHeight }}>
+        <Container>
             <InputContainer>
                 <Paragraph style={defaultStyles.text}>{t('jellyfin-server-url')}</Paragraph>
                 <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={defaultStyles.input} />

src/screens/Settings/components/Sentry.tsx

@@ -9,8 +9,7 @@ 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';
+import { SafeScrollView } from 'components/SafeNavigatorView';
 
 const Container = styled.View`
     padding: 24px;
@@ -99,7 +98,6 @@ function renderContent(question: Question) {
 
 export default function Sentry() {
     const defaultStyles = useDefaultStyles();
-    const headerHeight = useHeaderHeight();
     const [isReportingEnabled, setReporting] = useState(isSentryEnabled);
     const [activeSections, setActiveSections] = useState<number[]>([]);
 
@@ -110,7 +108,7 @@ export default function Sentry() {
     });
 
     return (
-        <ScrollView contentContainerStyle={{ paddingTop: headerHeight }}>
+        <SafeScrollView>
             <Container>
                 <Paragraph>{t('error-reporting-description')}</Paragraph>
                 <Paragraph />
@@ -129,6 +127,6 @@ export default function Sentry() {
                 onChange={setActiveSections}
                 underlayColor={defaultStyles.activeBackground.backgroundColor}
             />
-        </ScrollView>
+        </SafeScrollView>
     );
 }

src/screens/Settings/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import Library from './components/Library';
 import Cache from './components/Cache';
 import useDefaultStyles, { ColoredBlurView } from 'components/Colors';
@@ -10,21 +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';
+import { SafeScrollView } from 'components/SafeNavigatorView';
 
 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 contentContainerStyle={{ paddingTop: headerHeight }}>
+        <SafeScrollView>
             <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
             <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
             <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
-        </ScrollView>
+        </SafeScrollView>
     );
 }