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

app/(tabs)/(budget)/category.tsx

@@ -6,9 +6,12 @@ import { ExpenseItem, LoadingSymbol, TextInputBar } from "../../../components";
 import useFetch from "../../../hooks/useFetch";
 import { useTheme } from "../../contexts/ThemeContext";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { useNavigation } from "expo-router/src/useNavigation";
+import { useEffect } from "react";
 
 export default function Page() {
     const router = useRouter();
+    const navigation = useNavigation();
     const {colors} = useTheme();
     const {category_guid} = useLocalSearchParams();
 
@@ -17,13 +20,21 @@ export default function Page() {
     const {data, isLoading, reFetch} = useFetch({sql: "SELECT e.guid AS expense_guid, e.name AS expense_name, c.name AS category_name, e.datetime AS expense_datetime, e.amount AS expense_amount, c.color AS category_color FROM expense e JOIN category c ON e.category_guid = c.guid WHERE c.guid = ? ORDER BY expense_datetime desc;", args: [category_guid]});
 
     const handleEditCategory = () => {
-        router.push({pathname: "/budget/editCategory", params: {category_guid: category_guid, category_color: category_color, category_amount: category_amount, category_name: category_name, category_type: category_type}});
+        router.push({pathname: "/editCategory", params: {category_guid: category_guid, category_color: category_color, category_amount: category_amount, category_name: category_name, category_type: category_type}});
     }
     
     const handleBackButton = () => {
         router.back();
     }
 
+    useEffect(() => {
+        console.log("useEffect called")
+        const unsubscribe = navigation.addListener("focus", () => {
+            reFetch();
+        })
+        return unsubscribe;
+    }, [navigation])
+
     return (
         <SafeAreaView style={[styles.safeAreaView, {backgroundColor: colors.containerColor}]}>
             <TouchableOpacity style={styles.backContainer} onPress={handleBackButton}>
@@ -40,7 +51,7 @@ export default function Page() {
             <TextInputBar style={styles.searchBar} placeholder="Search..."/>
 
             {isLoading ? (<LoadingSymbol/>) : (
-                <FlatList 
+                <FlatList style={{marginHorizontal: 10}}
                     data={data} 
                     renderItem = {({item}) => <ExpenseItem
                         color={item.category_color} 
@@ -48,9 +59,9 @@ export default function Page() {
                         title={item.expense_name} 
                         date={item.expense_datetime} 
                         value={item.expense_amount}
-                        onPress={()=>router.push(`/home/expense/${item.guid}`)}
+                        onPress={()=>router.push(`/expense/${item.expense_guid}`)}
                     />}
-                    keyExtractor={item => item.guid}
+                    keyExtractor={item => item.expense_guid}
                     ItemSeparatorComponent={() => {
                         return (<View style={styles.itemSeperator}/>);
                     }}

app/(tabs)/(budget)/index.tsx

@@ -1,5 +1,5 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { router } from 'expo-router';
+import { router, useNavigation } from 'expo-router';
 import { useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
@@ -11,7 +11,7 @@ import { useTheme } from '../../contexts/ThemeContext';
 export default function Page() {
     const {colors} = useTheme()
     const containerColor = colors.containerColor;
-
+    const navigation = useNavigation();
     const [selectedPage, setSelectedPage] = useState("noPageLoaded");
 
     useEffect(() => {
@@ -27,9 +27,10 @@ export default function Page() {
     const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.guid AS category_guid, c.name AS category_name, c.color AS category_color, c.type AS category_type, SUM(e.amount) as total_expenses, c.allocated_amount as allocated_amount FROM category c LEFT JOIN expense e ON e.category_guid = c.guid WHERE c.type = ? GROUP BY c.guid", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []});
 
     useEffect(() => {
-        reFetch();
+        reFetch()
     }, [selectedPage]);
 
+
     const handlePageSelection = (page: string) => {
         if(page !== selectedPage) {
             setSelectedPage(page);
@@ -38,15 +39,16 @@ export default function Page() {
     };
 
     const handleCategoryPress = (item: {[column: string]: any;}) => {
-        router.push({pathname: "/(tabs)/budget/category", params: {category_guid: item.category_guid, category_name: item.category_name}})
+        router.push({pathname: "/category", params: {category_guid: item.category_guid, category_name: item.category_name}})
     }
 
     return (
         <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
+            <View style={{flex: 1, marginHorizontal: 10}}>
             <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
 
             <Plus onPress={() => {
-                router.push({pathname: '/(tabs)/budget/addCategory'});
+                router.push({pathname: '/addCategory'});
             }}/>
 
             {isLoading ? (<LoadingSymbol/>) : (
@@ -67,6 +69,7 @@ export default function Page() {
                 }}
                 /> 
             )}
+            </View>
         </SafeAreaView>
     );
 }

app/(tabs)/(home)/_layout.tsx

@@ -24,9 +24,6 @@ export default function _Layout() {
         title: "test",
         headerShown: false,
       }}/>
-      <Stack.Screen name="expense" options={{
-        headerShown: false,
-      }}/>
       <Stack.Screen name="userSettings" options={{
         animation: "slide_from_left",
         title: "User Settings",

app/(tabs)/(home)/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { NativeScrollEvent, NativeSyntheticEvent, StyleSheet, View } from 'react-native';
 import { Calendar } from 'react-native-calendars';
 import { FlatList, RefreshControl } from 'react-native-gesture-handler';
@@ -10,6 +10,7 @@ import { useRouter } from "expo-router";
 import { addExpense } from "../../../services/database";
 import { SimpleDate } from '../../../util/SimpleDate';
 import { useTheme } from '../../contexts/ThemeContext';
+import { useNavigation } from 'expo-router';
 
 
 interface MarkingProps {
@@ -36,8 +37,7 @@ const constructMarkedDates = (data : {[column: string]: any}) => {
 export default function Page() {
     const { colors, theme } = useTheme()
 
-    
+    const navigation = useNavigation();
-
     const router = useRouter();
     const [plusShow, setPlusShow] = useState(true);
     const prevOffset = useRef(0);
@@ -67,12 +67,19 @@ export default function Page() {
         constructMarkedDates(data)
     , [data])
     
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('focus', () => {
+            console.log("focus event triggered")
+            reFetch();
+        });
+        return unsubscribe;
+    }, [navigation]);
 
 
     return (
         <SafeAreaView edges={["left", "right", "top"]} style={[styles.safeAreaViewStyle, {backgroundColor: colors.containerColor}]}>
             {plusShow && <Plus onPress={()=>{
-                router.push("/(tabs)/home/expense/new");
+                router.push("/expense/new");
 
                 // executeQuery({sql: "SELECT guid FROM category", args: []}).then((result) => {
                 //     if("rows" in result[0]) {
@@ -89,7 +96,7 @@ export default function Page() {
             data={data}
             ListHeaderComponent={
                 <>
-                    <Welcome name="My Dude" image={profile} onPress={() => {router.push("/home/userSettings")}}/>
+                    <Welcome name="My Dude" image={profile} onPress={() => {router.push("/userSettings")}}/>
                     <Calendar key={theme} maxDate={SimpleDate.now().format("YYYY-MM-DD")} style={{borderRadius: 20, padding:10}} theme={{
                         dayTextColor: colors.primaryText,
                         textDisabledColor: colors.secondaryText,
@@ -107,8 +114,17 @@ export default function Page() {
                     <TextInputBar placeholder='Type to Search...' style={{marginBottom: 20}}></TextInputBar>
                 </>
             }
-            renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={item.expense_amount} guid={item.expense_guid} onPress={(guid) => {router.push(`/(tabs)/home/expense/${guid}`)}}/>}
+            renderItem = {({item}) =>
-            keyExtractor={item => item.expense_guid}
+             <ExpenseItem
+                category={item.category_name}
+                color={item.category_color}
+                date={item.expense_datetime}
+                title={item.expense_name}
+                value={item.expense_amount}
+                guid={item.expense_guid}
+                onPress={(guid) => {router.push(`/expense/${guid}`)}}
+            />}
+            keyExtractor={item => item.expense_guid }
             ItemSeparatorComponent={() => {
                 return (<View style={styles.itemSeperatorStyle}/>);
             }}

app/(tabs)/_layout.tsx

@@ -35,30 +35,25 @@ export default function Layout() {
 
     return (
         <Tabs sceneContainerStyle={styles.sceneContainer} screenOptions={screenOptions}>
-            <Tabs.Screen name="budget" options={
+            <Tabs.Screen name="(budget)" options={
                 {
                     tabBarLabel: "Budget",
                     tabBarIcon: ({size, color}) => (
                         <FontAwesome name="money" size={size} color={color}/>),
-                    unmountOnBlur: true,
-                    href: "(tabs)/budget"
                 }
             }/>
-            <Tabs.Screen name="home" options={
+            <Tabs.Screen name="(home)" options={
                 {
                     tabBarLabel: "Home",
                     tabBarIcon: ({size, color}) => (
                         <FontAwesome name="home" size={size} color={color}/>),
-                    unmountOnBlur: true,
-                    href: "(tabs)/home/"
                 }
             }/>
-            <Tabs.Screen name="stats/index" options={
+            <Tabs.Screen name="(stats)/index" options={
                 {
                     tabBarLabel: "Stats",
                     tabBarIcon: ({size, color}) => (
                         <FontAwesome name="bar-chart" size={size} color={color}/>),
-                    unmountOnBlur: true,
                 }
             }/>
         </Tabs>

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>
-      <ThemeProvider>
+      <AuthProvider>
-        <Slot />
+        <Stack 
-      </ThemeProvider>
+          screenOptions={{
-    </AuthProvider>
+            headerShown: false,
+            navigationBarHidden: true,
+            animation: 'none',
+            contentStyle: {backgroundColor: colors.backgroundColor}
+          }}
+          >
+          <Stack.Screen name="index"
+          options={{
+            contentStyle: {backgroundColor: colors.backgroundColor}
+          }}/>
+
+        </Stack>
+      </AuthProvider>
+    </ThemeProvider>
   )
 }

app/expense/[expense].tsx

@@ -1,15 +1,15 @@
 import { View, Text, Alert, StyleSheet } from 'react-native'
 import React, { useEffect, useState } from 'react'
 import { router, useLocalSearchParams, useRouter } from 'expo-router'
-import useFetch from '../../../../hooks/useFetch';
+import useFetch from '../../hooks/useFetch';
-import { Category, Expense } from '../../../../types/dbItems';
+import { Category, Expense } from '../../types/dbItems';
-import { CategorySelectorModal, AutoDecimalInput, CategorySelector, TextInputBar, DateSelectorButton, RoundedButton } from '../../../../components';
+import { CategorySelectorModal, AutoDecimalInput, CategorySelector, TextInputBar, DateSelectorButton, RoundedButton } from '../../components';
-import colors from '../../../../constants/colors';
+import colors from '../../constants/colors';
-import { addExpense, deleteExpense, executeQuery, updateExpense } from '../../../../services/database';
+import { addExpense, deleteExpense, executeQuery, updateExpense } from '../../services/database';
-import { SimpleDate } from '../../../../util/SimpleDate';
+import { SimpleDate } from '../../util/SimpleDate';
 import DateTimePicker from '@react-native-community/datetimepicker';
-import { SIZES } from '../../../../constants/theme';
+import { SIZES } from '../../constants/theme';
-import { useTheme } from '../../../contexts/ThemeContext';
+import { useTheme } from '../contexts/ThemeContext';
 
 export default function Page() {
   const router = useRouter();
@@ -25,8 +25,6 @@ export default function Page() {
   const [datePickerShown, setDatePickerShown] = useState<boolean>(false);
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
 
-
-  console.log(router.canGoBack())
   useEffect(()=>{
     const entry = data[0];
     console.log(entry)
@@ -69,8 +67,7 @@ export default function Page() {
       await updateExpense(selectedExpense!.guid!, expenseName, selectedCategory!.guid!, new SimpleDate(selectedDate).format("YYYY-MM-DD"), Number(formatedValue))
     }
     if(validateInput()){
-      insert();
+      insert().then( () => router.back())
-      router.back();
     }else {
       Alert.alert("Invalid input", "One of the Props is not properly defined")
     }

app/expense/_layout.tsx

@@ -1,7 +1,7 @@
 import { StyleSheet, Text, View } from 'react-native'
 import { Stack } from 'expo-router'
 import React from 'react'
-import { useTheme } from '../../../contexts/ThemeContext'
+import { useTheme } from '../contexts/ThemeContext'
 
 const _layout = () => {
   const {colors} = useTheme();

app/expense/new.tsx

@@ -1,12 +1,12 @@
 import { View, Text, StyleSheet, Alert } from 'react-native'
 import React, { useRef, useState } from 'react'
-import { SIZES } from '../../../../constants/theme'
+import { SIZES } from '../../constants/theme'
-import { useTheme } from '../../../contexts/ThemeContext'
+import { useTheme } from '../contexts/ThemeContext'
-import { AutoDecimalInput, CategorySelector, CategorySelectorModal, DateSelectorButton, RoundedButton, TextInputBar } from '../../../../components'
+import { AutoDecimalInput, CategorySelector, CategorySelectorModal, DateSelectorButton, RoundedButton, TextInputBar } from '../../components'
-import { Category } from '../../../../types/dbItems'
+import { Category } from '../../types/dbItems'
 import DateTimePicker from '@react-native-community/datetimepicker';
-import { addExpense } from '../../../../services/database'
+import { addExpense } from '../../services/database'
-import { SimpleDate } from '../../../../util/SimpleDate'
+import { SimpleDate } from '../../util/SimpleDate'
 import { useRouter } from 'expo-router'
 
 export default function AddItem() {
@@ -41,8 +41,9 @@ export default function AddItem() {
       await addExpense(expenseName, selectedCategory?.guid!, new SimpleDate(selectedDate).format("YYYY-MM-DD"), Number(formatedValue))
     }
     if(validateInput()){
-      insert();
+      insert().then(() => {
-      router.back();
+        router.back();
+      })
     }else {
       Alert.alert("Invalid input", "One of the Props is not properly defined")
     }

app/index.tsx

@@ -7,7 +7,7 @@ export default function index() {
   const {authState} = useAuth()
  
   return (
-   <Redirect href={authState?.authenticated ? "/home/" : "/login"}></Redirect>
+   <Redirect href={authState?.authenticated ? "/(tabs)/(home)" : "/login"}></Redirect>
     
   )
 }

components/budget/budgetHeader.tsx

@@ -77,12 +77,11 @@ const styles = StyleSheet.create({
     containerStyle: {
         flexDirection: "row",
         justifyContent: "space-evenly",
-        marginHorizontal: 20,
         marginBottom: 20,
+        marginHorizontal: 10,
         marginTop: 10,
     },
     searchBarStyle: {
         marginBottom: 20,
-        marginHorizontal: 10,
     }
 });

components/common/CustomCard.tsx

@@ -40,7 +40,6 @@ export default function CustomCard(props : ViewProps) {
 const styles = StyleSheet.create({
   container:{
     borderRadius: 20,
-    marginHorizontal: 10,
   },
   boxShadow: {},
 })

components/expense/CategorySelector.tsx

@@ -1,8 +1,8 @@
 import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
 import React, { useState } from 'react'
-import { useTheme } from '../../../app/contexts/ThemeContext'
+import { useTheme } from '../../app/contexts/ThemeContext'
-import { SIZES } from '../../../constants/theme';
+import { SIZES } from '../../constants/theme';
-import { Category } from '../../../types/dbItems';
+import { Category } from '../../types/dbItems';
 import CategorySelectorModal from './CategorySelectorModal';
 
 interface CategorySelectorProps {

components/expense/CategorySelectorModal.tsx

@@ -1,11 +1,11 @@
 import { Modal, NativeSyntheticEvent, StyleSheet, Text, View, FlatList } from 'react-native'
 import React, { useEffect, useMemo, useState } from 'react'
-import { Category } from '../../../types/dbItems';
+import { Category } from '../../types/dbItems';
-import { useTheme } from '../../../app/contexts/ThemeContext';
+import { useTheme } from '../../app/contexts/ThemeContext';
-import CategoryListItem from '../../common/CategoryListItem';
+import CategoryListItem from '../common/CategoryListItem';
-import { SIZES } from '../../../constants/theme';
+import { SIZES } from '../../constants/theme';
-import useFetch from '../../../hooks/useFetch';
+import useFetch from '../../hooks/useFetch';
-import TextInputBar from '../../common/TextInputBar';
+import TextInputBar from '../common/TextInputBar';
 
 
 interface CategorySelectorModalProps{

components/expense/DateSelectorButton.tsx

@@ -1,8 +1,8 @@
 import { View, Text, StyleSheet, TouchableOpacity, TouchableOpacityProps } from 'react-native'
 import React, { useState } from 'react'
-import { useTheme } from '../../../app/contexts/ThemeContext';
+import { useTheme } from '../../app/contexts/ThemeContext';
-import { SIZES } from '../../../constants/theme';
+import { SIZES } from '../../constants/theme';
-import { SimpleDate } from '../../../util/SimpleDate';
+import { SimpleDate } from '../../util/SimpleDate';
 import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
 
 interface DateSelectorProps extends ViewProps {

components/index.tsx

@@ -4,9 +4,9 @@ import Welcome from "./home/Welcome"
 import ExpenseItem from "./home/expenseItem"
 
 //home/addItem
-import CategorySelector from "./home/addItem/CategorySelector"
+import CategorySelector from "./expense/CategorySelector"
-import CategorySelectorModal from "./home/addItem/CategorySelectorModal"
+import CategorySelectorModal from "./expense/CategorySelectorModal"
-import DateSelectorButton from "./home/addItem/DateSelectorButton"
+import DateSelectorButton from "./expense/DateSelectorButton"
 
 //common
 import CustomCard from "./common/CustomCard"

hooks/useFetch.ts

@@ -4,11 +4,31 @@ import { executeQuery } from "../services/database";
 
 const useFetch = (query: Query) => {
 
-    const [isLoading, setIsLoading] = useState(false);
+    const [fetchState, setFetchState] = useState<{
-    const [data, setData] = useState<{[column: string]: any;}[]>([]);
+        data: {[column: string]: any;}[];
-    const [isEmptyResult, setIsEmptyResult] = useState<boolean | undefined>(undefined);
+        isLoading: boolean;
+        isEmptyResult: boolean | undefined;
+    }>({
+        data: [],
+        isLoading: false,
+        isEmptyResult: undefined
+    });
+
+    const setIsLoading = (isLoading: boolean) => {
+        setFetchState((prevState) => ( {...prevState, isLoading} ));
+    }
+
+    const setData = (data: {[column: string]: any;}[]) => {
+        setFetchState((prevState) => ( {...prevState, data} ));
+    }
+
+    const setIsEmptyResult = (isEmptyResult: boolean) => {
+        setFetchState((prevState) => ( {...prevState, isEmptyResult} ));
+    }
+
 
     const reFetch = () => {
+        console.log("refetch called")
         setIsLoading(true);
         executeQuery(query).then((result) => {
             if("rows" in result[0]) {
@@ -16,6 +36,7 @@ const useFetch = (query: Query) => {
                 if(result[0]["rows"].length == 0){
                     setIsEmptyResult(true);
                 }
+                console.log("len", result[0]["rows"].length)
             }
         }).catch((error: any) => {
             console.error("Fetching data from database has failed: ", error);
@@ -28,7 +49,7 @@ const useFetch = (query: Query) => {
         reFetch();
     }, [])
 
-    return {data, isLoading, reFetch, isEmptyResult};
+    return {...fetchState, reFetch};
 }
 
 export default useFetch;

services/database.ts

@@ -57,7 +57,7 @@ export const addCategory = async (name: string, color: string, type: string, all
 export const updateExpense = async (guid: string, name: string, category_guid: string, datetime: string, amount: number) => {
 
     //needs user input validation for type and color (should be validated by this function)
-
+    console.log("update expense called")
     try {
         await db.transactionAsync(async (tx) => {
             await tx.executeSqlAsync("UPDATE expense SET name = ?, category_guid = ?, datetime = ?, amount = ? WHERE guid = ?", [name, category_guid, datetime, amount, guid]
@@ -67,6 +67,7 @@ export const updateExpense = async (guid: string, name: string, category_guid: s
         console.log("Error updating expense: ", error);
         throw error;
     }
+    console.log("update expense finished")
 };
 
 export const addExpense = async (name: string, category_guid: string, datetime: string, amount: number) => {