reza fixed home tablet mode

master
Reza_ashrafi 3 years ago
parent d1f46bd12e
commit a4427c3961
  1. 1
      App.js
  2. 18
      eas.json
  3. 2
      src/components/CustomTextInput.js
  4. 14
      src/components/Drawer.js
  5. 2
      src/components/Header.js
  6. 26
      src/components/Progress.js
  7. 1
      src/redux/reducers/public.js
  8. 12
      src/screens/Activation/index.js
  9. 2
      src/screens/Address/index.js
  10. 2
      src/screens/Blogs/layouts/Target.js
  11. 10
      src/screens/Contact/Box.js
  12. 20
      src/screens/Home/components/Blogs.js
  13. 16
      src/screens/Home/components/Header.js
  14. 14
      src/screens/Home/components/Scroll.js
  15. 15
      src/screens/Home/components/Videos.js
  16. 10
      src/screens/Home/index.js
  17. 36
      src/screens/Login/index.js
  18. 19
      src/screens/Otp/index.js
  19. 54
      src/screens/Profile/components/User.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) {

@ -0,0 +1,18 @@
{
"cli": {
"version": ">= 0.47.0"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal"
},
"production": {}
},
"submit": {
"production": {}
}
}

@ -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,

@ -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",

@ -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}

@ -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 }) {
const colorScheme = Appearance.getColorScheme();
const [delayPercent, setDelayPercent] = useState(0);
useEffect(() => {
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>
);
}

@ -5,6 +5,7 @@ const width = Dimensions.get("window").width;
const initialState = {
// isDark: (await AsyncStorage.getItem("isDark")) || false,
mobile : width < 720,
homeData: [],
newProducts: [],
levels: [],

@ -7,7 +7,8 @@ import {
Platform,
KeyboardAvoidingView,
TouchableWithoutFeedback,
Appearance
Appearance,
SafeAreaView,
} from "react-native";
import { connect } from "react-redux";
import Svg, { Image as Imagee } from "react-native-svg";
@ -26,11 +27,16 @@ import Colors from "../../constants/Colors";
//assets
import bgQr from "./assets/bgQr.png";
function Activation({add}) {
const ios = Platform.OS === "ios";
function Activation({ add, mobile }) {
const colorScheme = Appearance.getColorScheme();
const [value, setValue] = useState(null);
return (
<SafeAreaView
style={{ paddingTop: ios ? 0 : StatusBar.currentHeight, flex: 1 }}
>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{ flex: 1, backgroundColor: "white" }}
@ -114,6 +120,7 @@ function Activation({add}) {
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
@ -122,6 +129,7 @@ Activation.defaultProps = {
};
const mapStateToProps = (state) => ({
mobile : state.publicApi.mobile
});
const mapDispatchToProps = {

@ -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({});

@ -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} />
))}

@ -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,
},

@ -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);

@ -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);

@ -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);

@ -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);

@ -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)}
>
{!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} />} */}
{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 = {

@ -56,7 +56,9 @@ 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> */}
@ -69,7 +71,11 @@ function Login(props) {
/>
<Text
style={[
tw(`w-full mt-5 ${ios ? "text-right" : ""}`),
tw(
`w-full mt-5 ${ios ? "text-right" : ""} ${
props.mobile ? "" : "w-3/4"
}`
),
{
fontSize: fontSize.xl2,
fontFamily: "bold",
@ -81,7 +87,11 @@ function Login(props) {
</Text>
<Text
style={[
tw(`w-full mb-5 ${ios ? "text-right" : ""}`),
tw(
`w-full ${ios ? "text-right" : ""} ${
props.mobile ? "mb-5" : "mb-10 w-3/4"
}`
),
{
fontSize: fontSize.xl2,
fontFamily: "bold",
@ -91,7 +101,16 @@ function Login(props) {
>
{"خوش برگشتی!"}
</Text>
<View style={[tw("w-full rounded-md overflow-hidden relative"), {}]}>
<View
style={[
tw(
`w-full rounded-md overflow-hidden relative ${
props.mobile ? "" : "w-3/4"
}`
),
{},
]}
>
<CustomTextInput
label="شماره موبایل"
textAlign="left"
@ -104,10 +123,13 @@ function Login(props) {
regex={onInput.phonenumber}
/>
</View>
{
!props.mobile && <View style={tw('mt-10')}></View>
}
<TouchableHighlight
disabled={loading}
style={[
tw("w-full py-2.5 rounded-md"),
tw(`w-full py-2.5 rounded-md ${props.mobile ? "" : "w-2/4"}`),
{
backgroundColor: Colors.theme1[colorScheme].greenCF,
alignItems: "center",
@ -137,7 +159,9 @@ function Login(props) {
);
}
const mapStateToProps = (state) => ({});
const mapStateToProps = (state) => ({
mobile: state.publicApi.mobile,
});
const mapDispatchToProps = {
sendPhoneNumber: user.otp,

@ -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 = {

@ -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,

Loading…
Cancel
Save