text: import React, { Component } from "react";
  import { Easing, Animated, Dimensions } from "react-native";
  import { createStackNavigator } from "@react-navigation/stack";
  import { createDrawerNavigator } from "@react-navigation/drawer";
  // Redux
  import { connect } from "react-redux";
  
  import { Block, Text, theme } from "galio-framework";
  
  import ComponentsScreen from "../screens/Components";
  import HomeScreen from "../screens/Home";
  import OnboardingScreen from "../screens/Onboarding";
  import ProfileScreen from "../screens/Profile";
  import ProScreen from "../screens/Pro";
  import SettingsScreen from "../screens/Settings";
  
  import CustomDrawerContent from "./Menu";
  import { Icon, Header } from "../components";
  import { Images, materialTheme } from "../constants/";
  
  const { width } = Dimensions.get("screen");
  
  const Stack = createStackNavigator();
  const Drawer = createDrawerNavigator();
  
  const profile = {
    avatar: Images.Profile,
    name: "",
    rating: 4.8
  };
  
  function ProfileStack(props) {
    return (
      <Stack.Navigator initialRouteName="Profile" mode="card" headerMode="screen">
        <Stack.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            header: ({ navigation, scene }) => (
              <Header
                white
                transparent
                title="Profile"
                scene={scene}
                navigation={navigation}
              />
            ),
            headerTransparent: true
          }}
        />
      </Stack.Navigator>
    );
  }
  
  function SettingsStack(props) {
    return (
      <Stack.Navigator
        initialRouteName="Settings"
        mode="card"
        headerMode="screen"
      >
        <Stack.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            header: ({ navigation, scene }) => (
              <Header title="Settings" scene={scene} navigation={navigation} />
            )
          }}
        />
      </Stack.Navigator>
    );
  }
  
  function ComponentsStack(props) {
    return (
      <Stack.Navigator mode="card" headerMode="screen">
        <Stack.Screen
          name="Components"
          component={ComponentsScreen}
          options={{
            header: ({ navigation, scene }) => (
              <Header title="Components" scene={scene} navigation={navigation} />
            )
          }}
        />
      </Stack.Navigator>
    );
  }
  
  function HomeStack(props) {
    return (
      <Stack.Navigator mode="card" headerMode="screen">
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            header: ({ navigation, scene }) => (
              <Header
                search
                tabs
                title="Home"
                navigation={navigation}
                scene={scene}
              />
            )
          }}
        />
        <Stack.Screen
          name="Pro"
          component={ProScreen}
          options={{
            header: ({ navigation, scene }) => (
              <Header
                back
                white
                transparent
                title=""
                navigation={navigation}
                scene={scene}
              />
            ),
            headerTransparent: true
          }}
        />
      </Stack.Navigator>
    );
  }
  
  function AppStack(props) {
    return (
      <Drawer.Navigator
        style={{ flex: 1 }}
        drawerContent={props => (
          <CustomDrawerContent {...props} profile={profile} />
        )}
        drawerStyle={{
          backgroundColor: "white",
          width: width * 0.8
        }}
        drawerContentOptions={{
          activeTintColor: "white",
          inactiveTintColor: "#000",
          activeBackgroundColor: materialTheme.COLORS.ACTIVE,
          inactiveBackgroundColor: "transparent",
          itemStyle: {
            width: width * 0.74,
            paddingHorizontal: 12,
            // paddingVertical: 4,
            justifyContent: "center",
            alignContent: "center",
            // alignItems: 'center',
            overflow: "hidden"
          },
          labelStyle: {
            fontSize: 18,
            fontWeight: "normal"
          }
        }}
        initialRouteName="Home"
      >
        <Drawer.Screen
          name="Home"
          component={HomeStack}
          options={{
            drawerIcon: ({ focused }) => (
              <Icon
                size={16}
                name="shop"
                family="GalioExtra"
                color={focused ? "white" : materialTheme.COLORS.MUTED}
              />
            )
          }}
        />
        <Drawer.Screen
          name="Countries"
          component={HomeStack}
          options={{
            drawerIcon: ({ focused }) => (
              <Icon
                size={16}
                name="shop"
                family="GalioExtra"
                color={focused ? "white" : materialTheme.COLORS.MUTED}
              />
            )
          }}
        />
        <Drawer.Screen
          name="Overall"
          component={HomeStack}
          options={{
            drawerIcon: ({ focused }) => (
              <Icon
                size={16}
                name="shop"
                family="GalioExtra"
                color={focused ? "white" : materialTheme.COLORS.MUTED}
              />
            )
          }}
        />
        <Drawer.Screen
          name="Profile"
          component={ProfileStack}
          options={{
            drawerIcon: ({ focused }) => (
              <Icon
                size={16}
                name="circle-10"
                family="GalioExtra"
                color={focused ? "white" : materialTheme.COLORS.MUTED}
              />
            )
          }}
        />
      </Drawer.Navigator>
    );
  }
  
  function OnboardingStack(props) {
    const { name } = props;
    return (
      <Stack.Navigator mode="card" headerMode="none">
        <Stack.Screen
          name="Onboarding"
          component={OnboardingScreen}
          option={{
            headerTransparent: true
          }}
        />
        <Stack.Screen name="App" component={AppStack} />
      </Stack.Navigator>
    );
  }
  
  const mstp = ({ userReducer }) => ({
    name: userReducer.name
  });
  
  const mdtp = {};
  
  export default connect(mstp, mdtp)(OnboardingStack);
  