How to add a drawer navigator React-Navigation v4

Question

I have this code for creating a drawer navigator. But I can't open my drawer through left to right slide. Can anyone please help me to solve my problem. I am new to react-native. I am using react-navigation v4 and react-navigation-drawer for the drawer navigator.

const EMBotomTabScreen = createDrawerNavigator ({
  SUMMARY: {
    screen : EMNavigator,
    navigationOptions :{
      animationEnabled : 'true',
      // headerLeft : <HamburgerIcon navigationProps={ navigation }/>,
      swipeEnabled: true,
      tabBarOptions: {
        activeTintColor: '#369841',
        //activeBackgroundColor : '#f2f2f2',
        inactiveTintColor : 'gray',
        inactiveBackgroundColor : '#adc1b8',
        borderRightWidth:2,
        borderRightColor:'blue',
        labelStyle: {
          fontSize: 13,
        },
        style: {
          backgroundColor: '#f2f2f2',
          // borderRightWidth:2,
          // borderRightColor:'blue'
        },
        indicatorStyle: {
            backgroundColor: 'red',
        },
      },

      tabStyle: {
        backgroundColor: 'green',
        borderRightWidth:2,
        borderRightColor:'blue'
      },
      indicatorStyle : {
        backgroundColor : 'red'
      },
      tabBarIcon: ({ focused, tintColor }) => {
        const iconName = `ios-desktop`;
        return <Image source={require('../assets/aaaaa.png')} size={27} color={tintColor} />;
    },
    }
  },
  DEMAND: {
    screen : EMDemandNavigator,
    navigationOptions : {
      tabBarOptions: {
        activeTintColor: '#369841',
       // activeBackgroundColor : '#f2f2f2',
        inactiveTintColor : 'gray',
        inactiveBackgroundColor : '#adc1b8',
        labelStyle: {
          fontSize: 13,
        },
        style: {
          backgroundColor: '#f2f2f2',
        },
      },
      tabBarIcon: ({ focused, tintColor }) => {
        const iconName = `ios-cloud`;
        return <Image source={require('../assets/aaaaaaa.png')} size={27} color={tintColor} />;
    },
    }
  },
  ALARM: {
    screen : EMAlarmNavigator,
    navigationOptions : {
      animationEnabled : 'true',
      swipeEnabled: true,
      tabBarOptions: {
        activeTintColor: '#369841',
        //activeBackgroundColor : '#f2f2f2',
        inactiveTintColor : 'gray',
        inactiveBackgroundColor : '#adc1b8',
        borderRightWidth:2,
        borderRightColor:'blue',
        labelStyle: {
          fontSize: 13,
        },
        style: {
          backgroundColor: '#f2f2f2',
          // borderRightWidth:2,
          // borderRightColor:'blue'
        },
        indicatorStyle: {
            backgroundColor: 'red',
        },
      },

      tabStyle: {
        backgroundColor: 'green',
        borderRightWidth:2,
        borderRightColor:'blue'
      },
      indicatorStyle : {
        backgroundColor : 'red'
      },
      tabBarIcon: ({ focused, tintColor }) => {
        const iconName = `bell-o`;
        return <Icons name={iconName} size={27} color={tintColor} />;
    },
    }
  }

Kailash Kailash · Accepted Answer · 2020-02-19T09:20:11

You can get an idea from the below given code.

import Splash from '../Splash/Splash';
import Home from '../screens/Home';
import DrawerScreen from '../screens/DrawerScreen'
//And many more 
import {createStackNavigator,
    createSwitchNavigator,
    createAppContainer,
    createDrawerNavigator} from 'react-navigation';

const AppStack = createDrawerNavigator({
        Home:Home,
    },{
    contentComponent: DrawerScreen,
        defaultNavigationOptions: { 
            drawerWidth: Dimensions.get('window').width - 120,
          },
 });

const AppNavigator = createStackNavigator({
    Splash:Splash,
     Login:Login,
     SignUp:SignUp },,{
        defaultNavigationOptions: { 
            header: null,
            gesturesEnabled: false
          },
          initialRouteName: "Splash");
const AppContainer = createAppContainer(AppNavigator);

Whenever you want to open the drawer like on click of the drawer icon. then add these line in the onPress definition.

this.props.navigation.openDrawer();

How to add a drawer navigator React-Navigation v4

1 Answers