How to show drawer items using createDrawerNavigator in react-navigation 3?

Question

In my React-native project I am using one Drawer navigation. for this, I have created one class named HomeDrawer. Here's the code for that-

HomeDrawer.js

import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {
  createAppContainer,
  createStackNavigator,
  createDrawerNavigator,
  createSwitchNavigator
} from "react-navigation";


import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import LoginScreen from '../components/LoginScreen';

import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
import WelcomeScreen from "../WelcomeScreen";

let user_email ='', user_first_name='';

class HomeDrawer extends Component {

  state = {

    loading: true
  }

  static navigationOptions = {
    headerLeft: null
}

  componentDidMount() {
    AsyncStorage.getItem("user_email").then(value => {
      console.log(value);
      // you will need to handle case when `@ProductTour:key` is not exists
     user_email = value;
    });

    AsyncStorage.getItem("user_first_name").then(value => {
      console.log(value);
      // you will need to handle case when `@ProductTour:key` is not exists
     user_first_name = value;
    });

  }

  async componentWillMount() {
    await Font.loadAsync ({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
    });
    this.setState({loading:false});
  }

  render() {
    if(this.state.loading) {
      return(
        <Root>
          <AppLoading/>
        </Root>
      )
    }
    return(
      <MyApp/>
    )

  }
}

const CustomDrawerContentComponent = (props) => (

 <View style={{backgroundColor:"#ffff", height:'100%'}}>

      <ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150,  resizeMode:'cover', backgroundColor:"@aaaa"}}>  
      <Body style={styles.drawerBody}>
        <Image
          style={styles.drawerImage}
          source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
        />
        <View style={styles.drawerHeaderText}>
          <Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
          <Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
        </View>

      </Body>


      </ImageBackground>

      <Content style={{marginTop:30 }}>
      <DrawerItems {...props}/>
    </Content>


  </View>



);

const MyApp = createAppContainer(createDrawerNavigator({
  NoteMeHome:{
    screen: NoteMeHome
  },

  Settings:{
    screen: SettingsScreen
  },



},

{
  initialRouteName: 'NoteMeHome',
  drawerPosition: 'left',
  contentComponent: CustomDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
}


));


export default HomeDrawer;

It was working perfectly with react-navigation version 1.0.0-beta.11. But after updating to version 3 it is showing the following error-

Can't find variable DrawerItem

If I remove the tag like below then , the code working but not showing any items as the items I include in DrawerItem.

  <Content style={{marginTop:30 }}>
  <DrawerItems {...props}/>
   </Content>

neither the drawer toggle button is working now. But if I drag the screen from left to right it is showing like the below image-

Now, I want to show the drawer items back and remove the marked toolbar in the 2nd image. So, it would be very nice if someone helps me to solve the problem with the given code

Yossi Yossi · Accepted Answer · 2019-04-05T14:19:41

I will make my life easier (but not the easiest... :) by posting part of a working sample code that works with react-navigation 2.18.2.

Not sure if it will help you, but it will not do any harm...
You cannot use the code as is, of course, but maybe it will help you.
You can just ignore it, or even ask me to delete it, whatever you do is fine.

AppNavigator.js (rendered from App.js)

import React from 'react';
import { createDrawerNavigator } from 'react-navigation';

import WelcomeAuthNavigator from './WelcomeAuthNavigator';
import MainTabNavigator from './MainTabNavigator';
import MainDrawerNavigator from './MainDrawerNavigator';
import Drawer from '../screens/drawers/Drawer';

export default createDrawerNavigator({
    WelcomeAuth: WelcomeAuthNavigator,
    Drawer: MainDrawerNavigator,
    Main: MainTabNavigator
}, {
  initialRouteName: 'WelcomeAuth',
  contentComponent: props => <Drawer {...props} />,
  drawerWidth: 180
});

WelcomeAuthNavigator.js

import React from 'react';
import { createStackNavigator } from 'react-navigation';

import Welcome from '../screens/welcome/Welcome';
import LoginScreen from '../screens/auth/LoginScreen';
import SignupScreen from '../screens/auth/SignupScreen';

const AuthStack = createStackNavigator({
  Login: { screen: LoginScreen },
  Signup: { screen: SignupScreen }
},  {
    headerMode: 'none',
    initialRouteName: 'Login'
});

const WelcomeAuthNavigator = createStackNavigator({
  Welcome: Welcome,
  Auth: AuthStack
}, {
   headerMode: 'none',
   initialRouteName: 'Welcome',
   contentComponent: props => <Drawer {...props} />
 });

 export default WelcomeAuthNavigator;

MainTabNavigator.js

ContactsStack and PhotosStack are defined using createStackNavigator

const MainTabNavigator = createBottomTabNavigator({
  PhotosStack,
  ContactsStack
}, {
    headerMode: 'none',
    headerStyle: { backgroundColor: '#4C3E54' },
    headerLeft: <Text onPress={() =>
      this.props.navigation.navigate('DrawerOpen')}>Menu</Text>,
    title: 'Welcome!',
    headerTintColor: 'white',
    initialRouteName: 'PhotosStack'
});

export default MainTabNavigator;

MainDrawerNavigator.js

import { createStackNavigator } from 'react-navigation';

import Help from '../screens/drawers/Help';
import About from '../screens/drawers/About';

const MainDrawerNavigator = createStackNavigator({
  Help: { screen: Help },
  About: { screen: About }
}, {
  initialRouteName: 'About'
});

export default MainDrawerNavigator;

Drawer.js

import React from "react";
import { SafeAreaView, View } from "react-native";
import { connect } from 'react-redux';
import { Container, Content, Text, List, ListItem, Left, Right,
  Button, Icon, Body, Thumbnail } from "native-base";

const listItems = [
  { title: "Help", route: "Help", icon: "md-help" },
  { title: "About", route: "About", icon: "ios-information-circle-outline" }
];

class Drawer extends React.Component {

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Container>
          <Content contentContainerStyle={{
            justifyContent: 'flex-start', marginTop: 30
            }}>
            {this.renderUserPetDetails.bind(this)()}

            <List
              dataArray={listItems}
              renderRow={data => {
                return (
                  <ListItem onPress={() => this.props.navigation.navigate(data.route)} icon>
                    <Left>
                      <Button onPress={() => this.props.navigation.navigate(data.route)}
                        style={{ backgroundColor: "#888" }}>
                        <Icon active name={data.icon} />
                      </Button>
                    </Left>
                    <Body>
                      <Text
                        style={{ fontSize: 14, fontWeight: '600' }}>
                        {data.title}</Text>
                    </Body>
                  </ListItem>
                );
              }}
            />
          </Content>
        </Container>
      </SafeAreaView>
    );
  }
}