theme and routing

App.tsx

@@ -1,21 +1,50 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View} from 'react-native';
+import { NativeRouter, Route, Routes } from "react-router-native";
+import Navbar from './components/Navbar';
+import Home from './routes/Home';
+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 { useEffect, useState } from 'react';
+
 
 export default function App() {
-  const stuff:unknown = {}
+  let [theme, setTheme] = useState(darkTheme);
+
+  const changeTheme = () => {
+    if (theme === darkTheme){
+      setTheme(lightTheme);
+    } else {
+      setTheme(darkTheme);
+    }
+  }
   return (
-    <View style={styles.container}>
+    <View style={{...styles.mainContainer, backgroundColor: theme.background}}>
-      <Text>Open up App.js to start working on your app!</Text>
+      <NativeRouter>
-      <StatusBar style="auto" />
+          <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}/>} />
+          </Routes>
+          <Navbar theme={theme}/>
+          <StatusBar style={theme.statusbar} />
+      </NativeRouter>
     </View>
   );
 }
 
+
+
+
 const styles = StyleSheet.create({
-  container: {
+  mainContainer: {
+    paddingTop: 40,
     flex: 1,
-    backgroundColor: '#fff',
+    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
-});
+});