reza fixed compo colors before Products

src/screens/Product/components/Book.js

@@ -6,7 +6,6 @@ import {
   ScrollView,
   TouchableHighlight,
   Dimensions,
-  Appearance,
   Platform,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
@@ -44,8 +43,8 @@ function Book({
   userFavoriteLoading,
   mobile,
   userProducts,
+  theme
 }) {
-  const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
   const [type, setType] = useState(1);
   const [pageLoading, setPageLoading] = useState(false);
@@ -80,9 +79,9 @@ function Book({
             tw("absolute left-0 top-0 rounded-md overflow-hidden"),
             {
               width: Dimensions.get("window").width,
-              height: height - 200,
+              height: height - 110,
               zIndex: 1,
-              backgroundColor: Colors.theme1[colorScheme].white + "60",
+              backgroundColor: Colors.theme1[theme].white + "60",
             },
           ]}
         >
@@ -111,7 +110,7 @@ function Book({
           <View style={tw("flex  items-end")}>
             <Text
               style={{
-                color: Colors.theme1[colorScheme].green79,
+                color: Colors.theme1[theme].green79,
                 fontSize: mobile ? fontSize.base : fontSize.xl3,
                 marginBottom: 5,
                 fontFamily: "bold",
@@ -122,7 +121,7 @@ function Book({
             </Text>
             <Text
               style={{
-                color: Colors.theme1[colorScheme].green79,
+                color: Colors.theme1[theme].green79,
                 fontSize: mobile ? fontSize.tiny : fontSize.xl,
                 fontFamily: "regular",
               }}
@@ -146,7 +145,7 @@ function Book({
         <View>
           <Text
             style={{
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[theme].green79,
               textAlign: "center",
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
@@ -158,7 +157,7 @@ function Book({
         </View>
         <View
           style={{
-            backgroundColor: Colors.theme1[colorScheme].green79 + "55",
+            backgroundColor: Colors.theme1[theme].green79 + "55",
             height: 20,
             width: 2,
           }}
@@ -166,7 +165,7 @@ function Book({
         <View>
           <Text
             style={{
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[theme].green79,
               textAlign: "center",
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
@@ -178,7 +177,7 @@ function Book({
         </View>
         <View
           style={{
-            backgroundColor: Colors.theme1[colorScheme].green79 + "55",
+            backgroundColor: Colors.theme1[theme].green79 + "55",
             height: 20,
             width: 2,
           }}
@@ -186,7 +185,7 @@ function Book({
         <View>
           <Text
             style={{
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[theme].green79,
               textAlign: "center",
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
@@ -202,7 +201,7 @@ function Book({
           style={[
             tw("w-full text-right"),
             {
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[theme].green79,
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "demi",
             },
@@ -214,13 +213,13 @@ function Book({
       </View>
       <View style={tw("flex flex-row-reverse justify-between flex-wrap py-3")}>
         <TouchableHighlight
-          underlayColor={Colors.theme1[colorScheme].greenFF + "22"}
+          underlayColor={Colors.theme1[theme].greenFF + "22"}
           style={[
             tw("flex flex-row-reverse w-full justify-between px-2 py-3 mb-4"),
             {
               borderWidth: 1,
-              borderColor: Colors.theme1[colorScheme].greenCF,
-              backgroundColor: Colors.theme1[colorScheme].greenFF + "0a",
+              borderColor: Colors.theme1[theme].greenCF,
+              backgroundColor: Colors.theme1[theme].greenFF + "0a",
             },
           ]}
           onPress={() =>
@@ -244,7 +243,7 @@ function Book({
               style={{
                 fontFamily: "bold",
                 fontSize: fontSize.sm,
-                color: Colors.theme1[colorScheme].green79,
+                color: Colors.theme1[theme].green79,
                 paddingVertical: 4,
               }}
             >
@@ -258,7 +257,7 @@ function Book({
                     tw("py-1 pr-2"),
                     {
                       fontFamily: "bold",
-                      color: Colors.theme1[colorScheme].green79,
+                      color: Colors.theme1[theme].green79,
                       fontSize: fontSize.sm,
                     },
                   ]}
@@ -270,13 +269,13 @@ function Book({
           </>
         </TouchableHighlight>
         <TouchableHighlight
-          underlayColor={Colors.theme1[colorScheme].greenFF + "22"}
+          underlayColor={Colors.theme1[theme].greenFF + "22"}
           style={[
             tw("flex flex-row-reverse justify-between px-2 py-3 mb-4"),
             {
               borderWidth: 1,
-              borderColor: Colors.theme1[colorScheme].greenCF,
-              backgroundColor: Colors.theme1[colorScheme].greenFF + "0a",
+              borderColor: Colors.theme1[theme].greenCF,
+              backgroundColor: Colors.theme1[theme].greenFF + "0a",
               width: width - 32 - 8 - (fontSize.sm * 6 + 18),
             },
           ]}
@@ -301,7 +300,7 @@ function Book({
               style={{
                 fontFamily: "bold",
                 fontSize: fontSize.sm,
-                color: Colors.theme1[colorScheme].green79,
+                color: Colors.theme1[theme].green79,
                 paddingVertical: 4,
               }}
             >
@@ -313,9 +312,9 @@ function Book({
                   tw("py-1 pr-2"),
                   {
                     borderRightWidth: 1,
-                    borderColor: Colors.theme1[colorScheme].greenCF,
+                    borderColor: Colors.theme1[theme].greenCF,
                     fontFamily: "bold",
-                    color: Colors.theme1[colorScheme].green79,
+                    color: Colors.theme1[theme].green79,
                     fontSize: fontSize.sm,
                   },
                 ]}
@@ -326,13 +325,13 @@ function Book({
           </>
         </TouchableHighlight>
         <TouchableHighlight
-          underlayColor={Colors.theme1[colorScheme].greenFF + "22"}
+          underlayColor={Colors.theme1[theme].greenFF + "22"}
           style={[
             tw("flex flex-row-reverse justify-center px-2 py-3 mb-4"),
             {
               borderWidth: 1,
-              borderColor: Colors.theme1[colorScheme].greenCF,
-              backgroundColor: Colors.theme1[colorScheme].greenFF + "0a",
+              borderColor: Colors.theme1[theme].greenCF,
+              backgroundColor: Colors.theme1[theme].greenFF + "0a",
               width: fontSize.sm * 6 + 18,
             },
           ]}
@@ -341,8 +340,8 @@ function Book({
           <Text
             style={{
               fontFamily: "bold",
-              fontSize: fontSize.sm,
-              color: Colors.theme1[colorScheme].green79,
+              fontSize: fontSize.xs,
+              color: Colors.theme1[theme].green79,
               paddingVertical: 4,
             }}
           >
@@ -350,13 +349,13 @@ function Book({
           </Text>
         </TouchableHighlight>
         <TouchableHighlight
-          underlayColor={Colors.theme1[colorScheme].greenFF + "22"}
+          underlayColor={Colors.theme1[theme].greenFF + "22"}
           style={[
             tw("flex flex-row-reverse justify-between px-2 py-3 mb-4"),
             {
               borderWidth: 1,
-              borderColor: Colors.theme1[colorScheme].greenCF,
-              backgroundColor: Colors.theme1[colorScheme].greenFF + "0a",
+              borderColor: Colors.theme1[theme].greenCF,
+              backgroundColor: Colors.theme1[theme].greenFF + "0a",
               width: width - 32 - 8 - (fontSize.sm * 6 + 18),
             },
           ]}
@@ -373,7 +372,7 @@ function Book({
               style={{
                 fontFamily: "bold",
                 fontSize: fontSize.sm,
-                color: Colors.theme1[colorScheme].green79,
+                color: Colors.theme1[theme].green79,
                 paddingVertical: 4,
               }}
             >
@@ -386,7 +385,7 @@ function Book({
                   tw("py-1 pr-2"),
                   {
                     fontFamily: "bold",
-                    color: Colors.theme1[colorScheme].green79,
+                    color: Colors.theme1[theme].green79,
                     fontSize: fontSize.sm,
                   },
                 ]}
@@ -397,13 +396,13 @@ function Book({
           </>
         </TouchableHighlight>
         <TouchableHighlight
-          underlayColor={Colors.theme1[colorScheme].greenFF + "22"}
+          underlayColor={Colors.theme1[theme].greenFF + "22"}
           style={[
             tw("flex flex-row-reverse justify-center px-2 py-3 mb-4"),
             {
               borderWidth: 1,
-              borderColor: Colors.theme1[colorScheme].greenCF,
-              backgroundColor: Colors.theme1[colorScheme].greenFF + "0a",
+              borderColor: Colors.theme1[theme].greenCF,
+              backgroundColor: Colors.theme1[theme].greenFF + "0a",
               width: fontSize.sm * 6 + 18,
             },
           ]}
@@ -412,8 +411,8 @@ function Book({
           <Text
             style={{
               fontFamily: "bold",
-              fontSize: fontSize.sm,
-              color: Colors.theme1[colorScheme].green79,
+              fontSize: fontSize.xs,
+              color: Colors.theme1[theme].green79,
               paddingVertical: 4,
             }}
           >
@@ -479,6 +478,7 @@ const mapStateToProps = (state) => ({
   userProductsLoading: state.userProduct.loading,
   userFavoriteLoading: state.userFavorite.loading,
   mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme
 });
 
 const mapDispatchToProps = {

src/screens/Product/components/LinkBox.js

@@ -9,8 +9,7 @@ import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
-function Description({ title, component, height, mobile }) {
-  const colorScheme = Appearance.getColorScheme();
+function Description({ title, component, height, mobile, theme }) {
   const refRBSheet = useRef();
   return (
     <>
@@ -21,7 +20,7 @@ function Description({ title, component, height, mobile }) {
             `flex flex-row-reverse justify-between items-center mt-3 rounded-sm px-5 ${mobile ? "py-4" : "py-4"}`
           ),
           {
-            backgroundColor: Colors.theme1[colorScheme].greenCF + '15',
+            backgroundColor: Colors.theme1[theme].greenCF + '15',
             // borderWidth : 1,
           },
         ]}
@@ -30,7 +29,7 @@ function Description({ title, component, height, mobile }) {
           style={[
             {
               fontSize: mobile ? fontSize.sm : fontSize.lg,
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[theme].green79,
               fontFamily: "demi",
             },
             tw(""),
@@ -38,7 +37,7 @@ function Description({ title, component, height, mobile }) {
         >
           {title}
         </Text>
-        <Entypo name="chevron-small-left" size={20} color={Colors.theme1[colorScheme].green79} />
+        <Entypo name="chevron-small-left" size={20} color={Colors.theme1[theme].green79} />
       </TouchableOpacity>
       <RBSheet
         ref={refRBSheet}
@@ -68,6 +67,7 @@ function Description({ title, component, height, mobile }) {
 
 const mapStateToProps = (state) => ({
   mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme
 });
 
 export default connect(mapStateToProps)(Description);

src/screens/Product/components/Rates.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text, Dimensions, Appearance, Pressable } from "react-native";
+import { View, Text, Dimensions, Pressable } from "react-native";
 import { Rating } from "react-native-ratings";
 import { connect } from "react-redux";
 import { vote } from "../../../redux/actions";
@@ -12,10 +12,7 @@ import Colors from "../../../constants/Colors";
 
 const width = Dimensions.get("window").width;
 
-function Rates({ rate, productId, addVote, isBuyed = null }) {
-  const ratingCompleted = (rating) => {
-    return;
-  };
+function Rates({ rate, productId, addVote, isBuyed = null, theme }) {
 
   return (
     <View style={tw("flex flex-row-reverse")}>
@@ -63,17 +60,14 @@ function Rates({ rate, productId, addVote, isBuyed = null }) {
           { name: "بخش ۱", value: 10 },
           { name: "بخش ۱", value: 50 },
         ].map((field, index) => (
-          <Progress key={index} data={field} />
+          <Progress key={index} data={field} theme={theme} />
         ))}
       </View>
     </View>
   );
 }
 
-const Progress = ({ data, ...props }) => {
-  const colorScheme = React.useMemo(() => {
-    return Appearance.getColorScheme();
-  }, [props.useless]);
+const Progress = ({ data,theme, ...props }) => {
 
   return (
     <View style={[tw("flex flex-1 flex-row items-center py-1.5")]}>
@@ -89,7 +83,7 @@ const Progress = ({ data, ...props }) => {
       <View
         style={[
           tw("rounded-md ml-2 flex-1"),
-          { height: 6, backgroundColor: Colors.theme1[colorScheme].greenFF1 },
+          { height: 6, backgroundColor: Colors.theme1[theme].greenFF1 },
         ]}
       >
         <View
@@ -97,7 +91,7 @@ const Progress = ({ data, ...props }) => {
             tw("h-full rounded-md"),
             {
               width: data.value + "%",
-              backgroundColor: Colors.theme1[colorScheme].greenCF,
+              backgroundColor: Colors.theme1[theme].greenCF,
             },
           ]}
         ></View>
@@ -117,7 +111,9 @@ const Progress = ({ data, ...props }) => {
   );
 };
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  theme: state.publicApi.theme
+});
 
 const mapDispatchToProps = {
   addVote: vote.add,