Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better bottom navigation #1335

Merged
merged 7 commits into from
Nov 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/ListView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import { coverPlaceholderColor } from '../theme/colors';
import color from 'color';
import { ThemeColors } from '@theme/types';
import { NovelItem } from '@plugins/types';
import { LibraryNovelInfo } from '@database/types';
import { NovelInfo } from '@database/types';

interface ListViewProps {
item: NovelItem | LibraryNovelInfo;
item: NovelItem | NovelInfo;
downloadBadge?: React.ReactNode;
unreadBadge?: React.ReactNode;
inLibraryBadge?: React.ReactNode;
Expand Down
2 changes: 1 addition & 1 deletion src/components/NovelCover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ interface INovelCover<TNovel> {
libraryStatus: boolean;
theme: ThemeColors;
isSelected: boolean;
addSkeletonLoading: boolean;
addSkeletonLoading?: boolean;
onLongPress: (item: TNovel) => void;
selectedNovelIds: number[];
}
Expand Down
13 changes: 11 additions & 2 deletions src/navigators/BottomNavigator.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { lazy } from 'react';
import React, { lazy, useMemo } from 'react';
import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';

import Library from '../screens/library/LibraryScreen';
Expand All @@ -8,7 +8,7 @@ const Browse = lazy(() => import('../screens/browse/BrowseScreen'));
const More = lazy(() => import('../screens/more/MoreScreen'));

import { getString } from '@strings/translations';
import { useAppSettings, useTheme } from '@hooks/persisted';
import { useAppSettings, usePlugins, useTheme } from '@hooks/persisted';
import { BottomNavigatorParamList } from './types';

const Tab = createMaterialBottomTabNavigator<BottomNavigatorParamList>();
Expand All @@ -22,6 +22,12 @@ const BottomNavigator = () => {
showLabelsInNav = false,
} = useAppSettings();

const { filteredInstalledPlugins } = usePlugins();
const pluginsWithUpdate = useMemo(
() => filteredInstalledPlugins.filter(p => p.hasUpdate).length,
[filteredInstalledPlugins],
);

return (
<Tab.Navigator
barStyle={{ backgroundColor: theme.surface2 }}
Expand Down Expand Up @@ -63,6 +69,9 @@ const BottomNavigator = () => {
options={{
title: getString('browse'),
tabBarIcon: 'compass-outline',
tabBarBadge: pluginsWithUpdate
? pluginsWithUpdate.toString()
: undefined,
nyagami marked this conversation as resolved.
Show resolved Hide resolved
}}
/>
<Tab.Screen
Expand Down
1 change: 1 addition & 0 deletions src/navigators/Main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ const MainNavigator = () => {
}

return (
// @ts-ignore
<NavigationContainer theme={{ colors: theme, dark: theme.isDark }}>
{isNewVersion && <NewUpdateDialog newVersion={latestRelease} />}
<Stack.Navigator screenOptions={{ headerShown: false }}>
Expand Down
5 changes: 5 additions & 0 deletions src/navigators/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@ export type HistoryScreenProps = CompositeScreenProps<
StackScreenProps<RootStackParamList>
>;

export type UpdateScreenProps = CompositeScreenProps<
MaterialBottomTabScreenProps<BottomNavigatorParamList, 'Updates'>,
StackScreenProps<RootStackParamList>
>;

export type BrowseScreenProps = CompositeScreenProps<
MaterialBottomTabScreenProps<BottomNavigatorParamList, 'Browse'>,
StackScreenProps<RootStackParamList>
Expand Down
14 changes: 13 additions & 1 deletion src/screens/browse/BrowseScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Text } from 'react-native';
import React, { useMemo } from 'react';
import React, { useEffect, useMemo } from 'react';
import { TabView, TabBar } from 'react-native-tab-view';

import { useSearch } from '@hooks';
Expand Down Expand Up @@ -38,6 +38,18 @@ const BrowseScreen = ({ navigation }: BrowseScreenProps) => {
[],
);

useEffect(
() =>
navigation.addListener('tabPress', e => {
if (navigation.isFocused()) {
e.preventDefault();

navigation.navigate('GlobalSearchScreen', {});
}
}),
[navigation],
);
nyagami marked this conversation as resolved.
Show resolved Hide resolved
nyagami marked this conversation as resolved.
Show resolved Hide resolved

const [index, setIndex] = React.useState(0);
return (
<>
Expand Down
22 changes: 19 additions & 3 deletions src/screens/history/HistoryScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import { StyleSheet, SectionList, Text } from 'react-native';
import dayjs from 'dayjs';
import { Portal } from 'react-native-paper';
Expand All @@ -15,9 +15,8 @@ import { History } from '@database/types';
import { getString } from '@strings/translations';
import ClearHistoryDialog from './components/ClearHistoryDialog';
import HistorySkeletonLoading from './components/HistorySkeletonLoading';
import { HistoryScreenProps } from '@navigators/types';

const HistoryScreen = ({ navigation }: HistoryScreenProps) => {
const HistoryScreen = () => {
const theme = useTheme();
const {
isLoading,
Expand Down Expand Up @@ -71,6 +70,23 @@ const HistoryScreen = ({ navigation }: HistoryScreenProps) => {
setFalse: closeClearHistoryDialog,
} = useBoolean();

useEffect(
() =>
navigation.addListener('tabPress', e => {
let lastNovel = history[0];
if (navigation.isFocused() && lastNovel) {
e.preventDefault();

navigation.navigate('Novel', {
name: lastNovel.novelName,
path: lastNovel.novelPath,
pluginId: lastNovel.pluginId,
});
}
}),
[navigation, history],
);
Soopyboo32 marked this conversation as resolved.
Show resolved Hide resolved

return (
<>
<SearchbarV2
Expand Down
14 changes: 13 additions & 1 deletion src/screens/library/LibraryScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useRef, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
import { BottomSheetModal } from '@gorhom/bottom-sheet';
import {
Expand Down Expand Up @@ -85,6 +85,18 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => {

const bottomSheetRef = useRef<BottomSheetModal | null>(null);

useEffect(
() =>
navigation.addListener('tabPress', e => {
if (navigation.isFocused()) {
e.preventDefault();

bottomSheetRef.current?.present?.();
}
}),
[navigation],
);
nyagami marked this conversation as resolved.
Show resolved Hide resolved
Soopyboo32 marked this conversation as resolved.
Show resolved Hide resolved

const renderTabBar = (
props: SceneRendererProps & { navigationState: State },
) =>
Expand Down
19 changes: 18 additions & 1 deletion src/screens/more/MoreScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import { StyleSheet, View, Pressable, Text, ScrollView } from 'react-native';
import { getString } from '@strings/translations';

Expand Down Expand Up @@ -28,6 +28,23 @@ const MoreScreen = ({ navigation }: MoreStackScreenProps) => {
const enableIncognitoMode = () =>
setLibrarySettings({ incognitoMode: !incognitoMode });

useEffect(
() =>
navigation.addListener('tabPress', e => {
if (navigation.isFocused()) {
e.preventDefault();

navigation.navigate('MoreStack', {
screen: 'SettingsStack',
params: {
screen: 'Settings',
},
});
}
}),
[navigation],
Soopyboo32 marked this conversation as resolved.
Show resolved Hide resolved
);
nyagami marked this conversation as resolved.
Show resolved Hide resolved

return (
<ScrollView>
<MoreHeader
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const NovelInformation = memo(() => (
</View>
));

const ChapterItem = memo(({ index }: { index: number }) => (
const ChapterItem = memo(() => (
<View style={styles.chapter}>
<LoadingShimmer style={styles.text} height={20} width={350} />
<LoadingShimmer style={styles.text} height={16} width={350} />
Expand All @@ -88,7 +88,7 @@ const Chapters = memo(() => (
</View>
));

const NovelScreenLoading: React.FC<Props> = ({ theme }) => {
const NovelScreenLoading: React.FC<Props> = () => {
return (
<View style={styles.container}>
<NovelTop />
Expand Down
19 changes: 17 additions & 2 deletions src/screens/updates/UpdatesScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback } from 'react';
import React, { useCallback, useEffect } from 'react';
import dayjs from 'dayjs';
import { RefreshControl, SectionList, StyleSheet, Text } from 'react-native';

Expand All @@ -19,8 +19,9 @@ import { useFocusEffect } from '@react-navigation/native';
import { deleteChapter } from '@database/queries/ChapterQueries';
import { showToast } from '@utils/showToast';
import ServiceManager from '@services/ServiceManager';
import { UpdateScreenProps } from '@navigators/types';

const UpdatesScreen = () => {
const UpdatesScreen = ({ navigation }: UpdateScreenProps) => {
const theme = useTheme();
const {
isLoading,
Expand Down Expand Up @@ -76,6 +77,20 @@ const UpdatesScreen = () => {
}, [downloadQueue]),
);

useEffect(
() =>
navigation.addListener('tabPress', e => {
if (navigation.isFocused()) {
e.preventDefault();

navigation.navigate('MoreStack', {
screen: 'Downloads',
});
}
}),
[navigation],
);
Soopyboo32 marked this conversation as resolved.
Show resolved Hide resolved

nyagami marked this conversation as resolved.
Show resolved Hide resolved
return (
<>
<SearchbarV2
Expand Down