Obanana_test/app/components/product/BottomNav.js

94 lines
2.4 KiB
JavaScript

import React, { useState } from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { faCartShopping, faStore } from "@fortawesome/free-solid-svg-icons";
import {
faBell,
faComment,
faComments,
faUserCircle,
} from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
const BottomNav = ({ settabActive, activeTab, setcartList, cartList,product }) => {
const navigation = useNavigation();
const tabSwitch = (e) => {
settabActive(e);
};
const addToCart = () => {
// Create a copy of the current cartList and add the new product
const updatedCart = [...cartList, product];
// Update the cartList state with the new cart array
setcartList(updatedCart);
};
return (
<View style={styles.container}>
<View style={styles.wrapper}>
<TouchableOpacity style={styles.button} onPress={() => addToCart()}>
{activeTab === "cart" ? (
<FontAwesomeIcon
icon={faCartShopping}
color={"#FFAA00"}
size={25}
/>
) : (
<FontAwesomeIcon
icon={faCartShopping}
color={"#888888"}
size={25}
/>
)}
</TouchableOpacity>
<TouchableOpacity
style={styles.button1}
onPress={() => navigation.navigate("CheckOut",{product})}
>
<Text style={styles.button1text}>Buy Now</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
width: "100%",
bottom: 0,
// position: "fixed",
// paddingVertical: 15,
paddingBottom: 5,
boxShadow: "0px 0px 3px 0px rgba(0, 0, 0, 0.25)",
},
wrapper: {
flexDirection: "row",
width: "100%",
alignItems: "center",
justifyContent: "space-around",
margin: "auto",
borderTopColor: "#ddd",
paddingVertical: 5,
paddingBottom: 10,
borderTopWidth: 1,
},
button: {
padding: 15,
// paddingBottom: 25,
},
button1: {
padding: 15,
paddingHorizontal: 50,
backgroundColor: "#ffaa00",
color: "#fff",
// paddingBottom: 25,
},
button1text: {
color: "#fff",
fontWeight: "600",
},
});
export default BottomNav;