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";
-
+const { width, height } = Dimensions.get("window");
-function MyBooks({ books, grades, theme }) {
+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,9 +129,10 @@ function ShoppingCart({
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        height: height,
+        flex: 1,
       }}
     >
+      <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
         <Navbar
           setBoxPosition={setBoxPosition}
           headerOptions={{
@@ -307,6 +309,7 @@ function ShoppingCart({
             buttonAction={() => navigation.navigate("Products")}
           />
         )}
+      </KeyboardAvoidingView>
     </SafeAreaView>
   );
 }