How to use the react-navigation.createDrawerNavigator function in react-navigation

import React from "react";
import { createDrawerNavigator, createAppContainer } from "react-navigation";
import HomeStack from "./HomeStack";
import { View, Text } from "react-native";

// const sideMenu = () => {
//     return (
//         
//     )
// }
const Root = createDrawerNavigator(
  {
    HomeStackScreen: {
      screen: HomeStack,
      navigationOptions: { title: "Home" }
    }
  },
  {
    // contentComponent: sideMenu,
    drawerWidth: 300,
    initialRouteName: 'HomeStackScreen',
    
  }
);

const ContainerRoot = createAppContainer(Root);

const HomeStackNavigator = createStackNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: () => ({
        headerTitle: "Home"
      })
    }
  },
  {
    //headerMode: "none"
  }
);

const AppNavigator = createDrawerNavigator(
  {
    Home: { screen: HomeStackNavigator }
  },
  {
    // contentComponent: Home
  }
);
const BottomNavigator = createBottomTabNavigator(
  {
    Home: AppNavigator,
    Profile: AuthNavigator
  },
  {
    initialRouteName: "Home"
  }
);

},
    TransactionHistory: {
      screen: TransactionHistoryPage,
      navigationOptions: {
        title: 'Transaction History',
        header: null,
      },
    },
  },
  {
    headerMode: 'screen',
    transitionConfig: () => ({ screenInterpolator: () => null }),
  }
);

const drawer = createDrawerNavigator(
  {
    DiscoverStack: {
      screen: discoverStack,
      navigationOptions: {
        title: 'Explore',
        drawerIcon: ({ tintColor }) => ,
      },
    },
    TrendingStack: {
      screen: TrendingPage,
      navigationOptions: {
        title: 'Trending',
        drawerIcon: ({ tintColor }) => ,
      },
    },
    MySubscriptionsStack: {

import StatsScreen from '../screens/StatsScreen';
import StatsWebScreen from '../screens/StatsWebScreen';
import SettingsScreen from '../screens/SettingsScreen';
import TipsScreen from '../screens/TipsScreen';
import PatchNotesScreen from '../screens/PatchNotesScreen';
import AboutScreen from '../screens/AboutScreen';
import SettingsTipsScreen from '../screens/SettingsTipsScreen';

import { SCREEN_LABELS, SCREEN_LABELS_HIDDEN } from '../constants/Constants';

import Drawer from '../components/Drawer';
import Colors from '../constants/Colors';
import PatchScreen from '../screens/PatchScreen';
import SettingsLanguageScreen from '../screens/SettingsLanguageScreen';

const drawerNav = createDrawerNavigator({
  [SCREEN_LABELS.HEROES]: createStackNavigator({
    [SCREEN_LABELS.HEROES]: HeroesScreen,
    [SCREEN_LABELS_HIDDEN.HERO]: HeroScreen,
  }),
  [SCREEN_LABELS.ITEMS]: createStackNavigator({
    [SCREEN_LABELS.ITEMS]: ItemsScreen,
    [SCREEN_LABELS_HIDDEN.ITEM]: ItemScreen,
  }),

  [SCREEN_LABELS.STATS]: createStackNavigator({ 
    [SCREEN_LABELS.STATS]: StatsScreen, 
    [SCREEN_LABELS_HIDDEN.STATS_WEB]: StatsWebScreen,
  }, {
    navigationOptions: {
      headerBackTitle: 'Stats',
    }

screen: WebviewSelection,
			path: 'webview',
		},
		[ SCREENS.WEBVIEW_SCREEN ]: {
			screen: WebviewScreen,
		},
	},
	{
		initialRouteName: SCREENS.LOGIN,
		defaultNavigationOptions: ({ navigate, navigation }) => ({
			header: (),
			gesturesEnabled: false,
		}),
	});

const DrawerNavigator = createDrawerNavigator({
	StackNavigator: {
		screen: StackNavigator,
		path: '',
	},
}, {
	contentComponent: DrawerLinks,
	drawerWidth: WINDOW_WIDTH,
	gesturesEnabled: false,
});

const Router = createAppContainer(DrawerNavigator);
const prefix = 'swaglabs://';

export default class NavigationContainer extends Component {
	render() {
		return (

import {
    createDrawerNavigator,
    createStackNavigator,
    createAppContainer
} from "react-navigation";
import React from "react";
import Form from "./screens/Form";
import Tabs from "./screens/Tabs";
import Carousel from "./screens/Carousel";
import Cards from "./screens/Cards";
import Sidebar from "./components/Sidebar";

const DrawerNavigator = createDrawerNavigator(
    {
        Form: { screen: Form },
        Tabs: { screen: Tabs },
        Carousel: { screen: Carousel },
        Cards: { screen: Cards }
    },
    {
        initialRouteName: "Tabs",
        contentOptions: {
            activeTintColor: "#e91e63"
        },
        contentComponent: props => 
    }
);

const StackNavigator = createStackNavigator(

defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
           navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        )
      };
    }
  }
);

const AppDrawerNavigator = createDrawerNavigator({
  Dashboard: {
    screen: DashboardStackNavigator
  }
});

const AppSwitchNavigator = createSwitchNavigator({
  Welcome: { screen: WelcomeScreen },
  Dashboard: { screen: AppDrawerNavigator }
});

const AppContainer = createAppContainer(AppSwitchNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',

import NHList from "./screens/list/";
import NHRadio from "./screens/radio/";
import NHSearchbar from "./screens/searchbar/";
import NHSpinner from "./screens/spinner/";
import NHPicker from "./screens/picker/";
import NHTab from "./screens/tab/";
import NHThumbnail from "./screens/thumbnail/";
import NHTypography from "./screens/typography/";
import SideBar from "./screens/sidebar";
import Segment from "./screens/segment";
import NHToast from "./screens/toast/";
import Actionsheet from "./screens/actionsheet";
import NHAccordion from "./screens/accordion/";
import NHDatePicker from "./screens/datepicker/";

const Drawer = createDrawerNavigator(
  {
    Home: { screen: Home },
    Anatomy: { screen: Anatomy },
    Header: { screen: Header },
    Footer: { screen: Footer },
    NHBadge: { screen: NHBadge },
    NHButton: { screen: NHButton },
    NHCard: { screen: NHCard },
    NHCheckbox: { screen: NHCheckbox },
    NHDeckSwiper: { screen: NHDeckSwiper },
    NHFab: { screen: NHFab },
    NHForm: { screen: NHForm },
    NHIcon: { screen: NHIcon },
    NHLayout: { screen: NHLayout },
    NHList: { screen: NHList },
    ListSwipe: { screen: ListSwipe },

},
    Movie: Movie,
  },
  {
    mode: 'modal',
    headerMode: 'none',
    cardStyle: {
      backgroundColor: 'white'
    },
    navigationOptions: {
      gesturesEnabled: true,
    }
  }
)

const DrawerNavigator = createDrawerNavigator(
  {
    Main: {
      screen: WithModal,
      navigationOptions: {
        title: 'Inicio',
        drawerIcon: 
      }
    },
    Sobre: {
      screen: About
    },
    Suerte: {
      screen: Lucky
    }
  },
  {

import { createDrawerNavigator } from 'react-navigation';
import MainAppNavigator from './MainAppNavigator';
import { DrawerScreen } from '../screens';

const DrawerNavigator = createDrawerNavigator(
  {
    MainAppNavigator,
  },
  {
    contentComponent: DrawerScreen,
  }
);

export default DrawerNavigator;