import React, { useEffect } from "react"; import { Restart } from "fiction-expo-restart"; import { I18nManager, StatusBar, Dimensions } from "react-native"; import * as Linking from "expo-linking"; import Svg, { G, Path } from "react-native-svg"; import { asyncAwesomeAlert } from "../src/utils/AsyncWrappers"; import { NavigationContainer } 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, publicApi } from "../src/redux/actions"; import { useSafeAreaInsets } from "react-native-safe-area-context"; //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"; import Sample from "../src/screens/Product/components/Sample"; import Info from "../src/screens/Product/components/Info"; import Rules from "../src/screens/Rules/index"; import MyCourses from "../src/screens/Profile/components/MyCourses"; import Ticket from "../src/screens/Contact/layouts/Ticket"; import Tickets from "../src/screens/Contact/layouts/Tickets"; import TicketStatus from "../src/screens/Contact/layouts/TicketStatus"; import MoreBlog from "../src/screens/Blogs/layouts/More"; //style import Colors from "../src/constants/Colors"; import fontSize from "../src/constants/fontSize"; const Tab = createBottomTabNavigator(); const BottomTabNavigator = ({ theme, userProducts, bottomNavigation, startUserGuide, }) => { const insets = useSafeAreaInsets(); const [headerShown, setHeaderShown] = React.useState(true); React.useEffect(() => { setTimeout(() => { setHeaderShown(false); }, 600); }, []); return ( {bottomNavigation.home.isActive ? ( ( )} options={{ title: bottomNavigation.home.label, tabBarIcon: ({ focused, color }) => focused ? ( ) : ( ), }} /> ) : null} {bottomNavigation.products.isActive ? ( } options={{ title: bottomNavigation.products.label, tabBarIcon: ({ focused, color }) => focused ? ( ) : ( ), }} /> ) : null} {bottomNavigation.vod.isActive ? ( } options={{ unmountOnExit: true, unmountOnBlur: true, title: bottomNavigation.vod.label, tabBarIcon: ({ focused, color }) => focused ? ( ) : ( ), }} /> ) : null} {bottomNavigation.cart.isActive ? ( } options={{ tabBarBadge: userProducts?.filter( (product) => product?.condition < 2 ).length ? userProducts?.filter((product) => product?.condition < 2) ?.length : null, tabBarBadgeStyle: { color: "white", backgroundColor: theme === "light" ? Colors.theme1.greenCF : Colors.theme1.greenCF, fontSize: fontSize.sm, paddingTop: 2, color: theme === "light" ? Colors.theme1.white : Colors.theme1.dark, borderWidth: 1, borderColor: theme === "light" ? Colors.theme1.greenCF : Colors.theme1.dark, fontFamily: "bold", }, title: bottomNavigation.cart.label, tabBarIcon: ({ focused, color }) => focused ? ( ) : ( ), }} /> ) : null} {bottomNavigation.profile.isActive ? ( } options={{ title: bottomNavigation.profile.label, tabBarIcon: ({ focused, color }) => focused ? ( ) : ( ), contentStyle: { backgroundColor: "white", }, }} /> ) : null} ); }; const HomeStack = createNativeStackNavigator(); const HomeStackScreen = ({ theme, startUserGuide }) => { return ( } /> ); }; const ProductsStack = createNativeStackNavigator(); const ProductsStackScreen = ({ theme }) => { return ( ); }; const VODStack = createNativeStackNavigator(); const VODStackScreen = ({ theme }) => { return ( ); }; const CARTStack = createNativeStackNavigator(); const CARTStackScreen = ({ theme }) => { return ( ); }; const PROFILEStack = createNativeStackNavigator(); const PROFILEStackScreen = ({ theme }) => { return ( ); }; const prefix = Linking.createURL("/"); const Stack = createNativeStackNavigator(); const Navigation = ({ getStatus, userProducts, ltr, setLTR, theme, setOrientation, bottomNavigation, startUserGuide, }) => { const linking = { prefixes: [prefix], }; const setDirection = async () => { setLTR(); await I18nManager.allowRTL(false); }; useEffect(() => { if (I18nManager.isRTL && !ltr) { setDirection(); Restart(); } getStatus(); StatusBar.setBarStyle( `${theme === "light" ? "dark" : "light"}-content`, true ); }, []); Dimensions.addEventListener("change", () => { const dim = Dimensions.get("window"); setOrientation(dim.height > dim.width ? "portrait" : "landscape"); }); return ( ( )} /> ); }; const mapStateToProps = (state) => ({ userProducts: state.userProduct.list, theme: state.publicApi.theme, ltr: state.publicApi.ltr, bottomNavigation: state.config.bottomNavigation, }); const mapDispatchToProps = { getStatus: user.getStatus, setLTR: publicApi.setLTR, setOrientation: publicApi.setOrientation, }; export default connect(mapStateToProps, mapDispatchToProps)(Navigation);