154 lines
3.4 KiB
TypeScript
154 lines
3.4 KiB
TypeScript
import React from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Image,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
} from "react-native";
|
|
import { MaterialIcons } from "@expo/vector-icons";
|
|
|
|
export default function ProfileScreen() {
|
|
return (
|
|
<ScrollView contentContainerStyle={styles.scrollContent}>
|
|
<View style={styles.avatarContainer}>
|
|
<Image
|
|
source={require("../../assets/images/user_image.jpg")}
|
|
style={styles.avatar}
|
|
/>
|
|
<TouchableOpacity style={styles.editAvatar}>
|
|
<MaterialIcons name="edit" size={20} color="#FDFDFD" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={styles.card}>
|
|
<View style={styles.row}>
|
|
<View style={styles.textGroup}>
|
|
<Text style={styles.label}>Name</Text>
|
|
<Text style={styles.value}>Amar Kesari</Text>
|
|
</View>
|
|
<TouchableOpacity>
|
|
<MaterialIcons name="edit" size={20} color="#555C70" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={styles.divider} />
|
|
<View style={styles.row}>
|
|
<View style={styles.textGroup}>
|
|
<Text style={styles.label}>Mobile Number</Text>
|
|
<Text style={styles.value}>9876543210</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Other Menu Items */}
|
|
<View style={styles.card}>
|
|
{menuItem("My Vehicle")}
|
|
<View style={styles.divider} />
|
|
{menuItem("Language")}
|
|
</View>
|
|
|
|
<View style={styles.card}>
|
|
{menuItem("About App")}
|
|
<View style={styles.divider} />
|
|
{menuItem("Logout")}
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const menuItem = (title: string) => (
|
|
<TouchableOpacity style={styles.menuRow}>
|
|
<Text style={styles.menuText}>{title}</Text>
|
|
<MaterialIcons name="chevron-right" size={20} color="#555C70" />
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
borderWidth: 1,
|
|
flex: 1,
|
|
backgroundColor: "#F3F5F8",
|
|
},
|
|
topBar: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 12,
|
|
backgroundColor: "#F3F5F8",
|
|
},
|
|
backButton: {
|
|
padding: 8,
|
|
},
|
|
headerText: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
marginLeft: 8,
|
|
color: "#252A34",
|
|
},
|
|
scrollContent: {
|
|
paddingHorizontal: 16,
|
|
paddingBottom: 32,
|
|
},
|
|
avatarContainer: {
|
|
alignItems: "center",
|
|
marginVertical: 24,
|
|
},
|
|
avatar: {
|
|
width: 120,
|
|
height: 120,
|
|
borderRadius: 60,
|
|
},
|
|
editAvatar: {
|
|
position: "absolute",
|
|
bottom: 0,
|
|
right: 105,
|
|
width: 40,
|
|
height: 40,
|
|
backgroundColor: "#008866",
|
|
borderRadius: 20,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
card: {
|
|
backgroundColor: "#FCFCFC",
|
|
borderRadius: 8,
|
|
marginBottom: 16,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 8,
|
|
},
|
|
row: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
paddingVertical: 12,
|
|
},
|
|
textGroup: {
|
|
flexDirection: "column",
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
color: "#252A34",
|
|
},
|
|
value: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
color: "#252A34",
|
|
marginTop: 2,
|
|
},
|
|
divider: {
|
|
height: 1,
|
|
backgroundColor: "#E5E9F0",
|
|
marginVertical: 4,
|
|
},
|
|
menuRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
paddingVertical: 16,
|
|
},
|
|
menuText: {
|
|
fontSize: 14,
|
|
color: "#252A34",
|
|
},
|
|
});
|