some small work on the budget screen

app/(tabs)/budget/index.tsx

@@ -1,4 +1,8 @@
-import { SafeAreaView, StyleSheet, Switch, Text } from 'react-native';
+import { SafeAreaView, StyleSheet, Text } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+import { SearchBar } from '../../../components';
+import CategoryItem from '../../../components/budget/categoryItem';
+import useFetch from '../../../hooks/useFetch';
 
 export default function Page() {
 
@@ -8,21 +12,27 @@ export default function Page() {
             justifyContent: 'center',
             alignItems: 'center',
         },
-        switch: {
-            transform: [{ scaleX: 1.3 }, { scaleY: 1.3 }],
-        },
         text: {
             color: "red",
             fontSize: 40,
         }
     });
 
-    // const {data, isLoading, reFetch} = useFetch();
+    const {data, isLoading, reFetch} = useFetch();
 
     return (
-        <SafeAreaView>
-            <Text style={styles.text}>Hallo wo bin ich?!</Text>
-            <Switch style={styles.switch}/>
+        <SafeAreaView style={styles.container}>
+            <Text style={styles.text}>Expense View</Text>
+            <SearchBar placeholder='Nothing'></SearchBar>
+            
+            
+            <FlatList 
+            data={data} 
+            renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}>
+
+            </FlatList>
+
+            
         </SafeAreaView>
     );
 }