this.props.navigation undefined is not an object - react-native

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.