feat: finish offsets on new navigation views

src/components/SafeNavigatorView.tsx

@@ -0,0 +1,100 @@
+import React, { ForwardedRef, Ref, forwardRef } from 'react';
+import { useHeaderHeight } from '@react-navigation/elements';
+import { FlatList, FlatListProps, ScrollView, ScrollViewProps, SectionList, SectionListProps } from 'react-native';
+import useCurrentTrack from '../utility/useCurrentTrack';
+import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
+
+declare module 'react' {
+    function forwardRef<T, P = {}>(
+        render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
+    ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}
+
+/**
+ * A wrapper for ScrollView that takes any paddings, margins and insets into
+ * account that result from the bottom tabs, potential NowPlaying overlay and header.
+ */
+export function SafeScrollView({
+    contentContainerStyle,
+    ...props
+}: ScrollViewProps) {
+    const { top, bottom } = useNavigationOffsets();
+
+    return (
+        <ScrollView
+            contentContainerStyle={[
+                contentContainerStyle,
+                { paddingTop: top, paddingBottom: bottom },
+            ]}
+            scrollIndicatorInsets={{ top: top  / 2, bottom: bottom / 2 + 5 }}
+            {...props}
+        />
+    );
+}
+
+/**
+ * A wrapper for ScrollView that takes any paddings, margins and insets into
+ * account that result from the bottom tabs, potential NowPlaying overlay and header.
+ */
+function BareSafeSectionList<I, S>({
+    contentContainerStyle,
+    ...props
+}: SectionListProps<I, S>, ref: ForwardedRef<SectionList<I, S>>) {
+    const { top, bottom } = useNavigationOffsets();
+
+    return (
+        <SectionList
+            contentContainerStyle={[
+                { paddingTop: top, paddingBottom: bottom },
+                contentContainerStyle,
+            ]}
+            scrollIndicatorInsets={{ top: top  / 2, bottom: bottom / 2 + 5 }}
+            ref={ref}
+            {...props}
+        />
+    );
+}
+export const SafeSectionList = forwardRef(BareSafeSectionList);
+
+/**
+ * A wrapper for ScrollView that takes any paddings, margins and insets into
+ * account that result from the bottom tabs, potential NowPlaying overlay and header.
+ */
+function BareSafeFlatList<I>({
+    contentContainerStyle,
+    ...props
+}: FlatListProps<I>, ref: ForwardedRef<FlatList<I>>) {
+    const { top, bottom } = useNavigationOffsets();
+
+    return (
+        <FlatList
+            contentContainerStyle={[
+                { paddingTop: top, paddingBottom: bottom },
+                contentContainerStyle,
+            ]}
+            scrollIndicatorInsets={{ top, bottom }}
+            ref={ref}
+            {...props}
+        />
+    );
+}
+
+export const SafeFlatList = forwardRef(BareSafeFlatList);
+
+/**
+ * A hook that returns the correct offset that should be applied to any Views
+ * that are wrapped in a NavigationView, in order to account for overlays,
+ * headers and bottom tabs.
+ */
+export function useNavigationOffsets({ includeOverlay = true } = {} as { includeOverlay?: boolean }) {
+    const headerHeight = useHeaderHeight();
+    const bottomBarHeight = useBottomTabBarHeight();
+    const { track } = useCurrentTrack();
+
+    return {
+        top: headerHeight,
+        bottom: (track && includeOverlay ? 68 : 0) + bottomBarHeight || 0,
+    };
+}
+
+

src/screens/Downloads/index.tsx

@@ -1,7 +1,6 @@
 import useDefaultStyles from 'components/Colors';
 import React, { useCallback, useMemo } from 'react';
 import { FlatListProps, View } from 'react-native';
-import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useAppDispatch, useTypedSelector } from 'store';
 import formatBytes from 'utility/formatBytes';
@@ -17,6 +16,7 @@ import { Text } from 'components/Typography';
 import FastImage from 'react-native-fast-image';
 import { useGetImage } from 'utility/JellyfinApi';
 import { ShadowWrapper } from 'components/Shadow';
+import { SafeFlatList } from 'components/SafeNavigatorView';
 
 const DownloadedTrack = styled.View`
     flex: 1 0 auto;
@@ -151,10 +151,10 @@ function Downloads() {
     return (
         <SafeAreaView style={{ flex: 1 }}>
             {ListHeaderComponent}
-            <FlatList
+            <SafeFlatList
                 data={ids}
                 style={{ flex: 1, paddingTop: 12 }}
-                contentContainerStyle={{ flexGrow: 1, paddingBottom: 24 }}
+                contentContainerStyle={{ flexGrow: 1 }}
                 renderItem={renderItem}
             />
         </SafeAreaView>

src/screens/Music/stacks/Albums.tsx

@@ -17,7 +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';
+import { SafeSectionList } from 'components/SafeNavigatorView';
 
 const HeadingHeight = 50;
 
@@ -80,8 +80,6 @@ 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);
@@ -173,9 +171,7 @@ const Albums: React.FC = () => {
     return (
         <>
             <AlphabetScroller onSelect={selectLetter} />
-            <SectionList
+            <SafeSectionList
-                contentInset={{ top: navigatorPadding.paddingTop }}
-                contentContainerStyle={navigatorPadding}
                 sections={sections} 
                 refreshing={isLoading}
                 onRefresh={retrieveData}

src/screens/Music/stacks/Playlists.tsx

@@ -11,7 +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';
+import { SafeFlatList, useNavigationOffsets } from 'components/SafeNavigatorView';
 
 interface GeneratedAlbumItemProps {
     id: ReactText;
@@ -35,7 +35,7 @@ const GeneratedPlaylistItem = React.memo(function GeneratedPlaylistItem(props: G
 });
 
 const Playlists: React.FC = () => {
-    const navigatorPadding = useNavigatorPadding();
+    const offsets = useNavigationOffsets();
 
     // Retrieve data from store
     const { entities, ids } = useTypedSelector((state) => state.music.playlists);
@@ -96,11 +96,10 @@ const Playlists: React.FC = () => {
     });
     
     return (
-        <FlatList
+        <SafeFlatList
             refreshControl={
-                <RefreshControl refreshing={isLoading} onRefresh={retrieveData} progressViewOffset={navigatorPadding.paddingTop} />
+                <RefreshControl refreshing={isLoading} onRefresh={retrieveData} progressViewOffset={offsets.top} />
             }
-            contentContainerStyle={navigatorPadding}
             data={ids} 
             getItemLayout={getItemLayout}
             ref={listRef}

src/screens/Music/stacks/RecentAlbums.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
-import { Text, SafeAreaView, FlatList, StyleSheet } from 'react-native';
+import { Text, SafeAreaView, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useAppDispatch, useTypedSelector } from 'store';
 import { fetchRecentAlbums } from 'store/music/actions';
@@ -17,6 +17,7 @@ import Divider from 'components/Divider';
 import styled from 'styled-components/native';
 import { ShadowWrapper } from 'components/Shadow';
 import { NavigationProp } from 'screens/types';
+import { SafeFlatList } from 'components/SafeNavigatorView';
 
 const styles = StyleSheet.create({
     columnWrapper: {
@@ -71,7 +72,7 @@ const RecentAlbums: React.FC = () => {
     
     return (
         <SafeAreaView>
-            <FlatList
+            <SafeFlatList
                 data={recentAlbums as string[]} 
                 refreshing={isLoading}
                 onRefresh={retrieveData}

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback, useMemo } from 'react';
-import { ScrollView, RefreshControl, StyleSheet, View } from 'react-native';
+import { Platform, RefreshControl, StyleSheet, View } from 'react-native';
 import { useGetImage } from 'utility/JellyfinApi';
 import styled, { css } from 'styled-components/native';
 import { useNavigation } from '@react-navigation/native';
@@ -25,8 +25,8 @@ import { Text } from 'components/Typography';
 
 import CoverImage from 'components/CoverImage';
 import ticksToDuration from 'utility/ticksToDuration';
-import { useNavigatorPadding } from 'utility/SafeNavigatorView';
 import { t } from '@localisation';
+import { SafeScrollView, useNavigationOffsets } from 'components/SafeNavigatorView';
 
 const styles = StyleSheet.create({
     index: {
@@ -44,7 +44,7 @@ const AlbumImageContainer = styled.View`
     align-items: center;
 `;
 
-const TrackContainer = styled.View<{ isPlaying: boolean }>`
+const TrackContainer = styled.View<{ isPlaying: boolean, small?: boolean }>`
     padding: 12px 4px;
     flex-direction: row;
     border-radius: 6px;
@@ -54,6 +54,10 @@ const TrackContainer = styled.View<{ isPlaying: boolean }>`
         margin: 0 -12px;
         padding: 12px 16px;
     `}
+
+    ${props => props.small && css`
+        padding: ${Platform.select({ ios: '8px 4px', android: '4px'})};
+    `}
 `;
 
 export interface TrackListViewProps extends PropsWithChildren<{}> {
@@ -85,7 +89,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     children
 }) => {
     const defaultStyles = useDefaultStyles();
-    const navigatorPadding = useNavigatorPadding();
+    const offsets = useNavigationOffsets();
 
     // Retrieve state
     const tracks = useTypedSelector((state) => state.music.tracks.entities);
@@ -123,107 +127,109 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     }, [dispatch, downloadedTracks]);
 
     return (
-        <ScrollView
+        <SafeScrollView
             style={defaultStyles.view}
-            contentContainerStyle={[{ padding: 24, paddingTop: 32 + navigatorPadding.paddingTop, paddingBottom: 64 + navigatorPadding.paddingBottom } ]}
             refreshControl={
-                <RefreshControl refreshing={isLoading} onRefresh={refresh} progressViewOffset={navigatorPadding.paddingTop} />
+                <RefreshControl refreshing={isLoading} onRefresh={refresh} progressViewOffset={offsets.top} />
             }
         >
-            <AlbumImageContainer>
+            <View style={{ padding: 24, paddingTop: 32, paddingBottom: 64 }}>
-                <CoverImage src={getImage(entityId)} />
+                <AlbumImageContainer>
-            </AlbumImageContainer>
+                    <CoverImage src={getImage(entityId)} />
-            <Header>{title}</Header>
+                </AlbumImageContainer>
-            <SubHeader>{artist}</SubHeader>
+                <Header>{title}</Header>
-            <WrappableButtonRow>
+                <SubHeader>{artist}</SubHeader>
-                <WrappableButton title={playButtonText} icon={Play} onPress={playEntity} testID="play-album" />
+                <WrappableButtonRow>
-                <WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} testID="shuffle-album" />
+                    <WrappableButton title={playButtonText} icon={Play} onPress={playEntity} testID="play-album" />
-            </WrappableButtonRow>
+                    <WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} testID="shuffle-album" />
-            <View style={{ marginTop: 8 }}>
+                </WrappableButtonRow>
-                {trackIds.map((trackId, i) =>
+                <View style={{ marginTop: 8 }}>
-                    <TouchableHandler
+                    {trackIds.map((trackId, i) =>
-                        key={trackId}
+                        <TouchableHandler
-                        id={i}
+                            key={trackId}
-                        onPress={selectTrack}
+                            id={i}
-                        onLongPress={longPressTrack}
+                            onPress={selectTrack}
-                        testID={`play-track-${trackId}`}
+                            onLongPress={longPressTrack}
-                    >
+                            testID={`play-track-${trackId}`}
-                        <TrackContainer
-                            isPlaying={currentTrack?.backendId === trackId || false}
-                            style={[defaultStyles.border, currentTrack?.backendId === trackId || false ? defaultStyles.activeBackground : null ]}
                         >
-                            <Text
+                            <TrackContainer
-                                style={[
+                                isPlaying={currentTrack?.backendId === trackId || false}
-                                    styles.index,
+                                style={[defaultStyles.border, currentTrack?.backendId === trackId || false ? defaultStyles.activeBackground : null ]}
-                                    { opacity: 0.25 },
+                                small={itemDisplayStyle === 'playlist'}
-                                    currentTrack?.backendId === trackId && styles.activeText
-                                ]}
-                                numberOfLines={1}
                             >
-                                {listNumberingStyle === 'index' 
-                                    ? i + 1
-                                    : tracks[trackId]?.IndexNumber}
-                            </Text>
-                            <View style={{ flexShrink: 1 }}>
                                 <Text
-                                    style={{ 
+                                    style={[
-                                        ...currentTrack?.backendId === trackId && styles.activeText,
+                                        styles.index,
-                                        flexShrink: 1,
+                                        { opacity: 0.25 },
-                                        marginRight: 4,
+                                        currentTrack?.backendId === trackId && styles.activeText
-                                    }}
+                                    ]}
                                     numberOfLines={1}
                                 >
-                                    {tracks[trackId]?.Name}
+                                    {listNumberingStyle === 'index' 
+                                        ? i + 1
+                                        : tracks[trackId]?.IndexNumber}
                                 </Text>
-                                {itemDisplayStyle === 'playlist' && (
+                                <View style={{ flexShrink: 1 }}>
                                     <Text
                                         style={{ 
                                             ...currentTrack?.backendId === trackId && styles.activeText,
                                             flexShrink: 1,
                                             marginRight: 4,
-                                            opacity:currentTrack?.backendId === trackId ? 0.5 : 0.25,
                                         }}
                                         numberOfLines={1}
                                     >
-                                        {tracks[trackId]?.Artists.join(', ')}
+                                        {tracks[trackId]?.Name}
                                     </Text>
-                                )}
+                                    {itemDisplayStyle === 'playlist' && (
-                            </View>
+                                        <Text
-                            <View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
+                                            style={{ 
-                                <Text
+                                                ...currentTrack?.backendId === trackId && styles.activeText,
-                                    style={[
+                                                flexShrink: 1,
-                                        { marginRight: 12, opacity: 0.25 },
+                                                marginRight: 4,
-                                        currentTrack?.backendId === trackId && styles.activeText
+                                                opacity:currentTrack?.backendId === trackId ? 0.5 : 0.25,
-                                    ]}
+                                            }}
-                                    numberOfLines={1}
+                                            numberOfLines={1}
-                                >
+                                        >
-                                    {ticksToDuration(tracks[trackId]?.RunTimeTicks || 0)}
+                                            {tracks[trackId]?.Artists.join(', ')}
-                                </Text>
+                                        </Text>
-                                <DownloadIcon trackId={trackId} fill={currentTrack?.backendId === trackId ? `${THEME_COLOR}44` : undefined} />
+                                    )}
-                            </View>
+                                </View>
-                        </TrackContainer>
+                                <View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
-                    </TouchableHandler>
+                                    <Text
-                )}
+                                        style={[
-                <Text style={{ paddingTop: 24, paddingBottom: 12, textAlign: 'center', opacity: 0.5 }}>{t('total-duration')}{': '}{ticksToDuration(totalDuration)}</Text>
+                                            { marginRight: 12, opacity: 0.25 },
-                <WrappableButtonRow style={{ marginTop: 24 }}>
+                                            currentTrack?.backendId === trackId && styles.activeText
-                    <WrappableButton
+                                        ]}
-                        icon={CloudDownArrow}
+                                        numberOfLines={1}
-                        title={downloadButtonText}
+                                    >
-                        onPress={downloadAllTracks}
+                                        {ticksToDuration(tracks[trackId]?.RunTimeTicks || 0)}
-                        disabled={downloadedTracks.length === trackIds.length}
+                                    </Text>
-                        testID="download-album"
+                                    <DownloadIcon trackId={trackId} fill={currentTrack?.backendId === trackId ? `${THEME_COLOR}44` : undefined} />
-                    />
+                                </View>
-                    <WrappableButton
+                            </TrackContainer>
-                        icon={Trash}
+                        </TouchableHandler>
-                        title={deleteButtonText}
+                    )}
-                        onPress={deleteAllTracks}
+                    <Text style={{ paddingTop: 24, paddingBottom: 12, textAlign: 'center', opacity: 0.5 }}>{t('total-duration')}{': '}{ticksToDuration(totalDuration)}</Text>
-                        disabled={downloadedTracks.length === 0}
+                    <WrappableButtonRow style={{ marginTop: 24 }}>
-                        testID="delete-album"
+                        <WrappableButton
-                    />
+                            icon={CloudDownArrow}
-                </WrappableButtonRow>
+                            title={downloadButtonText}
+                            onPress={downloadAllTracks}
+                            disabled={downloadedTracks.length === trackIds.length}
+                            testID="download-album"
+                        />
+                        <WrappableButton
+                            icon={Trash}
+                            title={deleteButtonText}
+                            onPress={deleteAllTracks}
+                            disabled={downloadedTracks.length === 0}
+                            testID="delete-album"
+                        />
+                    </WrappableButtonRow>
+                </View>
+                {children}
             </View>
-            {children}
+        </SafeScrollView>
-        </ScrollView>
     );
 };
 

src/screens/Search/stacks/Search/index.tsx

@@ -20,8 +20,8 @@ import ChevronRight from 'assets/icons/chevron-right.svg';
 import SearchIcon from 'assets/icons/magnifying-glass.svg';
 import { ShadowWrapper } from 'components/Shadow';
 import { useKeyboardHeight } from 'utility/useKeyboardHeight';
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import { NavigationProp } from 'screens/types';
+import { useNavigationOffsets } from 'components/SafeNavigatorView';
 // import MicrophoneIcon from 'assets/icons/microphone.svg';
 // import AlbumIcon from 'assets/icons/collection.svg';
 // import TrackIcon from 'assets/icons/note.svg';
@@ -30,6 +30,8 @@ import { NavigationProp } from 'screens/types';
 // import LocalIcon from 'assets/icons/internal-drive.svg';
 // import SelectableFilter from './components/SelectableFilter';
 
+const SEARCH_INPUT_HEIGHT = 62;
+
 const Container = styled(View)`
     padding: 4px 24px 0 24px;
     margin-bottom: 0px;
@@ -96,7 +98,7 @@ type CombinedResults = (AudioResult | AlbumResult)[];
 
 export default function Search() {
     const defaultStyles = useDefaultStyles();
-    const tabBarHeight = useBottomTabBarHeight();
+    const offsets = useNavigationOffsets({ includeOverlay: false });
 
     // Prepare state for fuse and albums
     const [fuseIsReady, setFuseReady] = useState(false);
@@ -211,9 +213,9 @@ export default function Search() {
         navigation.navigate('Album', { id, album: albums[id] as Album });
     }, [navigation, albums]);
 
-    const HeaderComponent = React.useMemo(() => (
+    const SearchInput = React.useMemo(() => (
         <Animated.View style={[
-            { position: 'absolute', bottom: tabBarHeight, right: 0, left: 0 },
+            { position: 'absolute', bottom: offsets.bottom, right: 0, left: 0 },
             { transform: [{ translateY: keyboardHeight }] },
         ]}>
             <ColoredBlurView>
@@ -266,7 +268,7 @@ export default function Search() {
                 </ScrollView> */}
             </ColoredBlurView>
         </Animated.View>
-    ), [searchTerm, setSearchTerm, defaultStyles, isLoading, keyboardHeight, tabBarHeight]);
+    ), [searchTerm, setSearchTerm, defaultStyles, isLoading, keyboardHeight, offsets]);
 
     // GUARD: We cannot search for stuff unless Fuse is loaded with results.
     // Therefore we delay rendering to when we are certain it's there.
@@ -277,7 +279,9 @@ export default function Search() {
     return (
         <SafeAreaView style={{ flex: 1 }}>
             <FlatList
-                style={{ flex: 2 }}
+                style={{ flex: 2, }}
+                contentContainerStyle={{ paddingTop: offsets.top, paddingBottom: offsets.bottom + SEARCH_INPUT_HEIGHT }}
+                scrollIndicatorInsets={{ top: offsets.top  / 2, bottom: offsets.bottom / 2 + 10 + SEARCH_INPUT_HEIGHT }}
                 data={[...jellyfinResults, ...fuseResults]}
                 renderItem={({ item: { id, type, album: trackAlbum, name: trackName } }: { item: AlbumResult | AudioResult }) => {
                     const album = albums[trackAlbum || id];
@@ -325,7 +329,7 @@ export default function Search() {
                     <Text style={{ textAlign: 'center', opacity: 0.5, fontSize: 18 }}>{t('no-results')}</Text> 
                 </FullSizeContainer>
             ) : null}
-            {HeaderComponent}
+            {SearchInput}
         </SafeAreaView>
     );
 }

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 { SafeScrollView } from 'components/SafeNavigatorView';
-import { useHeaderHeight } from '@react-navigation/elements';
 
 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>
     );
 }
 

src/utility/SafeNavigatorView.tsx

@@ -1,24 +0,0 @@
-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 !== undefined ? 68 : 0
-    };
-}
-
-function SafeNavigatorView({ style, ...props }: ViewProps) {
-    const headerHeight = useHeaderHeight();
-
-    return (
-        <View {...props} style={[{ paddingTop: headerHeight }, style]} />
-    );
-}
-
-export default SafeNavigatorView;