Merge branch '5-budget' into 'main'

Resolve "Budget"

Closes #5

See merge request thschleicher/interaktive-systeme!25

app/(tabs)/_layout.tsx

@@ -16,10 +16,11 @@ export default function Layout() {
 
     const styles = StyleSheet.create({
         sceneContainer: {
-            backgroundColor: useThemeColor("backgroundColor"),
+            backgroundColor: useThemeColor("containerColor"),
         },
         tabBar: {
             backgroundColor: useThemeColor("backgroundColor"),
+            borderTopColor: useThemeColor("backgroundColor"),
         }
     });
 
@@ -42,6 +43,7 @@ export default function Layout() {
                     tabBarLabel: "Budget",
                     tabBarIcon: ({size, color}) => (
                         <FontAwesome name="money" size={size} color={color}/>),
+                    unmountOnBlur: true,
                 }
             }/>
             <Tabs.Screen name="home" options={
@@ -58,6 +60,7 @@ export default function Layout() {
                     tabBarLabel: "Stats",
                     tabBarIcon: ({size, color}) => (
                         <FontAwesome name="bar-chart" size={size} color={color}/>),
+                    unmountOnBlur: true,
                 }
             }/>
         </Tabs>

app/(tabs)/budget/index.tsx

@@ -1,27 +1,28 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView, StyleSheet, Switch, Text } from 'react-native';
-import { deleteExpenses } from '../../../services/database';
 
 export default function Page() {
 
-    return (
+    const styles = StyleSheet.create({
-    <View style={styles.container}>
+        container: {
-        <Text style={styles.text} onPress={() => {
+            flex: 1,
-            deleteExpenses().then(() => {
+            justifyContent: 'center',
-                console.log("Expenses Deleted!");
+            alignItems: 'center',
-            })
+        },
-        }}>Reset Expenses</Text>
+        switch: {
-    </View>);
+            transform: [{ scaleX: 1.3 }, { scaleY: 1.3 }],
-}
+        },
+        text: {
+            color: "red",
+            fontSize: 40,
+        }
+    });
 
-const styles = StyleSheet.create({
+    // const {data, isLoading, reFetch} = useFetch();
-    container: {
+
-        flex: 1,
+    return (
-        justifyContent: 'center',
+        <SafeAreaView>
-        alignItems: 'center',
+            <Text style={styles.text}>Hallo wo bin ich?!</Text>
-    },
+            <Switch style={styles.switch}/>
-    text: {
+        </SafeAreaView>
-        textAlign: 'center',
+    );
-        fontSize: 40,
+}
-        color: "red",
-    }
-});

app/(tabs)/home/index.tsx

@@ -15,7 +15,7 @@ export default function Page() {
     const styles = StyleSheet.create({
         safeAreaViewStyle: {
             flex: 1,
-            backgroundColor: useThemeColor("backgroundColor")
+            backgroundColor: useThemeColor("containerColor"),
         },
         container: {
             flex: 1,

app/(tabs)/stats/index.tsx

@@ -1,5 +1,28 @@
-import { Text } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+import { deleteExpenses } from '../../../services/database';
 
 export default function Page() {
-    return <Text>Stats Page</Text>;
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        text: {
+            textAlign: 'center',
+            fontSize: 40,
+            color: "red",
+        }
+    });
+
+
+
+    return (
+    <View style={styles.container}>
+        <Text style={styles.text} onPress={() => {
+            deleteExpenses().then(() => {
+                console.log("Expenses Deleted!");
+            })
+        }}>Reset Expenses</Text>
+    </View>);
 }

components/common/CustomCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'
-import { useThemeColor } from '../../../hooks/useThemeColor'
+import { useThemeColor } from '../../hooks/useThemeColor'
 
 function generateBoxShadowStyle(
   xOffset: number,

components/common/SearchBar.tsx

@@ -1,8 +1,8 @@
 import { AntDesign } from '@expo/vector-icons';
 import React from 'react';
 import { StyleSheet, TextInput, TouchableOpacity, View, ViewProps } from 'react-native';
-import { SIZES } from '../../../constants/theme';
+import { SIZES } from '../../constants/theme';
-import { useThemeColor } from '../../../hooks/useThemeColor';
+import { useThemeColor } from '../../hooks/useThemeColor';
 
 type SearchBarProps = {placeholder: string} & ViewProps
 

components/common/plus.tsx

@@ -1,7 +1,7 @@
 import { AntDesign } from '@expo/vector-icons'
 import React from 'react'
 import { StyleSheet, TouchableOpacity, ViewProps } from 'react-native'
-import { useThemeColor } from '../../../hooks/useThemeColor'
+import { useThemeColor } from '../../hooks/useThemeColor'
 
 type PlusProps = ViewProps & {onPress? : ()=> void | undefined}
 

components/home/expenseItem/expenseItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ColorValue, StyleSheet, Text, View } from 'react-native';
 import { SIZES } from '../../../constants/theme';
 import { useThemeColor } from '../../../hooks/useThemeColor';
-import CustomCard from "../../common/customCard/CustomCard";
+import CustomCard from "../../common/CustomCard";
 
 export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
 export default function ExpenseItem(itemProps : ExpenseItemProps) {