javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: finish offsets on new navigation views

Browse Source
This commit is contained in:
Lei Nelissen
2023-04-23 23:31:35 +02:00
parent 81b9ba683a
commit c8283fc580
12 changed files with 227 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/SafeNavigatorView.tsx Normal file
View File

@@ -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,
};
}

6
src/screens/Downloads/index.tsx
View File

@@ -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>

8
src/screens/Music/stacks/Albums.tsx
View File

@@ -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
contentInset={{ top: navigatorPadding.paddingTop }}
contentContainerStyle={navigatorPadding}
<SafeSectionList
sections={sections}
refreshing={isLoading}
onRefresh={retrieveData}

9
src/screens/Music/stacks/Playlists.tsx
View File

@@ -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}

5
src/screens/Music/stacks/RecentAlbums.tsx
View File

@@ -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}

176
src/screens/Music/stacks/components/TrackListView.tsx
View File

@@ -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>
<CoverImage src={getImage(entityId)} />
</AlbumImageContainer>
<Header>{title}</Header>
<SubHeader>{artist}</SubHeader>
<WrappableButtonRow>
<WrappableButton title={playButtonText} icon={Play} onPress={playEntity} testID="play-album" />
<WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} testID="shuffle-album" />
</WrappableButtonRow>
<View style={{ marginTop: 8 }}>
{trackIds.map((trackId, i) =>
<TouchableHandler
key={trackId}
id={i}
onPress={selectTrack}
onLongPress={longPressTrack}
testID={`play-track-${trackId}`}
>
<TrackContainer
isPlaying={currentTrack?.backendId === trackId || false}
style={[defaultStyles.border, currentTrack?.backendId === trackId || false ? defaultStyles.activeBackground : null ]}
<View style={{ padding: 24, paddingTop: 32, paddingBottom: 64 }}>
<AlbumImageContainer>
<CoverImage src={getImage(entityId)} />
</AlbumImageContainer>
<Header>{title}</Header>
<SubHeader>{artist}</SubHeader>
<WrappableButtonRow>
<WrappableButton title={playButtonText} icon={Play} onPress={playEntity} testID="play-album" />
<WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} testID="shuffle-album" />
</WrappableButtonRow>
<View style={{ marginTop: 8 }}>
{trackIds.map((trackId, i) =>
<TouchableHandler
key={trackId}
id={i}
onPress={selectTrack}
onLongPress={longPressTrack}
testID={`play-track-${trackId}`}
>
<Text
style={[
styles.index,
{ opacity: 0.25 },
currentTrack?.backendId === trackId && styles.activeText
]}
numberOfLines={1}
<TrackContainer
isPlaying={currentTrack?.backendId === trackId || false}
style={[defaultStyles.border, currentTrack?.backendId === trackId || false ? defaultStyles.activeBackground : null ]}
small={itemDisplayStyle === 'playlist'}
>
{listNumberingStyle === 'index'
? i + 1
: tracks[trackId]?.IndexNumber}
</Text>
<View style={{ flexShrink: 1 }}>
<Text
style={{
...currentTrack?.backendId === trackId && styles.activeText,
flexShrink: 1,
marginRight: 4,
}}
style={[
styles.index,
{ opacity: 0.25 },
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>
)}
</View>
<View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
<Text
style={[
{ marginRight: 12, opacity: 0.25 },
currentTrack?.backendId === trackId && styles.activeText
]}
numberOfLines={1}
>
{ticksToDuration(tracks[trackId]?.RunTimeTicks || 0)}
</Text>
<DownloadIcon trackId={trackId} fill={currentTrack?.backendId === trackId ? `${THEME_COLOR}44` : undefined} />
</View>
</TrackContainer>
</TouchableHandler>
)}
<Text style={{ paddingTop: 24, paddingBottom: 12, textAlign: 'center', opacity: 0.5 }}>{t('total-duration')}{': '}{ticksToDuration(totalDuration)}</Text>
<WrappableButtonRow style={{ marginTop: 24 }}>
<WrappableButton
icon={CloudDownArrow}
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>
{itemDisplayStyle === 'playlist' && (
<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(', ')}
</Text>
)}
</View>
<View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
<Text
style={[
{ marginRight: 12, opacity: 0.25 },
currentTrack?.backendId === trackId && styles.activeText
]}
numberOfLines={1}
>
{ticksToDuration(tracks[trackId]?.RunTimeTicks || 0)}
</Text>
<DownloadIcon trackId={trackId} fill={currentTrack?.backendId === trackId ? `${THEME_COLOR}44` : undefined} />
</View>
</TrackContainer>
</TouchableHandler>
)}
<Text style={{ paddingTop: 24, paddingBottom: 12, textAlign: 'center', opacity: 0.5 }}>{t('total-duration')}{': '}{ticksToDuration(totalDuration)}</Text>
<WrappableButtonRow style={{ marginTop: 24 }}>
<WrappableButton
icon={CloudDownArrow}
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}
</ScrollView>
</SafeScrollView>
);
};

18
src/screens/Search/stacks/Search/index.tsx
View File

@@ -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>
);
}

8
src/screens/Settings/components/Cache.tsx
View File

@@ -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>

8
src/screens/Settings/components/Library.tsx
View File

@@ -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} />

8
src/screens/Settings/components/Sentry.tsx
View File

@@ -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>
);
}

9
src/screens/Settings/index.tsx
View File

@@ -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>
);
}

24
src/utility/SafeNavigatorView.tsx
View File

@@ -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;