From d6bc3ee6cd03c6aa24498a407839336b1d7fb39d Mon Sep 17 00:00:00 2001 From: cd-z Date: Sun, 9 Feb 2025 01:46:57 +0100 Subject: [PATCH] added SafeAreaViews --- src/components/Actionbar/Actionbar.tsx | 4 +- src/components/Common.tsx | 24 +- src/components/Container/Container.tsx | 28 -- src/components/SafeAreaView/SafeAreaView.tsx | 33 ++ src/components/SearchbarV2/SearchbarV2.tsx | 8 +- src/components/index.ts | 2 +- .../BrowseSourceScreen/BrowseSourceScreen.tsx | 16 +- src/screens/Categories/CategoriesScreen.tsx | 10 +- src/screens/StatsScreen/StatsScreen.tsx | 11 +- src/screens/browse/BrowseScreen.tsx | 35 +- .../browse/discover/AniListTopNovels.tsx | 9 +- src/screens/browse/discover/MalTopNovels.tsx | 9 +- .../browse/loadingAnimation/MalLoading.tsx | 1 - .../browse/migration/MigrationNovels.tsx | 7 +- src/screens/history/HistoryScreen.tsx | 11 +- src/screens/library/LibraryScreen.tsx | 17 +- .../LibraryBottomSheet/LibraryBottomSheet.tsx | 12 +- src/screens/more/About.tsx | 7 +- src/screens/more/DownloadsScreen.tsx | 8 +- src/screens/more/MoreScreen.tsx | 304 +++++++++--------- src/screens/more/TaskQueueScreen.tsx | 14 +- src/screens/more/components/MoreHeader.tsx | 2 +- src/screens/novel/NovelScreen.tsx | 27 +- src/screens/novel/components/NovelAppbar.tsx | 159 +++++---- .../novel/components/NovelBottomSheet.tsx | 258 ++++++++------- src/screens/reader/ReaderScreen.tsx | 7 +- .../ReaderBottomSheet/ReaderBottomSheet.tsx | 7 +- .../settings/SettingsAdvancedScreen.tsx | 6 +- .../settings/SettingsAppearanceScreen.tsx | 6 +- .../settings/SettingsBackupScreen/index.tsx | 115 ++++--- .../SettingsGeneralScreen.tsx | 6 +- .../Settings/GeneralSettings.tsx | 6 +- .../SettingsReaderScreen.tsx | 6 +- .../SettingsRepositoryScreen.tsx | 10 +- src/screens/settings/SettingsScreen.tsx | 12 +- .../settings/SettingsTrackerScreen.tsx | 238 +++++++------- src/screens/updates/UpdatesScreen.tsx | 5 +- 37 files changed, 745 insertions(+), 695 deletions(-) delete mode 100644 src/components/Container/Container.tsx create mode 100644 src/components/SafeAreaView/SafeAreaView.tsx diff --git a/src/components/Actionbar/Actionbar.tsx b/src/components/Actionbar/Actionbar.tsx index 2490490e8..6e26a28f4 100644 --- a/src/components/Actionbar/Actionbar.tsx +++ b/src/components/Actionbar/Actionbar.tsx @@ -5,7 +5,7 @@ import { Pressable, StyleProp, StyleSheet, - ViewProps, + ViewStyle, } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons'; @@ -20,7 +20,7 @@ type Action = { interface ActionbarProps { active: boolean; actions: Action[]; - viewStyle?: StyleProp; + viewStyle?: StyleProp; } export const Actionbar: React.FC = ({ diff --git a/src/components/Common.tsx b/src/components/Common.tsx index 5391afecb..c9b71c67c 100644 --- a/src/components/Common.tsx +++ b/src/components/Common.tsx @@ -1,27 +1,5 @@ -import { ThemeColors } from '@theme/types'; import React from 'react'; import { View, StyleSheet } from 'react-native'; -import { useSafeAreaInsets } from 'react-native-safe-area-context'; - -const ScreenContainer = ({ - children, -}: { - children?: React.ReactNode; - theme: ThemeColors; -}) => { - const { bottom } = useSafeAreaInsets(); - - return ( - - {children} - - ); -}; const Row = ({ children, @@ -31,7 +9,7 @@ const Row = ({ style?: any; }) => {children}; -export { ScreenContainer, Row }; +export { Row }; const styles = StyleSheet.create({ row: { diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx deleted file mode 100644 index 3a36af6fa..000000000 --- a/src/components/Container/Container.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { ReactNode } from 'react'; -import { StyleSheet, View } from 'react-native'; -import { useSafeAreaInsets } from 'react-native-safe-area-context'; - -interface Props { - children: ReactNode; -} - -const Container: React.FC = ({ children }) => { - const { bottom } = useSafeAreaInsets(); - - const containerStyle = [ - styles.container, - { - paddingBottom: bottom, - }, - ]; - - return {children}; -}; - -export default Container; - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, -}); diff --git a/src/components/SafeAreaView/SafeAreaView.tsx b/src/components/SafeAreaView/SafeAreaView.tsx new file mode 100644 index 000000000..65cab28cf --- /dev/null +++ b/src/components/SafeAreaView/SafeAreaView.tsx @@ -0,0 +1,33 @@ +import React, { memo } from 'react'; +import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; + +interface SafeAreaViewProps { + children: React.ReactNode; + excludeTop?: boolean; + style?: StyleProp; +} + +const SafeAreaView: React.FC = ({ + children, + style, + excludeTop, +}) => { + const { bottom, top, right, left } = useSafeAreaInsets(); + const styles = StyleSheet.create({ + container: { + flex: 1, + }, + padding: { + paddingBottom: bottom, + paddingTop: excludeTop ? 0 : top, + paddingRight: right, + paddingLeft: left, + }, + }); + return ( + {children} + ); +}; + +export default memo(SafeAreaView); diff --git a/src/components/SearchbarV2/SearchbarV2.tsx b/src/components/SearchbarV2/SearchbarV2.tsx index 7bbbdf634..95cbb88fa 100644 --- a/src/components/SearchbarV2/SearchbarV2.tsx +++ b/src/components/SearchbarV2/SearchbarV2.tsx @@ -1,6 +1,5 @@ import React, { memo, useRef, useState } from 'react'; import { Pressable, StyleSheet, View, TextInput } from 'react-native'; -import { useSafeAreaInsets } from 'react-native-safe-area-context'; import IconButtonV2 from '../IconButtonV2/IconButtonV2'; import { ThemeColors } from '../../theme/types'; @@ -49,10 +48,9 @@ const Searchbar: React.FC = ({ const focusSearchbar = () => searchbarRef.current.focus(); const [extraMenu, showExtraMenu] = useState(false); - const { top, right, left } = useSafeAreaInsets(); - const marginTop = top + 8; - const marginRight = right + 16; - const marginLeft = left + 16; + const marginTop = 8; + const marginRight = 16; + const marginLeft = 16; return ( { [pluginId], ); - const { bottom } = useSafeAreaInsets(); + const { bottom, right } = useSafeAreaInsets(); const filterSheetRef = useRef(null); return ( - + { icon={'filter-variant'} style={[ styles.filterFab, - { backgroundColor: theme.primary, marginBottom: bottom }, + { + backgroundColor: theme.primary, + marginBottom: bottom + 16, + marginRight: right + 16, + }, ]} label={getString('common.filter')} uppercase={false} @@ -192,7 +196,7 @@ const BrowseSourceScreen = ({ route, navigation }: BrowseSourceScreenProps) => { /> ) : null} - + ); }; @@ -203,6 +207,6 @@ const styles = StyleSheet.create({ position: 'absolute', margin: 16, right: 0, - bottom: 16, + bottom: 0, }, }); diff --git a/src/screens/Categories/CategoriesScreen.tsx b/src/screens/Categories/CategoriesScreen.tsx index fe9bef475..abf925632 100644 --- a/src/screens/Categories/CategoriesScreen.tsx +++ b/src/screens/Categories/CategoriesScreen.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import { FAB } from 'react-native-paper'; import { useNavigation } from '@react-navigation/native'; -import { Appbar, EmptyView } from '@components/index'; +import { Appbar, EmptyView, SafeAreaView } from '@components/index'; import AddCategoryModal from './components/AddCategoryModal'; import { @@ -26,7 +26,7 @@ const CategoriesScreen = () => { const [isLoading, setIsLoading] = useState(true); const [categories, setCategories] = useState(); - const { bottom } = useSafeAreaInsets(); + const { bottom, right } = useSafeAreaInsets(); const { value: categoryModalVisible, @@ -77,7 +77,7 @@ const CategoriesScreen = () => { }; return ( - <> + { /> )} { closeModal={closeCategoryModal} onSuccess={getCategories} /> - + ); }; diff --git a/src/screens/StatsScreen/StatsScreen.tsx b/src/screens/StatsScreen/StatsScreen.tsx index 3def77a33..7ee109624 100644 --- a/src/screens/StatsScreen/StatsScreen.tsx +++ b/src/screens/StatsScreen/StatsScreen.tsx @@ -5,7 +5,12 @@ import { useNavigation } from '@react-navigation/native'; import { useTheme } from '@hooks/persisted'; import { getString } from '@strings/translations'; -import { Appbar, ErrorScreenV2, LoadingScreenV2 } from '@components'; +import { + Appbar, + ErrorScreenV2, + LoadingScreenV2, + SafeAreaView, +} from '@components'; import { LibraryStats } from '@database/types'; import { @@ -78,7 +83,7 @@ const StatsScreen = () => { } return ( - <> + {Header} { ))} - + ); }; diff --git a/src/screens/browse/BrowseScreen.tsx b/src/screens/browse/BrowseScreen.tsx index fcd3aa3e6..75ff3bcbe 100644 --- a/src/screens/browse/BrowseScreen.tsx +++ b/src/screens/browse/BrowseScreen.tsx @@ -6,7 +6,7 @@ import { useSearch } from '@hooks'; import { usePlugins, useTheme } from '@hooks/persisted'; import { getString } from '@strings/translations'; -import { EmptyView, SearchbarV2 } from '@components'; +import { EmptyView, SafeAreaView, SearchbarV2 } from '@components'; import { BrowseScreenProps } from '@navigators/types'; import { AvailableTab, InstalledTab } from './components/BrowseTabs'; @@ -21,20 +21,21 @@ const BrowseScreen = ({ navigation }: BrowseScreenProps) => { const { languagesFilter } = usePlugins(); const searchbarActions = useMemo( - () => [ - { - iconName: 'book-search', - onPress: () => navigation.navigate('GlobalSearchScreen', {}), - }, - { - iconName: 'swap-vertical-variant', - onPress: () => navigation.navigate('Migration'), - }, - { - iconName: 'cog-outline', - onPress: () => navigation.navigate('BrowseSettings'), - }, - ] as const, + () => + [ + { + iconName: 'book-search', + onPress: () => navigation.navigate('GlobalSearchScreen', {}), + }, + { + iconName: 'swap-vertical-variant', + onPress: () => navigation.navigate('Migration'), + }, + { + iconName: 'cog-outline', + onPress: () => navigation.navigate('BrowseSettings'), + }, + ] as const, [navigation], ); @@ -52,7 +53,7 @@ const BrowseScreen = ({ navigation }: BrowseScreenProps) => { const [index, setIndex] = React.useState(0); return ( - <> + { )} swipeEnabled={false} /> - + ); }; diff --git a/src/screens/browse/discover/AniListTopNovels.tsx b/src/screens/browse/discover/AniListTopNovels.tsx index 7f403e373..2ee9faaa3 100644 --- a/src/screens/browse/discover/AniListTopNovels.tsx +++ b/src/screens/browse/discover/AniListTopNovels.tsx @@ -10,7 +10,7 @@ import { import * as WebBrowser from 'expo-web-browser'; import { ErrorView } from '@components/ErrorView/ErrorView'; -import { SearchbarV2 } from '@components'; +import { SafeAreaView, SearchbarV2 } from '@components'; import { showToast } from '@utils/showToast'; import TrackerNovelCard from './TrackerNovelCard'; @@ -178,7 +178,7 @@ const BrowseALScreen = ({ navigation }: BrowseALScreenProps) => { ); return ( - + { } /> )} - + ); }; export default BrowseALScreen; const styles = StyleSheet.create({ - container: { - flex: 1, - }, contentContainer: { flex: 1, }, diff --git a/src/screens/browse/discover/MalTopNovels.tsx b/src/screens/browse/discover/MalTopNovels.tsx index d3e35087c..e78c90ffe 100644 --- a/src/screens/browse/discover/MalTopNovels.tsx +++ b/src/screens/browse/discover/MalTopNovels.tsx @@ -11,7 +11,7 @@ import { import * as WebBrowser from 'expo-web-browser'; import { ErrorView } from '@components/ErrorView/ErrorView'; -import { SearchbarV2 } from '@components'; +import { SafeAreaView, SearchbarV2 } from '@components'; import { showToast } from '@utils/showToast'; import { scrapeSearchResults, scrapeTopNovels } from './MyAnimeListScraper'; @@ -119,7 +119,7 @@ const BrowseMalScreen = ({ navigation }: BrowseMalScreenProps) => { ); return ( - + { } /> )} - + ); }; export default BrowseMalScreen; const styles = StyleSheet.create({ - container: { - flex: 1, - }, contentContainer: { flex: 1, }, diff --git a/src/screens/browse/loadingAnimation/MalLoading.tsx b/src/screens/browse/loadingAnimation/MalLoading.tsx index 6cca77b30..d047be4b5 100644 --- a/src/screens/browse/loadingAnimation/MalLoading.tsx +++ b/src/screens/browse/loadingAnimation/MalLoading.tsx @@ -74,7 +74,6 @@ const createStyleSheet = (theme: ThemeColors) => { margin: 10, borderRadius: 8, backgroundColor: theme.overlay3, - width: Dimensions.get('window').width - 20, overflow: 'hidden', flexDirection: 'row', boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', diff --git a/src/screens/browse/migration/MigrationNovels.tsx b/src/screens/browse/migration/MigrationNovels.tsx index ade8fbb4c..f0351a0a3 100644 --- a/src/screens/browse/migration/MigrationNovels.tsx +++ b/src/screens/browse/migration/MigrationNovels.tsx @@ -6,10 +6,9 @@ import { usePlugins, useTheme } from '@hooks/persisted'; import EmptyView from '@components/EmptyView'; import MigrationNovelList from './MigrationNovelList'; -import { ScreenContainer } from '@components/Common'; import { getPlugin } from '@plugins/pluginManager'; import { useLibraryNovels } from '@screens/library/hooks/useLibrary'; -import { Appbar } from '@components'; +import { Appbar, SafeAreaView } from '@components'; import GlobalSearchSkeletonLoading from '../loadingAnimation/GlobalSearchSkeletonLoading'; import { MigrateNovelScreenProps } from '@navigators/types'; import { NovelItem } from '@plugins/types'; @@ -123,7 +122,7 @@ const MigrationNovels = ({ navigation, route }: MigrateNovelScreenProps) => { ); return ( - + { /> } /> - + ); }; diff --git a/src/screens/history/HistoryScreen.tsx b/src/screens/history/HistoryScreen.tsx index 16cc1f70f..2bfdf132f 100644 --- a/src/screens/history/HistoryScreen.tsx +++ b/src/screens/history/HistoryScreen.tsx @@ -3,7 +3,12 @@ import { StyleSheet, SectionList, Text } from 'react-native'; import dayjs from 'dayjs'; import { Portal } from 'react-native-paper'; -import { EmptyView, ErrorScreenV2, SearchbarV2 } from '@components'; +import { + EmptyView, + ErrorScreenV2, + SafeAreaView, + SearchbarV2, +} from '@components'; import HistoryCard from './components/HistoryCard/HistoryCard'; import { useSearch, useBoolean } from '@hooks'; @@ -90,7 +95,7 @@ const HistoryScreen = ({ navigation }: HistoryScreenProps) => { ); return ( - <> + { )} - + ); }; diff --git a/src/screens/library/LibraryScreen.tsx b/src/screens/library/LibraryScreen.tsx index 77b825b03..a209c32ab 100644 --- a/src/screens/library/LibraryScreen.tsx +++ b/src/screens/library/LibraryScreen.tsx @@ -9,7 +9,7 @@ import { } from 'react-native-tab-view'; import color from 'color'; -import { SearchbarV2, Button } from '@components/index'; +import { SearchbarV2, Button, SafeAreaView } from '@components/index'; import { LibraryView } from './components/LibraryListView'; import LibraryBottomSheet from './components/LibraryBottomSheet/LibraryBottomSheet'; import { Banner } from './components/Banner'; @@ -48,6 +48,7 @@ type State = NavigationState<{ const LibraryScreen = ({ navigation }: LibraryScreenProps) => { const theme = useTheme(); + const { left: leftInset, right: rightInset } = useSafeAreaInsets(); const { searchText, setSearchText, clearSearchbar } = useSearch(); const { showNumberOfNovels = false, @@ -59,8 +60,6 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => { const { isLoading: isHistoryLoading, history, error } = useHistory(); - const { right: rightInset } = useSafeAreaInsets(); - const { importQueue, importNovel } = useImport(); const layout = useWindowDimensions(); @@ -161,7 +160,7 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => { ) : null; return ( - <> + { textColor={theme.onTertiary} /> ) : null} + ( @@ -307,6 +307,7 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => { onIndexChange={setIndex} initialLayout={{ width: layout.width }} /> + {useLibraryFAB && !isHistoryLoading && history && @@ -343,9 +344,13 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => { refetchLibrary(); }} /> - + 0} actions={[ { @@ -379,7 +384,7 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => { ]} /> - + ); }; diff --git a/src/screens/library/components/LibraryBottomSheet/LibraryBottomSheet.tsx b/src/screens/library/components/LibraryBottomSheet/LibraryBottomSheet.tsx index d339cc71c..041d6c3a6 100644 --- a/src/screens/library/components/LibraryBottomSheet/LibraryBottomSheet.tsx +++ b/src/screens/library/components/LibraryBottomSheet/LibraryBottomSheet.tsx @@ -1,5 +1,12 @@ import React, { RefObject, useMemo, useState } from 'react'; -import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'; +import { + StyleProp, + StyleSheet, + Text, + useWindowDimensions, + View, + ViewStyle, +} from 'react-native'; import { SceneMap, TabBar, TabView } from 'react-native-tab-view'; import color from 'color'; @@ -23,6 +30,7 @@ import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/typ interface LibraryBottomSheetProps { bottomSheetRef: RefObject; + style?: StyleProp; } const FirstRoute = () => { @@ -160,6 +168,7 @@ const ThirdRoute = () => { const LibraryBottomSheet: React.FC = ({ bottomSheetRef, + style, }) => { const theme = useTheme(); @@ -177,6 +186,7 @@ const LibraryBottomSheet: React.FC = ({ .string(), }, styles.tabBar, + style, ]} inactiveColor={theme.onSurfaceVariant} activeColor={theme.primary} diff --git a/src/screens/more/About.tsx b/src/screens/more/About.tsx index 388758e0b..bc5dc7b98 100644 --- a/src/screens/more/About.tsx +++ b/src/screens/more/About.tsx @@ -4,10 +4,9 @@ import { ScrollView } from 'react-native'; import * as Linking from 'expo-linking'; import { getString } from '@strings/translations'; -import { ScreenContainer } from '@components/Common'; import { MoreHeader } from './components/MoreHeader'; import { useTheme } from '@hooks/persisted'; -import { List } from '@components'; +import { List, SafeAreaView } from '@components'; import { AboutScreenProps } from '@navigators/types'; import { GIT_HASH, RELEASE_DATE, BUILD_TYPE } from '@env'; import * as Clipboard from 'expo-clipboard'; @@ -31,7 +30,7 @@ const AboutScreen = ({ navigation }: AboutScreenProps) => { } return ( - + { /> - + ); }; diff --git a/src/screens/more/DownloadsScreen.tsx b/src/screens/more/DownloadsScreen.tsx index 947c97968..91e423e7f 100644 --- a/src/screens/more/DownloadsScreen.tsx +++ b/src/screens/more/DownloadsScreen.tsx @@ -3,9 +3,8 @@ import { FlatList, StyleSheet } from 'react-native'; import { Appbar as MaterialAppbar } from 'react-native-paper'; -import { ScreenContainer } from '@components/Common'; import EmptyView from '@components/EmptyView'; -import { Appbar, List } from '@components'; +import { Appbar, List, SafeAreaView } from '@components'; import { deleteChapter, deleteDownloads, @@ -84,7 +83,7 @@ const Downloads = ({ navigation }: DownloadsScreenProps) => { }, []); return ( - + { /> ) : null} + {loading ? ( @@ -138,7 +138,7 @@ const Downloads = ({ navigation }: DownloadsScreenProps) => { }} theme={theme} /> - + ); }; diff --git a/src/screens/more/MoreScreen.tsx b/src/screens/more/MoreScreen.tsx index 5abb82c27..4918a841b 100644 --- a/src/screens/more/MoreScreen.tsx +++ b/src/screens/more/MoreScreen.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import { StyleSheet, View, Pressable, Text, ScrollView } from 'react-native'; import { getString } from '@strings/translations'; -import { List } from '@components'; +import { List, SafeAreaView } from '@components'; import { MoreHeader } from './components/MoreHeader'; import { useLibrarySettings, useTheme } from '@hooks/persisted'; @@ -46,158 +46,166 @@ const MoreScreen = ({ navigation }: MoreStackScreenProps) => { ); return ( - - - - - - - - - {getString('moreScreen.downloadOnly')} - - - {getString('moreScreen.downloadOnlyDesc')} - + + + + + + + + + + {getString('moreScreen.downloadOnly')} + + + {getString('moreScreen.downloadOnlyDesc')} + + + + + + + + + + + {getString('moreScreen.incognitoMode')} + + + {getString('moreScreen.incognitoModeDesc')} + + - - + + + 0 + ? taskQueue.length + ' remaining' + : '' + } + icon="progress-download" + onPress={() => + navigation.navigate('MoreStack', { + screen: 'TaskQueue', + }) + } theme={theme} - value={downloadedOnlyMode} - onValueChange={enableDownloadedOnlyMode} - size={24} /> - - - - - - - {getString('moreScreen.incognitoMode')} - - - {getString('moreScreen.incognitoModeDesc')} - - - - + navigation.navigate('MoreStack', { + screen: 'Downloads', + }) + } theme={theme} - value={incognitoMode} - onValueChange={enableIncognitoMode} - size={24} /> - - - 0 - ? taskQueue.length + ' remaining' - : '' - } - icon="progress-download" - onPress={() => - navigation.navigate('MoreStack', { - screen: 'TaskQueue', - }) - } - theme={theme} - /> - - navigation.navigate('MoreStack', { - screen: 'Downloads', - }) - } - theme={theme} - /> - - navigation.navigate('MoreStack', { - screen: 'Categories', - }) - } - theme={theme} - /> - - navigation.navigate('MoreStack', { - screen: 'Statistics', - }) - } - theme={theme} - /> - - - navigation.navigate('MoreStack', { - screen: 'SettingsStack', - params: { - screen: 'Settings', - }, - }) - } - theme={theme} - /> - - navigation.navigate('MoreStack', { - screen: 'About', - }) - } - theme={theme} - /> - - + + navigation.navigate('MoreStack', { + screen: 'Categories', + }) + } + theme={theme} + /> + + navigation.navigate('MoreStack', { + screen: 'Statistics', + }) + } + theme={theme} + /> + + + navigation.navigate('MoreStack', { + screen: 'SettingsStack', + params: { + screen: 'Settings', + }, + }) + } + theme={theme} + /> + + navigation.navigate('MoreStack', { + screen: 'About', + }) + } + theme={theme} + /> + + + ); }; diff --git a/src/screens/more/TaskQueueScreen.tsx b/src/screens/more/TaskQueueScreen.tsx index c8b58c13f..83ba8c51d 100644 --- a/src/screens/more/TaskQueueScreen.tsx +++ b/src/screens/more/TaskQueueScreen.tsx @@ -12,7 +12,7 @@ import { useTheme } from '@hooks/persisted'; import { showToast } from '../../utils/showToast'; import { getString } from '@strings/translations'; -import { Appbar, EmptyView } from '@components'; +import { Appbar, EmptyView, SafeAreaView } from '@components'; import { TaskQueueScreenProps } from '@navigators/types'; import ServiceManager, { QueuedBackgroundTask } from '@services/ServiceManager'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; @@ -20,7 +20,7 @@ import { useMMKVObject } from 'react-native-mmkv'; const DownloadQueue = ({ navigation }: TaskQueueScreenProps) => { const theme = useTheme(); - const { bottom } = useSafeAreaInsets(); + const { bottom, right } = useSafeAreaInsets(); const [taskQueue] = useMMKVObject( ServiceManager.manager.STORE_KEY, ); @@ -37,7 +37,7 @@ const DownloadQueue = ({ navigation }: TaskQueueScreenProps) => { //TODO: there should probably be a way to cancel a specific task from this screen return ( - <> + { /> + 'task_' + index} @@ -101,7 +102,10 @@ const DownloadQueue = ({ navigation }: TaskQueueScreenProps) => { /> {taskQueue && taskQueue.length > 0 ? ( { }} /> ) : null} - + ); }; diff --git a/src/screens/more/components/MoreHeader.tsx b/src/screens/more/components/MoreHeader.tsx index fd03b3ce3..9207107c6 100644 --- a/src/screens/more/components/MoreHeader.tsx +++ b/src/screens/more/components/MoreHeader.tsx @@ -41,7 +41,7 @@ export const MoreHeader = ({ const styles = StyleSheet.create({ logoContainer: { - paddingTop: 16, + paddingTop: 4, paddingBottom: 24, alignItems: 'center', }, diff --git a/src/screens/novel/NovelScreen.tsx b/src/screens/novel/NovelScreen.tsx index 497349e31..976a650e5 100644 --- a/src/screens/novel/NovelScreen.tsx +++ b/src/screens/novel/NovelScreen.tsx @@ -29,12 +29,12 @@ import { updateChapterProgressByIds } from '@database/queries/ChapterQueries'; import { MaterialDesignIconName } from '@type/icon'; import NovelScreenList from './components/NovelScreenList'; import { ThemeColors } from '@theme/types'; +import { SafeAreaView } from 'react-native-safe-area-context'; const Novel = ({ route, navigation }: NovelScreenProps) => { const { path, pluginId } = route.params; const { - loading, pageIndex, pages, novel, @@ -244,7 +244,6 @@ const Novel = ({ route, navigation }: NovelScreenProps) => { showJumpToChapterModal={showJumpToChapterModal} shareNovel={shareNovel} theme={theme} - isLoading={loading} isLocal={novel?.isLocal} goBack={navigation.goBack} headerOpacity={headerOpacity} @@ -274,17 +273,19 @@ const Novel = ({ route, navigation }: NovelScreenProps) => { )} - }> - - + + }> + + + 0} actions={actions} /> diff --git a/src/screens/novel/components/NovelAppbar.tsx b/src/screens/novel/components/NovelAppbar.tsx index 66f37a1bb..2aa874772 100644 --- a/src/screens/novel/components/NovelAppbar.tsx +++ b/src/screens/novel/components/NovelAppbar.tsx @@ -55,7 +55,6 @@ const NovelAppbar = ({ chapters, theme, isLocal, - isLoading, downloadChapters, deleteChapters, showEditInfoModal, @@ -70,7 +69,6 @@ const NovelAppbar = ({ chapters: ChapterInfo[]; theme: ThemeColors; isLocal: boolean | undefined; - isLoading: boolean; downloadChapters: (amount: number | 'all' | 'unread') => void; deleteChapters: () => void; showEditInfoModal: React.Dispatch>; @@ -103,99 +101,96 @@ const NovelAppbar = ({ > - {!isLoading && ( - - {novel && ( - - )} - - { - showJumpToChapterModal(true); - }} - /> - {!isLocal && ( - showDownloadMenu(false)} - anchor={ - showDownloadMenu(true)} - theme={{ colors: theme }} - style={{ paddingTop: 2 }} - size={27} - /> - } - items={[ - { - label: getString('novelScreen.download.next'), - onPress: () => downloadChapters(1), - }, - { - label: getString('novelScreen.download.next5'), - onPress: () => downloadChapters(5), - }, - { - label: getString('novelScreen.download.next10'), - onPress: () => downloadChapters(10), - }, - { - label: getString('novelScreen.download.custom'), - onPress: () => downloadCustomChapterModal(), - }, - { - label: getString('novelScreen.download.unread'), - onPress: () => downloadChapters('unread'), - }, - { - label: getString('common.all'), - onPress: () => downloadChapters('all'), - }, - { - label: getString('novelScreen.download.delete'), - onPress: () => deleteChapters(), - }, - ]} - /> - )} + + + {novel && ( + + )} + + { + showJumpToChapterModal(true); + }} + /> + {!isLocal && ( showExtraMenu(false)} + theme={theme} + visible={downloadMenu} + onDismiss={() => showDownloadMenu(false)} anchor={ showExtraMenu(true)} + icon="download-outline" + onPress={() => showDownloadMenu(true)} theme={{ colors: theme }} + style={{ paddingTop: 2 }} + size={27} /> } - theme={theme} items={[ { - label: getString('novelScreen.edit.info'), - onPress: () => { - showEditInfoModal(true); - }, + label: getString('novelScreen.download.next'), + onPress: () => downloadChapters(1), + }, + { + label: getString('novelScreen.download.next5'), + onPress: () => downloadChapters(5), + }, + { + label: getString('novelScreen.download.next10'), + onPress: () => downloadChapters(10), }, { - label: getString('novelScreen.edit.cover'), - onPress: () => { - setCustomNovelCover(); - }, + label: getString('novelScreen.download.custom'), + onPress: () => downloadCustomChapterModal(), + }, + { + label: getString('novelScreen.download.unread'), + onPress: () => downloadChapters('unread'), + }, + { + label: getString('common.all'), + onPress: () => downloadChapters('all'), + }, + { + label: getString('novelScreen.download.delete'), + onPress: () => deleteChapters(), }, ]} /> - - )} + )} + showExtraMenu(false)} + anchor={ + showExtraMenu(true)} + theme={{ colors: theme }} + /> + } + theme={theme} + items={[ + { + label: getString('novelScreen.edit.info'), + onPress: () => { + showEditInfoModal(true); + }, + }, + { + label: getString('novelScreen.edit.cover'), + onPress: () => { + setCustomNovelCover(); + }, + }, + ]} + /> + ); diff --git a/src/screens/novel/components/NovelBottomSheet.tsx b/src/screens/novel/components/NovelBottomSheet.tsx index 912a5d99c..3843041a5 100644 --- a/src/screens/novel/components/NovelBottomSheet.tsx +++ b/src/screens/novel/components/NovelBottomSheet.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { StyleSheet, View, Text, useWindowDimensions } from 'react-native'; import color from 'color'; @@ -12,6 +12,7 @@ import { Checkbox, SortItem } from '@components/Checkbox/Checkbox'; import { overlay } from 'react-native-paper'; import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types'; import { ThemeColors } from '@theme/types'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; interface ChaptersSettingsSheetProps { bottomSheetRef: React.RefObject; @@ -32,121 +33,137 @@ const ChaptersSettingsSheet = ({ showChapterTitles, setShowChapterTitles, }: ChaptersSettingsSheetProps) => { - const sortChapters = (val: string) => sortAndFilterChapters(val, filter); - - const filterChapters = (val: string) => sortAndFilterChapters(sort, val); - - const FirstRoute = () => ( - - { - if (filter.match('AND isDownloaded=1')) { - filterChapters( - filter.replace(' AND isDownloaded=1', ' AND isDownloaded=0'), - ); - } else if (filter.match('AND isDownloaded=0')) { - filterChapters(filter.replace(' AND isDownloaded=0', '')); - } else { - filterChapters(filter + ' AND isDownloaded=1'); + const { left, right } = useSafeAreaInsets(); + const sortChapters = useCallback( + (val: string) => sortAndFilterChapters(val, filter), + [filter, sortAndFilterChapters], + ); + + const filterChapters = useCallback( + (val: string) => sortAndFilterChapters(sort, val), + [sort, sortAndFilterChapters], + ); + + const FirstRoute = useCallback( + () => ( + + - { - if (filter.match(' AND `unread`=1')) { - filterChapters( - filter.replace(' AND `unread`=1', ' AND `unread`=0'), - ); - } else if (filter.match(' AND `unread`=0')) { - filterChapters(filter.replace(' AND `unread`=0', '')); - } else { - filterChapters(filter + ' AND `unread`=1'); + onPress={() => { + if (filter.match('AND isDownloaded=1')) { + filterChapters( + filter.replace(' AND isDownloaded=1', ' AND isDownloaded=0'), + ); + } else if (filter.match('AND isDownloaded=0')) { + filterChapters(filter.replace(' AND isDownloaded=0', '')); + } else { + filterChapters(filter + ' AND isDownloaded=1'); + } + }} + /> + - { - filter.match('AND bookmark=1') - ? filterChapters(filter.replace(' AND bookmark=1', '')) - : filterChapters(filter + ' AND bookmark=1'); - }} - /> - + onPress={() => { + if (filter.match(' AND `unread`=1')) { + filterChapters( + filter.replace(' AND `unread`=1', ' AND `unread`=0'), + ); + } else if (filter.match(' AND `unread`=0')) { + filterChapters(filter.replace(' AND `unread`=0', '')); + } else { + filterChapters(filter + ' AND `unread`=1'); + } + }} + /> + { + filter.match('AND bookmark=1') + ? filterChapters(filter.replace(' AND bookmark=1', '')) + : filterChapters(filter + ' AND bookmark=1'); + }} + /> + + ), + [filter, filterChapters, theme], ); - const SecondRoute = () => ( - - - sort === 'ORDER BY position ASC' - ? sortChapters('ORDER BY position DESC') - : sortChapters('ORDER BY position ASC') - } - theme={theme} - /> - - sort === 'ORDER BY name ASC' - ? sortChapters('ORDER BY name DESC') - : sortChapters('ORDER BY name ASC') - } - theme={theme} - /> - + const SecondRoute = useCallback( + () => ( + + + sort === 'ORDER BY position ASC' + ? sortChapters('ORDER BY position DESC') + : sortChapters('ORDER BY position ASC') + } + theme={theme} + /> + + sort === 'ORDER BY name ASC' + ? sortChapters('ORDER BY name DESC') + : sortChapters('ORDER BY name ASC') + } + theme={theme} + /> + + ), + [sort, sortChapters, theme], ); - const ThirdRoute = () => ( - - setShowChapterTitles(true)} - theme={theme} - /> - setShowChapterTitles(false)} - theme={theme} - /> - + const ThirdRoute = useCallback( + () => ( + + setShowChapterTitles(true)} + theme={theme} + /> + setShowChapterTitles(false)} + theme={theme} + /> + + ), + [setShowChapterTitles, showChapterTitles, theme], ); const renderScene = SceneMap({ @@ -181,11 +198,19 @@ const ChaptersSettingsSheet = ({ ); return ( - + @@ -214,4 +239,11 @@ const styles = StyleSheet.create({ borderTopRightRadius: 8, borderTopLeftRadius: 8, }, + radius: { + borderTopRightRadius: 8, + borderTopLeftRadius: 8, + }, + transparent: { + backgroundColor: 'transparent', + }, }); diff --git a/src/screens/reader/ReaderScreen.tsx b/src/screens/reader/ReaderScreen.tsx index 1418928e8..9f3de8d76 100644 --- a/src/screens/reader/ReaderScreen.tsx +++ b/src/screens/reader/ReaderScreen.tsx @@ -20,6 +20,8 @@ import { ChapterContextProvider, useChapterContext } from './ChapterContext'; import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types'; import { useBackHandler } from '@hooks/index'; import { get } from 'lodash-es'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { View } from 'react-native'; const Chapter = ({ route, navigation }: ChapterScreenProps) => { const drawerRef = useRef(null); @@ -58,6 +60,7 @@ export const ChapterContent = ({ navigation, drawerRef, }: ChapterContentProps) => { + const { left, right } = useSafeAreaInsets(); const { novel, chapter } = useChapterContext(); const webViewRef = useRef(null); const readerSheetRef = useRef(null); @@ -134,7 +137,7 @@ export const ChapterContent = ({ ); } return ( - <> + {keepScreenOn ? : null} {loading ? ( @@ -169,7 +172,7 @@ export const ChapterContent = ({ /> ) : null} - + ); }; diff --git a/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx b/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx index 729df7165..a01f9378d 100644 --- a/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx +++ b/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx @@ -100,7 +100,7 @@ const ReaderBottomSheetV2: React.FC = ({ bottomSheetRef, }) => { const theme = useTheme(); - const { bottom } = useSafeAreaInsets(); + const { bottom, left, right } = useSafeAreaInsets(); const layout = useWindowDimensions(); const tabHeaderColor = overlay(2, theme.surface); @@ -133,7 +133,10 @@ const ReaderBottomSheetV2: React.FC = ({ snapPoints={[360, 600]} backgroundStyle={{ backgroundColor }} bottomInset={bottom} - containerStyle={styles.container} + containerStyle={[ + styles.container, + { marginLeft: left, marginRight: right }, + ]} > { } = useBoolean(); return ( - <> + navigation.goBack()} @@ -223,7 +223,7 @@ const AdvancedSettings = ({ navigation }: AdvancedSettingsScreenProps) => { - + ); }; diff --git a/src/screens/settings/SettingsAppearanceScreen.tsx b/src/screens/settings/SettingsAppearanceScreen.tsx index 2aa386d86..f590fdff5 100644 --- a/src/screens/settings/SettingsAppearanceScreen.tsx +++ b/src/screens/settings/SettingsAppearanceScreen.tsx @@ -11,7 +11,7 @@ import { useMMKVObject, useMMKVString, } from 'react-native-mmkv'; -import { Appbar, List } from '@components'; +import { Appbar, List, SafeAreaView } from '@components'; import { AppearanceSettingsScreenProps } from '@navigators/types'; import { getString } from '@strings/translations'; import { darkThemes, lightThemes } from '@theme/md3'; @@ -40,7 +40,7 @@ const AppearanceSettings = ({ navigation }: AppearanceSettingsScreenProps) => { const hideAccentColorModal = () => setAccentColorModal(false); return ( - <> + { theme={theme} showAccentColors={true} /> - + ); }; diff --git a/src/screens/settings/SettingsBackupScreen/index.tsx b/src/screens/settings/SettingsBackupScreen/index.tsx index 7cd45eef5..ba958e23b 100644 --- a/src/screens/settings/SettingsBackupScreen/index.tsx +++ b/src/screens/settings/SettingsBackupScreen/index.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import { ScreenContainer } from '@components/Common'; import { useTheme } from '@hooks/persisted'; -import { Appbar, List } from '@components'; +import { Appbar, List, SafeAreaView } from '@components'; import { Portal } from 'react-native-paper'; import { useBoolean } from '@hooks'; import { BackupSettingsScreenProps } from '@navigators/types'; @@ -29,63 +28,61 @@ const BackupSettings = ({ navigation }: BackupSettingsScreenProps) => { } = useBoolean(); return ( - <> - - navigation.goBack()} - theme={theme} - /> - - - - {getString('backupScreen.remoteBackup')} - - + + navigation.goBack()} + theme={theme} + /> + + + + {getString('backupScreen.remoteBackup')} + + - - - {getString('backupScreen.legacyBackup')} - - - deprecatedRestoreBackup()} - theme={theme} - /> - - - - - + + + {getString('backupScreen.legacyBackup')} + + + deprecatedRestoreBackup()} + theme={theme} + /> + + + + { closeModal={closeSelfHostModal} /> - + ); }; diff --git a/src/screens/settings/SettingsGeneralScreen/SettingsGeneralScreen.tsx b/src/screens/settings/SettingsGeneralScreen/SettingsGeneralScreen.tsx index 4624776c0..34e86033b 100644 --- a/src/screens/settings/SettingsGeneralScreen/SettingsGeneralScreen.tsx +++ b/src/screens/settings/SettingsGeneralScreen/SettingsGeneralScreen.tsx @@ -17,7 +17,7 @@ import { LibrarySortOrder, } from '@screens/library/constants/constants'; import { useBoolean } from '@hooks'; -import { Appbar, List } from '@components'; +import { Appbar, List, SafeAreaView } from '@components'; import NovelSortModal from './modals/NovelSortModal'; import NovelBadgesModal from './modals/NovelBadgesModal'; import { NavigationState } from '@react-navigation/native'; @@ -101,7 +101,7 @@ const GenralSettings: React.FC = ({ navigation }) => { */ const defaultChapterSortModal = useBoolean(); return ( - <> + = ({ navigation }) => { hideNovelSortModal={novelSortModalRef.setFalse} theme={theme} /> - + ); }; diff --git a/src/screens/settings/SettingsReaderScreen/Settings/GeneralSettings.tsx b/src/screens/settings/SettingsReaderScreen/Settings/GeneralSettings.tsx index 1e8b7e763..2b6548ecb 100644 --- a/src/screens/settings/SettingsReaderScreen/Settings/GeneralSettings.tsx +++ b/src/screens/settings/SettingsReaderScreen/Settings/GeneralSettings.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { defaultTo } from 'lodash-es'; -import { Button, List } from '@components/index'; +import { Button, List, SafeAreaView } from '@components/index'; import { useTheme, useChapterGeneralSettings } from '@hooks/persisted'; import { getString } from '@strings/translations'; @@ -39,7 +39,7 @@ const GeneralSettings: React.FC = () => { const labelStyle = [styles.fontSizeL, { color: theme.onSurface }]; return ( - <> + {getString('generalSettings')} @@ -157,7 +157,7 @@ const GeneralSettings: React.FC = () => { ) : null} ) : null} - + ); }; export default GeneralSettings; diff --git a/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx b/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx index acf41c829..aa54ed605 100644 --- a/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx +++ b/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx @@ -5,7 +5,7 @@ import { useNavigation } from '@react-navigation/native'; import WebView from 'react-native-webview'; import { dummyHTML } from './utils'; -import { Appbar, List } from '@components/index'; +import { Appbar, List, SafeAreaView } from '@components/index'; import { useChapterGeneralSettings, @@ -130,7 +130,7 @@ const SettingsReaderScreen = () => { }; }, []); return ( - <> + { - + ); }; diff --git a/src/screens/settings/SettingsRepositoryScreen/SettingsRepositoryScreen.tsx b/src/screens/settings/SettingsRepositoryScreen/SettingsRepositoryScreen.tsx index 66eb148cb..ce1cbb289 100644 --- a/src/screens/settings/SettingsRepositoryScreen/SettingsRepositoryScreen.tsx +++ b/src/screens/settings/SettingsRepositoryScreen/SettingsRepositoryScreen.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import { FlatList, StyleSheet } from 'react-native'; import { FAB, Portal } from 'react-native-paper'; -import { Appbar, EmptyView } from '@components'; +import { Appbar, EmptyView, SafeAreaView } from '@components'; import { createRepository, @@ -29,7 +29,7 @@ const SettingsBrowseScreen = ({ navigation, }: RespositorySettingsScreenProps) => { const theme = useTheme(); - const { bottom } = useSafeAreaInsets(); + const { bottom, right } = useSafeAreaInsets(); const { refreshPlugins } = usePlugins(); const [repositories, setRepositories] = useState( @@ -79,7 +79,7 @@ const SettingsBrowseScreen = ({ }); return ( - <> + { @@ -110,7 +110,7 @@ const SettingsBrowseScreen = ({ } /> - + ); }; diff --git a/src/screens/settings/SettingsScreen.tsx b/src/screens/settings/SettingsScreen.tsx index d040c4446..bdae8a8d9 100644 --- a/src/screens/settings/SettingsScreen.tsx +++ b/src/screens/settings/SettingsScreen.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { View } from 'react-native'; +import { ScrollView } from 'react-native'; -import { Appbar, List } from '@components'; +import { Appbar, List, SafeAreaView } from '@components'; import { useTheme } from '@hooks/persisted'; import { getString } from '@strings/translations'; @@ -11,13 +11,13 @@ const SettingsScreen = ({ navigation }: SettingsScreenProps) => { const theme = useTheme(); return ( - <> + - + { } theme={theme} /> - - + + ); }; diff --git a/src/screens/settings/SettingsTrackerScreen.tsx b/src/screens/settings/SettingsTrackerScreen.tsx index e2484122b..b632e77c9 100644 --- a/src/screens/settings/SettingsTrackerScreen.tsx +++ b/src/screens/settings/SettingsTrackerScreen.tsx @@ -3,7 +3,7 @@ import { View } from 'react-native'; import { Modal, Portal, Text, Button, Provider } from 'react-native-paper'; import { getTracker, useTheme, useTracker } from '@hooks/persisted'; -import { Appbar, List } from '@components'; +import { Appbar, List, SafeAreaView } from '@components'; import { TrackerSettingsScreenProps } from '@navigators/types'; import { getString } from '@strings/translations'; @@ -17,132 +17,136 @@ const TrackerScreen = ({ navigation }: TrackerSettingsScreenProps) => { const hideModal = () => setVisible(false); return ( - - navigation.goBack()} - theme={theme} - /> - - - - {getString('trackingScreen.services')} - - { - if (tracker) { - showModal(); - } else { - const auth = await getTracker('AniList').authenticate(); - if (auth) { - setTracker('AniList', auth); - } - } - }} - right={tracker?.name === 'AniList' ? 'check' : undefined} - theme={theme} - /> - { - if (tracker) { - showModal(); - } else { - const auth = await getTracker('MyAnimeList').authenticate(); - if (auth) { - setTracker('MyAnimeList', auth); + + + navigation.goBack()} + theme={theme} + /> + + + + {getString('trackingScreen.services')} + + { + if (tracker) { + showModal(); + } else { + const auth = await getTracker('AniList').authenticate(); + if (auth) { + setTracker('AniList', auth); + } } - } - }} - right={tracker?.name === 'MyAnimeList' ? 'check' : undefined} - theme={theme} - /> - {tracker?.name === 'MyAnimeList' && - tracker?.auth.expiresAt < new Date(Date.now()) ? ( - <> - - - {getString('common.settings')} - - { - const revalidate = getTracker('MyAnimeList')?.revalidate; - if (revalidate) { - const auth = await revalidate(tracker.auth); + }} + right={tracker?.name === 'AniList' ? 'check' : undefined} + theme={theme} + /> + { + if (tracker) { + showModal(); + } else { + const auth = await getTracker('MyAnimeList').authenticate(); + if (auth) { setTracker('MyAnimeList', auth); } - }} - theme={theme} - /> - - ) : null} - - - - - - {getString('trackingScreen.logOutMessage', { - name: tracker?.name, - })} - - + {tracker?.name === 'MyAnimeList' && + tracker?.auth.expiresAt < new Date(Date.now()) ? ( + <> + + + {getString('common.settings')} + + { + const revalidate = getTracker('MyAnimeList')?.revalidate; + if (revalidate) { + const auth = await revalidate(tracker.auth); + setTracker('MyAnimeList', auth); + } + }} + theme={theme} + /> + + ) : null} + + + + - - - - - - - + + + + + + + + ); }; diff --git a/src/screens/updates/UpdatesScreen.tsx b/src/screens/updates/UpdatesScreen.tsx index 1a4046628..0fc057574 100644 --- a/src/screens/updates/UpdatesScreen.tsx +++ b/src/screens/updates/UpdatesScreen.tsx @@ -17,6 +17,7 @@ import { showToast } from '@utils/showToast'; import ServiceManager from '@services/ServiceManager'; import { UpdateScreenProps } from '@navigators/types'; import { UpdateOverview } from '@database/types'; +import { SafeAreaView } from '@components'; const UpdatesScreen = ({ navigation }: UpdateScreenProps) => { const theme = useTheme(); @@ -58,7 +59,7 @@ const UpdatesScreen = ({ navigation }: UpdateScreenProps) => { ); return ( - <> + { /> )} - + ); };