Major refactoring: navigation does not break anymore. the user can now navigate between the tabs without loosing context

app/_layout.tsx

@@ -1,20 +1,37 @@
-import { Slot } from 'expo-router';
+import { SplashScreen, Stack } from 'expo-router';
 import React, { useEffect } from 'react';
 import { addCategory, initDatabase } from '../services/database';
 import { AuthProvider } from './contexts/AuthContext';
 import { ThemeProvider } from './contexts/ThemeContext';
+import { useTheme } from './contexts/ThemeContext';
+
 
 export default function _layout() {
-
+  const {colors} = useTheme();
   useEffect(() => {
     initDatabase();
+    
   }, []);
 
+  console.log(colors.backgroundColor)
   return (
-    <AuthProvider>
-      <ThemeProvider>
-        <Slot />
-      </ThemeProvider>
-    </AuthProvider>
+    <ThemeProvider>
+      <AuthProvider>
+        <Stack 
+          screenOptions={{
+            headerShown: false,
+            navigationBarHidden: true,
+            animation: 'none',
+            contentStyle: {backgroundColor: colors.backgroundColor}
+          }}
+          >
+          <Stack.Screen name="index"
+          options={{
+            contentStyle: {backgroundColor: colors.backgroundColor}
+          }}/>
+
+        </Stack>
+      </AuthProvider>
+    </ThemeProvider>
   )
 }