update 5 files

src/components/Navbar.js

@@ -93,6 +93,7 @@ const Navbar = ({
             : Colors.theme1.dark,
           height: 64,
           zIndex: 100,
+          position : 'relative'
         },
       ]}
     >

src/navigation.js

@@ -25,7 +25,7 @@ import Product from "../src/screens/Product";
 // import Faq from "../src/screens/Faq";
 // import Activation from "../src/screens/Activation";
 import Videos from '../src/screens/Videos';
-// import Video from "../src/screens/Video";
+import Video from "../src/screens/Video";
 // import VideoDisplay from "../src/screens/VideoDisplay";
 // import Contact from "../src/screens/Contact";
 // import Tests from "../src/screens/Tests";
@@ -475,8 +475,8 @@ const HomeStackScreen = ({theme, startUserGuide}) => {
       <HomeStack.Screen name="Products" component={Products} />
       <HomeStack.Screen name="VOD" component={Videos} />
       <HomeStack.Screen name="Product" component={Product} />
-      {/*
       <HomeStack.Screen name="Video" component={Video} unmountOnExit={true} />
+      {/*
       <HomeStack.Screen name="VideoDisplay" component={VideoDisplay} />
       <HomeStack.Screen name="Sample" component={Sample} />
       <HomeStack.Screen name="Blogs" component={Blogs} />
@@ -523,7 +523,8 @@ const VODStackScreen = ({theme}) => {
       }}
       initialRouteName="VOD">
       <VODStack.Screen name="VOD" children={() => <Videos />} />
-      {/* <VODStack.Screen name="Video" component={Video} unmountOnExit={true} />
+      <VODStack.Screen name="Video" component={Video} unmountOnExit={true} />
+      {/* 
       <VODStack.Screen name="VideoDisplay" component={VideoDisplay} /> */}
     </VODStack.Navigator>
   );

src/screens/Video/components/Season.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { View, Text, Pressable, Appearance } from "react-native";
-import { SimpleLineIcons } from "@expo/vector-icons";
 import { asyncAwesomeAlert } from "../../../utils/AsyncWrappers";
 import { connect } from "react-redux";
 import { publicApi } from "../../../redux/actions";
@@ -178,7 +177,7 @@ const Season = ({
                 )[0]?.name
               : null}
           </Text>
-          <SimpleLineIcons
+          {/* <SimpleLineIcons
             name={
               season[0].categoryId === activeSeason ? "arrow-up" : "arrow-down"
             }
@@ -186,7 +185,7 @@ const Season = ({
             color={
               theme === "light" ? Colors.theme1.green79 : Colors.theme1.greenC8
             }
-          />
+          /> */}
         </View>
         {season[0]?.categoryId === activeSeason
           ? season?.map((unit, index) => (

src/screens/Video/index.js

@@ -1,35 +1,35 @@
-import React, { useState, useEffect } from "react";
+import React, {useState, useEffect} from 'react';
 import {
   View,
   StyleSheet,
   Dimensions,
   ScrollView,
-  SafeAreaView,
   StatusBar,
   LayoutAnimation,
   Image,
   Text,
   Appearance,
-} from "react-native";
+} from 'react-native';
-import { useNavigation } from "@react-navigation/native";
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
-import { connect } from "react-redux";
+import {useNavigation} from '@react-navigation/native';
-import { publicApi, userProduct, config } from "../../redux/actions";
+import {connect} from 'react-redux';
-import separate from "../../utils/separate";
+import {publicApi, userProduct, config} from '../../redux/actions';
-import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
+import separate from '../../utils/separate';
+import {asyncAwesomeAlert} from '../../utils/AsyncWrappers';
 
 //components
-import Navbar from "../../components/Navbar";
+import Navbar from '../../components/Navbar';
-import Drawer from "../../components/Drawer";
+import Drawer from '../../components/Drawer';
-import Divider from "../../components/Divider";
+import Divider from '../../components/Divider';
-import Season from "./components/Season";
+import Season from './components/Season';
-import CustomPressable from "../../components/Pressable";
+import CustomPressable from '../../components/Pressable';
 
 //style
-import tw from "tailwind-rn";
+import tw from 'tailwind-rn';
-import fontSize from "../../constants/fontSize";
+import fontSize from '../../constants/fontSize';
-import Colors from "../../constants/Colors";
+import Colors from '../../constants/Colors';
 
-const { height, width } = Dimensions.get("window");
+const {height, width} = Dimensions.get('window');
 
 function Product({
   route,
@@ -47,7 +47,8 @@ function Product({
   getAvailableForSell,
   availableForSell,
 }) {
-  const [position, setPosition] = useState("100%");
+  const insets = useSafeAreaInsets();
+  const [position, setPosition] = useState('100%');
   const navigation = useNavigation();
   const [addedFlag, setAddedFlag] = React.useState(false);
 
@@ -58,68 +59,63 @@ function Product({
 
   const setBoxPosition = () => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setPosition(position === "100%" ? "0%" : "100%");
+    setPosition(position === '100%' ? '0%' : '100%');
   };
 
   const videoProduct = React.useMemo(() => {
-    return book?.product?.filter((product) => product?.productType === 4)[0];
+    return book?.product?.filter(product => product?.productType === 4)[0];
   }, [book]);
 
   const videoAvailabileInCart = React.useMemo(() => {
     return userProducts?.filter(
-      (product) =>
+      product =>
-        product?.productId === videoProduct?.id && product?.condition < 2
+        product?.productId === videoProduct?.id && product?.condition < 2,
     )?.length;
   }, [userProducts, book]);
 
   const videoBuyed = React.useMemo(() => {
     return userProducts?.filter(
-      (product) =>
+      product =>
-        product?.productId === videoProduct?.id && product?.condition >= 2
+        product?.productId === videoProduct?.id && product?.condition >= 2,
     )?.length;
   }, [userProducts, book]);
 
-
   const videoAvailableForSell = React.useMemo(() => {
-    return availableForSell?.filter((product) => product === 4)?.length;
+    return availableForSell?.filter(product => product === 4)?.length;
   }, [availableForSell]);
 
   const addToCart = React.useCallback(
-    async (action) => {
+    async action => {
       setAddedFlag(true);
       await action();
     },
-    [book, userId]
+    [book, userId],
   );
 
   React.useEffect(() => {
     if (videoAvailabileInCart && addedFlag) {
       setAddedFlag(false);
-      asyncAwesomeAlert("", "به سبد خرید اضافه شد", {
+      asyncAwesomeAlert('', 'به سبد خرید اضافه شد', {
         showCancelButton: false,
         onConfirm: () =>
-          navigation.navigate("Root", {
+          navigation.navigate('Root', {
-            screen: "ShoppingCartTab",
+            screen: 'ShoppingCartTab',
           }),
-        confirmText: "مشاهده سبد خرید",
+        confirmText: 'مشاهده سبد خرید',
       });
     }
   }, [userProducts]);
 
   return (
     <SafeAreaView
-      style={{
+      style={{flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom}}>
-        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
-        position: "relative",
-      }}
-    >
       <Navbar
         setBoxPosition={setBoxPosition}
         headerOptions={{
           logo: true,
           menu: false,
           hamburgerMenu: false,
-          title: "",
+          title: '',
           bookmark: false,
           qr: true,
           back: true,
@@ -128,95 +124,88 @@ function Product({
       <Drawer setBoxPosition={setBoxPosition} position={position} />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
-        style={styles.container}
+        style={styles.container}>
-      >
+        {!mobile ? <View style={tw('mt-5')}></View> : null}
-        {!mobile ? <View style={tw("mt-5")}></View> : null}
+        <View style={[tw(' w-full flex ')]}>
-        <View style={[tw(" w-full flex ")]}>
           <View
             style={[
               tw(
-                "w-full flex flex-row-reverse flex-1 relative overflow-hidden"
+                'w-full flex flex-row-reverse flex-1 relative overflow-hidden',
               ),
-            ]}
+            ]}>
-          >
             <Image
               source={{uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}`}}
               resizeMode="contain"
               style={[
-                tw("rounded-sm ml-2"),
+                tw('rounded-sm ml-2'),
                 {
                   height: mobile ? ((width / 3) * 4) / 2.6 : 300,
                   width: mobile ? width / 3 : 210,
                 },
               ]}
             />
-            <View style={tw("flex  items-end flex-1")}>
+            <View style={tw('flex  items-end flex-1')}>
               <Text
                 style={{
                   marginTop: 5,
                   color:
-                    theme === "light"
+                    theme === 'light'
                       ? Colors.theme1.green79
                       : Colors.theme1.white,
                   fontSize: mobile ? fontSize.base : fontSize.xl,
                   marginBottom: 0,
-                  fontFamily: "DemiBold",
+                  fontFamily: 'DemiBold',
-                }}
+                }}>
-              >
+                {book?.name || ' '}
-                {book?.name || " "}
               </Text>
               <Text
                 style={{
                   color:
-                    theme === "light"
+                    theme === 'light'
                       ? Colors.theme1.green79
                       : Colors.theme1.white,
                   fontSize: mobile ? fontSize.tiny : fontSize.lg,
                   marginTop: 10,
-                  fontFamily: "Regular",
+                  fontFamily: 'Regular',
-                }}
+                }}>
-              >
+                {'پایه' + ' ' + (grades[book?.gradeId] || ' ')}
-                {"پایه" + " " + (grades[book?.gradeId] || " ")}
               </Text>
             </View>
           </View>
           <View
             style={[
-              tw("flex  flex-1 justify-between"),
+              tw('flex  flex-1 justify-between'),
               {
                 paddingRight: 10,
               },
-            ]}
+            ]}>
-          >
+            <Divider type={'vertical'} />
-            <Divider type={"vertical"} />
           </View>
           <CustomPressable
             title={
               videoAvailableForSell
-                ? `خرید با قیمت ${separate(
+                ? `خرید با قیمت ${separate(videoProduct?.price || ' ')} تومان`
-                    videoProduct?.price || " "
+                : 'ناموجود'
-                  )} تومان`
-                : "ناموجود"
             }
             backgroundColor={Colors.theme1.greenCF}
-            color={"white"}
+            color={'white'}
-            border={{ color: "#196EC0", width: 0 }}
+            border={{color: '#196EC0', width: 0}}
-            width={"100%"}
+            width={'100%'}
             loading={loading}
             onPress={() =>
               videoAvailabileInCart
                 ? asyncAwesomeAlert(
-                    "",
+                    '',
-                    "این محصول قبلا به سبد خرید شما اضافه شده است.",
+                    'این محصول قبلا به سبد خرید شما اضافه شده است.',
                     {
                       showCancelButton: true,
                       onConfirm: () =>
-                        navigation.navigate("Root", {
+                        navigation.navigate('Root', {
-                          screen: "ShoppingCartTab",
+                          screen: 'ShoppingCartTab',
                         }),
-                      confirmText: "مشاهده سبد خرید",
+                      confirmText: 'مشاهده سبد خرید',
-                      cancelText: "ادامه خرید",
+                      cancelText: 'ادامه خرید',
-                    }
+                    },
                   )
                 : videoAvailableForSell
                 ? addToCart(
@@ -224,17 +213,23 @@ function Product({
                       productId: videoProduct?.id,
                       userId: userId,
                       count: 1,
-                    })
+                    }),
                   )
                 : null
             }
           />
         </View>
-        <View style={tw("flex")}>
+        <View style={tw('flex')}>
           {seasons
             ?.sort((a, b) => a[0]?.categoryId - b[0]?.categoryId)
             ?.map((season, index) => (
-              <Season season={season} key={index} id={book?.id} index={index} videoBuyed={videoBuyed} />
+              <Season
+                season={season}
+                key={index}
+                id={book?.id}
+                index={index}
+                videoBuyed={videoBuyed}
+              />
             ))}
         </View>
       </ScrollView>
@@ -252,7 +247,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   book: state.book.info,
   userProducts: state.userProduct.list,
   seasons: state.publicApi.categories,