feat: new expense navigation

app/(tabs)/home/_layout.tsx

@@ -0,0 +1,16 @@
+import { Stack } from "expo-router";
+
+import { View, Text } from 'react-native'
+import React from 'react'
+
+export default function _Layout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{
+        title: "test",
+        headerShown: false,
+      }}/>
+      <Stack.Screen name="addItem"/>
+    </Stack>
+  )
+}

app/(tabs)/home/addItem.tsx

@@ -0,0 +1,10 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+
+export default function addItem() {
+  return (
+    <View>
+      <Text>addItem</Text>
+    </View>
+  )
+}

app/(tabs)/home/index.tsx

@@ -0,0 +1,78 @@
+import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+import { useThemeColor } from "../../../hooks/hooks";
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { ExpenseItem, Plus, Welcome, SearchBar } from '../../../components';
+import { FlatList, TextInput} from 'react-native-gesture-handler';
+import { useRef, useState, useEffect } from 'react';
+import React from 'react';
+import { useRouter } from "expo-router"
+
+export default function Page() {
+    const router = useRouter()
+
+    const [plusShow, setPlusShow] = useState(true);
+    const prevOffset = useRef(0);
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        text: {
+            color: useThemeColor("color"),
+            fontSize: 70,
+            fontWeight: "bold"
+        }
+    });
+
+    const profile = require("../../../assets/images/profile.jpg")
+
+    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>)=>{
+        const currentOffset = event.nativeEvent.contentOffset.y >= 0 ? event.nativeEvent.contentOffset.y : 0
+        const isScrollingUp : boolean = currentOffset <= prevOffset.current;
+        const isTop : boolean = currentOffset === 0
+        prevOffset.current = currentOffset
+        setPlusShow(isScrollingUp || isTop)
+    }
+   
+    const data = [
+        {id:"1",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"1 Super fancy spending with long name that will not display", value: "€ 30,00"},
+        {id:"2",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"2 Super fancy spending", value: "€ 30,00"},
+        {id:"3",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"3 Super fancy spending", value: "€ 30,00"},
+        {id:"4",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"4 Super fancy spending", value: "€ 30,00"},
+        {id:"5",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"5 Super fancy spending", value: "€ 30,00"},
+        {id:"6",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"6 Super fancy spending with long name that will not display", value: "€ 30,00"},
+        {id:"7",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"7 Super fancy spending", value: "€ 30,00"},
+        {id:"8",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"8 Super fancy spending", value: "€ 30,00"},
+        {id:"9",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"9 Super fancy spending", value: "€ 30,00"},
+        {id:"10" ,category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"10 Super fancy spending", value: "€ 30,00"},
+        {id:"11" ,category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"11 Super fancy spending", value: "€ 30,00"},
+        {id:"12" ,category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"12 Super fancy spending", value: "€ 30,00"},
+    ]
+
+
+    return (
+        <View style={{flex: 1}}>
+           {plusShow && <Plus onPress={()=>{
+                router.push("/(tabs)/home/addItem")
+           }}/>}
+
+            <FlatList
+            data={data}
+            ListHeaderComponent={
+                <>
+                    <Welcome name="My Dude" image={profile} onPress={()=>console.log("hello")}></Welcome>
+                    <SearchBar placeholder='Type to Search...'></SearchBar>
+                </>
+            }
+            renderItem = {({item}) => <ExpenseItem category={item.category} color={item.color} date={item.date} title={item.title} value={item.value}/>}
+            keyExtractor={item => item.id}
+            ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
+            onScroll={handleScroll}
+            scrollEventThrottle={20}
+            >
+            </FlatList>            
+        </View>
+        
+    );
+}