Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to pan on the drawer view when it is 'open'. #270

Conversation

tuyennguyen266
Copy link
Contributor

@tuyennguyen266 tuyennguyen266 commented Mar 1, 2017

Purpose
I want to swipe on the side menu (in this case DrawerContent) to close the drawer.

So I play around with the original source code and configure as below:

<Drawer
  type="static"
  content={<DrawerContent />}
  openDrawerOffset={100}
  styles={drawerStyles}
  tweenHandler={Drawer.tweenPresets.parallax}
  tapToClose={true}
  openDrawerOffset={0.2}
  panCloseMask={0.99} // There is a bug here when set 1.0. Set this to expand the mask so that be able to pan on DrawerContent
  panOpenMask={0.2}
  >
    <Main />
</Drawer>

Now I can pan on the DrawerContent to close the Drawer.
The problem is, if there is any clickable views in DrawerContent, it will be ignored when clicking on it.
So I added this props to prioritize the subviews gesture responder.

captureGestures={false}

Now I can click on the subviews in DrawerContent.
But the problem now is, because Drawer does not capture gestures, clicking on subviews in Main is captured. I don't want those.
What I want is when clicking on Main, Drawer will be closed instead of propagating the gesture to the subviews.
This problem does not happen when using captureGestures={'open'}

So
I think if there is some code for Drawer to capture gestures when clicking/panning on Main to close the Drawer. And not capturing gestures when clicking on DrawerContent so that subviews (ex. side menu items) be able to click.

Actually the original code base already did that with the configuration below

<Drawer
  type="static"
  content={<DrawerContent />}
  openDrawerOffset={100}
  styles={drawerStyles}
  tweenHandler={Drawer.tweenPresets.parallax}
  tapToClose={true}
  openDrawerOffset={0.2}
  panCloseMask={0.2} // There is a bug here when set 1.0. Set this to expand the mask so that be able to pan on DrawerContent
  panOpenMask={0.2}
  negotiatePan={true}
  >
    <Main />
</Drawer>

However
The original code limits gestures when panning outside the mask. That's why I can not pan on the DrawerContent.

Finally
I edit some lines of code to allow panning in the DrawerContent when setting acceptPanOnDrawer={true} (default=true).

@megazoll
Copy link

@rt2zz any chance to merge this pr?

@rt2zz rt2zz merged commit b7c5e99 into root-two:master Aug 25, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants