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

app/expense/_layout.tsx

@@ -0,0 +1,40 @@
+import { StyleSheet, Text, View } from 'react-native'
+import { Stack } from 'expo-router'
+import React from 'react'
+import { useTheme } from '../contexts/ThemeContext'
+
+const _layout = () => {
+  const {colors} = useTheme();
+  return (
+    <Stack
+    initialRouteName="new"
+      screenOptions={{
+      contentStyle: {
+        backgroundColor:colors.containerColor,
+      },
+      headerStyle: {
+        backgroundColor: colors.containerColor
+      },
+      headerTintColor: colors.primaryText
+
+    }}>
+      <Stack.Screen name='new'
+      options={{
+        title: "New Expense"
+      }}
+      />
+      <Stack.Screen name="[expense]"
+      options={{
+        headerBackButtonMenuEnabled: true,
+        headerBackVisible: true,
+        title: "edit Expense"
+      }}
+       getId={(params) => String(Date.now())}
+      />
+    </Stack>
+  )
+}
+
+export default _layout
+
+const styles = StyleSheet.create({})