undefined is not a function (evaluating '(0,_reactnavigationstack.creactDrawernavigation)') - react-native

Question

I want to create Drawer Navigation That contains Menu and Home Screen. I tried a lot but I am unable to resolve this issue and as per update of react native we have to wrap the navigation in CreateAppContainer, as you can see i wraped it but nothing is resolved.
"MainComponent"
import React, {Component} from 'react';
import { View, Platform } from 'react-native';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import DishDetail from './DishDetailComponent';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation-stack';
const MenuNavigator = createStackNavigator({
Menu: { screen: Menu },
DishDetail: { screen: DishDetail }
},
{
initialRouteName: 'Menu',
navigationOptions: {
headerStyle: {
backgroundColor: "#512DA8"
},
headerTintColor: '#fff',
headerTitleStyle: {
color: "#fff"
}
}
}
);
const HomeNavigator = createStackNavigator({
Home: { screen: Home }
}, {
navigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: "#512DA8"
},
headerTitleStyle: {
color: "#fff"
},
headerTintColor: "#fff"
})
});
//-----------Main---------//
const MainNavigator = createDrawerNavigator({
Home:
{ screen: HomeNavigator,
navigationOptions: {
title: 'Home',
drawerLabel: 'Home'
}
},
Menu:
{ screen: MenuNavigator,
navigationOptions: {
title: 'Menu',
drawerLabel: 'Menu'
},
}
}, {
drawerBackgroundColor: '#D1C4E9'
});
class Main extends Component() {
render() {
return(
<View>
<MainNavigator />
</View>
);
}
}
export default createAppContainer(Main);
////////////////////App.js/////////////////
import React from 'react';
import Main from './components/MainComponent';
export default class App extends React.Component {
render() {
return (
<Main />
);
}
}
I think the issue is i am not wrapping the appContainer Correctly.

Answer 1

You are importing wrong. use like
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
instead of
import { createStackNavigator, createDrawerNavigator } from 'react-navigation-stack';

Answer 2

Try this way
const LoginNavigator = createStackNavigator({
Login: {
screen: Login,
navigationOptions: {
header: null,
}
},
SignUp: {
screen: SignUp,
navigationOptions: {
header: null,
}
}
});
class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Image
source={require('../Img/hamburger.png')}
style={{ width: 25, height: 25, marginLeft: 20, tintColor: '#ffffff' }}
/>
</TouchableOpacity>
</View>
);
}
}
const HomeActivity_StackNavigator = createStackNavigator({
Home: {
screen: Main,
navigationOptions: ({ navigation }) => ({
title: 'Dashboard',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800'
},
headerTintColor: '#fff'
}),
},
}, {headerLayoutPreset: 'center'});
const DrawerNavigators = createDrawerNavigator({
//Drawer Optons and indexing
Main: {
screen: HomeActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Dashboard',
}
}
});
const NonDrawerNavigators = createStackNavigator({
TaskView: {
screen: TaskView,
navigationOptions: {
title: 'Task',
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff'
}
},
TeamView: {
screen: TeamView,
navigationOptions: {
title: 'Team',
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff'
}
}
}, {headerLayoutPreset: 'center'});
const AppNavigator = createStackNavigator({
drawerStack: {
screen: DrawerNavigators,
navigationOptions: {
header: null
}
},
nonDrawerStack: {
screen: NonDrawerNavigators,
navigationOptions: {
header: null
}
}
});
export default createAppContainer(createSwitchNavigator({
SplashScreen: SplashScreen,
loginStack: LoginNavigator,
homeStack: AppNavigator
}, {
initialRouteName: 'SplashScreen'
})
);

Answer 3

I had modified your code as under. I hope this will help you.
"MainComponent"
import React, {Component} from 'react';
import { View, Platform } from 'react-native';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import DishDetail from './DishDetailComponent';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation-stack';
const MenuNavigator = createAppContainer(createDrawerNavigator(
{
Menu: { screen: Menu },
DishDetail: { screen: DishDetail }
},
{
contentComponent: SideMenu,
drawerWidth: normalize(280),
initialRouteName: "Menu"
}
));
const HomeNavigator = createAppContainer(createStackNavigator(
{
Home: { screen: Home }
},
{
// Default config for all screens
headerMode: 'none',
initialRouteName: 'Home',
// transitionConfig: noTransitionConfig,
},
));
class Main extends Component() {
render() {
return(
<View>
<MainNavigator />
</View>
);
}
}
export default createAppContainer(Main);
////////////////////App.js/////////////////
import React from 'react';
import Main from './components/MainComponent';
export default class App extends React.Component {
render() {
return (
<Main />
);
}
}