94 lines
		
	
	
		
			2.4 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			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;
 |