reza fixed home tablet mode

3 years ago · a4427c3961
parent d1f46bd12e
commit a4427c3961
19 changed files with 326 additions and 252 deletions
--- a/App.js
+++ b/App.js
@ -12,6 +12,7 @@ const App = () => {
    light : require("./assets/fonts/Farsi/Light.ttf"),
    regular: require("./assets/fonts/Farsi/Regular.ttf"),
    bold: require("./assets/fonts/Farsi/Medium.ttf"),
+    demi: require("./assets/fonts/Farsi/DemiBold.ttf"),
  });

  if (!fontsLoaded) {
--- a/eas.json
+++ b/eas.json
@ -0,0 +1,18 @@
+{
+  "cli": {
+    "version": ">= 0.47.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}
--- a/src/components/CustomTextInput.js
+++ b/src/components/CustomTextInput.js
@ -36,7 +36,7 @@ const FloatingLabelInput = ({
      fontFamily: "regular",
      top: !isFocused ? "50%" : 1,
      fontSize: !isFocused ? fontSize.tiny : fontSize.sm,
-      transform: [{ translateY: -width / 35 }],
+      transform: [{ translateY: -fontSize.lg }],
      color: !isFocused
        ? Colors.theme1[colorScheme].gray2077
        : Colors.theme1[colorScheme].green79,
--- a/src/components/Drawer.js
+++ b/src/components/Drawer.js
@ -48,13 +48,6 @@ const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => {
      toast: "",
      message: "",
    },
-    {
-      name: "پروفایل",
-      route: "Profile",
-      icon: <AntDesign name="profile" size={23} color={"#555555"} />,
-      toast: "",
-      message: "",
-    },
    {
      name: "واقعیت افزوده",
      route: "AR",
@ -69,13 +62,6 @@ const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => {
      toast: "",
      message: "",
    },
-    {
-      name: "سبد خرید",
-      route: "ShoppingCart",
-      icon: <Ionicons name="cart" size={23} color={"#555555"} />,
-      toast: "",
-      message: "",
-    },
    {
      name: "سوالات متداول",
      route: "Faq",
--- a/src/components/Header.js
+++ b/src/components/Header.js
@ -26,7 +26,7 @@ export default function Header({ title, description, background }) {
      </Text>
      <Text
        style={[
-          { color: "#86A0B9", fontSize: fontSize.sm, fontFamily: "light" },
+          { color: "#86A0B9", fontSize: fontSize.tiny, fontFamily: "regular" },
        ]}
      >
        {description}
--- a/src/components/Progress.js
+++ b/src/components/Progress.js
@ -1,35 +1,41 @@
-import React, {useState, useEffect} from 'react';
-import {View, Appearance } from 'react-native';
-import tw from 'tailwind-rn';
+import React, { useState, useEffect } from "react";
+import { View, Appearance } from "react-native";
+import tw from "tailwind-rn";

 import Colors from "../constants/Colors";

 //Color
-import Color from '../constants/Colors';
+import Color from "../constants/Colors";

-function Progress({percent, alignItems}) {
+function Progress({ percent, alignItems }) {
  const colorScheme = Appearance.getColorScheme();
  const [delayPercent, setDelayPercent] = useState(0);
  useEffect(() => {
-    setTimeout(() => {
-      setDelayPercent(() => percent);
-    }, 1000);
+    if (percent) {
+      setTimeout(() => {
+        setDelayPercent(() => percent);
+      }, 1000);
+    }
  }, [percent]);
  return (
    <View
      style={[
-        tw(`w-full h-1.5 rounded-full  overflow-hidden my-3 flex ${alignItems}`),
-        {backgroundColor: Colors.theme1[colorScheme].green79 + '22'},
-      ]}>
+        tw(
+          `w-full h-1.5 rounded-full  overflow-hidden my-3 flex ${alignItems}`
+        ),
+        { backgroundColor: Colors.theme1[colorScheme].green79 + "22" },
+      ]}
+    >
      <View
        style={[
-          tw('h-full rounded-full'),
+          tw("h-full rounded-full"),
          {
            backgroundColor: Color.theme1[colorScheme].greenCF,
-            width: percent + '%',
+            width: percent + "%",
            // backgroundColor: Color.theme1.light.blue4,
          },
-        ]}></View>
+        ]}
+      ></View>
    </View>
  );
 }
--- a/src/redux/reducers/public.js
+++ b/src/redux/reducers/public.js
@ -5,6 +5,7 @@ const width = Dimensions.get("window").width;

 const initialState = {
  // isDark: (await AsyncStorage.getItem("isDark")) || false,
+  mobile : width < 720,
  homeData: [],
  newProducts: [],
  levels: [],
--- a/src/screens/Activation/index.js
+++ b/src/screens/Activation/index.js
--- a/src/screens/Address/index.js
+++ b/src/screens/Address/index.js
@ -47,7 +47,7 @@ const Address = ({
  setPhase,
  cityLoading,
 }) => {
-  const profilePage = route.params.type === "profile";
+  const profilePage = route.params?.type === "profile";
  const colorScheme = Appearance.getColorScheme();
  const navigation = useNavigation();
  const [addressFields, setAddressFields] = useState({});
--- a/src/screens/Blogs/layouts/Target.js
+++ b/src/screens/Blogs/layouts/Target.js
@ -152,7 +152,7 @@ const Target = ({ blogs }) => {
  return (
    <View style={tw("flex flex-col")}>
      <Large blog={blogs[0]} />
-      <View style={tw("flex flex-row justify-between mt-3")}>
+      <View style={tw("flex flex-row justify-between mt-4")}>
        {blogs?.slice(1, 3).map((blog, index) => (
          <Small blog={blog} key={index} />
        ))}
--- a/src/screens/Contact/Box.js
+++ b/src/screens/Contact/Box.js
@ -1,8 +1,10 @@
-import { View, Text, Image, TouchableOpacity } from "react-native";
+import { View, Text, Image, TouchableOpacity, Platform } from "react-native";
 import React from "react";
 import tw from "tailwind-rn";
 import fontSize from "../../constants/fontSize";

+const ios = Platform.OS === "ios";
+
 const Box = ({ info }) => {
  return (
    <TouchableOpacity
@ -22,6 +24,7 @@ const Box = ({ info }) => {
            fontFamily: "bold",
            fontSize: fontSize.lg,
            color: info.title.color,
+            textAlign : ios ? "right" : "auto",
          }}
        >
          {info.title.text}
@ -33,6 +36,7 @@ const Box = ({ info }) => {
              fontFamily: "light",
              fontSize: fontSize.sm,
              color: info.description.color,
+              textAlign : ios ? "right" : "auto",
            },
          ]}
        >
@ -40,9 +44,9 @@ const Box = ({ info }) => {
        </Text>
        <Text
          style={[
-            tw("self-start mt-2"),
+            tw("self-start mt-2.5"),
            {
-              fontFamily: "bold",
+              fontFamily: "demi",
              fontSize: fontSize.sm,
              color: info?.link?.color,
            },
--- a/src/screens/Home/components/Blogs.js
+++ b/src/screens/Home/components/Blogs.js
@ -8,7 +8,7 @@ import {
  FlatList,
  Pressable,
  Appearance,
-  Platform
+  Platform,
 } from "react-native";
 import { connect } from "react-redux";
 import Svg, { G, Path } from "react-native-svg";
@ -27,14 +27,14 @@ import userImage from "../assets/user.png";
 const { width } = Dimensions.get("window");
 const ios = Platform.OS === "ios";

-function Blogs({ blogs }) {
+function Blogs({ blogs, mobile }) {
  const colorScheme = Appearance.getColorScheme();
  const Blog = ({ blog }) => {
    return (
      <Pressable
        style={[
          tw("rounded-md ml-3 rounded-md relative"),
-          { width: width / 1.5 },
+          { width: mobile ? width / 1.5 : width / 2.2 },
        ]}
        // onPress={() => navigation.navigate('Product')}
      >
@ -42,7 +42,10 @@ function Blogs({ blogs }) {
          source={{ uri: `https://dnvn.ir/api/v1/file/${blog.fileIds}` }}
          style={[
            tw("rounded-md"),
-            { width: "100%", height: ((width / 1.5) * 9) / 16 },
+            {
+              width: "100%",
+              height: ((mobile ? width / 1.5 : width / 2.2) * 9) / 16,
+            },
          ]}
        />
        <View
@ -55,7 +58,7 @@ function Blogs({ blogs }) {
              shadowOpacity: 0.8,
              shadowRadius: 2,
              elevation: 5,
-              minHeight : 70
+              minHeight: 70,
            },
          ]}
        >
@ -65,7 +68,7 @@ function Blogs({ blogs }) {
              {
                color: Colors.theme1[colorScheme].gray20,
                fontFamily: "bold",
-                fontSize: fontSize.tiny,
+                fontSize: mobile ? fontSize.tiny : fontSize.lg,
                textAlign: ios ? "right" : "auto",
              },
            ]}
@ -83,7 +86,7 @@ function Blogs({ blogs }) {
                  {
                    color: Colors.theme1[colorScheme].gray20,
                    fontFamily: "regular",
-                    fontSize: fontSize.sm,
+                    fontSize: mobile ? fontSize.sm : fontSize.base,
                  },
                ]}
              >
@ -97,7 +100,7 @@ function Blogs({ blogs }) {
                  {
                    color: Colors.theme1[colorScheme].gray20,
                    fontFamily: "regular",
-                    fontSize: fontSize.sm,
+                    fontSize: mobile ? fontSize.sm : fontSize.base,
                  },
                ]}
              >
@ -150,5 +153,6 @@ function Blogs({ blogs }) {

 const mapStateToProps = (state) => ({
  // features: state.publicApi.home?.features,
+  mobile: state.publicApi.mobile,
 });
 export default connect(mapStateToProps, {})(Blogs);
--- a/src/screens/Home/components/Header.js
+++ b/src/screens/Home/components/Header.js
@ -2,23 +2,25 @@ import React from "react";
 import { View, Text, Pressable, Appearance } from "react-native";
 import { Entypo } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
+import {connect} from 'react-redux';
+
 import fontSize from "../../../constants/fontSize";
 import tw from "tailwind-rn";

 //Color
 import Color from "../../../constants/Colors";

-const Header = ({ title, route }) => {
+const Header = ({ title, route, mobile }) => {
  const colorScheme = Appearance.getColorScheme();
  const navigation = useNavigation();
  return (
-    <View style={tw("w-full flex flex-row-reverse justify-between mb-0")}>
+    <View style={tw(`w-full flex flex-row-reverse justify-between ${mobile ? "" : "mb-2"}`)}>
      <Text
        style={[
          {
            color: Color.theme1[colorScheme].green79,
-            fontFamily: "bold",
-            fontSize: fontSize.xl,
+            fontFamily: "demi",
+            fontSize: mobile ? fontSize.lg : fontSize.xl2,
          },
        ]}
      >
@ -33,4 +35,8 @@ const Header = ({ title, route }) => {
  );
 };

-export default Header;
+const mapStateToProps = (state) => ({
+  mobile : state.publicApi.mobile
+})
+
+export default connect(mapStateToProps)(Header);
--- a/src/screens/Home/components/Scroll.js
+++ b/src/screens/Home/components/Scroll.js
@ -5,15 +5,17 @@ import {
  TouchableOpacity,
  FlatList,
  Platform,
+  Dimensions
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import tw from "tailwind-rn";

 const ios = Platform.OS === "ios";
+const {height} = Dimensions.get("window");

 import { connect } from "react-redux";

-function Scroll({ books }) {
+function Scroll({ books, mobile }) {
  const Box = ({ books }) => {
    const Product = ({ book, position }) => {
      const navigation = useNavigation();
@ -25,8 +27,8 @@ function Scroll({ books }) {
          style={[
            tw("rounded-md mx-1 overflow-hidden rounded-md"),
            {
-              width: position === 0 ? 163 : 79,
-              height: position === 0 ? 245 : 118,
+              width: position === 0 ? mobile ? 163 : 240 : mobile ? 79 : 125,
+              height: position === 0 ? mobile ? 245 : 350 : mobile ? 118 : 170,
            },
          ]}
          onPress={() =>
@ -48,7 +50,7 @@ function Scroll({ books }) {
              ios ? "flex-wrap" : "flex-wrap-reverse"
            }`
          ),
-          { height: 245, direction: "rtl" },
+          { height: mobile ? 245 : 350, direction: "rtl" },
        ]}
      >
        {books.map((book, index) => (
@ -72,6 +74,8 @@ function Scroll({ books }) {
  );
 }

-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  mobile : state.publicApi.mobile
+});

 export default connect(mapStateToProps, {})(Scroll);
--- a/src/screens/Home/components/Videos.js
+++ b/src/screens/Home/components/Videos.js
@ -21,13 +21,13 @@ import fontSize from "../../../constants/fontSize";

 const ios = Platform.OS === "ios";

-function Videos({ videos, grades }) {
+function Videos({ videos, grades, mobile }) {
  const colorScheme = Appearance.getColorScheme();
  const Video = ({ video }) => {
    const navigation = useNavigation();
    return (
      <TouchableOpacity
-        style={tw("flex flex-col ml-3")}
+        style={tw(`flex flex-col ${mobile ? "ml-3" : "ml-5"}`)}
        onPress={() => navigation.navigate("Video", { id: video.id })}
      >
        <Image
@ -35,8 +35,8 @@ function Videos({ videos, grades }) {
          style={[
            tw("rounded-md"),
            {
-              height: 160,
-              width: 110,
+              height: mobile ? 160 : 280,
+              width: mobile ? 110 : 200,
            },
          ]}
        />
@ -46,12 +46,12 @@ function Videos({ videos, grades }) {
            {
              color: Colors.theme1[colorScheme].gray20,
              fontFamily: "bold",
-              fontSize: fontSize.base,
+              fontSize: mobile ? fontSize.base : fontSize.xl,
              textAlign: ios ? "right" : "auto",
            },
          ]}
        >
-          {video.name}
+          {'دوره ویدئویی' + ' ' + video.name}
        </Text>
        <Text
          style={[
@ -59,7 +59,7 @@ function Videos({ videos, grades }) {
            {
              color: Colors.theme1[colorScheme].gray20,
              fontFamily: "regular",
-              fontSize: fontSize.tiny,
+              fontSize: mobile ? fontSize.tiny : fontSize.base,
              textAlign: ios ? "right" : "auto",
            },
          ]}
@ -94,6 +94,7 @@ function Videos({ videos, grades }) {

 const mapStateToProps = (state) => ({
  grades: state.publicApi.grades,
+  mobile : state.publicApi.mobile
 });

 export default connect(mapStateToProps, {})(Videos);
--- a/src/screens/Home/index.js
+++ b/src/screens/Home/index.js
@ -32,7 +32,9 @@ const Home = ({
  getBooks,
  userProducts,
  getUserProducts,
+  mobile,
 }) => {
+  const [width, setWidth] = useState(Dimensions.get("window").width);
  const [position, setPosition] = useState("100%");

  useEffect(() => {
@ -69,15 +71,17 @@ const Home = ({
      <Drawer setBoxPosition={setBoxPosition} position={position} />
      <ScrollView
        contentContainerStyle={styles.contentContainerStyle}
-        style={[styles.container]}
+        style={[styles.container, { width }]}
+        onLayout={() => setWidth(Dimensions.get("window").width)}
      >
-         {userProduct?.length > 0 && <MyBooks books={userProducts} />}
+        {!mobile && <View style={tw("mt-5")}></View>}
+        {userProduct?.length > 0 && <MyBooks books={userProducts} />}
        <View style={tw("px-4 w-full")}>
          <Header title={"فروشگاه"} route={"Products"} />
        </View>
-         {books?.length > 0 && <Scroll books={books} />}
-         {books?.length > 0 && <Videos videos={books} />}
-        {/* {blogs?.length > 0 && <Blogs blogs={blogs} />}   */}
+        {books?.length > 0 && <Scroll books={books} />}
+        {books?.length > 0 && <Videos videos={books} />}
+        {blogs?.length > 0 && <Blogs blogs={blogs} />}
      </ScrollView>
    </SafeAreaView>
  );
@ -90,7 +94,6 @@ const styles = StyleSheet.create({
    // alignItems: "",
  },
  container: {
-    width: Dimensions.get("window").width,
    backgroundColor: "white",
    flexDirection: "column",
    paddingVertical: 0,
@ -102,6 +105,7 @@ const mapStateToProps = (state) => ({
  blogs: state.blog.list,
  books: state.book.list,
  userProducts: state.userProduct.list,
+  mobile: state.publicApi.isMobile,
 });

 const mapDispatchToProps = {
--- a/src/screens/Login/index.js
+++ b/src/screens/Login/index.js
@ -56,88 +56,112 @@ function Login(props) {
    <KeyboardAvoidingView
      behavior={ios ? "padding" : "height"}
      style={[
-        tw("flex flex-col flex-1 justify-center items-center bg-white px-4"),
+        tw(
+          `flex flex-col flex-1 justify-center items-center bg-white mx-auto px-4`
+        ),
      ]}
    >
      {/* <TouchableWithoutFeedback> */}
-        <Image
-          source={Logo}
-          style={{
-            width: 55,
-            height: 80,
-          }}
+      <Image
+        source={Logo}
+        style={{
+          width: 55,
+          height: 80,
+        }}
+      />
+      <Text
+        style={[
+          tw(
+            `w-full mt-5 ${ios ? "text-right" : ""} ${
+              props.mobile ? "" : "w-3/4"
+            }`
+          ),
+          {
+            fontSize: fontSize.xl2,
+            fontFamily: "bold",
+            color: Colors.theme1[colorScheme].black,
+          },
+        ]}
+      >
+        {"سلام"}
+      </Text>
+      <Text
+        style={[
+          tw(
+            `w-full ${ios ? "text-right" : ""} ${
+              props.mobile ? "mb-5" : "mb-10 w-3/4"
+            }`
+          ),
+          {
+            fontSize: fontSize.xl2,
+            fontFamily: "bold",
+            color: Colors.theme1[colorScheme].black,
+          },
+        ]}
+      >
+        {"خوش برگشتی!"}
+      </Text>
+      <View
+        style={[
+          tw(
+            `w-full rounded-md overflow-hidden relative ${
+              props.mobile ? "" : "w-3/4"
+            }`
+          ),
+          {},
+        ]}
+      >
+        <CustomTextInput
+          label="شماره موبایل"
+          textAlign="left"
+          name="phone"
+          maxLength={11}
+          value={phone}
+          onChange={onChangePhone}
+          autoFocus={true}
+          direction="ltr"
+          regex={onInput.phonenumber}
        />
-        <Text
-          style={[
-            tw(`w-full mt-5 ${ios ? "text-right" : ""}`),
-            {
-              fontSize: fontSize.xl2,
-              fontFamily: "bold",
-              color: Colors.theme1[colorScheme].black,
-            },
-          ]}
-        >
-          {"سلام"}
-        </Text>
-        <Text
-          style={[
-            tw(`w-full mb-5 ${ios ? "text-right" : ""}`),
-            {
-              fontSize: fontSize.xl2,
-              fontFamily: "bold",
-              color: Colors.theme1[colorScheme].black,
-            },
-          ]}
-        >
-          {"خوش برگشتی!"}
-        </Text>
-        <View style={[tw("w-full rounded-md overflow-hidden relative"), {}]}>
-          <CustomTextInput
-            label="شماره موبایل"
-            textAlign="left"
-            name="phone"
-            maxLength={11}
-            value={phone}
-            onChange={onChangePhone}
-            autoFocus={true}
-            direction="ltr"
-            regex={onInput.phonenumber}
-          />
-        </View>
-        <TouchableHighlight
-          disabled={loading}
-          style={[
-            tw("w-full py-2.5 rounded-md"),
-            {
-              backgroundColor: Colors.theme1[colorScheme].greenCF,
-              alignItems: "center",
-              justifyContent: "center",
-              marginTop: 15,
-              fontFamily: "light",
-            },
-          ]}
-          onPress={() => submit()}
-        >
-          {loading ? (
-            <ActivityIndicator size={"small"} color={"white"} />
-          ) : (
-            <Text
-              style={{
-                color: "white",
-                fontSize: fontSize.xl,
-                fontWeight: "bold",
-              }}
-            >
-              {"ادامه"}
-            </Text>
-          )}
-        </TouchableHighlight>
+      </View>
+      {
+        !props.mobile && <View style={tw('mt-10')}></View>
+      }
+      <TouchableHighlight
+        disabled={loading}
+        style={[
+          tw(`w-full py-2.5 rounded-md ${props.mobile ? "" : "w-2/4"}`),
+          {
+            backgroundColor: Colors.theme1[colorScheme].greenCF,
+            alignItems: "center",
+            justifyContent: "center",
+            marginTop: 15,
+            fontFamily: "light",
+          },
+        ]}
+        onPress={() => submit()}
+      >
+        {loading ? (
+          <ActivityIndicator size={"small"} color={"white"} />
+        ) : (
+          <Text
+            style={{
+              color: "white",
+              fontSize: fontSize.xl,
+              fontWeight: "bold",
+            }}
+          >
+            {"ادامه"}
+          </Text>
+        )}
+      </TouchableHighlight>
      {/* </TouchableWithoutFeedback> */}
    </KeyboardAvoidingView>
  );
 }

-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});

 const mapDispatchToProps = {
  sendPhoneNumber: user.otp,
--- a/src/screens/Otp/index.js
+++ b/src/screens/Otp/index.js
@ -132,11 +132,11 @@ function Otp(props) {
      />
      <Text
        style={[
-          tw(`w-full mt-2.5 ${ios ? 'text-right' : ""}`),
+          tw(`w-full mt-2.5 ${ios ? 'text-right' : ""} ${props.mobile ? "" : "w-3/4"}`),
          {
-            fontSize: fontSize.sm,
+            fontSize: props.mobile ? fontSize.sm : fontSize.base,
            fontFamily: "regular",
-            color: "#6f7074",
+            color: Colors.theme1[colorScheme].gray20,
          },
        ]}
      >{`یک کد تائیدیه به شماره ${props.route.params?.phone} ارسال شد. آن را در قسمت زیر وارد کنید`}</Text>
@ -152,7 +152,7 @@ function Otp(props) {
              fontSize: fontSize.xl3,
              fontFamily: "bold",
              color: Colors.theme1[colorScheme].green79,
-              // width : ios ? fontSize.xl3 + 40 : ""
+              width : ios ? fontSize.xl3 + 40 : ""
            },
          ]}
          underlineColorAndroid={"transparent"}
@ -170,7 +170,7 @@ function Otp(props) {
              fontSize: fontSize.xl3,
              fontFamily: "bold",
              color: Colors.theme1[colorScheme].green79,
-              // width : ios ? fontSize.xl3 + 40 : ""
+              width : ios ? fontSize.xl3 + 40 : ""
            },
          ]}
          underlineColorAndroid={"transparent"}
@ -188,7 +188,7 @@ function Otp(props) {
              fontSize: fontSize.xl3,
              fontFamily: "bold",
              color: Colors.theme1[colorScheme].green79,
-              // width : ios ? fontSize.xl3 + 40 : ""
+              width : ios ? fontSize.xl3 + 40 : ""
            },
          ]}
          underlineColorAndroid={"transparent"}
@ -206,7 +206,7 @@ function Otp(props) {
              fontSize: fontSize.xl3,
              fontFamily: "bold",
              color: Colors.theme1[colorScheme].green79,
-              // width : ios ? fontSize.xl3 + 40 : ""
+              width : ios ? fontSize.xl3 + 40 : ""
            },
          ]}
          underlineColorAndroid={"transparent"}
@ -221,7 +221,7 @@ function Otp(props) {
      <TouchableOpacity
        disabled={loading}
        style={[
-          tw("w-full rounded-md py-2 mt-6 items-center justify-center"),
+          tw(`w-full rounded-md py-2 mt-6 items-center justify-center ${props.mobile ? "" : "w-3/4"}`),
          {
            backgroundColor: Colors.theme1[colorScheme].greenCF,
          },
@ -246,7 +246,7 @@ function Otp(props) {
        <Text
          style={[
            tw("mt-7 text-center"),
-            { fontFamily: "light", fontSize: fontSize.base },
+            { fontFamily: "light", fontSize: fontSize.base, color : Colors.theme1[colorScheme].gray20 },
          ]}
        >
          {"زمان باقی مانده تا انقضای کد: " + time}
@ -275,6 +275,7 @@ function Otp(props) {

 const mapStateToProps = (state) => ({
  isLogin: state.user.status,
+  mobile : state.publicApi.mobile
 });

 const mapDispatchToProps = {
--- a/src/screens/Profile/components/User.js
+++ b/src/screens/Profile/components/User.js
@ -1,4 +1,11 @@
-import { View, Text, Image, Appearance, Platform, Pressable } from "react-native";
+import {
+  View,
+  Text,
+  Image,
+  Appearance,
+  Platform,
+  Pressable,
+} from "react-native";
 import React from "react";
 import { connect } from "react-redux";
 import Svg, { Path } from "react-native-svg";
@ -21,30 +28,26 @@ const User = ({ user }) => {
        )}
        onPress={() => setDropdown(!dropdown)}
      >
-        <View
-          style={tw(
-            `flex items-center flex-row-reverse`
-          )}
-        >
-          {user?.picFileId ? (
+        <View style={tw(`flex items-center flex-row-reverse`)}>
+          {user?.picFileIds ? (
            <Image
-              source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileId }}
+              source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileIds }}
              style={[tw("rounded-full"), { width: 70, height: 70 }]}
            />
          ) : (
            <View
              style={[
-                tw("rounded-full bg-gray-400"),
-                { minWidth: 60, minHeight: 60, zIndex: 1 },
+                tw("rounded-full"),
+                { width: 60, height: 60, zIndex: 1, backgroundColor: "#ddd" },
              ]}
            ></View>
          )}
-          <View style={tw(`flex flex-col ${ios ? "items-end" : ""}`)}>
+          <View style={tw(`flex flex-col mr-1 ${ios ? "items-end" : ""}`)}>
            <Text
              style={{
-                fontSize: fontSize.xl,
+                fontSize: fontSize.lg,
                color: Colors.theme1[colorScheme].gray20,
-                fontFamily: "regular",
+                fontFamily: "bold",
              }}
            >
              {user?.firstName + " " + user?.lastName}
@ -54,6 +57,7 @@ const User = ({ user }) => {
                fontSize: fontSize.tiny,
                color: Colors.theme1[colorScheme].gray20,
                fontFamily: "light",
+                marginTop: 3,
              }}
            >
              {user?.cellphone}
@ -79,25 +83,28 @@ const User = ({ user }) => {
        >
          <View
            style={[
-              tw(
-                `flex items-center w-full pb-3 mb-4 flex-row-reverse`
-              ),
+              tw(`flex items-center w-full pb-3 mb-4 flex-row-reverse`),
              {
                borderBottomWidth: 1,
                borderColor: Colors.theme1[colorScheme].grayE3,
              },
            ]}
          >
-            {user?.picFileId ? (
+            {user?.picFileIds ? (
              <Image
-                source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileId }}
+                source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileIds }}
                style={[tw("rounded-full"), { width: 30, height: 30 }]}
              />
            ) : (
              <View
                style={[
-                  tw("rounded-full bg-gray-400"),
-                  { minWidth: 30, minHeight: 30, zIndex: 1 },
+                  tw("rounded-full"),
+                  {
+                    minWidth: 30,
+                    minHeight: 30,
+                    zIndex: 1,
+                    backgroundColor: "#ddd",
+                  },
                ]}
              ></View>
            )}
@ -105,7 +112,8 @@ const User = ({ user }) => {
              style={{
                fontSize: fontSize.base,
                color: Colors.theme1[colorScheme].gray20,
-                fontFamily: "regular",
+                fontFamily: "bold",
+                marginRight: 5,
              }}
            >
              {user?.firstName + " " + user?.lastName}
@ -113,9 +121,7 @@ const User = ({ user }) => {
          </View>
          <View
            style={[
-              tw(
-                `flex items-center w-full pb-3 mb-3 flex-row-reverse`
-              ),
+              tw(`flex items-center w-full pb-3 mb-3 flex-row-reverse`),
              {
                borderBottomWidth: 1,
                borderColor: Colors.theme1[colorScheme].grayE3,