Obanana_test/app/pages/product/ProductSinglePage.jsx

import { faArrowLeft, faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation, useRoute } from "@react-navigation/native";
import React from "react";
import {
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import BottomNav from "../../components/product/BottomNav";
import Variation from "../../components/product/Variation";

const ProductSinglePage = ({ setcartList, cartList }) => {
  const route = useRoute();
  const { product } = route.params;
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <ScrollView>
        <View style={styles.header}>
          <TouchableOpacity
            onPress={() => navigation.navigate("Home")}
            style={styles.backIcon}
          >
            <FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
          </TouchableOpacity>
        </View>
        <View tyle={styles.wrapper}>
          <Image
            style={{ width: "100%", height: 400, resizeMode: "cover" }}
            source={{ uri: product.img }}
          />
          <View
            style={{
              width: "100%",
              padding: 10,
              backgroundColor: "#fff",
              border: "none",
              borderColor: "#f3f3f3",
              borderWidth: 1,
            }}
          >
            <Text style={styles.text}>{product.name}</Text>
            <View style={styles.priceCon}>
              <Text
                style={product.promo ? styles.textPricePromo : styles.textPrice}
              >
                ₱{product.price}
              </Text>
              {product.promo ? (
                <Text style={styles.textPrice}>
                  {" "}
                  {product.price - product.price * 0.3}{" "}
                  <Text style={{ fontWeight: "400" }}>(-{product.promo}%)</Text>
                </Text>
              ) : null}
            </View>
            <View style={styles.footer}>
              <Text style={styles.textMin}>
                min. order: {product.min} {product.per}
              </Text>
              <Text style={styles.textSold}>{product.sold} sold</Text>
            </View>
            {product.rate ? (
              <View style={styles.rateCon}>
                <FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
                <Text style={styles.textRate}>
                  {product.rate} ({product.raterTotal})
                </Text>
              </View>
            ) : null}
          </View>
        </View>
        <Variation />
        <Text style={styles.header1}>Description</Text>
      </ScrollView>
      <View style={styles.footerButton}>
        <BottomNav
          product={product}
          cartList={cartList}
          setcartList={setcartList}
        />
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    height: "100%",
    width: "100%",
  },
  header: {
    position: "absolute",
    width: "100%",
    top: 0,
    padding: 15,
  },
  header1: {
    // position: "fixed",
    width: "100%",
    top: 0,
    fontWeight: "bold",
    paddingHorizontal: 15,
  },
  backIcon: {
    marginLeft: 20,
    backgroundColor: "#f1f1f1",
    justifyContent: "center",
    alignItems: "center",
    width: 50,
    height: 50,
    borderRadius: 50,
    marginBottom: 10,
  },
  wrapper: {
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
    // backgroundColor: "#ffaa00",
  },
  header: {
    fontSize: 14,
    fontWeight: "700",
    textTransform: "uppercase",
  },
  text: {
    fontSize: 16,
    fontWeight: "600",
    textTransform: "capitalize",
    color: "#333",
    letterSpacing: 0.5,
  },
  priceCon: {
    flexDirection: "row",
    paddingVertical: 10,
  },
  textPrice: {
    fontSize: 21,
    fontWeight: "600",
    textTransform: "capitalize",
    color: "#ffaa00",
  },
  textPricePromo: {
    fontSize: 21,
    fontWeight: "600",
    textTransform: "capitalize",
    textDecorationLine: "line-through",
    color: "#ffaa00",
  },
  textMin: {
    fontSize: 13,
    fontWeight: "600",
    // textTransform: "capitalize",
    color: "#bdbdbd",
  },
  textSold: {
    fontSize: 13,
    fontWeight: "600",
    // textTransform: "capitalize",
    color: "#bdbdbd",
  },
  rateCon: {
    flexDirection: "row",
    // justifyContent:'center',
    alignItems: "center",
    paddingVertical: 10,
  },
  textRate: {
    fontSize: 13,
    color: "#838383",
  },
  img: {
    width: 400,
    height: 200,
    resizeMode: "cover",
    margin: "auto",
    borderRadius: 10,
    // backgroundColor: "#ffaa00",
  },
  footer: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  footerButton: {
    // position: "absolute",
    bottom: 0,
    width: "100%",
  },
});

export default ProductSinglePage;