theme and title functionality

App.tsx

@@ -1,5 +1,5 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, View} from 'react-native';
+import { StyleSheet, View, Appearance} from 'react-native';
 import { NativeRouter, Route, Routes } from "react-router-native";
 import Navbar from './components/Navbar';
 import Home from './routes/Home';
@@ -7,31 +7,87 @@ import Movies from './routes/Movies';
 import Shows from './routes/Shows';
 import Other from './routes/Other';
 import Settings from './routes/Settings';
-import {darkTheme, lightTheme} from './lib/theme';
+import {dark, light} from './lib/theme';
 import { useEffect, useState } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import TitleBar from './components/TitleBar';
 
+const findTheme = async () => {
+  const theme = await AsyncStorage.getItem('theme');
+  if(theme === 'dark') {
+    return dark;
+  } else if(theme === 'light') {
+    return light;
+  } else {
+    const system = Appearance.getColorScheme();
+    if (system === 'dark') {
+    return dark;
+    } else {
+      return light;
+    }
+  }
+}
+
+const findThemeMode = async () => {
+  const theme = await AsyncStorage.getItem('theme');
+  if (theme){
+    return theme;
+  } else {
+    return 'auto';
+  }
+}
 
 export default function App() {
-  let [theme, setTheme] = useState(darkTheme);
+  let [theme, setTheme] = useState(light);
+  let [themeMode, setThemeMode] = useState('auto');
+  let [title, setTitle] = useState('Home');
 
-  const changeTheme = () => {
+  useEffect(() => {
-    if (theme === darkTheme){
+    const fetchData = async () => {
-      setTheme(lightTheme);
+      const theme = await findTheme();
+      const themeMode = await findThemeMode();
+      setTheme(theme);
+      setThemeMode(themeMode);
+    }
+    fetchData()
+  }, []);
+  
+  const changeTheme = async (mode:string ) => {
+    switch(mode) {
+      case 'dark':
+        setThemeMode('dark');
+        setTheme(dark);
+        await AsyncStorage.setItem('theme', 'dark');
+        break;
+      case 'light':
+        setThemeMode('light');
+        setTheme(light);
+        await AsyncStorage.setItem('theme', 'light');
+        break;
+      default:
+        setThemeMode('auto');
+        const system = Appearance.getColorScheme();
+        if (system === 'dark') {
+          setTheme(dark);
         } else {
-      setTheme(darkTheme);
+          setTheme(light);
+        }
+        await AsyncStorage.setItem('theme', "auto");
+        break;
     }
   }
   return (
     <View style={{...styles.mainContainer, backgroundColor: theme.background}}>
+      <TitleBar title={title} theme={theme}/>
       <NativeRouter>
           <Routes>
             <Route path="/" element={<Home theme={theme}/>}/>
             <Route path="/movies" element={<Movies theme={theme}/>} />
             <Route path="/shows" element={<Shows theme={theme}/>} />
             <Route path="/other" element={<Other theme={theme}/>} />
-            <Route path="/settings" element={<Settings theme={theme} changeTheme={changeTheme}/>} />
+            <Route path="/settings" element={<Settings theme={theme} changeTheme={changeTheme} themeMode={themeMode}/>} />
           </Routes>
-          <Navbar theme={theme}/>
+          <Navbar theme={theme} setTitle={setTitle}/>
           <StatusBar style={theme.statusbar} />
       </NativeRouter>
     </View>
@@ -43,7 +99,7 @@ export default function App() {
 
 const styles = StyleSheet.create({
   mainContainer: {
-    paddingTop: 40,
+    paddingTop: 0,
     flex: 1,
     flexDirection: 'column',
     alignItems: 'baseline',