root-two / react-native-drawer

React Native Drawer
MIT License
2.54k stars 390 forks source link

Drawer slide open is not working #267

Open neosekar opened 7 years ago

neosekar commented 7 years ago

In this material style drawer right side slide to open drawer is not working. If i use the panOpenMask value then it opens but if i tap any item in the drawer it is not closing. Please anyone help me in this.

MattyK14 commented 7 years ago

Post the code for your drawer items. You'll need to call drawer.close() in their onPress

carlitosspot commented 7 years ago

I'm having the same issue as well. Here's my code

import React, { Component } from 'react';
import { Text, View, Navigator } from 'react-native';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Drawer } from 'native-base';
import NavigationBar from 'react-native-navbar';

const myIcon = (<Icon name="search" size={26} color='blue'/>);

export default class AnatomyExample extends Component {

  constructor(){
    super();
    this.state = {
      toggled: false
    }
  }

  toggleDrawer() {
    this.state.toggled ? this._drawer.close() : this._drawer.open();
  }

  closeDrawer(){
    this.setState({toggled:false});
  };

  openDrawer(){
    this.setState({toggled:true});
  };

  renderScene(route, navigator){
    switch (route) {
      default: {
        return null;
      }
    }
  }

  configureScene(route, routeStack){
    return Navigator.SceneConfigs.PushFromRight
  }

  render() {

    return (
      <Drawer
        type="displace"
        ref={(ref) => { this._drawer = ref; }}
        content={<View style={{backgroundColor: "blue", height: 1000}}/>}
        onClose={this.closeDrawer.bind(this)}
        onOpen={this.openDrawer.bind(this)}
        openDrawerOffset={0.2}
      >
        <Navigator
          ref={(ref) => this._navigator = ref }
          configureScene={this.configureScene.bind(this)}
          renderScene={this.renderScene.bind(this)}
        />
      </Drawer>
    );
  }

}
carlitosspot commented 7 years ago

I solved my problem by adding two additional props:

 panOpenMask={0.80}
 captureGestures="open"

so it looks like:

      <Drawer
        type="displace"
        ref={(ref) => { this._drawer = ref; }}
        content={<View style={{backgroundColor: "blue", height: 1000}}/>}
        onClose={this.closeDrawer.bind(this)}
        onOpen={this.openDrawer.bind(this)}
        panOpenMask={0.80}
        captureGestures="open"
      >