Merge branch 'experimentation'

app/_layout.tsx

@@ -0,0 +1,56 @@
+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 sceneContainerStyle={styles.sceneContainer} initialRouteName={"index"} screenOptions={{tabBarBackground: () => {
+            return <View style={styles.view}/>;
+        }}}>
+            <Tabs.Screen name="budget" options={
+                {
+                    tabBarLabel: "Budget",
+                    tabBarIcon: ({size, color}) => (
+                        <FontAwesome name="money" size={size} color={color}/>),
+                }
+            }/>
+            <Tabs.Screen name="index" options={
+                {
+                    tabBarLabel: "Home",
+                    tabBarIcon: ({size, color}) => (
+                        <FontAwesome name="home" size={size} color={color}/>),
+                }
+            }/>
+            <Tabs.Screen name="stats" options={
+                {
+                    tabBarLabel: "Stats",
+                    tabBarIcon: ({size, color}) => (
+                        <FontAwesome name="bar-chart" size={size} color={color}/>),
+                }
+            }/>
+        </Tabs>
+        );
+}

app/budget.tsx

@@ -0,0 +1,5 @@
+import { Text } from 'react-native';
+
+export default function Page() {
+    return <Text>Budget Page</Text>;
+}

app/index.tsx

@@ -0,0 +1,21 @@
+import { StyleSheet, View, Text } from 'react-native';
+
+export default function Page() {
+    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"
+    }
+});

app/stats.tsx

@@ -0,0 +1,5 @@
+import { Text } from 'react-native';
+
+export default function Page() {
+    return <Text>Stats Page</Text>;
+}