How to close drawer on click in React Native Navigation wix V1 - react-native

Question

I am using react native 0.56.0 and React Native Navigation from Wix [V1]. In React native navigation there is an option to enable drawer. Now drawer can be closed if the user chooses some option in drawer menu or click outside the drawer, but I want to close drawer on the X button click. Has anybody found a way to do this?

Answer 1

try this one. its awasome
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));

Answer 2

In a custom drawer, there is already a function called closeDrawer inside props.navigation.
Your close button will look like this:
<TouchableOpacity
onPress={props.navigation.closeDrawer}
style={styles.closeButton}
>
<Image source={Images.close} />
</TouchableOpacity>
Here is more code to put things in context:
In App.js
import { createDrawerNavigator } from "#react-navigation/drawer";
import DrawerScreen from "./src/screens/DrawerScreen";
const Drawer = createDrawerNavigator();
function LeftDrawerStack() {
return (
<Drawer.Navigator
drawerContent={(props) => <DrawerScreen {...props}
/>}
>
<Drawer.Screen name={"Menu item 1"} component={ProfileScreen} />
<Stack.Screen name={"Menu item 2")} component={PaymentScreen} />
</Drawer.Navigator>
);
}
In DrawerScreen.js
import React from "react";
import {TouchableOpacity, View, Image, Text} from 'react-native';
import {
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '#react-navigation/drawer';
import styles from './styles/DrawerScreenStyle';
function DrawerScreen(props) {
return (
<DrawerContentScrollView style={styles.container} {...props}>
<View style={styles.drawerHeader}>
<TouchableOpacity
onPress={props.navigation.closeDrawer}
style={styles.closeButton}
>
<Image source={Images.close} />
</TouchableOpacity>
</View>
<DrawerItemList {...props} />
</DrawerContentScrollView>
);
}
export default DrawerScreen;

Answer 3

This works for me:
this.props.navigator.toggleDrawer({
side: 'right',
animated: true,
to: 'closed',
});