Drawer navigator in react-native using react-navigation 4.x

Question

I want to create a drawer navigator using react navigation 4.x in react native, but not getting drawer menu in left side of the screen. Here is my code for the navigation component. It includes three screens First,Home and Login that i want to show in drawer menu.

import {
  createSwitchNavigator,
  createAppContainer,
  //createDrawerNavigator,
  // createBottomTabNavigator,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';

import FirstScreen from '../screen/FirstScreen';
import HomeScreen from '../screen/HomeScreen';
import LoginScreen from '../screen/LoginScreen';

const AppStack = createStackNavigator ({
  First: {screen: FirstScreen},
  // Dashboard: {screen: AppDrawerNavigator},
  Login: {screen: LoginScreen},
  Home: {screen: HomeScreen},
})
const AppDrawerNavigator = createDrawerNavigator({
  Dashboard: {screen:AppStack}
});

const switchNavigator = createSwitchNavigator({
  First: {screen: FirstScreen},
  Dashboard: {screen: AppDrawerNavigator},
  Login: {screen: LoginScreen},
  Home: {screen: HomeScreen},
});

const AppNavigator = createAppContainer(switchNavigator);

export default AppNavigator;

Kishan Bharda · Accepted Answer · 2019-11-25 12:34:41Z

If you want to keep your AppStack as stackNavigator then you have to create custom drawer navigator and need to pass it on createDrawerNavigator.

So first create CustomDrawer.js as below :

import React, { Component } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { NavigationActions } from 'react-navigation';

class CustomDrawer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menus: [
        key: 'First', title: 'First', screen: 'FirstScreen',
        key: 'Login', title: 'Login', screen: 'LoginScreen',
        key: 'Home', title: 'Home', screen: 'HomeScreen'
      ]
    };
  }

  navigateToScreen = (route) => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
    this.props.navigation.closeDrawer();
  }

  render() {
    return (
      <ScrollView style={{flex: 1}}>
        {
          this.state.menus.map((menu) => (
            <TouchableOpacity key={menu.key} onPress={() => this.navigateToScreen(menu.screen)}>
              <Text>{menu.title}</Text>
            </TouchableOpacity>
          ))
        }
      </ScrollView>
    );
  }
}

export default CustomDrawer;

Then on in your AppNavigator.js pass CustomDrawer as contentComponent in createDrawerNavigator as below :

const DrawerNavigator = createDrawerNavigator({
  Dashboard: {
    screen: AppStack,
  }
}, {
  contentComponent: CustomDrawer, // Pass here
  // others props
  drawerBackgroundColor: 'rgba(255,255,255,.9)',
  overlayColor: 'rgba(0,0,0,0.5)',
  contentOptions: {
    activeTintColor: '#fff',
    activeBackgroundColor: '#6b52ae',
  },
});

If you want more style you can done in CustomDrawer.js.

getting error in CustomDrawer.js, on line 12 as the type cast expression to be wrpaped in paranthesis. Thanks but i need some simple example as i am new to react navigation 4.x. No issue only i need to understand simple how drawer we can create.

Ajith Madhu · Accepted Answer · 2019-11-26 08:49:59Z

0

you are returning the switch navigator, try this way , embed switch-navigator object with drawer-navigator object and return drawer-navigator object. refer below,

const AppDrawerNavigator = createDrawerNavigator({
  First: {screen: FirstScreen},
  Login: {screen: LoginScreen},
  Home: {screen: HomeScreen},
  switchNavigator: switchNavigator
});
const AppNavigator = createAppContainer(AppDrawerNavigator);
export default AppNavigator;

edited Nov 26, 2019 at 8:49

answered Nov 25, 2019 at 11:53

Ajith Madhu

3883 silver badges17 bronze badges

4 Comments

Ajith Madhu Over a year ago

export AppDrawerNavigator instead of switch navigator

Ajith Madhu Over a year ago

I have edited the code try like this and let me know

Khamroddin Over a year ago

working thanks. But mainly issue was i hadn't configured gesturehandler and other dependency hence it was not showing drawer after swipe. Now configured dependencies properly. Link:reactnavigation.org/docs/en/getting-started.html

Ajith Madhu Over a year ago

oh key. have a nice day. please do a up vote if it helped . thanks

Collectives™ on Stack Overflow

Drawer navigator in react-native using react-navigation 4.x

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related