Close drawer button not working in drawer menu.

[jaysassyinfotech]

File name Menu.js

import React, { Component } from 'react';
import {
  PropTypes,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  Button
} from 'react-native'
import { connect } from 'react-redux';
import Drawer from 'react-native-drawer'

import Main from './Main'

export default class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      drawerOpen: true,
      drawerDisabled: false,
    };
    this.closeDrawer = this.closeDrawer.bind(this);
    this.openDrawer = this.openDrawer.bind(this);
  }
  closeDrawer = () => {
    console.log("closeDrawer >>");
    this._drawer.close()
  };
  openDrawer = () => {
    console.log("openDrawer >>");
    this._drawer.open()
  };
  render() {
    return (
      <Drawer
        ref={(ref) => this._drawer = ref}
        type="static"
        content={
          <ScrollView style={styles.container}>
            <TouchableOpacity style={styles.button} onPress={() => this.closeDrawer}>
              <Text>Close Drawer</Text>
            </TouchableOpacity>
          </ScrollView>
        }
        styles={{ main: { shadowColor: '#81a9cd', shadowOpacity: 0.3, shadowRadius: 15 } }}
        onOpen={() => {
          console.log('onopen')
          this.setState({ drawerOpen: true })
        }}
        onClose={() => {
          console.log('onclose')
          this.setState({ drawerOpen: false })
        }}
        openDrawerOffset={(viewport) => {
          return 100
        }}
        side='right'
      >
      </Drawer>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'black',
  },
  drawer: { 
    shadowColor: '#000000', 
    shadowOpacity: 0.8, 
    shadowRadius: 3 
  },
  main: { 
    paddingLeft: 3 
  },
  button: {
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: 'black',
    padding: 10,
  }
});

File Name Router.js

const RouterComponent = () => {
    return (
        <View style={{ flex: 1 }}>
            <Header />
                <RouterWithRedux>
                    <Scene key='root' hideNavBar gestureEnabled={false} panHandlers={null} duration={0}>
                        <Scene key='Main' hideNavBar duration={0}>
                            <Scene
                                key='Menu'
                                component={Menu}
                                title='Menu'
                            />
                        </Scene>
                    </Scene>
                </RouterWithRedux>
            <Bottom />
        </View>
    );
};

-I used on tab click menu for open drawer menu using react-native-router-flux. -Drawer open functionality working perfectly but close drawer button not working in drawer menu. -react-native-drawer - 2.3.0 -react-native-router-flux-4.0.0 - beta.24

[HosamZewain]

You can use instead of this button the following: tapToClose={true} when the user press outside of the menu anywhere it will close.

also, you may try to use: this._drawer.close() instead of this.closeDrawer()