feat: HomeScreen Plus Symbol. (Not functional)

app/index.tsx

@@ -1,12 +1,14 @@
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
 import { useThemeColor } from "../hooks/hooks";
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { ExpenseItem } from '../components';
+import { ExpenseItem, Plus } from '../components';
 import { FlatList } from 'react-native-gesture-handler';
-import { ExpenseItemProps } from '../components/home/expenseItem/expenseItem';
+import { useRef, useState } from 'react';
 
 export default function Page() {
 
+    const [plusShow, setPlusShow] = useState(true);
+    const prevOffset = useRef(0);
     const styles = StyleSheet.create({
         container: {
             flex: 1,
@@ -19,6 +21,14 @@ export default function Page() {
             fontWeight: "bold"
         }
     });
+
+    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:"Super fancy sepnding with long name that will not display", value: "€ 30,00"},
@@ -38,14 +48,18 @@ export default function Page() {
 
     return (
         <SafeAreaView>
+           {plusShow && <Plus/>}
             <FlatList
             data={data}
             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>
+            
         </SafeAreaView>
+        
     );
 }