CircleCollect/circle-collect
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dummy home screen

Browse Source
This commit is contained in:
Jaanu423
2025-09-16 11:45:03 +05:30
parent 3fd7b2c007
commit 2df041adbc
5 changed files with 181 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/GroupScreen.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export default function GroupScreen() {
};
return (
<AppView backgroundColor={colors.pastelGreen} barStyle="dark-content">
<AppView barStyle="dark-content">
<View style={styles.container}>
{/* --- Header and Segmented Control --- */}
<Text style={styles.title}>Your Groups</Text>
src/screens/home/Home.tsx
+165 -12
View File
@@ -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
+2 -2
View File
@@ -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,
src/screens/profile/Profile.tsx
+12 -12
View File
@@ -267,7 +267,7 @@ const Profile = () => {
if (fetching || !user) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#6366f1" />
<ActivityIndicator size="large" color={colors.Profile} />
<Text style={styles.loadingText}>Loading profile...</Text>
</View>
);
@@ -281,7 +281,7 @@ const Profile = () => {
<View style={styles.header}>
<Text style={styles.headerTitle}>User Profile</Text>
<TouchableOpacity onPress={fetchUserProfile} style={styles.refreshButton}>
<Ionicons name="refresh" size={24} color="#fff" />
<Ionicons name="refresh" size={24} color={colors.Profile} />
</TouchableOpacity>
</View>
<KeyboardAvoidingView
@@ -318,7 +318,7 @@ const Profile = () => {
onPress={handleUpdateImage}
icon={imageUpdating ? undefined : "cloud-upload"}
style={styles.updateImageButton}
buttonBackground="#6366f1"
buttonBackground={colors.Profile}
/>
</View>
@@ -334,7 +334,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="person" size={20} color="#6366f1" style={styles.detailIcon} />
<Ionicons name="person" size={20} color={colors.Profile} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Name</Text>
<Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
@@ -342,7 +342,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="mail" size={20} color="#6366f1" style={styles.detailIcon} />
<Ionicons name="mail" size={20} color={colors.Profile} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Email</Text>
<Text style={styles.detailText}>{user.email || "Not provided"}</Text>
@@ -350,7 +350,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="call" size={20} color="#6366f1" style={styles.detailIcon} />
<Ionicons name="call" size={20} color={colors.Profile} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Mobile</Text>
<Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
@@ -358,7 +358,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="at-circle" size={20} color="#6366f1" style={styles.detailIcon} />
<Ionicons name="at-circle" size={20} color={colors.Profile} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Username</Text>
<Text style={styles.detailText}>{user.username}</Text>
@@ -366,7 +366,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="location" size={20} color="#6366f1" style={styles.detailIcon} />
<Ionicons name="location" size={20} color={colors.Profile} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Address</Text>
<Text style={styles.detailText}>{user.address || "Not provided"}</Text>
@@ -374,7 +374,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="male-female" size={20} color="#6366f1" style={styles.detailIcon} />
<Ionicons name="male-female" size={20} color={colors.Profile} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Gender</Text>
<Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
@@ -382,7 +382,7 @@ const Profile = () => {
</View>
<View style={styles.detailRow}>
<Ionicons name="key" size={20} color="#6366f1" style={styles.detailIcon} />
<Ionicons name="key" size={20} color={colors.Profile} style={styles.detailIcon} />
<View>
<Text style={styles.detailLabel}>Role</Text>
<Text style={styles.detailText}>{user.role || "User"}</Text>
@@ -395,7 +395,7 @@ const Profile = () => {
onPress={() => setEditing(true)}
icon="create"
style={styles.editButton}
buttonBackground="#6366f1"
buttonBackground={colors.Profile}
/>
</>
) : (
@@ -480,7 +480,7 @@ const Profile = () => {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.pastelBlue,
// backgroundColor: colors.pastelBlue,
paddingBottom: '30%',
},
loadingContainer: {
src/screens/setting/Setting.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import colors from '../../components/colors'
const Setting = () => {
return (
<AppView backgroundColor={colors.pastelOrange} barStyle="dark-content">
<AppView barStyle="dark-content">
<Text>Setting</Text>
</AppView>
)