CODEWITHSUNDEEP
react-nativereact-native-navigation
Khamroddin
Khamroddin

Reputation: 31

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

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;

Upvotes: 0

Views: 2093

Answers (2)

Ajith Madhu
Ajith Madhu

Reputation: 388

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;

Upvotes: 0

Kishan Bharda
Kishan Bharda

Reputation: 5690

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.

Upvotes: 2

Related Questions