create product page details with image slideshow,quantity and total …

package.json

@@ -14,10 +14,12 @@
     "@react-navigation/native": "^5.1.5",
     "@react-navigation/stack": "^5.2.10",
     "formik": "^2.2.5",
+    "prop-types": "^15.7.2",
     "react": "16.13.1",
     "react-native": "0.63.3",
     "react-native-elements": "^3.0.0-alpha.1",
     "react-native-gesture-handler": "^1.9.0",
+    "react-native-image-slideshow": "^1.0.1",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.15.0",
     "react-native-snap-carousel": "^3.9.1",

src/components/CardDetails.js

@@ -1,16 +1,186 @@
-import React, { useState, useEffect } from 'react';
-import { View, Text, Image, ScrollView, TouchableOpacity } from 'react-native';
-import { useSelector, useDispatch } from 'react-redux'
+import React, {useState, useEffect} from 'react';
+import {
+  View,
+  Image,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import {useSelector, useDispatch} from 'react-redux';
+import {
+  Card,
+  Divider,
+  ListItem,
+  Button,
+  Icon,
+  SearchBar,
+  Text,
+} from 'react-native-elements';
+
+import ImageSliderz from 'react-native-image-slideshow';
 
 function CardDetails(props) {
-  const productDetails = useSelector(state => state)
-  console.log("cart", productDetails);
+  const productDetails = useSelector((state) => state.productDetails);
+  const [quantity, setQuantity] = useState(1);
+  const price = productDetails.price.slice(1);
+  const [total, setTotal] = useState(price);
+
+  console.log('cart', productDetails.picture);
   // take the data from productDetails
+
+  const onPressDec = () =>
+    setQuantity((prevCount) => (prevCount != 1 ? prevCount - 1 : 1));
+  const onPressInc = () => setQuantity((prevCount) => prevCount + 1);
+
+  useEffect(() => {
+    setTotal(price * quantity);
+  }, [quantity]);
+
   return (
-    <View >
-      <Text>hi</Text>
-    </View >
+    <ScrollView>
+      <View style={styles.container}>
+        <Card containerStyle={styles.card}>
+          <ImageSliderz
+            dataSource={[
+              {
+                url: productDetails.picture,
+              },
+              {
+                url: productDetails.picture,
+              },
+              {
+                url: productDetails.picture,
+              },
+            ]}
+            height={250}
+          />
+          <View style={styles.text}>
+            <Card.FeaturedTitle style={styles.cardName}>
+              <Icon name="price-tag" type="entypo" size={26} color="#015A20" />
+
+              {productDetails.name}
+            </Card.FeaturedTitle>
+
+            <Card.FeaturedTitle style={styles.cardPrice}>
+              {productDetails.price}
+            </Card.FeaturedTitle>
+          </View>
+        </Card>
+        <View style={styles.description}>
+          <Text h4 h4Style={{fontSize: 15, paddingBottom: 8}}>
+            Description :
+          </Text>
+          <Text>{productDetails.brief}</Text>
+        </View>
+
+        <View style={styles.amount}>
+          <View style={styles.amount}>
+            <TouchableOpacity onPress={onPressDec}>
+              <Icon
+                name="circle-with-minus"
+                type="entypo"
+                size={26}
+                color="#015A20"
+              />
+            </TouchableOpacity>
+
+            <Text h4> {quantity} </Text>
+            <TouchableOpacity onPress={onPressInc}>
+              <Icon
+                name="circle-with-plus"
+                type="entypo"
+                size={26}
+                color="#015A20"
+              />
+            </TouchableOpacity>
+          </View>
+          <View>
+            <Text h4>
+              Total:{' '}
+              <Text h4 style={styles.total}>
+                ${total}
+              </Text>
+            </Text>
+          </View>
+        </View>
+        <TouchableOpacity style={styles.buttonContainer}>
+          <Text h4 style={styles.buttonText}>
+            Add to Cart
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </ScrollView>
   );
 }
 
-export default CardDetails;
+const styles = StyleSheet.create({
+  container: {
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 15,
+  },
+  card: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 9,
+    },
+    shadowOpacity: 0.48,
+    shadowRadius: 11.95,
+
+    elevation: 18,
+  },
+  cardName: {
+    color: 'black',
+    fontSize: 16,
+    height: 40,
+  },
+  cardPrice: {
+    alignSelf: 'flex-end',
+    color: 'white',
+    fontSize: 14,
+    padding: 10,
+    paddingTop: 6,
+    paddingBottom: 6,
+    borderRadius: 15,
+    backgroundColor: '#015A20',
+  },
+  text: {
+    flex: 1,
+    margin: 5,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  description: {
+    margin: 15,
+  },
+  amount: {
+    margin: 5,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  total: {
+    paddingTop: 2,
+    color: '#015A20',
+  },
+  buttonContainer: {
+    margin: 10,
+    elevation: 8,
+    backgroundColor: '#013A20',
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    borderRadius: 35,
+  },
+  buttonText: {
+    fontSize: 18,
+    color: '#fff',
+    fontWeight: 'bold',
+    alignSelf: 'center',
+    textTransform: 'uppercase',
+  },
+});
+
+export default CardDetails;