You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

255 lines
8.1 KiB

import React, { useEffect } from "react";
import { Image } 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 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";
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 { 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";
//assets
import homeDeactiveIcon from "./assets/home-deactive.png";
import homeActiveIcon from "./assets/home-active.png";
import videoActiveIcon from "./assets/video-active.png";
import videoDeactiveIcon from "./assets/video-deactive.png";
import bookDeactiveIcon from "./assets/book-deactive.png";
import bookActiveIcon from "./assets/book-active.png";
import testDeactiveIcon from "./assets/test-deactive.png";
import testActiveIcon from "./assets/test-active.png";
import profileActiveIcon from "./assets/profile-active.png";
import profileDeactiveIcon from "./assets/profile-deactive.png";
const width = Dimensions.get("window").width;
const Tab = createBottomTabNavigator();
const BottomTabNavigator = () => {
return (
<Tab.Navigator
initialRouteName="HomeTab"
screenOptions={{
tabBarHideOnKeyboard: true,
headerShown: false,
tabBarActiveTintColor: "#06BACE",
tabBarInactiveTintColor: "grey",
tabBarStyle: {
backgroundColor: "#CCE6FF",
height: 70,
},
tabBarLabelStyle: {
fontSize: width / 34,
fontFamily: "regular",
transform: [{ translateY: -7 }],
},
tabBarShowLabel: true,
// tabBarLabel : 'reza'
}}
>
<Tab.Screen
name="Profile"
component={Profile}
options={{
title: "پروفایل",
tabBarIcon: ({ focused, color }) =>
focused ? (
<Image
source={profileActiveIcon}
style={{ width: 33, height: 32 }}
/>
) : (
<Image
source={profileDeactiveIcon}
style={{ width: 33, height: 32 }}
/>
),
}}
/>
<Tab.Screen
name="Tests"
component={Tests}
options={{
title: "آزمون",
tabBarIcon: ({ focused, color }) =>
focused ? (
<Image
source={testActiveIcon}
style={{ width: 33, height: 32 }}
/>
) : (
<Image
source={testDeactiveIcon}
style={{ width: 33, height: 32 }}
/>
),
}}
/>
<Tab.Screen
name="VODTab"
component={VODStackScreen}
options={{
unmountOnExit: true,
unmountOnBlur: true,
title: "ویدئوها",
tabBarIcon: ({ focused, color }) =>
focused ? (
<Image
source={videoActiveIcon}
style={{ width: 32, height: 28 }}
/>
) : (
<Image
source={videoDeactiveIcon}
style={{ width: 32, height: 28 }}
/>
),
}}
/>
<Tab.Screen
name="ProductsTab"
component={ProductsStackScreen}
options={{
title: "کتابها",
tabBarIcon: ({ focused, color }) =>
focused ? (
<Image
source={bookActiveIcon}
style={{ width: 35, height: 34 }}
/>
) : (
<Image
source={bookDeactiveIcon}
style={{ width: 35, height: 34 }}
/>
),
}}
/>
<Tab.Screen
name="HomeTab"
component={HomeStackScreen}
options={{
title: "خانه",
tabBarIcon: ({ focused, color }) =>
focused ? (
<Image
source={homeActiveIcon}
style={{ width: 33, height: 33 }}
/>
) : (
<Image
source={homeDeactiveIcon}
style={{ width: 33, height: 33 }}
/>
),
}}
/>
</Tab.Navigator>
);
};
const HomeStack = createNativeStackNavigator();
const HomeStackScreen = () => {
return (
<HomeStack.Navigator
screenOptions={{ headerShown: false }}
initialRouteName="Home"
>
<HomeStack.Screen name="Home" component={Home} />
<VODStack.Screen name="VOD" component={Videos} />
<ProductsStack.Screen name="Products" component={Products} />
<VODStack.Screen name="Video" component={Video} />
<HomeStack.Screen name="Product" component={Product} />
</HomeStack.Navigator>
);
};
const ProductsStack = createNativeStackNavigator();
const ProductsStackScreen = () => {
return (
<ProductsStack.Navigator screenOptions={{ headerShown: false }}>
<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 }}>
<VODStack.Screen name="VOD" component={Videos} />
<VODStack.Screen name="Video" component={Video} unmountOnExit={true} />
<VODStack.Screen name="VideoDisplay" component={VideoDisplay} />
</VODStack.Navigator>
);
};
const AuthStack = createNativeStackNavigator();
const AuthStackScreen = () => {
return (
<AuthStack.Navigator
screenOptions={{ headerShown: false }}
// initialRouteName="Splash"
>
<AuthStack.Screen name="Splash" component={Splash} />
<AuthStack.Screen name="Login" component={Login} />
<AuthStack.Screen name="Otp" component={Otp} />
</AuthStack.Navigator>
);
};
const Stack = createNativeStackNavigator();
const Navigation = ({ getStatus, isLogin }) => {
useEffect(() => {
getStatus();
}, []);
return (
<NavigationContainer>
<Stack.Navigator
// initialRouteName="Root"
screenOptions={{ headerShown: false }}
>
<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.Navigator>
</NavigationContainer>
);
};
const mapStateToProps = (state) => ({
isLogin: state.user.status,
});
const mapDispatchToProps = {
getStatus: user.getStatus,
};
export default connect(mapStateToProps, mapDispatchToProps)(Navigation);