Drawer menu not closing - react-native

Question

I created a drawer menu using the DrawerNavigation feature of react-navigation. I wanted to create a button that would close the menu but the onPress function seems to not work
I've imported DrawerActions from 'react-navigation-drawer' and I've tried using different syntaxes
ex.) this.props.navigation.dispatch(DrawerActions.closeDrawer());
this.props.navigation.closeDrawer();
import React, { Component } from 'react';
import {
Image,
StyleSheet,
Text,
ImageBackground,
TouchableWithoutFeedback,
View,
Button,
ScrollView,
} from 'react-native';
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
DrawerItems,
SafeAreaView,
NavigationActions
} from 'react-navigation';
import { DrawerActions, } from 'react-navigation-drawer';
const navigator = createDrawerNavigator(
{
Home: Lander,
Page1: Lander,
Page2: Lander,
Page3: Lander,
Page4: Lander,
},
{
contentComponent: (props) => (
<SafeAreaView>
<View style= {{backgroundColor:'black'}}>
<TouchableWithoutFeedback onPress={() => this.props.navigation.dispatch(DrawerActions.closeDrawer())}>
<Image source={require('./Images/x.png')} style = {styles.cross}/>
</TouchableWithoutFeedback>
</View>
<ScrollView style= {{backgroundColor: 'black', paddingLeft: '5%'}}>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
},
);
I ultimately want to be able to click on the x button and let it redirect me to the home screen.
I'm getting the following error
Undefined is not an object (evaluating '_this.props.navigation')

Answer 1

You are importing DrawerActions from the wrong package.
Change
import { DrawerActions, } from 'react-navigation-drawer';
To
import { DrawerActions } from 'react-navigation'
And to close it, you do it like
onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())}
Edit:
What you are doing wrong is that you get this.props but it's only props.
contentComponent: (props) => (
<SafeAreaView>
<View style= {{backgroundColor:'black'}}>
{// changed to props without this}
<TouchableWithoutFeedback onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}>
<Image source={require('./Images/x.png')} style = {styles.cross}/>
</TouchableWithoutFeedback>
</View>
<ScrollView style= {{backgroundColor: 'black', paddingLeft: '5%'}}>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)

Answer 2

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
hope is helps