this.props.navigation undefined is not an object

Question

I am new in react native. I am using React navigation. But navigation is not working, giving an error:-

"props.navigation undefined is
 not an object"

I am giving my project structure and code.

Project Structure:-

Code in App.js:-

    import { createStackNavigator, createDrawerNavigator  } from 'react-navigation';
import HomeLayout from './src/components/Home/Layout';
import SideMenuLayout from './src/components/DrawerMenu/SideMenu';
import { DetailsScreen } from './DetailsScreen';


const myDrawer  = createDrawerNavigator({
  Home:{
    screen: HomeLayout
  },
  Details:{
    screen: DetailsScreen
  },
},{
  contentComponent: SideMenuLayout,
  drawerWidth: 876/3

})


const native = createStackNavigator({
  Home:{
    screen: myDrawer,
   },
},{
  headerMode: 'none',
})
export default native;

SideMenu.js(Layout for drawer navigator). In this section All menus has been rendered.-

import React, {Component} from 'react';
import { View, StyleSheet} from 'react-native';
import DrawerHeader from './DrawerHeader';
import DrawerMenu from './DrawerMenu';
class SideMenuLayout extends Component {
    state = {
        menuNames:[{
            id:'0',
            name:'My Profile'
        },{
            id:'1',
            name:'Place Order'
        },{
            id:'2',
            name:'Order History'
        },{
            id:'3',
            name:'Payment'
        },{
            id:'4',
            name:'Recharge'
        },{
            id:'5',
            name:'Help'
        },{
            id:'6',
            name:'Logout'
        }]
    }
    render () {
        return (
            <View style={styles.container} >
               <DrawerHeader/>
               <DrawerMenu menuItems={this.state} style={{ marginTop: 106/3}}/>
            </View>
        );
    }
}

export default SideMenuLayout;

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: "#ffffff",
    }
});

Drawer Menu.js. In this section all menus are rendered and want to navigate from here.

import React, {Component} from 'react';
import {FlatList, Text, View, StyleSheet,TouchableOpacity} from 'react-native';
import Dash from 'react-native-dash';
import { FontAwesome } from '@expo/vector-icons';
import { StackNavigator  } from 'react-navigation';
const DrawerMenu = (props)=>{
    const { navigate } = props.navigation;
        return (
            <View style={styles.menuContainer}>
                <FlatList
                    data={props.menuItems.menuNames}
                    renderItem={(info) => (
                        <View>
                            <View 
                                style={{
                                    width:690/3,
                                    backgroundColor: '#ffffff',
                                    height:141/3,
                                    paddingTop:48/3,
                                    flexDirection:'row',
                                    marginBottom:7
                                }}>
                                <View style={{position:"relative",width:390/3,height:'100%',backgroundColor:'#ffffff',alignSelf: 'flex-start'}}>
                                    <TouchableOpacity onPress={()=>navigate('Details')}>
                                        <Text style={{color:'#615b5b',fontSize:18,fontFamily:'sans-serif'}}>
                                            {info.item.name}
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                                <View 
                                    style={{
                                        alignItems:"center",
                                        justifyContent:'center',
                                        position:"relative",
                                        width:300/3,
                                        backgroundColor:'#ffffff',
                                        paddingRight:10,
                                        paddingBottom:5,
                                        }}>
                                    <FontAwesome 
                                        style={{ alignSelf: 'flex-end'}} 
                                        name="angle-right" 
                                        size={18} 
                                        color="#615b5b" 
                                    />
                                </View>

                            </View>

                            <Dash dashColor = '#d6d6d6' style={{width:'100%', height:1,alignSelf: 'flex-start'}}/>
                        </View>
                    )}
                    keyExtractor={(info, index) => info.id}
                />
            </View>
        );

}

export default DrawerMenu;


const styles = StyleSheet.create({
    menuContainer:{
        width: 700/3,
        height:1425/3,
        alignSelf: 'flex-end',
        backgroundColor: '#ffffff',
        paddingTop: 61/3,
    }
});

Answer 1

The SideMenuLayout has a navigation prop passed to it automatically by the Drawer. So you need to pass that further to your DrawerMenu

<DrawerMenu navigation={this.props.navigation} menuItems={this.state} style={{ marginTop: 106/3}}/>

...

export default SideMenuLayout;

SideMenuLayout.propTypes = {
    navigation: PropTypes.object // Or use flow, or it does not really matter. It's just type validation.
}

And the you can use navigate in your DrawerMenu like you use it now.