reza completed rating without api

package.json

@@ -42,6 +42,7 @@
     "react-native-awesome-alerts": "^1.5.2",
     "react-native-openanything": "^0.0.6",
     "react-native-qrcode-scanner": "^1.5.4",
+    "react-native-ratings": "^8.1.0",
     "react-native-raw-bottom-sheet": "^2.2.0",
     "react-native-restart": "^0.0.22",
     "react-native-safe-area-context": "3.3.2",

src/screens/Product/components/Book.js

@@ -18,7 +18,6 @@ import { Entypo } from "@expo/vector-icons";
 import separate from "../../../utils/separate";
 
 //components
-import CustomPressable from "../../../components/Pressable";
 import Description from "./Description";
 import LinkBox from "./LinkBox";
 import Comments from "./Comments";
@@ -27,6 +26,7 @@ import ProductReview from "../../../components/BottomSheetComponents/ProductRevi
 import ProductQuestion from "../../../components/BottomSheetComponents/ProductQuestion";
 import Blur from "../../../components/Blur";
 import ImageSlider from "../../../components/ImageSlider";
+import Rates from "./Rates";
 
 //style
 import tw from "tailwind-rn";
@@ -67,13 +67,12 @@ function Book({
     (product) => product?.productId === book?.product[0]?.id
   )[0];
 
-  return (
-    <ScrollView
-      style={[tw("flex  flex-1 relative")]}
+  console.log(book);
 
-    >
+  return (
+    <ScrollView style={[tw("flex  flex-1 relative")]}>
       {!mobile && <View style={tw("mt-5")}></View>}
-      {(!book || userFavoriteLoading ) && (
+      {(!book || userFavoriteLoading) && (
         <View
           style={[
             tw("absolute left-0 top-0 rounded-md overflow-hidden"),
@@ -609,28 +608,31 @@ function Book({
         component={<ProductQuestion />}
         height={height / 2}
       />
-      {product.rates && (
-        <View
-          style={tw("flex flex-row-reverse justify-between items-center my-6")}
-        >
-          <Text
-            style={[
-              {
-                fontSize: fontSize.sm,
-                color: "#275077",
-                fontFamily: "regular",
-              },
-              tw(""),
-            ]}
+      {(product.rate || 4) && (
+        <>
+          <View
+            style={tw(
+              "flex flex-row-reverse justify-between items-center my-6"
+            )}
           >
-            امتیازات و نظرات
-          </Text>
-          <Entypo name="chevron-small-left" size={20} color="#196EC0" />
-        </View>
+            <Text
+              style={[
+                {
+                  fontSize: fontSize.sm,
+                  color: "#275077",
+                  fontFamily: "regular",
+                },
+                tw(""),
+              ]}
+            >
+              امتیازات و نظرات
+            </Text>
+            <Entypo name="chevron-small-left" size={20} color="#196EC0" />
+          </View>
+          <Rates rate={book?.rate || 4} />
+          <Comments comments={book?.comments} />
+        </>
       )}
-
-      {/* <Rates rates={book.rates} /> */}
-      <Comments comments={book?.comments} />
     </ScrollView>
   );
 }
@@ -639,7 +641,7 @@ const mapStateToProps = (state) => ({
   userProducts: state.userProduct.list,
   userId: state.user.status?.id,
   userProductsLoading: state.userProduct.loading,
-  userFavoriteLoading : state.userFavorite.loading,
+  userFavoriteLoading: state.userFavorite.loading,
   mobile: state.publicApi.mobile,
 });
 

src/screens/Product/components/Rates.js

@@ -1,38 +1,55 @@
 import React from "react";
-import { View, Text, Dimensions } from "react-native";
+import { View, Text, Dimensions, Appearance } from "react-native";
+import { Rating } from 'react-native-ratings';
+
+//assets
 import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
+import Colors from "../../../constants/Colors";
 
 const width = Dimensions.get("window").width;
 
-export default function Rates({ rates }) {
+export default function Rates({ rate }) {
+
+  const ratingCompleted = (rating) => {
+    return;
+  }
+  
   return (
     <View style={tw("flex flex-row-reverse")}>
-      <View
-        style={[
-          tw("flex  items-center justify-center"),
-          { width: "25%" },
-        ]}
-      >
+      <View style={[tw("flex  items-center justify-center"), { width: "25%" }]}>
         <Text
           style={[
             { fontSize: fontSize.xl6, color: "#05335F", fontFamily: "bold" },
           ]}
         >
-          {rates.mid}
+          {rate}
         </Text>
+        <Rating
+          type='star'
+          ratingCount={5}
+          imageSize={15}
+          onFinishRating={(rating) => ratingCompleted(rating)}
+        />
         <Text
           style={{
             fontSize: fontSize.sm,
             color: "#707070",
             fontFamily: "light",
+            marginTop : 5
           }}
         >
-          {"از" + " " + rates.allRates + " " + "نفر"}
+          {`از بین ${1150} نفر`}
         </Text>
       </View>
       <View style={[tw("flex  flex-1"), { width: "60%" }]}>
-        {rates.fields.map((field, index) => (
+        {[
+          { name: "بخش ۱", value: 40 },
+          { name: "بخش ۱", value: 20 },
+          { name: "بخش ۱", value: 70 },
+          { name: "بخش ۱", value: 10 },
+          { name: "بخش ۱", value: 50 },
+        ].map((field, index) => (
           <Progress key={index} data={field} />
         ))}
       </View>
@@ -40,9 +57,13 @@ export default function Rates({ rates }) {
   );
 }
 
-const Progress = ({ data }) => {
+const Progress = ({ data, ...props }) => {
+  const colorScheme = React.useMemo(() => {
+    return  Appearance.getColorScheme();
+  },[props.useless]);
+
   return (
-    <View style={[tw("flex flex-1 flex-row items-center py-0.5")]}>
+    <View style={[tw("flex flex-1 flex-row items-center py-1.5")]}>
       <Text
         style={{
           fontSize: fontSize.sm,
@@ -55,13 +76,13 @@ const Progress = ({ data }) => {
       <View
         style={[
           tw("rounded-md ml-2 flex-1"),
-          { height: 6, backgroundColor: "#D3E9FF" },
+          { height: 6, backgroundColor: Colors.theme1[colorScheme].greenFF1 },
         ]}
       >
         <View
           style={[
-            tw("h-full rounded-md my-auto"),
-            { width: data.value + "%", backgroundColor: "#2B8DEB" },
+            tw("h-full rounded-md"),
+            { width: data.value + "%", backgroundColor: Colors.theme1[colorScheme].greenCF },
           ]}
         ></View>
       </View>

yarn.lock

@@ -5332,6 +5332,13 @@ react-native-qrcode-scanner@^1.5.4:
     prop-types "^15.5.10"
     react-native-permissions "^2.0.2"
 
+react-native-ratings@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-ratings/-/react-native-ratings-8.1.0.tgz#3fa9ad29128dc3a88e59518ba151e61c59dd0647"
+  integrity sha512-+QOJ4G3NjVkI1D+tk4EGx1dCvVfbD2nQdkrj9cXrcAoEiwmbep4z4bZbCKmWMpQ5h2dqbxABU8/eBnbDmvAc3g==
+  dependencies:
+    lodash "^4.17.15"
+
 react-native-raw-bottom-sheet@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/react-native-raw-bottom-sheet/-/react-native-raw-bottom-sheet-2.2.0.tgz#d11dabb86aadb014273767ef7b554924b13633c5"