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

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

@@ -0,0 +1,34 @@
+import { Stack } from "expo-router";
+
+import { View, Text } from 'react-native'
+import React from 'react'
+import { useTheme } from "../../contexts/ThemeContext";
+
+
+export default function _Layout() {
+  const { colors } = useTheme();
+  return (
+    <Stack 
+      initialRouteName="index"
+      screenOptions={{
+      contentStyle: {
+        backgroundColor:colors.containerColor,
+      },
+      headerStyle: {
+        backgroundColor: colors.containerColor
+      },
+      headerTintColor: colors.primaryText
+
+    }}>
+      <Stack.Screen name="index" options={{
+        title: "test",
+        headerShown: false,
+      }}/>
+      <Stack.Screen name="userSettings" options={{
+        animation: "slide_from_left",
+        title: "User Settings",
+        headerShown: false,
+      }}/>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,149 @@
+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';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { ExpenseItem, LoadingSymbol, Plus, TextInputBar, Welcome } from '../../../components';
+import useFetch from '../../../hooks/useFetch';
+
+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 {
+    dots?:{color:string, selectedColor?:string, key?:string}[];
+} 
+
+type MarkedDates  = {
+    [key: string]: MarkingProps;
+}
+
+const constructMarkedDates = (data : {[column: string]: any}) => {
+    let markedDates: MarkedDates = {};
+    data.forEach((value: any) => {
+        const dateKey: string = String(value["expense_datetime"]).split(" ")[0]
+
+        if(markedDates[dateKey] === undefined){
+            markedDates[dateKey] = {dots: []}
+        }
+        markedDates[dateKey].dots?.push({color: value["category_color"]})
+    })
+    return markedDates;
+}
+
+export default function Page() {
+    const { colors, theme } = useTheme()
+
+    const navigation = useNavigation();
+    const router = useRouter();
+    const [plusShow, setPlusShow] = useState(true);
+    const prevOffset = useRef(0);
+    
+
+    const profile = require("../../../assets/images/profile.jpg")
+
+    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>)=>{
+        const currentOffset = event.nativeEvent.contentOffset.y >= 0 ? event.nativeEvent.contentOffset.y : 0
+        const isScrollingUp : boolean = currentOffset <= prevOffset.current;
+        const isTop : boolean = currentOffset === 0
+        prevOffset.current = currentOffset
+        setPlusShow(isScrollingUp || isTop)
+    }
+
+    const newExpense = async (title: string, category_guid: string, date: string, amount: number) => {
+        try {
+            await addExpense(title, category_guid, date, amount);
+        } catch (error: any) {
+            console.error("Adding new expense has failed: ", error);
+        }
+    }
+
+    const {data, isLoading, reFetch} = useFetch({sql: "SELECT e.guid AS expense_guid, c.guid AS category_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, c.type AS category_type FROM expense e JOIN category c ON e.category_guid = c.guid ORDER BY expense_datetime desc;", args: []});
+    
+    const expenseDates = useMemo(()=>
+        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("/expense/new");
+
+                // executeQuery({sql: "SELECT guid FROM category", args: []}).then((result) => {
+                //     if("rows" in result[0]) {
+                //         newExpense("Test Title", result[0]["rows"][0]["guid"], "69.69.1234", 100).then(() => {
+                //             reFetch();
+                //         });
+                //     }
+                // })
+            }}/>}
+
+            {isLoading && <LoadingSymbol/>}
+            
+            <FlatList
+            data={data}
+            ListHeaderComponent={
+                <>
+                    <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,
+                        todayTextColor: colors.accentColor,
+                        calendarBackground: colors.containerColor,
+                        arrowColor: colors.accentColor,
+                        monthTextColor: colors.accentColor
+
+                    }}
+                    markingType='multi-dot'
+                    markedDates={expenseDates}
+                    >
+
+                    </Calendar>
+                    <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(`/expense/${guid}`)}}
+            />}
+            keyExtractor={item => item.expense_guid }
+            ItemSeparatorComponent={() => {
+                return (<View style={styles.itemSeperatorStyle}/>);
+            }}
+            refreshControl={
+                <RefreshControl refreshing={isLoading} onRefresh={reFetch}/>
+            }
+            onScroll={handleScroll}
+            scrollEventThrottle={20}
+            />             
+        </SafeAreaView> 
+    );
+}
+
+const styles = StyleSheet.create({
+    safeAreaViewStyle: {
+        flex: 1,
+        paddingHorizontal: 10
+    },
+    itemSeperatorStyle: {
+        marginVertical: 5,
+    }
+});

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

@@ -0,0 +1,110 @@
+import { View, Text, StyleSheet, Image, Appearance } from 'react-native'
+import React, { useState } from 'react'
+import { SIZES } from '../../../constants/theme'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { ButtonSetting, ToggleSetting } from '../../../components'
+import { useTheme } from '../../contexts/ThemeContext'
+import { deleteExpenses, DEV_populateDatabase } from '../../../services/database'
+import { useAuth } from '../../contexts/AuthContext'
+import { TouchableOpacity } from 'react-native-gesture-handler'
+
+
+export default function userSettings() {
+  const {onLogout} = useAuth();
+  const {theme, colors, isSystemTheme, applyTheme, applySystemTheme} = useTheme();
+
+  const backgroundColor = colors.backgroundColor
+  styles.text = {...styles.text, color: colors.primaryText}
+  
+  const [systemTheme, setSystemTheme] = useState<boolean>(isSystemTheme!)
+  const [darkMode, setDarkMode] = useState<boolean>(theme === "dark" ? true : false)
+
+  const handleSystemTheme = () => {
+    const newTheme = darkMode ? "dark" : "light"
+    if(systemTheme){
+      applyTheme!(newTheme)
+    }else{
+      applySystemTheme!()
+    }
+
+    setSystemTheme(prev => !prev)
+    
+  }
+
+  const handleDarkMode = () => {
+    const newTheme = darkMode ? "light" : "dark"
+
+    setDarkMode(prev => !prev)
+    applyTheme!(newTheme);
+  }
+
+
+  return (
+    <SafeAreaView style={[styles.container, {backgroundColor: colors.backgroundColor}]}>
+      <View>
+        <View style={styles.header}>
+          <Image style={{height: 70, width: 70, borderRadius: 200}}source={require("../../../assets/images/profile.jpg")} height={60} width={20} resizeMode='cover'/>
+          <Text style={{fontSize: SIZES.xxLarge, color: colors.primaryText}}>My Profile</Text>
+          <View></View>
+        </View>
+        <View style={styles.settingsContainer}>
+          <ToggleSetting settingsTitle='Use System Theme' value={systemTheme} onChange={handleSystemTheme}/>
+          <ToggleSetting settingsTitle='Dark Mode' disabled={systemTheme} onChange={handleDarkMode} value={darkMode}/>
+          <ButtonSetting settingsTitle='Reset Expenses' onPress={() => {
+            deleteExpenses().then(() => {
+                console.log("Expenses Deleted!");
+            })}}
+            />
+          <ButtonSetting settingsTitle='Populate Database' onPress={() => {
+            const del = async () => {
+              await DEV_populateDatabase()
+            }
+            del()
+          }}/>
+        </View>
+        
+      </View>
+      <View style={styles.bottomNavigation}>
+        <TouchableOpacity onPress={onLogout}>
+          <View style={[styles.button, {backgroundColor: colors.accentColor}]}>
+            <Text style={{fontSize: SIZES.large, color: colors.primaryText}}>Sign Out</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "space-between"
+  },
+
+  header:{
+    flexDirection: 'row',
+    alignItems: "center",
+    justifyContent: "space-between",
+    margin: 10,
+  },
+  settingsContainer: {
+    marginHorizontal: 10
+  },
+
+  upperPart:{
+    flex: 1
+  },
+
+  bottomNavigation:{
+    marginBottom: 20,
+    alignItems:"center"
+
+  },
+  button:{
+    borderRadius: 80,
+    minHeight: 60,
+    justifyContent: "center",
+    paddingHorizontal: 20
+  },
+  text: {}
+})