theme changes

app/_layout.tsx

@@ -1,32 +1,56 @@
-import { Tabs } from 'expo-router/tabs';
-import {HeaderTitle} from "@react-navigation/elements";
+import { Tabs } from "expo-router/tabs";
+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 styles = StyleSheet.create({
+        sceneContainer: {
+            backgroundColor: backgroundColor,
+            position: "absolute",
+        },
+        view: {
+            backgroundColor: "red",
+        }
+    });
+
+    const screenOptions = {
+            tabBarActiveTintColor: selectedColor,
+            tabBarInactiveTintColor: defaultColor,
+            headerShown: false,
+    }
+
     return (
-        <Tabs initialRouteName={"index"}>
+        <Tabs sceneContainerStyle={styles.sceneContainer} initialRouteName={"index"} screenOptions={{tabBarBackground: () => {
+            return <View style={styles.view}/>;
+        }}}>
             <Tabs.Screen name="budget" options={
                 {
                     tabBarLabel: "Budget",
-                    tabBarIcon: ({ color, size }) => (
+                    tabBarIcon: ({size, color}) => (
                         <FontAwesome name="money" size={size} color={color}/>),
                 }
             }/>
             <Tabs.Screen name="index" options={
                 {
                     tabBarLabel: "Home",
-                    tabBarIcon: ({ color, size }) => (
+                    tabBarIcon: ({size, color}) => (
                         <FontAwesome name="home" size={size} color={color}/>),
                 }
             }/>
             <Tabs.Screen name="stats" options={
                 {
                     tabBarLabel: "Stats",
-                    tabBarIcon: ({ color, size }) => (
+                    tabBarIcon: ({size, color}) => (
                         <FontAwesome name="bar-chart" size={size} color={color}/>),
                 }
             }/>
         </Tabs>
         );
-}
+}

app/index.tsx

@@ -1,10 +1,9 @@
-import { StyleSheet } from 'react-native';
-import { View, Text } from "../components/themed-components";
+import { StyleSheet, View, Text } from 'react-native';
 
 export default function Page() {
     return (
-        <View>
-            <Text>Home</Text>
+        <View style={styles.container}>
+            <Text style={styles.text}>Home</Text>
         </View>
         );
 }
@@ -16,6 +15,7 @@ const styles = StyleSheet.create({
         justifyContent: "center",
     },
     text: {
-        color: "#ffffff",
+        fontSize: 70,
+        fontWeight: "bold"
     }
 });

components/themed-components.tsx

@@ -1,47 +0,0 @@
-import { Text as DefaultText, View as DefaultView, useColorScheme} from "react-native";
-import colors from "../constants/colors";
-
-type ThemeProperties = {
-    lightColor?: string;
-    darkColor?: string;
-};
-
-/**
- * It is a TypeScript intersection type encompassing both ThemeProperties and DefaultReactComponent properties.
- */
-export type TextProperties = ThemeProperties & DefaultText["props"];
-export type ViewProperties = ThemeProperties & DefaultView["props"];
-
-
-/**
- * This function 'useThemeColor' allows you to apply different colors for light and dark theme mode in a React Native application.
- * The function takes a 'properties' object (with possible 'light' and 'dark' properties representing color strings) and 'colorName' - a key from predefined colors for both 'light' and 'dark' mode.
- * The function first checks the current color scheme using the 'useColorScheme' hook from React Native, defaulting to 'light' mode if none is defined. 
- * If no color is specified in 'properties' for current theme, the function falls back to returning a color corresponding to the provided 'colorName' from the predefined 'colors' object for the current theme.
-*/
-export function useThemeColor(
-    properties: {light?: string, dark?: string},
-    colorName: keyof typeof colors.light & keyof typeof colors.dark
-) {
-    const theme = useColorScheme() ?? "light";
-    const colorFromProps = properties[theme];
-    
-    if(colorFromProps) {
-        return colorFromProps;
-    }
-    return colors[theme][colorName];
-}
-
-export function Text(properties: TextProperties) {
-    const { style, lightColor, darkColor, ...otherProps } = properties;
-    const color = useThemeColor({ light: lightColor, dark: darkColor }, "color");
-    
-    return <DefaultText style={[{ color }, style]} {...otherProps} />
-}
-
-export function View(properties: TextProperties) {
-    const { style, lightColor, darkColor, ...otherProps } = properties;
-    const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, "backgroundColor");
-    
-    return <DefaultView style={[{backgroundColor}, style]} {...otherProps}/>
-}

constants/colors.ts

@@ -1,18 +1,20 @@
 export default {
     light: {
-        tabIconDefault: "",
-        tabIconSelected: "",
-        color: "#15616d",
+        tabIconDefault: "gray",
+        tabIconSelected: "orange",
+        color: "orange",
         contrastColor: "",
         accentColor: "",
-        backgroundColor: "#ffecd1",
+        backgroundColor: "#ffffff",
+        tabBarColor: "gray",
     },
     dark: {
-        tabIconDefault: "",
-        tabIconSelected: "",
+        tabIconDefault: "gray",
+        tabIconSelected: "orange",
         color: "#1B9AAA",
         contrastColor: "",
         accentColor: "",
-        backgroundColor: "#050505",
+        backgroundColor: "lightgray",
+        tabBarColor: "gray",
     }
 }

hooks/hooks.ts

@@ -0,0 +1,7 @@
+import { useColorScheme } from "react-native";
+import colors from "../constants/colors"
+
+export function useThemeColor(colorName: keyof typeof colors.light & keyof typeof colors.dark): string {
+    const theme = useColorScheme() ?? "light";
+    return colors[theme][colorName];
+}