Obanana_test/app/pages/home/Profile.jsx

import {
  faAngleRight,
  faArrowCircleRight,
  faArrowRight,
  faBagShopping,
  faBox,
  faCarSide,
  faCircleQuestion,
  faClock,
  faHeart,
  faRankingStar,
  faTruck,
  faUserGear,
  faWallet,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Image,
  ScrollView,
  FlatList,
} from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import Card from "../../components/profile/Card";
import { faStar } from "@fortawesome/free-solid-svg-icons";

const width = Dimensions.get("window").width;

const settings = [
  {
    icon: <FontAwesomeIcon icon={faBagShopping} color={"#777777"} size={25} />,
    label: "My Purchases",
    nav: "MyPurchases",
  },
  {
    icon: <FontAwesomeIcon icon={faWallet} color={"#777777"} size={25} />,
    label: "My Wallet",
    nav: "MyWallet",
  },
  {
    icon: <FontAwesomeIcon icon={faHeart} color={"#777777"} size={25} />,
    label: "My Favorites",
    nav: "MyFavorites",
  },
  {
    icon: <FontAwesomeIcon icon={faClock} color={"#777777"} size={25} />,
    label: "View History",
    nav: "MyPurchases",
  },
  {
    icon: <FontAwesomeIcon icon={faUserGear} color={"#777777"} size={25} />,
    label: "Account Settings",
    nav: "AccountSettings",
  },
  {
    icon: (
      <FontAwesomeIcon icon={faCircleQuestion} color={"#777777"} size={25} />
    ),
    label: "Help Center",
    nav: "HelpCenter",
  },
];

const Profile = () => {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <View style={styles.title}>
        <Text style={styles.titleText}>ACCOUNT</Text>
      </View>
      <View style={styles.wrapper}>
        <View style={styles.header}>
          <View style={styles.headerWrap}>
            <View style={styles.headerTop}>
              <Image
                style={{
                  width: 40,
                  height: 40,
                  resizeMode: "cover",
                  borderRadius: 100,
                  marginLeft: 20,
                }}
                source={{
                  uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyvLBxIU54Q3fueLL83PvG1eNSofzpwE-iwA&usqp=CAU",
                }}
              />
              <View style={styles.headerTopLeft}>
                <Text style={styles.headerTopText}>Username</Text>
                <View style={styles.details}>
                  <Text style={styles.headerTopSubText}>Delivery Address:</Text>
                  <Text style={styles.headerTopSubTextP}>
                    Blk 2 Wall St. Harang, Makati City
                  </Text>
                </View>
              </View>
            </View>
            <View style={styles.headerBottom}>
              <View style={styles.headerBottomTitle}>
                <Text style={styles.headerBottomText}>My Orders</Text>
              </View>
              <View style={styles.headerBottomWrap}>
                <View style={styles.headerBottomCard}>
                  <FontAwesomeIcon
                    icon={faWallet}
                    color={"#ffaa00"}
                    size={25}
                  />
                  <Text style={styles.headerBottomCardText}>To Pay</Text>
                </View>
                <View style={styles.headerBottomCard}>
                  <FontAwesomeIcon icon={faBox} color={"#ffaa00"} size={25} />
                  <Text style={styles.headerBottomCardText}>To Ship</Text>
                </View>
                <View style={styles.headerBottomCard}>
                  <FontAwesomeIcon icon={faTruck} color={"#ffaa00"} size={25} />
                  <Text style={styles.headerBottomCardText}>To Receive</Text>
                </View>
                <View style={styles.headerBottomCard}>
                  <FontAwesomeIcon icon={faStar} color={"#ffaa00"} size={25} />
                  <Text style={styles.headerBottomCardText}>To Rate</Text>
                </View>
              </View>
            </View>
          </View>
        </View>
        {/* <ScrollView style={styles.content1} > */}
        <View style={styles.content}>
          <View style={styles.headerBottomTitle}>
            <Text style={styles.contentTopText}>Settings</Text>
          </View>
          <FlatList
            data={settings}
            keyExtractor={(item) => item.label}
            style={styles.list}
            numColumns={3}
            showsVerticalScrollIndicator={false}
            renderItem={({ item,i }) => <Card key={i} cart={item} />}
            containerStyle={styles.container1}
            contentContainerStyle={styles.content}
            onEndReachedThreshold={0.1}
          />
        </View>
        {/* </ScrollView> */}
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    height: "100%",
    width: width,
  },
  header: {
    // position: "fixed",
    width: "100%",
    height: 180,
    justifyContent: "center",
    alignItems: "center",
    borderColor: "#f0f0f0dd",
    borderBottomWidth: 1,
    // top: 0,
  },
  title: {
    backgroundColor: "#ffaa00",
    width: "100%",
    // height: 30,
    justifyContent: "center",
    // alignItems: "center",
    padding: 10,
    paddingLeft: 20,
  },
  titleText: {
    // padding:10,
    color: "#fff",
    fontWeight: "600",
  },
  headerWrap: {
    justifyContent: "center",
    alignItems: "center",
    width: "90%",
    // height: "100%",
    // flexDirection: "row",
  },
  headerTop: {
    justifyContent: "space-between",
    alignItems: "center",
    width: "100%",
    flexDirection: "row",
  },
  headerTopText: {
    // padding:10,
    color: "#000000",
    fontWeight: "600",
  },
  headerTopLeft: {
    width: "80%",
    padding: 10,
  },
  details: {
    // justifyContent: "space-between",
    alignItems: "center",
    width: "100%",
    flexDirection: "row",
  },
  headerTopSubText: {
    color: "#666666",
    fontWeight: "600",
    fontSize: 9,
  },
  headerTopSubTextP: {
    color: "#464646",
    fontWeight: "400",
    fontSize: 9,
    margin: 5,
  },
  headerBottom: {
    marginVertical: 15,
    justifyContent: "space-between",
    alignItems: "center",
    width: "100%",
    // flexDirection: "row",
  },
  headerBottomTitle: {
    // justifyContent: "space-between",
    // alignItems: "center",
    width: "100%",
    // flexDirection: "row",
  },
  headerBottomText: {
    // padding:10,
    color: "#333333",
    fontWeight: "600",
    fontSize: 10,
    textAlign: "left",
    marginLeft: 20,
  },
  headerBottomWrap: {
    justifyContent: "space-between",
    alignItems: "center",
    width: "70%",
    flexDirection: "row",
    marginTop: 10,
  },
  headerBottomCard: {
    justifyContent: "center",
    alignItems: "center",
  },
  headerBottomCardText: {
    color: "#5e5e5e",
    fontWeight: "400",
    fontSize: 9,
    marginTop: 5,
  },
  footer: {
    bottom: 0,
    width: "100%",
  },
  list: {
    width: "100%",
    backgroundColor: "#ffffff",
    borderColor: "#f0f0f0dd",
    borderWidth: 1,
    // justifyContent: "center",
    // alignItems: "center",
  },
  container1: {
    width: "100%",
    backgroundColor: "#ffffff",
  },
  wrapper: {
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
  },
  content: {
    display: "flex",
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fffdf8",
  },
  content1: {
    display: "flex",
    width: "100%",
    height: "100%",
    backgroundColor: "#fffdf8",
  },
  contentTopText: {
    // padding:10,
    color: "#000000",
    fontWeight: "600",
    marginLeft: 10,
    padding: 10,
  },
  subContent: {
    width: "40%",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 10,
    height: 60,
    borderColor: "#f0f0f0dd",
    borderWidth: 1,
  },
});

export default Profile;