|
|
import React, { useEffect } from "react"; |
|
|
import Svg, { G, Path } from "react-native-svg"; |
|
|
import { Appearance, Platform, Dimensions } from "react-native"; |
|
|
import { NavigationContainer, DefaultTheme } from "@react-navigation/native"; |
|
|
import { createNativeStackNavigator } from "@react-navigation/native-stack"; |
|
|
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; |
|
|
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 Splash from "../src/screens/Splash"; |
|
|
import Home from "../src/screens/Home"; |
|
|
import Products from "../src/screens/Products"; |
|
|
import Login from "../src/screens/Login"; |
|
|
import Otp from "../src/screens/Otp"; |
|
|
import Product from "../src/screens/Product"; |
|
|
import AR from "../src/screens/AR"; |
|
|
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 Videos from "../src/screens/Videos"; |
|
|
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 ShoppingCart from "../src/screens/ShoppingCart"; |
|
|
import DeliveryForm from "../src/screens/DeliveryForm"; |
|
|
import Address from "../src/screens/Address"; |
|
|
import Profile from "../src/screens/Profile"; |
|
|
import ProfileBookmark from "../src/screens/Profile/components/ProfileBookmark"; |
|
|
import ProfileAddress from "../src/screens/Profile/components/ProfileAddress"; |
|
|
import Blogs from "../src/screens/Blogs"; |
|
|
import Blog from "../src/screens/Blog"; |
|
|
|
|
|
//style |
|
|
import fontSize from "../src/constants/fontSize"; |
|
|
import Colors from "../src/constants/Colors"; |
|
|
|
|
|
const ios = Platform.OS === "ios"; |
|
|
const colorScheme = Appearance.getColorScheme(); |
|
|
|
|
|
const Tab = createBottomTabNavigator(); |
|
|
const BottomTabNavigator = () => { |
|
|
const [height, setHeight] = React.useState(88); |
|
|
React.useEffect(() => { |
|
|
setTimeout(() => { |
|
|
setHeight(89); |
|
|
}, 1000); |
|
|
}, []); |
|
|
return ( |
|
|
<Tab.Navigator |
|
|
initialRouteName="HomeTab" |
|
|
screenOptions={{ |
|
|
tabBarHideOnKeyboard: true, |
|
|
headerShown: false, |
|
|
contentStyle: { |
|
|
backgroundColor: "white", |
|
|
}, |
|
|
tabBarLabelPosition: "below-icon", |
|
|
tabBarActiveTintColor: Colors.theme1[colorScheme].green79, |
|
|
tabBarInactiveTintColor: "grey", |
|
|
tabBarStyle: { |
|
|
backgroundColor: Colors.theme1[colorScheme].greenFF1, |
|
|
height, |
|
|
}, |
|
|
tabBarLabelStyle: { |
|
|
fontSize: fontSize.sm, |
|
|
fontFamily: "bold", |
|
|
}, |
|
|
tabBarShowLabel: true, |
|
|
}} |
|
|
> |
|
|
<Tab.Screen |
|
|
name="ProfileTab" |
|
|
component={PROFILEStackScreen} |
|
|
options={{ |
|
|
title: "پروفایل", |
|
|
tabBarIcon: ({ focused, color }) => |
|
|
focused ? ( |
|
|
<Svg |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
width={31.192} |
|
|
height={31.192} |
|
|
> |
|
|
<G fill={Colors.theme1[colorScheme].green79}> |
|
|
<Path d="M15.803 14.127a2.363 2.363 0 0 0-.429 0 5.777 5.777 0 1 1 .429 0Z" /> |
|
|
<Path |
|
|
data-name="Vector" |
|
|
d="M9.306 18.923c-3.145 2.105-3.145 5.537 0 7.629a12.693 12.693 0 0 0 13.01 0c3.145-2.105 3.145-5.537 0-7.629a12.752 12.752 0 0 0-13.01 0Z" |
|
|
/> |
|
|
</G> |
|
|
</Svg> |
|
|
) : ( |
|
|
<Svg |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
width={31.192} |
|
|
height={31.192} |
|
|
> |
|
|
<G |
|
|
fill="none" |
|
|
stroke={Colors.theme1[colorScheme].green79} |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
> |
|
|
<Path d="M15.803 14.127a2.363 2.363 0 0 0-.429 0 5.777 5.777 0 1 1 .429 0Z" /> |
|
|
<Path |
|
|
data-name="Vector" |
|
|
d="M9.306 18.923c-3.145 2.105-3.145 5.537 0 7.629a12.693 12.693 0 0 0 13.01 0c3.145-2.105 3.145-5.537 0-7.629a12.752 12.752 0 0 0-13.01 0Z" |
|
|
/> |
|
|
</G> |
|
|
</Svg> |
|
|
), |
|
|
contentStyle: { |
|
|
backgroundColor: "white", |
|
|
}, |
|
|
}} |
|
|
/> |
|
|
<Tab.Screen |
|
|
name="ShoppingCartTab" |
|
|
component={CARTStackScreen} |
|
|
options={{ |
|
|
title: "سبد خرید", |
|
|
tabBarIcon: ({ focused, color }) => |
|
|
focused ? ( |
|
|
<Svg |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
width={33.323} |
|
|
height={32.317} |
|
|
> |
|
|
<Path |
|
|
d="M20.852 29.624h-8.381c-6.984 0-9.778-2.693-9.778-9.426v-8.079c0-6.733 2.794-9.426 9.778-9.426h8.381c6.984 0 9.778 2.693 9.778 9.426v8.079c-.001 6.733-2.794 9.426-9.778 9.426Z" |
|
|
fill={Colors.theme1[colorScheme].green79} |
|
|
/> |
|
|
<Path |
|
|
data-name="Vector" |
|
|
d="M16.002 11.957H8.933M21.063 11.951l.9 1.01 2.684-3.03M16.002 21.383H8.933M21.063 21.377l.9 1.01 2.684-3.03" |
|
|
fill="none" |
|
|
stroke="#fff" |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
/> |
|
|
</Svg> |
|
|
) : ( |
|
|
<Svg |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
width={33.323} |
|
|
height={32.317} |
|
|
> |
|
|
<Path |
|
|
d="M16.002 11.957H8.933" |
|
|
fill="none" |
|
|
stroke={Colors.theme1[colorScheme].green79} |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
/> |
|
|
<Path |
|
|
data-name="Vector" |
|
|
d="m21.063 11.951.9 1.01 2.684-3.03M16.002 21.383H8.933M21.063 21.377l.9 1.01 2.684-3.03" |
|
|
fill="none" |
|
|
stroke={Colors.theme1[colorScheme].green79} |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
/> |
|
|
<Path |
|
|
data-name="Vector" |
|
|
d="M20.852 29.624h-8.381c-6.984 0-9.778-2.693-9.778-9.426v-8.079c0-6.733 2.794-9.426 9.778-9.426h8.381c6.984 0 9.778 2.693 9.778 9.426v8.079c-.001 6.733-2.794 9.426-9.778 9.426Z" |
|
|
fill="none" |
|
|
stroke={Colors.theme1[colorScheme].green79} |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
/> |
|
|
</Svg> |
|
|
), |
|
|
}} |
|
|
/> |
|
|
<Tab.Screen |
|
|
name="VODTab" |
|
|
component={VODStackScreen} |
|
|
options={{ |
|
|
unmountOnExit: true, |
|
|
unmountOnBlur: true, |
|
|
title: "ویدئوها", |
|
|
tabBarIcon: ({ focused, color }) => |
|
|
focused ? ( |
|
|
<Svg xmlns="http://www.w3.org/2000/svg" width={35} height={31.1}> |
|
|
<G data-name="Group 2000"> |
|
|
<Path |
|
|
d="M25.421 29.241H8.974C4.04 29.241.75 26.392.75 19.744V10.25c0-6.651 3.29-9.5 8.224-9.5h16.447c4.935 0 8.229 2.849 8.229 9.5v9.5c0 6.642-3.294 9.491-8.229 9.491Z" |
|
|
fill={Colors.theme1[colorScheme].green79} |
|
|
stroke={Colors.theme1[colorScheme].green79} |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
data-name="vuesax/linear/music-playlist" |
|
|
/> |
|
|
<Path |
|
|
data-name="Vector" |
|
|
d="M12.427 14.995v-2.083c0-2.673 1.892-3.766 4.2-2.43l1.805 1.042 1.806 1.041c2.308 1.336 2.308 3.523 0 4.86l-1.806 1.041-1.805 1.046c-2.308 1.332-4.2.239-4.2-2.434v-2.083Z" |
|
|
fill="none" |
|
|
stroke="#fff" |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
/> |
|
|
</G> |
|
|
</Svg> |
|
|
) : ( |
|
|
<Svg xmlns="http://www.w3.org/2000/svg" width={35} height={32}> |
|
|
<G data-name="Group 1999"> |
|
|
<Path |
|
|
d="M25.421 29.241H8.974C4.04 29.241.75 26.392.75 19.744V10.25c0-6.651 3.29-9.5 8.224-9.5h16.447c4.935 0 8.229 2.849 8.229 9.5v9.5c0 6.642-3.294 9.491-8.229 9.491Z" |
|
|
fill="none" |
|
|
stroke={Colors.theme1[colorScheme].green79} |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
data-name="vuesax/linear/music-playlist" |
|
|
/> |
|
|
<Path |
|
|
data-name="Vector" |
|
|
d="M12.427 14.995v-2.083c0-2.673 1.892-3.766 4.2-2.43l1.805 1.042 1.806 1.041c2.308 1.336 2.308 3.523 0 4.86l-1.806 1.041-1.805 1.046c-2.308 1.332-4.2.239-4.2-2.434v-2.083Z" |
|
|
fill="none" |
|
|
stroke={Colors.theme1[colorScheme].green79} |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
/> |
|
|
</G> |
|
|
</Svg> |
|
|
), |
|
|
}} |
|
|
/> |
|
|
<Tab.Screen |
|
|
name="ProductsTab" |
|
|
component={ProductsStackScreen} |
|
|
options={{ |
|
|
title: "کتابها", |
|
|
tabBarIcon: ({ focused, color }) => |
|
|
focused ? ( |
|
|
<Svg |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
width={35.135} |
|
|
height={34.763} |
|
|
> |
|
|
<Path |
|
|
d="M32.207 24.227V6.798a2.869 2.869 0 0 0-3.179-2.875h-.088a27.857 27.857 0 0 0-10.35 3.422l-.249.159a1.641 1.641 0 0 1-1.552 0l-.361-.216A27.72 27.72 0 0 0 6.09 3.909a2.864 2.864 0 0 0-3.162 2.874v17.444a2.981 2.981 0 0 0 2.547 2.859l.425.058a37.976 37.976 0 0 1 10.892 3.524l.059.029a1.6 1.6 0 0 0 1.405 0 37.631 37.631 0 0 1 10.921-3.552l.483-.058a2.981 2.981 0 0 0 2.547-2.86Z" |
|
|
fill={Colors.theme1[colorScheme].green79} |
|
|
/> |
|
|
<Path |
|
|
data-name="Vector" |
|
|
d="M17.567 8.851v20.774M29.213 12.298h-3.294M29.159 16.643h-4.392" |
|
|
fill="none" |
|
|
stroke="#fff" |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
/> |
|
|
</Svg> |
|
|
) : ( |
|
|
<Svg |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
width={35.135} |
|
|
height={34.763} |
|
|
> |
|
|
<G |
|
|
fill="none" |
|
|
stroke={Colors.theme1[colorScheme].green79} |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
> |
|
|
<Path d="M32.207 24.227V6.798a2.869 2.869 0 0 0-3.179-2.875h-.088a27.857 27.857 0 0 0-10.35 3.422l-.249.159a1.641 1.641 0 0 1-1.552 0l-.361-.216A27.72 27.72 0 0 0 6.09 3.909a2.864 2.864 0 0 0-3.162 2.874v17.444a2.981 2.981 0 0 0 2.547 2.859l.425.058a37.976 37.976 0 0 1 10.892 3.524l.059.029a1.6 1.6 0 0 0 1.405 0 37.631 37.631 0 0 1 10.921-3.552l.483-.058a2.981 2.981 0 0 0 2.547-2.86Z" /> |
|
|
<Path |
|
|
data-name="Vector" |
|
|
d="M17.567 7.666v21.959M29.213 12.298h-3.294M29.159 16.643h-4.392" |
|
|
/> |
|
|
</G> |
|
|
</Svg> |
|
|
), |
|
|
}} |
|
|
/> |
|
|
<Tab.Screen |
|
|
name="HomeTab" |
|
|
component={HomeStackScreen} |
|
|
options={{ |
|
|
title: "خانه", |
|
|
tabBarIcon: ({ focused, color }) => |
|
|
focused ? ( |
|
|
<Svg |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
width={33.58} |
|
|
height={33.579} |
|
|
> |
|
|
<Path |
|
|
d="M12.62 3.974 5.079 9.85a6.658 6.658 0 0 0-2.281 4.645v10.368a5.912 5.912 0 0 0 5.89 5.9h16.2a5.909 5.909 0 0 0 5.89-5.89V14.691a6.609 6.609 0 0 0-2.518-4.827l-8.644-6.058a6.278 6.278 0 0 0-6.996.168Z" |
|
|
fill={Colors.theme1[colorScheme].green79} |
|
|
/> |
|
|
<Path |
|
|
data-name="Vector" |
|
|
d="M16.79 25.471v-6.693" |
|
|
fill="none" |
|
|
stroke="#fff" |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
/> |
|
|
</Svg> |
|
|
) : ( |
|
|
<Svg |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
width={33.58} |
|
|
height={33.579} |
|
|
> |
|
|
<Path |
|
|
d="M12.62 3.974 5.079 9.85a6.658 6.658 0 0 0-2.281 4.645v10.368a5.912 5.912 0 0 0 5.89 5.9h16.2a5.909 5.909 0 0 0 5.89-5.89V14.691a6.609 6.609 0 0 0-2.518-4.827l-8.644-6.058a6.278 6.278 0 0 0-6.996.168Z" |
|
|
fill="none" |
|
|
stroke={Colors.theme1[colorScheme].green79} |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
/> |
|
|
<Path |
|
|
data-name="Vector" |
|
|
d="M16.79 25.471v-6.693" |
|
|
fill="none" |
|
|
stroke={Colors.theme1[colorScheme].green79} |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
strokeWidth={1.5} |
|
|
/> |
|
|
</Svg> |
|
|
), |
|
|
}} |
|
|
/> |
|
|
</Tab.Navigator> |
|
|
); |
|
|
}; |
|
|
|
|
|
const HomeStack = createNativeStackNavigator(); |
|
|
const HomeStackScreen = () => { |
|
|
return ( |
|
|
<HomeStack.Navigator |
|
|
screenOptions={{ |
|
|
headerShown: false, |
|
|
contentStyle: { backgroundColor: Colors.theme1[colorScheme].white }, |
|
|
}} |
|
|
initialRouteName="Home" |
|
|
> |
|
|
<HomeStack.Screen name="Home" component={Home} /> |
|
|
<HomeStack.Screen name="VOD" component={Videos} /> |
|
|
<HomeStack.Screen name="Video" component={Video} unmountOnExit={true} /> |
|
|
<HomeStack.Screen name="VideoDisplay" component={VideoDisplay} /> |
|
|
<HomeStack.Screen name="Products" component={Products} /> |
|
|
<HomeStack.Screen name="Product" component={Product} /> |
|
|
<HomeStack.Screen name="Blogs" component={Blogs} /> |
|
|
<HomeStack.Screen name="Blog" component={Blog} /> |
|
|
</HomeStack.Navigator> |
|
|
); |
|
|
}; |
|
|
|
|
|
const ProductsStack = createNativeStackNavigator(); |
|
|
const ProductsStackScreen = () => { |
|
|
return ( |
|
|
<ProductsStack.Navigator |
|
|
screenOptions={{ |
|
|
headerShown: false, |
|
|
contentStyle: { backgroundColor: Colors.theme1[colorScheme].white }, |
|
|
}} |
|
|
initialRouteName="Products" |
|
|
> |
|
|
<ProductsStack.Screen name="Products" component={Products} /> |
|
|
<ProductsStack.Screen name="Product" component={Product} /> |
|
|
</ProductsStack.Navigator> |
|
|
); |
|
|
}; |
|
|
|
|
|
const VODStack = createNativeStackNavigator(); |
|
|
const VODStackScreen = () => { |
|
|
return ( |
|
|
<VODStack.Navigator |
|
|
screenOptions={{ |
|
|
headerShown: false, |
|
|
contentStyle: { backgroundColor: Colors.theme1[colorScheme].white }, |
|
|
}} |
|
|
> |
|
|
<VODStack.Screen name="VOD" component={Videos} /> |
|
|
<VODStack.Screen name="Video" component={Video} unmountOnExit={true} /> |
|
|
<VODStack.Screen name="VideoDisplay" component={VideoDisplay} /> |
|
|
</VODStack.Navigator> |
|
|
); |
|
|
}; |
|
|
|
|
|
const CARTStack = createNativeStackNavigator(); |
|
|
const CARTStackScreen = () => { |
|
|
return ( |
|
|
<CARTStack.Navigator |
|
|
screenOptions={{ |
|
|
headerShown: false, |
|
|
contentStyle: { backgroundColor: Colors.theme1[colorScheme].white }, |
|
|
}} |
|
|
> |
|
|
<CARTStack.Screen name="ShoppingCart" component={ShoppingCart} /> |
|
|
<CARTStack.Screen name="DeliveryForm" component={DeliveryForm} /> |
|
|
</CARTStack.Navigator> |
|
|
); |
|
|
}; |
|
|
|
|
|
const PROFILEStack = createNativeStackNavigator(); |
|
|
const PROFILEStackScreen = () => { |
|
|
return ( |
|
|
<PROFILEStack.Navigator |
|
|
screenOptions={{ |
|
|
headerShown: false, |
|
|
contentStyle: { backgroundColor: Colors.theme1[colorScheme].white }, |
|
|
}} |
|
|
> |
|
|
<PROFILEStack.Screen name="Profile" component={Profile} /> |
|
|
</PROFILEStack.Navigator> |
|
|
); |
|
|
}; |
|
|
|
|
|
const Stack = createNativeStackNavigator(); |
|
|
const Navigation = ({ getStatus, isLogin }) => { |
|
|
useEffect(() => { |
|
|
getStatus(); |
|
|
}, []); |
|
|
return ( |
|
|
<NavigationContainer> |
|
|
<Stack.Navigator |
|
|
// initialRouteName="Root" |
|
|
screenOptions={{ |
|
|
headerShown: false, |
|
|
contentStyle: { backgroundColor: Colors.theme1[colorScheme].white }, |
|
|
}} |
|
|
> |
|
|
<Stack.Screen name="Splash" component={Splash} /> |
|
|
<Stack.Screen name="QR" component={QR} /> |
|
|
<Stack.Screen name="Root" component={BottomTabNavigator} /> |
|
|
<Stack.Screen name="Login" component={Login} /> |
|
|
<Stack.Screen name="Otp" component={Otp} /> |
|
|
<Stack.Screen name="Orders" component={OrdersFollowUp} /> |
|
|
<Stack.Screen name="Order" component={OrderDetails} /> |
|
|
<Stack.Screen name="Faq" component={Faq} /> |
|
|
<Stack.Screen name="Activation" component={Activation} /> |
|
|
<Stack.Screen name="QRContent" component={QRContent} /> |
|
|
<Stack.Screen name="Contact" component={Contact} /> |
|
|
<Stack.Screen name="AR" component={AR} /> |
|
|
<Stack.Screen name="CreateAddress" component={Address} /> |
|
|
<Stack.Screen name="ProfileAddress" component={ProfileAddress} /> |
|
|
<Stack.Screen name="ProfileBookmark" component={ProfileBookmark} /> |
|
|
</Stack.Navigator> |
|
|
</NavigationContainer> |
|
|
); |
|
|
}; |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
isLogin: state.user.status, |
|
|
}); |
|
|
const mapDispatchToProps = { |
|
|
getStatus: user.getStatus, |
|
|
}; |
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Navigation);
|
|
|
|
