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>
+        
     );
 }

components/common/plus/plus.tsx

@@ -0,0 +1,28 @@
+import { View, Text, ViewProps, StyleSheet } from 'react-native'
+import { AntDesign } from '@expo/vector-icons'
+import React from 'react'
+
+const Plus = (props : ViewProps) => {
+  return (
+    <View style={[style.plus, props.style]}>
+      {props.children}
+      <AntDesign name='plus' color={"white"} size={20}></AntDesign>
+  </View>
+  )
+}
+const style = StyleSheet.create({
+    plus:{
+      position: "absolute",
+      right: 20,
+      bottom: 20,
+      zIndex: 1,
+      backgroundColor: "orange",
+      padding: 20,
+      borderRadius: 500,
+      height: 60,
+      width: 60,
+      alignItems: 'center',
+      justifyContent: "center"
+    }
+})
+export default Plus

components/index.jsx

@@ -1,7 +1,11 @@
 //home
 import ExpenseItem from "./home/expenseItem/expenseItem"
 
+//common
+import Plus from "./common/plus/plus"
+
 export {
-  ExpenseItem
+  ExpenseItem,
+  Plus
 }