feat: profile and greetings

app/index.tsx

@@ -1,9 +1,9 @@
-import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent, SafeAreaView } from 'react-native';
 import { useThemeColor } from "../hooks/hooks";
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { ExpenseItem, Plus, Welcome } from '../components';
-import { ExpenseItem, Plus } from '../components';
 import { FlatList } from 'react-native-gesture-handler';
 import { useRef, useState } from 'react';
+import React from 'react';
 
 export default function Page() {
 
@@ -22,6 +22,8 @@ export default function Page() {
         }
     });
 
+    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;
@@ -47,8 +49,10 @@ export default function Page() {
 
 
     return (
-        <SafeAreaView>
+        <SafeAreaView style={{flex: 1}}>
            {plusShow && <Plus/>}
+            <Welcome name="My User" image={profile} onPress={()=>console.log("hello")}></Welcome>
+
             <FlatList
             data={data}
             renderItem = {({item}) => <ExpenseItem category={item.category} color={item.color} date={item.date} title={item.title} value={item.value}/>}
@@ -56,6 +60,7 @@ export default function Page() {
             ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
             onScroll={handleScroll}
             scrollEventThrottle={20}
+            style={{paddingBottom: 5}}
             >
             </FlatList>
             

components/home/Welcome/Welcome.tsx

@@ -0,0 +1,66 @@
+import { View, Text, ViewProps, Image, GestureResponderEvent } from 'react-native'
+import React from 'react'
+import { MARGINS, SIZES, SHADOWS } from '../../../constants/theme'
+import { TouchableOpacity } from 'react-native-gesture-handler'
+
+type WelcomeProps = ViewProps & {name: string, image : any, onPress: () => void | undefined}
+
+function formatDate(date: Date) : string {
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = String(date.getFullYear())
+  return `${day}.${month}.${year}`
+}
+
+function getTimeOfDay(date: Date) : string {
+  const hour = date.getHours()
+  if(hour < 12){
+    return "morning"
+  } else if(hour >= 12 && hour < 18){
+    return "afternoon"
+  } else if(hour >= 18){
+    return "evening"
+  }
+  return "day"
+}
+
+
+
+export default function Welcome(props: WelcomeProps) {
+  const date = new Date()
+  const dateString = formatDate(date)
+  const timeOfDay = getTimeOfDay(date)
+  const onpress = props.onPress
+
+  return (
+    <View style={{
+      marginVertical: 20,
+      marginHorizontal: MARGINS.normal,
+    }}>
+      <View style={{
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between"
+      }}>
+        <TouchableOpacity onPress={onpress}>
+          <Image style={{
+            height: 60,
+            width: 60,
+            borderRadius: 200,
+            
+          }} source={props.image} height={60} width={60} resizeMode='cover'></Image>
+        </TouchableOpacity>
+        <Text style={{
+          fontSize: SIZES.xlarge,
+        }}>{dateString}</Text>
+      </View>
+      <View style={{
+        paddingTop: 10,
+      }}>
+        <Text style={{
+          fontSize: SIZES.xlarge,
+        }}>Good {timeOfDay}, {props.name}</Text>
+        </View>
+    </View>
+  )
+}

components/index.jsx

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

constants/theme.ts

@@ -2,9 +2,14 @@ const SIZES = {
   small: 12,
   normal: 17,
   large: 20,
+  xlarge: 25,
   xxLarge: 30
 }
 
+const MARGINS = {
+  normal: 10
+}
+
 const SHADOWS = {
   light: {
     shadowColor: "#ADB7C3",
@@ -15,4 +20,4 @@ const SHADOWS = {
   }
 }
 
-export {SIZES, SHADOWS}
+export {SIZES, SHADOWS, MARGINS}