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

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: {}
+})