Fix: refresh

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

@@ -51,8 +51,7 @@ export default function Page() {
                         router.back();
                     }}/>
                     <NavigationButton text="Save" onPress={() => {
-                        addCategory(categoryName, categoryColor, selectedType, amount);
-                        router.back();
+                        addCategory(categoryName, categoryColor, selectedType, amount).then(() => router.back());
                     }}/> 
                 </View>
             </View>

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

@@ -1,20 +1,19 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useIsFocused } from '@react-navigation/native';
 import { router, useNavigation } from 'expo-router';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { BudgetHeader, CategoryItem, LoadingSymbol, Plus } from '../../../components';
 import useFetch from '../../../hooks/useFetch';
 import { useTheme } from '../../contexts/ThemeContext';
+import { useFocusEffect } from 'expo-router/src/useFocusEffect';
 
 export default function Page() {
     const {colors} = useTheme()
     const containerColor = colors.containerColor;
     const navigation = useNavigation();
     const [selectedPage, setSelectedPage] = useState("noPageLoaded");
-    const isFocused = useIsFocused();
 
     useEffect(() => {
         AsyncStorage.getItem("currentBudgetPage").then((page) => {
@@ -24,14 +23,23 @@ export default function Page() {
         }).catch((error) => {
             console.log("Error fetching previous page from Async Storage:", error);
         })
-    }, [isFocused]);
+    }, []);
 
     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]);
 
+    useEffect(() => {
+        const unsubscribe = navigation.addListener("focus", () => {
+            reFetch();
+        })
+        return unsubscribe;
+    
+    }, [navigation])
+
+
     const handlePageSelection = (page: string) => {
         if(page !== selectedPage) {
             setSelectedPage(page);

app/(tabs)/_layout.tsx

@@ -34,7 +34,7 @@ export default function Layout() {
     }
 
     return (
-        <Tabs sceneContainerStyle={styles.sceneContainer} screenOptions={screenOptions}>
+        <Tabs sceneContainerStyle={styles.sceneContainer} backBehavior="initialRoute" initialRouteName="(home)" screenOptions={screenOptions}>
             <Tabs.Screen name="(budget)" options={
                 {
                     tabBarLabel: "Budget",