Add possibility to close drawer on tap about react-native-drawer HOT 18 CLOSED

Off the top of my head, you can probbly accomplish this setting acceptTap = true when the drawer is open, and then setting false when it is closed.

To do this however you would need to keep track of wether the drawer is open or not. This is possible using the onOpen/onClose props. e.g. using local component state:

  <Drawer
    onOpen={() => this.setState({drawerState: 'open'})
    onClose={() => this.setState({drawerState: 'closed'})
    acceptTap={this.state.drawerState === 'open' ? true : false}
    //...
    />

Using flux/redux you can do something similar but instead of setState fire an action.

Let me know if that works. Since this is a common use case (material design) I would definitely consider changing the API or adding another prop to better support this. Let me know if you have suggestions on what the props should look like.

from react-native-drawer.

Thank for your quick answer.

Your solution is much cleaner but it doesn't prevent Touchable elements within the pan mask to be touched.

from react-native-drawer.

I could use your solution to prevent every Touchable to be touched too but I don't think it is very "clean"

from react-native-drawer.

good point, I think then captureGestures = true will fix that problem.

from react-native-drawer.

Ok, thanks.

Actually, I think the behaviour is not right with captureGestures. I might be wrong ^^ but this is my workflow :

• captureGestures={false} : when I click on a Touchable within the pan mask, the Touchable event is called
• captureGestures={true} : when I click on a Touchable within the pan mask, the Touchable event is called AND the drawer is closed

from react-native-drawer.

ah, sounds like a bug. I am on my phone, I will have to look into it further tomorrow

from react-native-drawer.

I just did a test and it works for me (v1.3.0)

captureGestures={true} results in anything under the mask from not being touched. Can you double check your settings?

To be clear, in the screenshot above, the left hand side is the drawer and the small section on the right is the main view correct? Also what component is managing the 'touchable' event, is it TouchableHighlight?

from react-native-drawer.

To be clear, in the screenshot above, the left hand side is the drawer and the small section on the right is the main view correct? YES
Also what component is managing the 'touchable' event, is it TouchableHighlight? YES

EDIT : But you should know that I used acceptPan={false} to make the drawer open only on click.

from react-native-drawer.

Ah, yes accepPan was not playing well with captureGestures. I just fixed it in this commit: f4caf4e

I have not tested it enough to feel comfortable making a new npm release, but you should be able to pull the latest from github. Let me know how it goes.

from react-native-drawer.

Hum, in my case it's like there is an invisible pan preventing me from touching anything on the left side.

<Drawer ref="drawer"
              acceptPan={false}
              onOpen={() => this.setState({drawerState: 'open'})}
              onClose={() => this.setState({drawerState: 'closed'})}
              acceptTap={this.state.drawerState === 'open' ? true : false}
              captureGestures={true}
              content={<DrawerContent></DrawerContent>}
              type="static"
              openDrawerOffset={DRAWER_OFFSET}
              tweenDuration={150}>
</Drawer>

from react-native-drawer.

right, this is the expected behaivor. You are probably going to want to set panOpenMask={0}. Alternatively (depending on your exact desired behaivor) you can set captureGestures={this.state.drawerState === 'open' ? true : false}

<Drawer ref="drawer"
              panOpenMask={0}
              acceptPan={false}
              onOpen={() => this.setState({drawerState: 'open'})}
              onClose={() => this.setState({drawerState: 'closed'})}
              acceptTap={this.state.drawerState === 'open' ? true : false}
              captureGestures={true}
              content={<DrawerContent></DrawerContent>}
              type="static"
              openDrawerOffset={DRAWER_OFFSET}
              tweenDuration={150}>
</Drawer>

from react-native-drawer.

Works perfectly ! Thanks a lot ! 😃

from react-native-drawer.

Hi,
I just updated to 1.4.2 and the bug is still present (should be fixed in commit f4caf4e)

Thanks !

from react-native-drawer.

Can you elaborate on what exactly is not working as expected? We discussed a few things in this thread :)

from react-native-drawer.

Sure !

You response was :

Ah, yes accepPan was not playing well with captureGestures. I just fixed it in this commit: f4caf4e

I have not tested it enough to feel comfortable making a new npm release, but you should be able to pull the latest from github. Let me know how it goes.

The problem it that combining acceptPan and captureGestures, i can click on TouchableHighlight on the right side.

from react-native-drawer.

thank you for your awesome screenshots 👍

You are right, I inexplicably rolled that back in a later commit. I will fix and cut a new release shortly.

from react-native-drawer.

fixed 175249f

from react-native-drawer.

Perfect ! Thanks ;)

from react-native-drawer.