reza fixed some page on tablet mode

navigation/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { Restart } from "fiction-expo-restart";
-import { I18nManager, StatusBar } from "react-native";
+import { I18nManager, StatusBar, Dimensions } from "react-native";
 import * as Linking from "expo-linking";
 import Svg, { G, Path } from "react-native-svg";
 import { NavigationContainer } from "@react-navigation/native";
@@ -583,11 +583,11 @@ const prefix = Linking.createURL("/");
 const Stack = createNativeStackNavigator();
 const Navigation = ({
   getStatus,
-  isLogin,
   userProducts,
   ltr,
   setLTR,
   theme,
+  setOrientation,
 }) => {
   const linking = {
     prefixes: [prefix],
@@ -610,6 +610,11 @@ const Navigation = ({
     );
   }, []);
 
+  Dimensions.addEventListener("change", () => {
+    const dim = Dimensions.get("window");
+    setOrientation(dim.height > dim.width ? "portrait" : "landscape");
+  });
+
   return (
     <NavigationContainer linking={linking}>
       <Stack.Navigator
@@ -652,7 +657,6 @@ const Navigation = ({
 };
 
 const mapStateToProps = (state) => ({
-  isLogin: state.user.status,
   userProducts: state.userProduct.list,
   theme: state.publicApi.theme,
   ltr: state.publicApi.ltr,
@@ -660,6 +664,7 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = {
   getStatus: user.getStatus,
   setLTR: publicApi.setLTR,
+  setOrientation: publicApi.setOrientation,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Navigation);

src/components/AlertModal.js

@@ -97,6 +97,9 @@ const AlertModal = (props) => {
               ? Colors.theme1.gray20
               : Colors.theme1.white,
         }}
+        overlayStyle={{
+          width : width,
+        }}
         closeOnTouchOutside={alert.closeOnTouchOutside}
         closeOnHardwareBackPress={alert.closeOnHardwareBackPress}
         showCancelButton={alert.showCancelButton}

src/redux/actions/public.js

@@ -1,13 +1,15 @@
 import proxy from "../proxy";
 const publicApi = {
+  setOrientation: (data) => async (dispatch) =>
+    await dispatch({ type: "public/setOrientation", data }),
   setLTR: (data) => async (dispatch) =>
-    await dispatch({ type: "public/setLtr", data: data }),
+    await dispatch({ type: "public/setLtr", data }),
   setIsDark: (data) => async (dispatch) =>
-    await dispatch({ type: "public/setIsDark", data: data }),
+    await dispatch({ type: "public/setIsDark", data }),
   getHomeData: (data) => async (dispatch) =>
     await proxy.get("public/homePage", data, { dispatch }),
   setFaqActive: (data) => async (dispatch) =>
-    await dispatch({ type: "public/faq/activate", data: data }),
+    await dispatch({ type: "public/faq/activate", data }),
   bookInfo:
     (data = {}, data2 = {}) =>
     async (dispatch) => {
@@ -28,7 +30,7 @@ const publicApi = {
   getBlogInfo: (data) => async (dispatch) =>
     await proxy.get("public/blogInfo", data, { dispatch }),
   setSubscribe: (data) => async (dispatch) =>
-    await dispatch({ type: "public/setSubscribe", data: data }),
+    await dispatch({ type: "public/setSubscribe", data }),
   getProvince:
     (data = {}) =>
     async (dispatch) =>
@@ -38,15 +40,15 @@ const publicApi = {
     async (dispatch) =>
       await proxy.get("public/city", data, { dispatch }),
   selectMenu: (data) => async (dispatch) =>
-    await dispatch({ type: "public/selectMenu", data: data }),
+    await dispatch({ type: "public/selectMenu", data }),
   getHeader:
     (data = {}) =>
     async (dispatch) =>
       await proxy.get("public/VOD/homePage", data, { dispatch }),
   activeCategory: (data) => async (dispatch) =>
-    await dispatch({ type: "active/category", data: data }),
+    await dispatch({ type: "active/category", data }),
   setVideoActive: (data) => async (dispatch) =>
-    await dispatch({ type: "active/video", data: data }),
+    await dispatch({ type: "active/video", data }),
   getArList: (data, history) => async (dispatch) =>
     await proxy.get("public/ar", data, { history, dispatch }),
 };

src/redux/reducers/public.js

@@ -1,12 +1,13 @@
 import { Dimensions } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
-const width = Dimensions.get("window").width;
+const { width, height } = Dimensions.get("window");
 
 const initialState = {
   ltr: false,
   theme: null,
   mobile: width < 720,
+  orientation: height > width ? "portrait" : "landscape",
   homeData: [],
   newProducts: [],
   levels: [],
@@ -78,6 +79,8 @@ const grades = [
 const publicApi = (state = initialState, action) => {
   let { type, data } = action;
   switch (type) {
+    case "public/setOrientation":
+      return { ...state, orientation: data, error: null, loading: false };
     case "public/setLtr":
       return { ...state, ltr: true };
     case "public/setIsDark":

src/redux/reducers/userFactor.js

@@ -54,7 +54,6 @@ export default function userFactor(state = initialState, action) {
     case "userFactor/deleteUserOffCode":
       return { ...state, loading: false, error: null };
     case "userFactor/payment":
-      console.log(data);
       return { ...state, loading: false, error: null, isVerified: false };
     case "userFactor/verifyVOD":
       return { ...state, loading: false, error: null, isVerified: true };

src/screens/AR/components/Book.js

@@ -10,7 +10,7 @@ import Colors from "../../../constants/Colors";
 
 const { width, height } = Dimensions.get("window");
 
-const Book = ({ book, mobile, theme }) => {
+const Book = ({ book, mobile, theme, orientation }) => {
   return (
     <Pressable
       style={[
@@ -29,7 +29,7 @@ const Book = ({ book, mobile, theme }) => {
         style={[
           tw("rounded-sm w-full"),
           {
-            height: mobile ? (width - 32) / 1.5 : 200,
+            height: mobile ? (width - 32) / 1.5 : height / 4,
             flex: 1,
           },
         ]}
@@ -55,6 +55,7 @@ const Book = ({ book, mobile, theme }) => {
 const mapStateToProps = (state) => ({
   mobile: state.publicApi.mobile,
   theme: state.publicApi.theme,
+  orientation: state.publicApi.orientation,
 });
 
 export default connect(mapStateToProps)(Book);

src/screens/Home/components/Blogs.js

@@ -61,7 +61,7 @@ const Blog = ({ blog, mobile, theme }) => {
     >
       <Image
         source={{ uri: `https://dnvn.ir/api/v1/file/${blog.fileIds}` }}
-        resizeMode="contain"
+        resizeMode="cover"
         style={[
           {
             flex: 1,

src/screens/Home/components/MyBooks.js

@@ -6,6 +6,7 @@ import {
   FlatList,
   Platform,
   Linking,
+  Dimensions,
 } from "react-native";
 import { connect } from "react-redux";
 
@@ -18,8 +19,8 @@ import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
 
 const ios = Platform.OS === "ios";
-
-function MyBooks({ books, grades, theme }) {
+const { width, height } = Dimensions.get("window");
+function MyBooks({ books, grades, theme, mobile }) {
   return books?.filter(
     (book) =>
       (book?.productType === 2 || book?.productType === 3) &&
@@ -61,7 +62,7 @@ function MyBooks({ books, grades, theme }) {
           inverted={true}
           data={books?.filter((book) => book?.condition >= 2)}
           renderItem={({ item }) => (
-            <Book book={item} grades={grades} theme={theme} />
+            <Book book={item} grades={grades} theme={theme} mobile={mobile} />
           )}
           keyExtractor={(book) => book?.id}
         />
@@ -70,7 +71,7 @@ function MyBooks({ books, grades, theme }) {
   ) : null;
 }
 
-const Book = ({ book, grades, theme }) => {
+const Book = ({ book, grades, theme, mobile }) => {
   const actions = {
     3: () =>
       Linking.openURL(`https://ar.dnvn.ir/lunch?id=${book?.product?.ARId}`),
@@ -83,7 +84,7 @@ const Book = ({ book, grades, theme }) => {
       style={tw(`flex mr-4 ${ios ? "items-end" : ""}`)}
       onPress={actions[book?.productType]}
     >
-      <View style={{ height: 165 }}>
+      <View style={{ height: mobile ? 165 : height / 5 }}>
         <Image
           source={{
             uri: `https://dnvn.ir/api/v1/file/${book?.product?.book?.fileIds}`,
@@ -91,7 +92,7 @@ const Book = ({ book, grades, theme }) => {
           resizeMode="contain"
           style={[
             {
-              width: 110,
+              width: mobile ? 110 : height / 5 * 3 / 4,
               flex: 1,
             },
           ]}
@@ -131,6 +132,7 @@ const Book = ({ book, grades, theme }) => {
 const mapStateToProps = (state) => ({
   grades: state.publicApi.grades,
   theme: state.publicApi.theme,
+  mobile: state.publicApi.mobile,
 });
 
 export default connect(mapStateToProps)(MyBooks);

src/screens/Product/components/Book.js

@@ -26,7 +26,6 @@ import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
-const { height, width } = Dimensions.get("window");
 const ios = Platform.OS === "ios";
 
 function Book({
@@ -39,7 +38,9 @@ function Book({
   mobile,
   userProducts,
   theme,
+  orientation,
 }) {
+  const [width, setWidth] = React.useState(Dimensions.get("window").width);
   const navigation = useNavigation();
   const [type, setType] = useState(1);
   const [whichTypeAdded, setWhichTypeAdded] = React.useState(null);
@@ -72,8 +73,6 @@ function Book({
     )?.length;
   }, [userProducts, book]);
 
-  console.log(physicalAvailabileInCart);
-
   const digitalAvailabileInCart = React.useMemo(() => {
     return userProducts?.filter(
       (product) =>
@@ -136,7 +135,10 @@ function Book({
   }, [userProducts]);
 
   return (
-    <View style={[tw("flex  flex-1 relative")]}>
+    <View
+      style={[tw("flex  flex-1 relative")]}
+      onLayout={() => setWidth(Dimensions.get("window").width)}
+    >
       {!mobile ? <View style={tw("mt-5")}></View> : null}
       {/* {imageSlider ? <ImageSlider /> : null} */}
       <View style={[tw("flex flex-row-reverse")]}>
@@ -145,10 +147,20 @@ function Book({
           resizeMode="contain"
           style={[
             tw("rounded-sm"),
-            { height: ((width / 3) * 4) / 2.6, width: width / 3 },
+            {
+              height: mobile
+                ? ((width / 3) * 4) / 2.6
+                : orientation === "portrait"
+                ? ((width / 4) * 4) / 2.6
+                : ((width / 6) * 4) / 2.6,
+              width: mobile
+                ? width / 3
+                : orientation === "portrait"
+                ? width / 4
+                : width / 6,
+            },
           ]}
         />
-
         <View
           style={[
             tw("flex  flex-1 justify-between items-end"),
@@ -685,6 +697,7 @@ const mapStateToProps = (state) => ({
   userProductsLoading: state.userProduct.loading,
   userFavoriteLoading: state.userFavorite.loading,
   mobile: state.publicApi.mobile,
+  orientation: state.publicApi.orientation,
   theme: state.publicApi.theme,
 });
 

src/screens/Product/index.js

@@ -13,6 +13,8 @@ import { book } from "../../redux/actions";
 import { connect } from "react-redux";
 import Navbar from "../../components/Navbar";
 
+const { height, width } = Dimensions.get("window");
+
 function Product({ route, book, getBook, grades }) {
   useEffect(() => {
     getBook({ id: route.params.id, vod: true });

src/screens/Products/components/Main.js

@@ -18,7 +18,7 @@ import fontSize from "../../../constants/fontSize";
 
 const ios = Platform.OS === "ios";
 
-const Main = ({ books, filterOptions, grades, mobile, theme }) => {
+const Main = ({ books, filterOptions, grades, mobile, theme, orientation }) => {
   const [width, setWidth] = React.useState(Dimensions.get("window").width);
   const navigation = useNavigation();
   const [filterLoading, setFilterLoading] = React.useState(false);
@@ -266,7 +266,11 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                 key={product?.product[1]?.id}
                 style={[
                   {
-                    width: mobile ? width / 2 - 25 : width / 3.2,
+                    width: mobile
+                      ? width / 2 - 25
+                      : orientation === "portrait"
+                      ? width / 4.2
+                      : width / 5.2,
                     marginBottom: 15,
                     borderWidth: 1,
                     borderColor:
@@ -293,7 +297,9 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                         flex: 1,
                         height: mobile
                           ? ((width / 2 - 25) * 4) / 2.9
-                          : ((width / 3.2) * 16) / 11,
+                          : orientation === "portrait"
+                          ? ((width / 4.2) * 16) / 11
+                          : ((width / 5.2) * 16) / 11,
                       },
                     ]}
                   />
@@ -392,6 +398,7 @@ const mapStateToProps = (state) => ({
   filterOptions: state.book.filterOptions,
   mobile: state.publicApi.mobile,
   theme: state.publicApi.theme,
+  orientation: state.publicApi.orientation,
 });
 
 const mapDispatchToProps = {};

src/screens/ShoppingCart/components/Code.js

@@ -16,7 +16,7 @@ import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 import tw from "tailwind-rn";
 
-function Code({ codeId, setCodeId, theme, loading }) {
+function Code({ codeId, setCodeId, theme, loading, mobile }) {
   const [value, setValue] = React.useState(codeId || "");
   const [requestFlag, setRequestFlag] = React.useState(false);
 
@@ -62,11 +62,12 @@ function Code({ codeId, setCodeId, theme, loading }) {
         <Pressable
           onPress={() => setOff()}
           style={[
-            tw("py-3 px-5"),
+            tw("py-3 px-5 flex justify-center items-center"),
             {
               backgroundColor: Colors.theme1.greenCF,
               borderTopLeftRadius: 1,
               borderBottomLeftRadius: 1,
+              width : mobile ? "auto" : "20%"
             },
           ]}
         >
@@ -96,6 +97,7 @@ const mapStateToProps = (state) => ({
   codeId: state.userFactor.info?.codeId,
   loading: state.userFactor.loading,
   theme: state.publicApi.theme,
+  mobile : state.publicApi.mobile
 });
 
 const mapDispatchToProps = {

src/screens/ShoppingCart/index.js

@@ -9,6 +9,7 @@ import {
   SafeAreaView,
   StatusBar,
   LayoutAnimation,
+  KeyboardAvoidingView,
   Appearance,
 } from "react-native";
 import { connect } from "react-redux";
@@ -128,89 +129,75 @@ function ShoppingCart({
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        height: height,
+        flex: 1,
       }}
     >
-      <Navbar
-        setBoxPosition={setBoxPosition}
-        headerOptions={{
-          logo: false,
-          menu: false,
-          hamburgerMenu: false,
-          title: "سبد خرید",
-          bookmark: false,
-          qr: false,
-          back: false,
-        }}
-      />
-      <Drawer setBoxPosition={setBoxPosition} position={position} />
-      {list?.filter((product) => product?.condition < 2)?.length ? (
-        <ScrollView
-          contentContainerStyle={styles.contentContainerStyle}
-          style={styles.container}
-        >
-          {list
-            ?.sort((a, b) => a?.id - b?.id)
-            ?.map((product, index) =>
-              product?.condition < 2 ? (
-                <Product key={index} product={product} loading={loading} />
-              ) : null
-            )}
-          <Code />
-          <View
-            style={tw(
-              `flex  w-full border-t py-2 border-gray-300 border-b mt-6 ${
-                theme === "light" ? "" : "border-opacity-20"
-              }`
-            )}
-          >
-            <PriceStatus
-              name="مبلغ سبد خرید"
-              value={
-                isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))
-              }
-              type="normal"
-              theme={theme}
-            />
-            <PriceStatus
-              name="میزان تخفیف"
-              value={
-                isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))
-              }
-              type="error"
-              theme={theme}
-            />
-            <PriceStatus
-              name="مالیات بر ارزش افزوده"
-              value={
-                isEmpty
-                  ? 0
-                  : separate(Math.round((factorInfo?.sumPrice || 0) * 0.009))
-              }
-              type="error"
-              theme={theme}
-            />
-          </View>
-          <View
-            style={tw(
-              "flex flex-row-reverse justify-between items-center w-full py-3"
-            )}
+      <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
+        <Navbar
+          setBoxPosition={setBoxPosition}
+          headerOptions={{
+            logo: false,
+            menu: false,
+            hamburgerMenu: false,
+            title: "سبد خرید",
+            bookmark: false,
+            qr: false,
+            back: false,
+          }}
+        />
+        <Drawer setBoxPosition={setBoxPosition} position={position} />
+        {list?.filter((product) => product?.condition < 2)?.length ? (
+          <ScrollView
+            contentContainerStyle={styles.contentContainerStyle}
+            style={styles.container}
           >
-            <Text
-              style={[
-                {
-                  color:
-                    theme === "light"
-                      ? Colors.theme1.green79
-                      : Colors.theme1.white,
-                  fontSize: fontSize.base,
-                  fontFamily: "bold",
-                },
-              ]}
+            {list
+              ?.sort((a, b) => a?.id - b?.id)
+              ?.map((product, index) =>
+                product?.condition < 2 ? (
+                  <Product key={index} product={product} loading={loading} />
+                ) : null
+              )}
+            <Code />
+            <View
+              style={tw(
+                `flex  w-full border-t py-2 border-gray-300 border-b mt-6 ${
+                  theme === "light" ? "" : "border-opacity-20"
+                }`
+              )}
+            >
+              <PriceStatus
+                name="مبلغ سبد خرید"
+                value={
+                  isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))
+                }
+                type="normal"
+                theme={theme}
+              />
+              <PriceStatus
+                name="میزان تخفیف"
+                value={
+                  isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))
+                }
+                type="error"
+                theme={theme}
+              />
+              <PriceStatus
+                name="مالیات بر ارزش افزوده"
+                value={
+                  isEmpty
+                    ? 0
+                    : separate(Math.round((factorInfo?.sumPrice || 0) * 0.009))
+                }
+                type="error"
+                theme={theme}
+              />
+            </View>
+            <View
+              style={tw(
+                "flex flex-row-reverse justify-between items-center w-full py-3"
+              )}
             >
-              جمع کل سبد خرید
-            </Text>
-            <View style={tw("flex flex-row-reverse items-center")}>
               <Text
                 style={[
                   {
@@ -218,95 +205,111 @@ function ShoppingCart({
                       theme === "light"
                         ? Colors.theme1.green79
                         : Colors.theme1.white,
-                    fontSize: fontSize.xl,
+                    fontSize: fontSize.base,
                     fontFamily: "bold",
                   },
                 ]}
               >
-                {isEmpty ? 0 : separate(factorInfo?.payPrice || "")}
-              </Text>
-              <Text
-                style={[
-                  {
-                    color:
-                      theme === "light"
-                        ? Colors.theme1.green79
-                        : Colors.theme1.white,
-                    fontSize: fontSize.sm,
-                    fontFamily: "regular",
-                    marginRight: 4,
-                  },
-                ]}
-              >
-                تومان
+                جمع کل سبد خرید
               </Text>
+              <View style={tw("flex flex-row-reverse items-center")}>
+                <Text
+                  style={[
+                    {
+                      color:
+                        theme === "light"
+                          ? Colors.theme1.green79
+                          : Colors.theme1.white,
+                      fontSize: fontSize.xl,
+                      fontFamily: "bold",
+                    },
+                  ]}
+                >
+                  {isEmpty ? 0 : separate(factorInfo?.payPrice || "")}
+                </Text>
+                <Text
+                  style={[
+                    {
+                      color:
+                        theme === "light"
+                          ? Colors.theme1.green79
+                          : Colors.theme1.white,
+                      fontSize: fontSize.sm,
+                      fontFamily: "regular",
+                      marginRight: 4,
+                    },
+                  ]}
+                >
+                  تومان
+                </Text>
+              </View>
             </View>
-          </View>
-          <View style={tw("w-full")}>
-            <Pressable
-              style={[
-                tw(
-                  "w-full rounded-md flex flex-row justify-center items-center py-3 px-3 my-5"
-                ),
-                {
-                  backgroundColor:
-                    theme === "light"
-                      ? Colors.theme1.greenC8 + "1a"
-                      : Colors.theme1.blue90 + "33",
-                },
-              ]}
-            >
-              <Text
+            <View style={tw("w-full")}>
+              <Pressable
                 style={[
-                  tw("mr-1"),
+                  tw(
+                    "w-full rounded-md flex flex-row justify-center items-center py-3 px-3 my-5"
+                  ),
                   {
-                    color:
+                    backgroundColor:
                       theme === "light"
-                        ? Colors.theme1.green79
-                        : Colors.theme1.white,
-                    fontSize: fontSize.sm,
-                    fontFamily: "regular",
+                        ? Colors.theme1.greenC8 + "1a"
+                        : Colors.theme1.blue90 + "33",
                   },
                 ]}
               >
-                هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود
-              </Text>
-              <Ionicons
-                name="alert-circle-outline"
-                size={20}
-                color={
-                  theme === "light"
-                    ? Colors.theme1.greenC8
-                    : Colors.theme1.white
+                <Text
+                  style={[
+                    tw("mr-1"),
+                    {
+                      color:
+                        theme === "light"
+                          ? Colors.theme1.green79
+                          : Colors.theme1.white,
+                      fontSize: fontSize.sm,
+                      fontFamily: "regular",
+                    },
+                  ]}
+                >
+                  هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود
+                </Text>
+                <Ionicons
+                  name="alert-circle-outline"
+                  size={20}
+                  color={
+                    theme === "light"
+                      ? Colors.theme1.greenC8
+                      : Colors.theme1.white
+                  }
+                />
+              </Pressable>
+
+              <CustomPressable
+                title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"}
+                backgroundColor={Colors.theme1.greenCF}
+                color={"white"}
+                border={{ color: "#196EC0", width: 0 }}
+                width={"100%"}
+                onPress={() =>
+                  isEmpty
+                    ? asyncAwesomeAlert("خطا", "سبد خرید شما خالی است.", {
+                        showCancelButton: false,
+                      })
+                    : hasPhysical
+                    ? navigation.navigate("DeliveryForm")
+                    : payFactor({ userId })
                 }
               />
-            </Pressable>
-
-            <CustomPressable
-              title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"}
-              backgroundColor={Colors.theme1.greenCF}
-              color={"white"}
-              border={{ color: "#196EC0", width: 0 }}
-              width={"100%"}
-              onPress={() =>
-                isEmpty
-                  ? asyncAwesomeAlert("خطا", "سبد خرید شما خالی است.", {
-                      showCancelButton: false,
-                    })
-                  : hasPhysical
-                  ? navigation.navigate("DeliveryForm")
-                  : payFactor({ userId })
-              }
-            />
-          </View>
-        </ScrollView>
-      ) : (
-        <Empty
-          text={"سبد خرید شما خالی است"}
-          buttonText={"فروشگاه"}
-          buttonAction={() => navigation.navigate("Products")}
-        />
-      )}
+            </View>
+          </ScrollView>
+        ) : (
+          <Empty
+            text={"سبد خرید شما خالی است"}
+            buttonText={"فروشگاه"}
+            buttonAction={() => navigation.navigate("Products")}
+          />
+        )}
+      </KeyboardAvoidingView>
     </SafeAreaView>
   );
 }