dummy home screen

src/screens/home/Home.tsx

@@ -1,17 +1,170 @@
-import { StyleSheet, Text, View } from 'react-native'
-import React from 'react'
-import AppView from '../../components/AppView'
-import UserProfileStatus from './UserProfileStatus'
-import colors from '../../components/colors'
+import React from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  TouchableOpacity,
+  FlatList,
+  Image,
+} from "react-native";
+import AppView from "../../components/AppView";
+import UserProfileStatus from "./UserProfileStatus";
+import colors from "../../components/colors";
+import {Ionicons} from "@react-native-vector-icons/ionicons";
+
+const dummyChats = [
+  { id: "1", name: "Amit Sharma", lastMessage: "Sent ₹500", avatar: "https://i.pravatar.cc/100?img=1" },
+  { id: "2", name: "Sneha Patel", lastMessage: "Requested ₹200", avatar: "https://i.pravatar.cc/100?img=2" },
+  { id: "3", name: "Group Savings", lastMessage: "Target reached 🎉", avatar: "https://i.pravatar.cc/100?img=3" },
+];
 
 const Home = () => {
   return (
-      <AppView backgroundColor={colors.pastelPink} barStyle="dark-content">
-        <UserProfileStatus/>
-      </AppView>
-  )
-}
+    <AppView  barStyle="dark-content">
+      <View style={styles.container}>
+        {/* Header */}
+        <View style={styles.header}>
+          <Text style={styles.greeting}>Hello, Pooja 👋</Text>
+          <TouchableOpacity>
+            <Ionicons name="person-circle-outline" size={40} color={colors.primary} />
+          </TouchableOpacity>
+        </View>
 
-export default Home
+        {/* Status */}
+        <UserProfileStatus />
 
-const styles = StyleSheet.create({})
+        {/* Search Bar */}
+        <View style={styles.searchContainer}>
+          <Ionicons name="search" size={20} color={colors.textLight} />
+          <TextInput
+            placeholder="Search chats or funds..."
+            placeholderTextColor={colors.textLight}
+            style={styles.searchInput}
+          />
+        </View>
+
+        {/* Quick Actions */}
+        <View style={styles.quickActions}>
+          <TouchableOpacity style={styles.actionButton}>
+            <Ionicons name="send-outline" size={22} color={colors.primary} />
+            <Text style={styles.actionText}>Send</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.actionButton}>
+            <Ionicons name="cash-outline" size={22} color={colors.primary} />
+            <Text style={styles.actionText}>Request</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.actionButton}>
+            <Ionicons name="time-outline" size={22} color={colors.primary} />
+            <Text style={styles.actionText}>History</Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* Recent Chats / Transactions */}
+        <Text style={styles.sectionTitle}>Recent Activity</Text>
+        <FlatList
+          data={dummyChats}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => (
+            <TouchableOpacity style={styles.chatItem}>
+              <Image source={{ uri: item.avatar }} style={styles.avatar} />
+              <View style={styles.chatInfo}>
+                <Text style={styles.chatName}>{item.name}</Text>
+                <Text style={styles.chatMessage}>{item.lastMessage}</Text>
+              </View>
+              <Ionicons name="chevron-forward-outline" size={20} color={colors.textLight} />
+            </TouchableOpacity>
+          )}
+        />
+      </View>
+    </AppView>
+  );
+};
+
+export default Home;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    // padding: 16,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  greeting: {
+    fontSize: 22,
+    fontWeight: "600",
+    color: colors.textDark,
+  },
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    marginVertical: 10,
+    height: 45,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 5,
+    elevation: 2,
+  },
+  searchInput: {
+    flex: 1,
+    marginLeft: 8,
+    color: colors.textDark,
+  },
+  quickActions: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginVertical: 16,
+  },
+  actionButton: {
+    alignItems: "center",
+    flex: 1,
+  },
+  actionText: {
+    marginTop: 6,
+    fontSize: 14,
+    color: colors.textDark,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginVertical: 10,
+    color: colors.textDark,
+  },
+  chatItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: colors.white,
+    padding: 12,
+    borderRadius: 12,
+    marginBottom: 10,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 1,
+  },
+  avatar: {
+    width: 45,
+    height: 45,
+    borderRadius: 22,
+    marginRight: 12,
+  },
+  chatInfo: {
+    flex: 1,
+  },
+  chatName: {
+    fontSize: 16,
+    fontWeight: "500",
+    color: colors.textDark,
+  },
+  chatMessage: {
+    fontSize: 14,
+    color: colors.textLight,
+  },
+});

src/screens/home/UserProfileStatus.tsx

@@ -104,7 +104,7 @@ const UserProfileStatus: React.FC = () => {
 
     return (
         <View style={styles.container}>
-            <Text style={styles.title}>Welcome Back 👋</Text>
+            {/* <Text style={styles.title}>Welcome Back 👋</Text> */}
 
             <View style={styles.card}>
                 <Text style={styles.cardTitle}>Profile Status</Text>
@@ -174,7 +174,7 @@ const styles = StyleSheet.create({
         elevation: 3,
         shadowOpacity: 0.1,
         shadowRadius: 6,
-        marginBottom: 20,
+        // marginBottom: 20,
     },
     cardTitle: {
         fontSize: 18,