text: import { createAppContainer } from 'react-navigation';
  import { createDrawerNavigator } from 'react-navigation-drawer'
  import { createStackNavigator } from 'react-navigation-stack'
  /* import React from 'react'
  import {createStackNavigator} from '@react-navigation/stack'
  import {NavigationContainer} from '@react-navigation/native'
  import {createDrawerNavigator} from '@react-navigation/drawer' */
  import HomeScreen from '../screens/Home/HomeScreen';
  import CategoriesScreen from '../screens/Categories/CategoriesScreen';
  import RecipeScreen from '../screens/Recipe/RecipeScreen';
  import RecipesListScreen from '../screens/RecipesList/RecipesListScreen';
  import Test from '../screens/Test/Test';
  import DrawerContainer from '../screens/DrawerContainer/DrawerContainer';
  import IngredientScreen from '../screens/Ingredient/IngredientScreen';
  import SearchScreen from '../screens/Search/SearchScreen';
  import IngredientsDetailsScreen from '../screens/IngredientsDetails/IngredientsDetailsScreen';
  
  /* const Stack = createStackNavigator();
  
  function MainNavigator() {
    return(
      <Stack.Navigator
        screenOptions={{
            headerTitleStyle: {
              fontWeight: 'bold',
              textAlign: 'center',
              alignSelf: 'center',
              flex: 1,
            }
        }}
      >
        <Stack.Screen name='Home' component={HomeScreen} />
        <Stack.Screen name='Categories' component={CategoriesScreen}/>
        <Stack.Screen name='Recipe' component={RecipeScreen}/>
        <Stack.Screen name='RecipesList' component={RecipesListScreen} />
        <Stack.Screen name='Ingredient' component={IngredientScreen} />
        <Stack.Screen name='Search' component={SearchScreen} />
        <Stack.Screen name='IngredientsDetails' component={IngredientsDetailsScreen} />
      </Stack.Navigator>
    )
  } */
  
  const MainNavigator = createStackNavigator(
    {
      // Home: HomeScreen,
      Home: Test,
      Gresize: CategoriesScreen,
      Recipe: RecipeScreen,
      RecipesList: Test,
      Ingredient: IngredientScreen,
      Search: SearchScreen,
      IngredientsDetails: IngredientsDetailsScreen,
      RecipesListScreen: RecipesListScreen, 
      HomeScreen: HomeScreen
    },
    {
      initialRouteName: 'HomeScreen',
      defaulfNavigationOptions: ({ navigation }) => ({
        headerTitleStyle: {
          fontWeight: 'bold',
          textAlign: 'center',
          alignSelf: 'center',
          flex: 1,
        }
      })
    }
  );
  
  /* const Drawer = createDrawerNavigator();
  
  function DrawerStack() {
    return(
      <Drawer.Navigator
        drawerPosition='left'
        initialRouteName='Main'
        drawerStyle={{
          width: 250
        }}
        drawerContent={props=> DrawerContainer}
      >
        <Drawer.Screen name='Main' component={MainNavigator} />
      </Drawer.Navigator>
    )
  } */
  
  const DrawerStack = createDrawerNavigator(
    {
      Main: MainNavigator
    },
    {
      drawerPosition: 'left',
      initialRouteName: 'Main',
      drawerWidth: 250,
      contentComponent: DrawerContainer
    }
  );
  
  /* export default function AppContainer() {
    return(
      <NavigationContainer>
        <DrawerStack/>
      </NavigationContainer>
    )
  } */
  
  export default AppContainer = createAppContainer(DrawerStack);
  
  console.disableYellowBox = true;