Navigation not working in custom drawer component in Drawer Navigation V3(react native)

Question

I have created a navigation drawer for my app using react-navigation v3 but when I tried to customize my drawer I faced issue related to navigation. I have created a custom drawer component in order to create a fully customized drawer. But as soon as I tried to provide navigation functionality like "this.props.navigation" or my "navigateToScreen()" method, it doesn't move to another screen and also no errors were generated which gave me difficulty to debug the code. Here is my code for more details. I have done a lot of search for this problem but didn't got the proper answer.

This is the my Drawer.js file

import React, { Component } from "react";

import { createDrawerNavigator, createAppContainer} from "react-navigation";


import Home from '../screens/Home';
import DrawerComponent from '../components/DrawerComponent';


class DrawerMenu extends Component{
  render(){
    return(
      <MyApp/>
    )
  }
}

const MyDrawerNavigator = createDrawerNavigator(
  {
  Home: { screen: Home }
  },
{  
  contentComponent:  DrawerComponent
});

const MyApp = createAppContainer(MyDrawerNavigator);


export default DrawerMenu;

This is my DrawerComponent.js file

import React, { Component } from "react";
import {
  Text,
  TouchableOpacity,
  View,
  Image,
  ScrollView,
} from "react-native";

import {Icon} from 'native-base';

import {NavigationActions} from "react-navigation";
import { Collapse, CollapseHeader, CollapseBody } from "accordion-collapse-react-native";


class DrawerComponent extends Component{

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

  render(){

    return(
        <View style= {{flex: 1}}>
            <View style= {{ height: 180 , backgroundColor: "purple"}}>
            </View>
            <ScrollView>
                <Collapse>
                <CollapseHeader style={styles.menuItem}>
                    <Text style={styles.menuItemText}><Icon  name = "md-qr-scanner"/>        Scan</Text>
                </CollapseHeader>
                <CollapseBody>
                  <ListItem>
                    <TouchableOpacity onPress= {() => this.props.navigation.navigate('Item1')}> 
                    <Text style={styles.menuItemText}>Item 1</Text>
                    </TouchableOpacity>
                  </ListItem>
                  <ListItem>
                  <TouchableOpacity this.navigateToScreen('Item2')> 
                    <Text style={styles.menuItemText}>Item 2</Text>
                    </TouchableOpacity>
                  </ListItem>
                  <ListItem last>
                  <TouchableOpacity> 
                    <Text style={styles.menuItemText}>Item 3</Text>
                    </TouchableOpacity>
                  </ListItem>
                </CollapseBody>
              </Collapse>
              </ScrollView>
            </View>

    )
  }
}


export default DrawerComponent;

Any suggestions or answer regarding this issue will be helpful for me. Thank You.

Answer 1

you dont have route Item1 named. check my snack. its working fine.

https://snack.expo.io/@nazrdogan/disrespectful-donuts