RnDanovinExpo/navigation/index.js

import React, { useEffect } from "react";
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 { 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";

//style
import fontSize from "../src/constants/fontSize";
import Colors from "../src/constants/Colors";
import tw from "tailwind-react-native-classnames";


const Tab = createBottomTabNavigator();
const BottomTabNavigator = () => {
  const colorScheme = Appearance.getColorScheme();

  return (
    <Tab.Navigator
      initialRouteName="HomeTab"
      screenOptions={{
        tabBarHideOnKeyboard: true,
        headerShown: false,
        tabBarActiveTintColor: Colors.theme1[colorScheme].green79,
        tabBarInactiveTintColor: "grey",
        tabBarStyle: {
          backgroundColor: Colors.theme1[colorScheme].greenFF1,
          height: 70,
        },
        tabBarLabelStyle: {
          fontSize: fontSize.sm,
          fontFamily: "bold",
          transform: [{ translateY: -7 }],
        },
        tabBarShowLabel: true,
        // tabBarLabel : 'reza'
      }}
    >
      <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>
            ),
        }}
      />
      <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.100}
              >
                <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 }}
      initialRouteName="Home"
    >
      <HomeStack.Screen name="Home" component={Home} />
      <HomeStack.Screen name="VOD" component={Videos} />
      <HomeStack.Screen name="Products" component={Products} />
      <HomeStack.Screen name="Video" component={Video} />
      <HomeStack.Screen name="Product" component={Product} />
    </HomeStack.Navigator>
  );
};

const ProductsStack = createNativeStackNavigator();
const ProductsStackScreen = () => {
  return (
    <ProductsStack.Navigator screenOptions={{ headerShown: false }} 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 }}>
      <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 }}>
      <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 }}
      // initialRouteName="Splash"
    >
      <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 : '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);