navigate.dispatch(DrawerActions.closeDrawer()) not working in React Native - react-native

Question

On click of a cross button the drawer should be closed, that is the
thing I am trying. I have passed down the props inside component but
giving error that navigate.dispatch(DrawerActions.closeDrawer()) is
undefined.
I am providing My code
SideMenu.js which the layout of drawer menu. From here I am passing
props to drawerheader.
import React, {Component} from 'react';
import { View, StyleSheet} from 'react-native';
import DrawerHeader from './DrawerHeader';
import DrawerMenu from './DrawerMenu';
import { StackNavigator } from 'react-navigation';
class SideMenuLayout extends Component {
state = {
menuNames:[{
id:'0',
name:'My Profile',
link:''
},{
id:'1',
name:'Place Order',
link:''
},{
id:'2',
name:'Order History',
link:'OrderHistory'
},{
id:'3',
name:'Payment',
link:''
},{
id:'4',
name:'Recharge',
link:''
},{
id:'5',
name:'Help',
link:''
},{
id:'6',
name:'Logout',
link:''
}]
}
render () {
return (
<View style={styles.container} >
<DrawerHeader navigation={this.props.navigation}/>
<DrawerMenu
navigation={this.props.navigation}
menuItems={this.state}
style={{ marginTop: 106/3}}
/>
</View>
);
}
}
export default SideMenuLayout;
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor: "#ffffff",
}
});
Drawer Header code goes here. Here I am trying to close the navigation drawer.
import React, {Component} from 'react';
import {Text, View, StyleSheet,Image,TouchableOpacity} from 'react-native';
import { FontAwesome } from '#expo/vector-icons';
import { DrawerActions, StackNavigator } from 'react-navigation';
const DrawerHeader = (props)=> {
const { navigate } = props.navigation;
return (
<View style={{backgroundColor: '#d61822',width:DRAWER_CONTAINER_WIDTH/3,height:DRAWER_CONTAINER_HEIGHT/3 }}>
<View style={styles.titleContainer}>
<View style={{ marginLeft:20, backgroundColor:'#d61822',height:40 }}>
<Text style={{fontSize:28,fontStyle:'italic',color:'#ffff',fontWeight:'bold'}}>
Prabhuji Online
</Text>
</View>
<View style={{ marginLeft:35,backgroundColor:'#d61822',width: 50, height: 40,paddingRight:10,alignItems:'center',justifyContent:'center' }}>
<TouchableOpacity onPress={()=>navigate.dispatch(DrawerActions.closeDrawer())}>
<Text style={{fontSize:20,color:'#ffff',}}>
<FontAwesome
style={{ alignSelf: 'flex-end'}}
name="times"
size={18}
color="#ffffff"
/>
</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.fakeContainer}>
</View>
<View style={{
position:'absolute',
top: 170/3,
marginLeft:20,
width:220/3,
height:220/3,
backgroundColor:'#fffcf9',
borderRadius:(220/3)/2,
justifyContent:'center',
alignContent:'center',
alignItems:'center',
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.25,
shadowRadius: 6.27,
elevation: 7,
}}>
<Image
tintColor='red'
style={{
width: 111/3,
height: 111/3,
}}
source={require('../../../assets/place_order.png')}/>
</View>
</View>
);
}
export default DrawerHeader;
const styles = StyleSheet.create({
titleContainer:{
backgroundColor: '#d61822',
flexDirection: 'row',
height:TITLE_CONTAINER_HEIGHT/3,
marginTop: 50/3,
},
fakeContainer:{
position:'relative',
height:FAKE_CONTAINER_HEIGHT/3,
backgroundColor: '#ffffff',
//backgroundColor: 'yellow',
}
});
Can any one please tell me what is going wrong here?
I have also tried navigate.closeDrawer(). But same error is giving.

Answer 1

Instead of using the navigate call, you need to dispatch the action like this: this.props.navigation.dispatch(*your action here*), as described in the docs: https://reactnavigation.org/docs/en/navigation-prop.html#dispatch-send-an-action-to-the-router