test google sign in working

src/components/Background.js

 import React from 'react';
-import {View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 
 const Background = ({children}) => {
-  return <View style={{position: 'absolute', padding: 16}}>{children}</View>;
+  return <View style={styles.rootContainer}>{children}</View>;
 };
 
+const styles = StyleSheet.create({
+  rootContainer: {
+    flex: 1,
+    position: 'absolute',
+    padding: 16,
+  },
+});
+
 export default Background;

src/components/screens/Cart.js

 import React, {useContext, useState} from 'react';
 import {View, Text, StyleSheet, Button, Image} from 'react-native';
+import {Colors} from '../../constants/Constants';
 import {CartContext} from '../../store/CartContext';
 
-
 const CartItem = ({item}) => {
   const {removeFromCart, updateQuantity} = useContext(CartContext);
 
@@ -14,8 +14,6 @@ const CartItem = ({item}) => {
     updateQuantity(item.product, newQuantity);
   };
 
-  // setTotal(total + (item.product.price * item.quantity));
-
   return (
     <View style={styles.itemContainer}>
       <View style={styles.imageContainer}>
@@ -26,13 +24,14 @@ const CartItem = ({item}) => {
         <Text style={styles.price}>{item.product.price}</Text>
       </View>
       <View style={styles.qtyContainer}>
-        <Button title="-" onPress={handleRemoveFromCart} />
+        <Button title="X" onPress={handleRemoveFromCart} />
         <Button
           title="-"
           onPress={() => handleUpdateQuantity(item.quantity - 1)}
         />
         <Text>{item.product.quantity}</Text>
         <Button
+          style={styles.inc_dec_btn}
           title="+"
           onPress={() => handleUpdateQuantity(item.quantity + 1)}
         />
@@ -43,14 +42,21 @@ const CartItem = ({item}) => {
 
 const Cart = () => {
   const {cart} = useContext(CartContext);
-  const [total, setTotal] = useState(0);
+
+  const calculateTotalPrice = () => {
+    let total = 0;
+    cart.map(item => {
+      total += parseFloat(item.product.price) * parseInt(item.product.quantity);
+    });
+    return parseFloat(total);
+  };
 
   return (
     <View style={styles.cartContiner}>
       {cart.map(item => (
         <CartItem key={item.product.id} item={item} />
       ))}
-      <Text style={styles.title}>Total</Text>
+      <Text style={styles.title}>Total : {calculateTotalPrice()}</Text>
     </View>
   );
 };
@@ -101,6 +107,10 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: '#888',
   },
+  inc_dec_btn: {
+    borderRadius: 25,
+    backgroundColor: Colors.primary500,
+  },
 });
 
 export default Cart;

src/components/screens/ProductDetail.js

 import React, {useContext, useState} from 'react';
-import {View, Text, Image, Button, StyleSheet} from 'react-native';
+import {View, Text, Image, Button, StyleSheet, TouchableOpacity} from 'react-native';
 import {useNavigation} from '@react-navigation/native';
 import {CartContext} from '../../store/CartContext';
-import FlatButton from '../ui/FlatButton';
+import { Colors } from '../../constants/Constants';
+
 
 const ProductDetail = porps => {
   const item = porps.route.params.item;
@@ -56,8 +57,12 @@ const ProductDetail = porps => {
             flexDirection: 'row',
             justifyContent: 'space-evenly',
           }}>
-          <FlatButton onPress={handleBuyNow}>Buy Now</FlatButton>
-          <FlatButton onPress={handleAddToCart}>Add to Cart</FlatButton>
+          <TouchableOpacity style={styles.btnBuy} onPress={handleBuyNow}>
+            <Text>Buy Now</Text>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={handleAddToCart}>
+            <Text>Add to Cart</Text>
+          </TouchableOpacity>
         </View>
       </View>
     </View>
@@ -65,11 +70,18 @@ const ProductDetail = porps => {
 };
 
 const styles = StyleSheet.create({
+  btnBuy: {
+    // backgroundColor: Colors.primary100,
+    // borderRadius: 100,
+    alignItems: 'center',
+    width: 80,
+  },
   container: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     padding: 1,
+    background: 'linear-gradient(to bottom right, #ccc, #red)',
   },
   productContainer: {
     flex: 1,

src/navigation/AuthStack.js

 import React, {useContext} from 'react';
-import {NavigationContainer} from '@react-navigation/native';
+import {NavigationContainer, useNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import Cart from '../components/screens/Cart';
 import MedicineList from '../components/screens/MedicineList';
@@ -41,12 +41,16 @@ export default function AuthStack() {
           component={ProductDetail}
           options={{
             title: 'Product Detail',
-            headerRight: () => (
-              <Icon
-                name="shopping-cart"
-                size={30}
-                color={Colors.primary500}></Icon>
-            ),
+            headerRight: () => {
+              return (
+                <Icon
+                  onPress={authCtx.logout}
+                  // name="shopping-cart"
+                  name="sign-out"
+                  size={30}
+                  color={Colors.primary500}></Icon>
+              );
+            },
           }}
         />
         <Stack.Screen name="Cart" component={Cart} />