Drawer doesn't open after fast double click. Primarily because the drawer and its state are out of sync

[jainniket]

###Project
https://github.com/jainniket/drawer-issue

Current Behavior

There is a Hamburger Menu on whose click DrawerOpen action is triggered.
But when, that menu is tapped twice very fast, the drawer opens and closes back, but the state is still set as Open.

So the error is, once the menu is clicked, it opens the drawer, but in the transition phase, when the drawer is opening, another tap happens which eventually happens to be on the View being presented by Drawer. This tap forces the menu to close back but the action DrawerClose doesn't get registered.

Whereas the redux state says the current route as DrawerOpen even though the drawer is clossed. So any further taps on the menu icon becomes un-responsive.

Reason - The drawer presented and drawer state are out of sync.

Expected Behavior

The double tap should be disabled.
The presenting view of drawer shouldn't take any touch event.

Your Environment

software	version
react-navigation	^1.0.0-beta.11
react-native	0.45.1
node	v7.6.0
npm or yarn	v4.1.2

[hwnprsd]

Agreed!
The button becomes unresponsive upon double tapping and won't work till the drawer is pulled from the edge of the screen. This makes up to a very bad user experience!

[jainniket]

@D3FKON exactly.. and this is specifically there on Android. unable to think of any hack to resolve this temporarily.

[hwnprsd]

I think that if we handle the double tap with what's in here, https://gist.github.com/mrzmyr/9ac94ca4622c1602a2a3 we can work it out

…

On 4 Jul 2017 3:13 p.m., "Niket Jain" ***@***.***> wrote: @D3FKON <https://github.com/d3fkon> exactly.. and this is specifically there on Android. unable to think of any hack to resolve this temporarily. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1960 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AV8P1ht1s2S7-5FMuLTePEY7d5xnvIuqks5sKglMgaJpZM4OB-GT> .

[jainniket]

@D3FKON so this was my first step towards fixing this issue.
unfortunately, the double tap action isn't captured by the button but rather the presenting view of the drawer on which i have no control!!

[hwnprsd]

I'll check it out and report back what happens

…

On 5 Jul 2017 4:44 p.m., "Niket Jain" ***@***.***> wrote: @D3FKON <https://github.com/d3fkon> so this was my first step towards fixing this issue. unfortunately, the double tap action isn't captured by the button but rather the presenting view of the drawer on which i have no control!! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1960 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AV8P1rYQapRoNm5TZHOwk-Z5pqqVD4Nsks5sK3AhgaJpZM4OB-GT> .

[hwnprsd]

Okay. I think I found a solution. Borrowing the idea from here, I could write my Navbar to handle double taps for drawer events.

    state = {
        lastLeftPress: 0,
    };

    DOUBLE_TAP_DURATION = 500;

    _handleLeftClick = (action, resetAction) => {
        const currentTime = parseInt(new Date().getTime());
        let duration = currentTime - parseInt(this.state.lastLeftPress);
        console.log(duration);
        this.setState({lastLeftPress: currentTime});
        if (parseInt(duration) <= this.DOUBLE_TAP_DURATION) {
            //Handle Double Tap
            console.log("Double");
            return resetAction? resetAction(): false;
        } else {
            //Handle Single Tap
            console.log("Single");
            return action();
        }
    };

As my NavBar is a separate component, I'm passing

1. navigation.navigate('DrawerOpen') as the action param
2. navigation.navigate('DrawerClose') as the resetAction param
   to the event handling function.

According to the very simple logic here, If the user double taps, the drawer will open as a result of the first tap, and because a double tap is recognized, the drawer will close, thus syncing the state of navigation.

I feel like 500 ms is quite good with the limited testing I could do. Feel free to report back lesser values which seem to work more effectively too.
I'm not sure how reliable this solution is, but it sure as hell is better than not having a solution

[jainniket]

@D3FKON thank you for the help.
unfortunately that doesn't work. It is because the double tap action isn't captured by the button but the presenting view of the drawer by DrawerNavigation.

I've updated the sample project for this issue with the above mentioned suggestion.

https://github.com/jainniket/drawer-issue

[hwnprsd]

I'm not quite sure about what you implemented there. I did not see my solution in your code,
However, I have made a pull request to your repo with the fix. Do check it out.

I strongly suggest you close the issue and also rename it to something more concise so that people who actually face this issue can come across with the solution more easily.

PR: jainniket/drawer-issue#1
PR File Change: https://github.com/jainniket/drawer-issue/pull/1/files

[jainniket]

@D3FKON My bad.. My code didn't get pushed..

Here's a PR
jainniket/drawer-issue#2

Moreover i just checked your PR. The issue isn't resolved in that.
When you double tap on the button very fast as shown in the gif, the drawer doesn't open after that.

[spencercarli]

We just merged a PR that adds a DrawerToggle option so you don't have to track the state of the drawer yourself. Will that fix this issue?

[kelset]

Pinging OP @jainniket since this issue has not been active for a while, and it's related to an old version of the lib.

Please let me know if you want this to remain open; if I get no answer in the next 7 days I will close it.