From 7ed62507c7cf9289819451829ad35035b0616394 Mon Sep 17 00:00:00 2001
From: Nikolaos Karaolidis <nick@karaolidis.com>
Date: Tue, 11 Jul 2023 12:50:12 +0300
Subject: [PATCH] Update navigation theme handling

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
---
 src/navigation.tsx | 13 ++-----------
 src/theme.tsx      | 21 ++++++++++++++++++++-
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/navigation.tsx b/src/navigation.tsx
index 8e9e68c..8a486a8 100644
--- a/src/navigation.tsx
+++ b/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
diff --git a/src/theme.tsx b/src/theme.tsx
index 6ed9233..a6f0712 100644
--- a/src/theme.tsx
+++ b/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 };