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

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 '../ponents/NoteMeHome';
import SettingsScreen from '../ponents/SettingsScreen';
import LoginScreen from '../ponents/LoginScreen';

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

let user_email ='', user_first_name='';

class HomeDrawer extends Component {

  state = {

    loading: true
  }

  static navigationOptions = {
    headerLeft: null
}

  ponentDidMount() {
    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 ponentWillMount() {
    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: '.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

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 '../ponents/NoteMeHome';
import SettingsScreen from '../ponents/SettingsScreen';
import LoginScreen from '../ponents/LoginScreen';

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

let user_email ='', user_first_name='';

class HomeDrawer extends Component {

  state = {

    loading: true
  }

  static navigationOptions = {
    headerLeft: null
}

  ponentDidMount() {
    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 ponentWillMount() {
    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./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

Share Improve this question asked Apr 5, 2019 at 13:57 S. M. Asif 3,70910 gold badges39 silver badges65 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

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 WeleAuthNavigator from './WeleAuthNavigator';
import MainTabNavigator from './MainTabNavigator';
import MainDrawerNavigator from './MainDrawerNavigator';
import Drawer from '../screens/drawers/Drawer';

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

WeleAuthNavigator.js

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

import Wele from '../screens/wele/Wele';
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 WeleAuthNavigator = createStackNavigator({
  Wele: Wele,
  Auth: AuthStack
}, {
   headerMode: 'none',
   initialRouteName: 'Wele',
   contentComponent: props => <Drawer {...props} />
 });

 export default WeleAuthNavigator;

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: 'Wele!',
    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>
    );
  }
}

You should try importing DrawerItems as shown below if you do not have react-navigation-drawer installed please added.

import { DrawerItems } from 'react-navigation-drawer';

You are trying to call DrawerItems without actually importing it hence the error. Make sure you add this line:

import { DrawerItems } from 'react-navigation';

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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