update Pressable.js, MyBooks.js and Videos.js

src/components/Pressable.js

@@ -45,6 +45,7 @@ function Pressable1({
               : fontSize.base,
             color: color,
             fontFamily: "bold",
+            textAlign: "center",
           }}
         >
           {title}

src/screens/Home/components/MyBooks.js

@@ -1,3 +1,4 @@
+import React from "react";
 import {
   View,
   Text,
@@ -9,9 +10,13 @@ import {
   Dimensions,
 } from "react-native";
 import { connect } from "react-redux";
+import { useNavigation } from "@react-navigation/native";
+import { AntDesign } from "@expo/vector-icons";
 
 //components
 import Progress from "../../../components/Progress";
+import Modal from "../../../components/Modal";
+import CustomPressable from "../../../components/Pressable";
 
 //Color
 import Colors from "../../../constants/Colors";
@@ -20,6 +25,7 @@ import fontSize from "../../../constants/fontSize";
 
 const ios = Platform.OS === "ios";
 const { width, height } = Dimensions.get("window");
+
 function MyBooks({ books, grades, theme, mobile }) {
   return books?.filter(
     (book) =>
@@ -72,6 +78,9 @@ function MyBooks({ books, grades, theme, mobile }) {
 }
 
 const Book = ({ book, grades, theme, mobile }) => {
+  const [openModal, setOpenModal] = React.useState(false);
+  const navigation = useNavigation();
+
   const actions = {
     3: () =>
       Linking.openURL(`https://ar.dnvn.ir/lunch?id=${book?.product?.ARId}`),
@@ -82,7 +91,7 @@ const Book = ({ book, grades, theme, mobile }) => {
   return (
     <Pressable
       style={tw(`flex mr-4 ${ios ? "items-end" : ""}`)}
-      onPress={actions[book?.productType]}
+      onPress={() => setOpenModal(true)}
     >
       <View style={{ height: mobile ? 165 : height / 5 }}>
         <Image
@@ -92,7 +101,7 @@ const Book = ({ book, grades, theme, mobile }) => {
           resizeMode="contain"
           style={[
             {
-              width: mobile ? 110 : height / 5 * 3 / 4,
+              width: mobile ? 110 : ((height / 5) * 3) / 4,
               flex: 1,
             },
           ]}
@@ -125,6 +134,110 @@ const Book = ({ book, grades, theme, mobile }) => {
         {"پایه" + " " + grades[book?.product?.book?.gradeId]}
       </Text>
       <Progress percent={60} alignItems={"items-end"} />
+      <Modal type="fade" openModal={openModal} setOpenModal={setOpenModal}>
+        <Pressable
+          style={[
+            tw("flex-1 justify-center items-center relative"),
+            {
+              shadowColor: "#00000055",
+              shadowOffset: { width: 0, height: 1 },
+              shadowOpacity: 0.8,
+              shadowRadius: 2,
+              elevation: 5,
+              backgroundColor: Colors.theme1.dark + "aa",
+            },
+          ]}
+          onPress={() => setOpenModal(!openModal)}
+        >
+          <Pressable
+            onPress={(e) => e.stopPropagation()}
+            style={[
+              tw("flex flex-col items-center p-4 rounded-md relative"),
+              {
+                backgroundColor:
+                  theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
+              },
+            ]}
+          >
+            <AntDesign
+              name="close"
+              style={{
+                backgroundColor:
+                  theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
+                padding: 4,
+                borderRadius: 200,
+                position: "absolute",
+                right: 8,
+                top: mobile ? -20 : -30,
+              }}
+              size={mobile ? 20 : 30}
+              color={Colors.theme1.redFF1}
+              onPress={() => setOpenModal(!openModal)}
+            />
+            <Image
+              source={{
+                uri: `https://dnvn.ir/api/v1/file/${book?.product?.book?.fileIds}`,
+              }}
+              resizeMode="contain"
+              style={[
+                tw("bg-gray-100 mb-3"),
+                {
+                  height: ((width / 2) * 4.25) / 3,
+                  width: width / 2,
+                },
+              ]}
+            />
+            <View style={tw("flex items-center")}></View>
+            <Pressable
+              onPress={() => navigation.push("QR", { page: "activation" })}
+              style={{
+                backgroundColor: Colors.theme1.greenD9,
+                color: "white",
+                width: width / 2,
+                paddingVertical: 10,
+                borderRadius: 5,
+              }}
+            >
+              <Text
+                style={{
+                  fontFamily: "regular",
+                  textAlign: "center",
+                  color: Colors.theme1.white,
+                  fontSize: fontSize.tiny,
+                }}
+              >
+                QR اسکن کد
+              </Text>
+            </Pressable>
+            <Pressable
+              onPress={() =>
+                Linking.openURL(
+                  `https://ar.dnvn.ir/lunch?id=${book?.product?.ARId}`
+                )
+              }
+              style={{
+                backgroundColor: Colors.theme1.gray2077,
+                color: "white",
+                width: width / 2,
+                paddingVertical: 10,
+                borderRadius: 5,
+                marginTop: 12,
+              }}
+            >
+              <Text
+                style={{
+                  fontFamily: "regular",
+                  textAlign: "center",
+                  color: Colors.theme1.white,
+                  fontSize: fontSize.tiny,
+                }}
+              >
+                واقعیت افزوده
+              </Text>
+            </Pressable>
+          </Pressable>
+        </Pressable>
+      </Modal>
     </Pressable>
   );
 };

src/screens/Home/components/Videos.js

@@ -1,4 +1,13 @@
-import { View, Text, Image, Pressable, FlatList, Platform } from "react-native";
+import React from "react";
+import {
+  View,
+  Text,
+  Image,
+  Pressable,
+  FlatList,
+  Platform,
+  Dimensions,
+} from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import tw from "tailwind-rn";
 import { connect } from "react-redux";
@@ -47,6 +56,7 @@ function Videos({ videos, grades, mobile, theme }) {
 
 const Video = ({ video, mobile, grades, theme }) => {
   const navigation = useNavigation();
+
   return (
     <Pressable
       style={[
@@ -96,6 +106,7 @@ const Video = ({ video, mobile, grades, theme }) => {
       <View style={tw("absolute bottom-0 left-0 w-full")}>
         <Progress percent={60} alignItems={"items-end"} />
       </View>
+      
     </Pressable>
   );
 };