Small Changes (delete index.js)

app/_layout.tsx

@@ -3,20 +3,19 @@ import {StyleSheet, View} from "react-native"
 
 import { FontAwesome } from "@expo/vector-icons";
 import {useThemeColor} from "../hooks/hooks";
-import {color} from "ansi-fragments";
 
 export default function Layout() {
     const selectedColor: string = useThemeColor( "tabIconSelected");
     const defaultColor: string = useThemeColor("tabIconDefault");
     const backgroundColor: string = useThemeColor("backgroundColor");
+    const tabBarColor: string = useThemeColor("tabBarColor");
 
     const styles = StyleSheet.create({
         sceneContainer: {
             backgroundColor: backgroundColor,
-            position: "absolute",
         },
-        view: {
+        tabBar: {
-            backgroundColor: "red",
+            backgroundColor: tabBarColor,
         }
     });
 
@@ -24,12 +23,11 @@ export default function Layout() {
             tabBarActiveTintColor: selectedColor,
             tabBarInactiveTintColor: defaultColor,
             headerShown: false,
+            tabBarStyle: styles.tabBar,
     }
 
     return (
-        <Tabs sceneContainerStyle={styles.sceneContainer} initialRouteName={"index"} screenOptions={{tabBarBackground: () => {
+        <Tabs sceneContainerStyle={styles.sceneContainer} initialRouteName={"index"} screenOptions={screenOptions}>
-            return <View style={styles.view}/>;
-        }}}>
             <Tabs.Screen name="budget" options={
                 {
                     tabBarLabel: "Budget",

app/index.tsx

@@ -1,21 +1,25 @@
 import { StyleSheet, View, Text } from 'react-native';
+import {useThemeColor} from "../hooks/hooks";
 
 export default function Page() {
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        text: {
+            color: useThemeColor("color"),
+            fontSize: 70,
+            fontWeight: "bold"
+        }
+    });
+
+
     return (
         <View style={styles.container}>
             <Text style={styles.text}>Home</Text>
         </View>
         );
-}
+}
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    text: {
-        fontSize: 70,
-        fontWeight: "bold"
-    }
-});

constants/colors.ts

@@ -1,20 +1,32 @@
 export default {
     light: {
+        primaryText: "#000000",
+        secondaryText: "#404040",
+        interactiveText: "#0645AD",
+
+
+
         tabIconDefault: "gray",
-        tabIconSelected: "orange",
+        tabIconSelected: "#ED7D31",
-        color: "orange",
+        color: "#000000",
-        contrastColor: "",
+        accentColor: "#ED7D31",
-        accentColor: "",
         backgroundColor: "#ffffff",
         tabBarColor: "gray",
     },
     dark: {
-        tabIconDefault: "gray",
+        // Text
-        tabIconSelected: "orange",
+        primaryText: "#FFFFFF",
-        color: "#1B9AAA",
+        secondaryText: "#B3B3B3",
-        contrastColor: "",
+        interactiveText: "#0645AD",
-        accentColor: "",
+
-        backgroundColor: "lightgray",
+        // Tabs
-        tabBarColor: "gray",
+        tabIconDefault: "#FFFFFF",
+        tabIconSelected: "#ED7D31",
+
+        // 
+        color: "#FFFFFF",
+        accentColor: "#ED7D31",
+        backgroundColor: "#181818",
+        tabBarColor: "#121212",
     }
 }

index.js

@@ -1 +0,0 @@
-import "expo-router/entry";