diff --git a/app.json b/app.json index a630017..5034ef9 100644 --- a/app.json +++ b/app.json @@ -4,6 +4,7 @@ "slug": "RnDanovinExpo", "version": "1.0.0", "orientation": "portrait", + "userInterfaceStyle": "automatic", "icon": "", "splash": { "image": "", diff --git a/navigation/index.js b/navigation/index.js index a9341b3..e752469 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -1,12 +1,15 @@ import React, { useEffect } from "react"; -import { Image } from "react-native"; +import Svg, { G, Path } from "react-native-svg"; +import {Appearance} from 'react-native'; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; -import { Entypo, FontAwesome } from "@expo/vector-icons"; +import { connect } from "react-redux"; +import { user } from "../src/redux/actions"; + +//components import OrderDetails from "../src/screens/OrderDetails"; import OrdersFollowUp from "../src/screens/OrdersFollowUp"; -import { Dimensions } from "react-native"; import Splash from "../src/screens/Splash"; import Home from "../src/screens/Home"; import Products from "../src/screens/Products"; @@ -18,33 +21,23 @@ import QR from "../src/screens/QR"; import QRContent from "../src/screens/QRContent"; import Faq from "../src/screens/Faq"; import Activation from "../src/screens/Activation"; -import { connect } from "react-redux"; -import Profile from "../src/screens/Profile"; import Videos from "../src/screens/Videos"; -import Exams from "../src/screens/Exams"; -import ShoppingCart from "../src/screens/ShoppingCart"; import Video from "../src/screens/Video"; import VideoDisplay from "../src/screens/VideoDisplay"; import Contact from "../src/screens/Contact"; import Tests from "../src/screens/Tests"; -import { user } from "../src/redux/actions"; +import ShoppingCart from "../src/screens/ShoppingCart"; +import DeliveryForm from "../src/screens/DeliveryForm"; -//assets -import homeDeactiveIcon from "../src/assets/icons/home-deactive.png"; -import homeActiveIcon from "../src/assets/icons/home-active.png"; -import videoActiveIcon from "../src/assets/icons/video-active.png"; -import videoDeactiveIcon from "../src/assets/icons/video-deactive.png"; -import bookDeactiveIcon from "../src/assets/icons/book-deactive.png"; -import bookActiveIcon from "../src/assets/icons/book-active.png"; -import testDeactiveIcon from "../src/assets/icons/test-deactive.png"; -import testActiveIcon from "../src/assets/icons/test-active.png"; -import profileActiveIcon from "../src/assets/icons/profile-active.png"; -import profileDeactiveIcon from "../src/assets/icons/profile-deactive.png"; +//style +import fontSize from "../src/constants/fontSize"; +import Colors from "../src/constants/Colors"; -const width = Dimensions.get("window").width; const Tab = createBottomTabNavigator(); const BottomTabNavigator = () => { + const colorScheme = Appearance.getColorScheme(); + return ( { tabBarActiveTintColor: "#06BACE", tabBarInactiveTintColor: "grey", tabBarStyle: { - backgroundColor: "#CCE6FF", + backgroundColor: Colors.theme1[colorScheme].greenFF1, height: 70, }, tabBarLabelStyle: { - fontSize: width / 34, + fontSize: fontSize.xs, fontFamily: "regular", transform: [{ translateY: -7 }], }, @@ -68,39 +61,106 @@ const BottomTabNavigator = () => { > focused ? ( - + + + + + + ) : ( - + + + + + + ), }} /> focused ? ( - + + + + ) : ( - + + + + + ), }} /> @@ -113,15 +173,59 @@ const BottomTabNavigator = () => { title: "ویدئوها", tabBarIcon: ({ focused, color }) => focused ? ( - + + + + + + ) : ( - + + + + + + ), }} /> @@ -132,15 +236,45 @@ const BottomTabNavigator = () => { title: "کتاب‌ها", tabBarIcon: ({ focused, color }) => focused ? ( - + + + + ) : ( - + + + + + + ), }} /> @@ -151,15 +285,49 @@ const BottomTabNavigator = () => { title: "خانه", tabBarIcon: ({ focused, color }) => focused ? ( - + + + + ) : ( - + + + + ), }} /> @@ -204,6 +372,16 @@ const VODStackScreen = () => { ); }; +const CARTStack = createNativeStackNavigator(); +const CARTStackScreen = () => { + return ( + + + + + ); +} + const AuthStack = createNativeStackNavigator(); const AuthStackScreen = () => { return ( diff --git a/package.json b/package.json index 9a27c90..c2bf518 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "expo-app-loading": "~1.3.0", "expo-av": "^10.2.0", "expo-barcode-scanner": "~11.2.0", + "expo-blur": "~11.0.0", "expo-camera": "~12.1.0", "expo-device": "~4.1.0", "expo-font": "^10.0.4", @@ -42,6 +43,7 @@ "react-native-safe-area-context": "3.3.2", "react-native-screens": "~3.10.1", "react-native-select-dropdown": "^1.6.0", + "react-native-svg": "^12.1.1", "react-native-web": "0.17.1", "react-navigation-stack": "^2.10.4", "react-redux": "^7.2.6", diff --git a/src/assets/icons/ar-light.png b/src/assets/icons/ar-light.png deleted file mode 100644 index 1961afb..0000000 Binary files a/src/assets/icons/ar-light.png and /dev/null differ diff --git a/src/assets/icons/book-active.png b/src/assets/icons/book-active.png deleted file mode 100644 index 43988f2..0000000 Binary files a/src/assets/icons/book-active.png and /dev/null differ diff --git a/src/assets/icons/book-deactive.png b/src/assets/icons/book-deactive.png deleted file mode 100644 index 3bfbc86..0000000 Binary files a/src/assets/icons/book-deactive.png and /dev/null differ diff --git a/src/assets/icons/dropdown.png b/src/assets/icons/dropdown.png deleted file mode 100644 index 69d6468..0000000 Binary files a/src/assets/icons/dropdown.png and /dev/null differ diff --git a/src/assets/icons/hamburger-light.png b/src/assets/icons/hamburger-light.png deleted file mode 100644 index a482a9e..0000000 Binary files a/src/assets/icons/hamburger-light.png and /dev/null differ diff --git a/src/assets/icons/home-active.png b/src/assets/icons/home-active.png deleted file mode 100644 index 912191c..0000000 Binary files a/src/assets/icons/home-active.png and /dev/null differ diff --git a/src/assets/icons/home-deactive.png b/src/assets/icons/home-deactive.png deleted file mode 100644 index 7c5dd08..0000000 Binary files a/src/assets/icons/home-deactive.png and /dev/null differ diff --git a/src/assets/icons/logo.png b/src/assets/icons/logo.png deleted file mode 100644 index af3b208..0000000 Binary files a/src/assets/icons/logo.png and /dev/null differ diff --git a/src/assets/icons/profile-active.png b/src/assets/icons/profile-active.png deleted file mode 100644 index 4c150fe..0000000 Binary files a/src/assets/icons/profile-active.png and /dev/null differ diff --git a/src/assets/icons/profile-deactive.png b/src/assets/icons/profile-deactive.png deleted file mode 100644 index 1154d2e..0000000 Binary files a/src/assets/icons/profile-deactive.png and /dev/null differ diff --git a/src/assets/icons/qr-light.png b/src/assets/icons/qr-light.png deleted file mode 100644 index 34595b0..0000000 Binary files a/src/assets/icons/qr-light.png and /dev/null differ diff --git a/src/assets/icons/search.png b/src/assets/icons/search.png deleted file mode 100644 index 02bc530..0000000 Binary files a/src/assets/icons/search.png and /dev/null differ diff --git a/src/assets/icons/test-active.png b/src/assets/icons/test-active.png deleted file mode 100644 index 719dcdb..0000000 Binary files a/src/assets/icons/test-active.png and /dev/null differ diff --git a/src/assets/icons/test-deactive.png b/src/assets/icons/test-deactive.png deleted file mode 100644 index 894ead8..0000000 Binary files a/src/assets/icons/test-deactive.png and /dev/null differ diff --git a/src/assets/icons/video-active.png b/src/assets/icons/video-active.png deleted file mode 100644 index 80fe4ad..0000000 Binary files a/src/assets/icons/video-active.png and /dev/null differ diff --git a/src/assets/icons/video-deactive.png b/src/assets/icons/video-deactive.png deleted file mode 100644 index 309bfe8..0000000 Binary files a/src/assets/icons/video-deactive.png and /dev/null differ diff --git a/src/components/Blur.js b/src/components/Blur.js new file mode 100644 index 0000000..c5ce7bd --- /dev/null +++ b/src/components/Blur.js @@ -0,0 +1,16 @@ +import React from "react"; +import { BlurView } from "expo-blur"; +import { ActivityIndicator } from "react-native"; +import tw from 'tailwind-rn'; + +export default function Blur() { + return ( + + + + ); +} diff --git a/src/components/BottomSheetComponents/ProductQuestion.js b/src/components/BottomSheetComponents/ProductQuestion.js index 243e407..de775d9 100644 --- a/src/components/BottomSheetComponents/ProductQuestion.js +++ b/src/components/BottomSheetComponents/ProductQuestion.js @@ -1,21 +1,25 @@ -import { View, Text, ScrollView, Dimensions } from "react-native"; +import { View, Text, ScrollView, Dimensions, Appearance } from "react-native"; import Divider from "../Divider"; import React from "react"; + +//style import fontSize from "../../constants/fontSize"; import tw from "tailwind-rn"; +import Colors from "../../constants/Colors"; const { width } = Dimensions.get("window"); const ProductQuestion = ({ list }) => { + const colorScheme = Appearance.getColorScheme(); const Question = ({ question }) => { return ( سوال @@ -24,7 +28,7 @@ const ProductQuestion = ({ list }) => { style={{ fontFamily: "regular", color: "#323232", - fontSize: fontSize.base, + fontSize: fontSize.tiny, }} > {question.question} @@ -34,8 +38,8 @@ const ProductQuestion = ({ list }) => { @@ -44,8 +48,8 @@ const ProductQuestion = ({ list }) => { {question.question} @@ -66,16 +70,16 @@ const ProductQuestion = ({ list }) => { "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" ), { - backgroundColor: "#50A9FF33", + backgroundColor: Colors.theme1[colorScheme].greenFF1, }, ]} > diff --git a/src/components/BottomSheetComponents/ProductReview.js b/src/components/BottomSheetComponents/ProductReview.js index 48f7d25..3881d11 100644 --- a/src/components/BottomSheetComponents/ProductReview.js +++ b/src/components/BottomSheetComponents/ProductReview.js @@ -1,12 +1,16 @@ -import { View, Text, ScrollView, Dimensions } from "react-native"; +import { View, Text, ScrollView, Dimensions, Appearance } from "react-native"; import React from "react"; + +//style import fontSize from "../../constants/fontSize"; +import Colors from "../../constants/Colors"; import tw from "tailwind-rn"; const { width } = Dimensions.get("window"); const ProductReviews = ({ list }) => { + const colorScheme = Appearance.getColorScheme(); const Property = ({ question }) => { return ( @@ -17,16 +21,16 @@ const ProductReviews = ({ list }) => { "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" ), { - backgroundColor: "#ECFDFF", + backgroundColor: Colors.theme1[colorScheme].greenFF1 + '66', }, ]} > @@ -35,9 +39,10 @@ const ProductReviews = ({ list }) => { {question.text} @@ -70,15 +75,15 @@ const ProductReviews = ({ list }) => { "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-2" ), { - backgroundColor: "#50A9FF33", + backgroundColor: Colors.theme1[colorScheme].greenFF1 , }, ]} > { + const colorScheme = Appearance.getColorScheme(); const Property = ({ prop }) => { return ( @@ -21,7 +25,7 @@ const ProductSpecifications = ({ list }) => { tw("py-3 pr-2"), { fontFamily: "regular", - fontSize: fontSize.base, + fontSize: fontSize.tiny, color: "#07AFAF", }, ]} @@ -60,15 +64,15 @@ const ProductSpecifications = ({ list }) => { "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" ), { - backgroundColor: "#50A9FF33", + backgroundColor: Colors.theme1[colorScheme].greenFF1 , }, ]} > { + const colorScheme = useColorScheme(); const [isFocused, setIsFocused] = useState(false); const styles = StyleSheet.create({ labelStyle: { - fontFamily: 'regular', - top: !isFocused ? '50%' : 1, - fontSize: !isFocused ? width / 36 : width / 40, - transform: [{translateY: -width / 35}], - color: !isFocused ? '#555' : '#196EC0', + fontFamily: "regular", + top: !isFocused ? "50%" : 1, + fontSize: !isFocused ? fontSize.base : fontSize.sm, + transform: [{ translateY: -width / 35 }], + color: !isFocused ? "#555" : Colors.theme1[colorScheme].greenC8, }, inputStyle: { - fontSize: Dimensions.get('window').width / 27, - color: '#000', + fontSize: fontSize.lg, + color: Colors.theme1[colorScheme].black, borderWidth: 1, - borderColor: isFocused ? '#196EC0' : '#777', + borderColor: isFocused ? Colors.theme1[colorScheme].greenC8 : "#777", textAlign: textAlign, - fontFamily: 'light' + fontFamily: "light", + fontWeight : "900" }, }); return ( - + + style={[ + styles.labelStyle, + tw("px-1 z-10 bg-white absolute right-4 text-center"), + ]} + > {label} onChange(name, text = regex(text))} - placeholder={'09123456789'} + style={[styles.inputStyle, tw("rounded-md p-2")]} + onChangeText={(text) => onChange(name, (text = regex(text)))} + placeholder={"09123456789"} onFocus={() => setIsFocused(true)} autoFocus={autoFocus} underlineColorAndroid={"transparent"} diff --git a/src/components/Drawer.js b/src/components/Drawer.js index 4c8e888..3ce8afa 100644 --- a/src/components/Drawer.js +++ b/src/components/Drawer.js @@ -60,6 +60,13 @@ const Drawer = ({ position, setBoxPosition }) => { toast: "", message: "", }, + { + name: "سبد خرید", + route: "ShoppingCart", + icon: , + toast: "", + message: "", + }, { name: "سوالات متداول", route: "Faq", @@ -73,7 +80,7 @@ const Drawer = ({ position, setBoxPosition }) => { icon: , toast: "", message: "", - } + }, ]); const navigation = useNavigation(); const Route = ({ route }) => { diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js new file mode 100644 index 0000000..40fa297 --- /dev/null +++ b/src/components/ImageSlider.js @@ -0,0 +1,18 @@ +import { View, Dimensions } from "react-native"; +import React from "react"; +import tw from "tailwind-rn"; + +const { width, height } = Dimensions.get("window"); + +const ImageSlider = ({}) => { + return ( + + ); +}; + +export default ImageSlider; diff --git a/src/components/Navbar.js b/src/components/Navbar.js index e7b0f9c..135af3d 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,62 +1,64 @@ -import React, { useCallback, useState } from "react"; -import { - Image, - StyleSheet, - View, - Pressable, - Dimensions, - Text, -} from "react-native"; +import React, { useCallback } from "react"; +import { StyleSheet, View, Pressable, Text, Appearance, TouchableOpacity } from "react-native"; import { useNavigation } from "@react-navigation/native"; import { Ionicons, Entypo } from "@expo/vector-icons"; -import tw from "tailwind-rn"; -import fontSize from '../constants/fontSize'; +import Svg, { + G, + Defs, + Pattern, + Image as Imagee, + Path, + Text as Textt, + TSpan, +} from "react-native-svg"; import { connect } from "react-redux"; -const { width, height } = Dimensions.get("window"); - -//colors +//style import Color from "../constants/Colors"; - -//assets -import hamburgerLightIcon from "../assets/icons/hamburger-light.png"; -import logoIcon from "../assets/icons/logo.png"; -import qrLightIcon from "../assets/icons/qr-light.png"; -import arLightIcon from "../assets/icons/ar-light.png"; +import tw from "tailwind-rn"; +import fontSize from "../constants/fontSize"; const Navbar = ({ notification, setBoxPosition, headerOptions }) => { const navigation = useNavigation(); - + const colorScheme = Appearance.getColorScheme(); const Button = useCallback(({ icon, route }) => { return ( - navigation.navigate(route)} > - - + {icon} + ); }, []); return ( {!headerOptions?.title && headerOptions?.back ? ( navigation.goBack()} /> ) : null} @@ -66,7 +68,7 @@ const Navbar = ({ notification, setBoxPosition, headerOptions }) => { fontFamily: "bold", fontSize: fontSize.xl, color: Color.theme1.light.blue5, - paddingRight: 16 + paddingRight: 16, }} > {headerOptions?.title} @@ -74,10 +76,25 @@ const Navbar = ({ notification, setBoxPosition, headerOptions }) => { ) : null} {headerOptions?.hamburgerMenu && ( setBoxPosition()}> - + + + + + + {notification && ( { onPress={() => navigation.navigate("Home")} style={tw("absolute right-1/2 top-1/2")} > - + + + + + + + + )} @@ -112,14 +143,92 @@ const Navbar = ({ notification, setBoxPosition, headerOptions }) => { name="arrow-back" style={tw("mr-2")} size={24} - color={"#196EC0"} + color={"#52796F"} onPress={() => navigation.goBack()} /> ) : null} {headerOptions?.qr && ( <> -