Better bottom navigation

src/navigators/BottomNavigator.tsx

@@ -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>();
@@ -22,6 +22,11 @@ const BottomNavigator = () => {
     showLabelsInNav = false,
   } = useAppSettings();
 
+  const { filteredInstalledPlugins } = usePlugins();
+  const pluginsWithUpdate = filteredInstalledPlugins.filter(
+    p => p.hasUpdate,
+  ).length;
+
   return (
     <Tab.Navigator
       barStyle={{ backgroundColor: theme.surface2 }}
@@ -63,6 +68,9 @@ const BottomNavigator = () => {
         options={{
           title: getString('browse'),
           tabBarIcon: 'compass-outline',
+          tabBarBadge: pluginsWithUpdate
+            ? pluginsWithUpdate.toString()
+            : undefined,
         }}
       />
       <Tab.Screen

src/navigators/types/index.ts

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

src/screens/library/LibraryScreen.tsx

@@ -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 {
@@ -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],
+  );
+
   const renderTabBar = (
     props: SceneRendererProps & { navigationState: State },
   ) =>

src/screens/updates/UpdatesScreen.tsx

@@ -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';
 
@@ -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,
@@ -76,6 +77,20 @@ const UpdatesScreen = () => {
     }, [downloadQueue]),
   );
 
+  useEffect(
+    () =>
+      navigation.addListener('tabPress', e => {
+        if (navigation.isFocused()) {
+          e.preventDefault();
+
+          navigation.navigate('MoreStack', {
+            screen: 'Downloads',
+          });
+        }
+      }),
+    [navigation],
+  );
+
   return (
     <>
       <SearchbarV2