Update navigation theme handling

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/navigation.tsx

@@ -10,6 +10,7 @@ import { BottomNavigation, Portal, useTheme } from 'react-native-paper';
 import { Home, Search, Tags, Settings, AddItem } from './screens';
 import { horizontalScale } from './styles';
 import { FloatingActionButton } from './components';
+import { darkNavigationTheme, lightNavigationTheme } from './theme';
 
 function TabNavigator() {
   const TabNavigatorBase = createBottomTabNavigator();
@@ -109,17 +110,7 @@ function NavigationContainer() {
 
   return (
     <NavigationContainerBase
-      theme={{
-        dark: theme.dark,
-        colors: {
-          primary: theme.colors.primary,
-          background: theme.colors.background,
-          card: theme.colors.surface,
-          text: theme.colors.onSurface,
-          border: theme.colors.outline,
-          notification: theme.colors.error,
-        },
-      }}>
+      theme={theme.dark ? darkNavigationTheme : lightNavigationTheme}>
       <StackNavigatorBase.Navigator screenOptions={{ headerShown: false }}>
         <StackNavigatorBase.Screen name="Main" component={TabNavigator} />
         <StackNavigatorBase.Screen

src/theme.tsx

@@ -1,4 +1,12 @@
+import { DefaultTheme as DefaultNavigationTheme } from '@react-navigation/native';
+import {
+  MD3LightTheme,
+  MD3DarkTheme,
+  adaptNavigationTheme,
+} from 'react-native-paper';
+
 const lightTheme = {
+  ...MD3LightTheme,
   colors: {
     primary: 'rgb(0, 95, 175)',
     onPrimary: 'rgb(255, 255, 255)',
@@ -44,6 +52,7 @@ const lightTheme = {
 };
 
 const darkTheme = {
+  ...MD3DarkTheme,
   colors: {
     primary: 'rgb(165, 200, 255)',
     onPrimary: 'rgb(0, 49, 95)',
@@ -88,4 +97,14 @@ const darkTheme = {
   },
 };
 
-export { lightTheme, darkTheme };
+const { LightTheme: lightNavigationTheme } = adaptNavigationTheme({
+  reactNavigationLight: DefaultNavigationTheme,
+  materialLight: lightTheme,
+});
+
+const { DarkTheme: darkNavigationTheme } = adaptNavigationTheme({
+  reactNavigationDark: DefaultNavigationTheme,
+  materialDark: darkTheme,
+});
+
+export { lightTheme, darkTheme, lightNavigationTheme, darkNavigationTheme };