Nativescript-ui-feedback: RadSideDrawer gestures make edge content hard to press on Android

[interrobrian]

Which platform(s) does your issue occur on?

Android

Tell us about the problem

When using a RadSideDrawer with a NavigationButton (a common combination), the RadSideDrawer gesture interferes with the button. On Native SDK apps with the same layout, you can tap the exact first pixel of the screen to the left of the navigation button, and it will open the drawer. However, in NativeScript apps which use the same pattern, such as Examples NativeScript or the Drawer Navigation template, taps on the left side of the navigation button, even quite a ways in, get misinterpreted as the start of the drawer drag gesture. This causes a small part of the drawer to appear and disappear quickly. Instead, it should behave like typical Android apps and tap the navigation button, thus opening the drawer.

This bug also effects any other elements on the edge of the screen - Native SDK apps separate an edge tap vs swipe, but NativeScript apps with the RadSideDrawer flicker a small part of the drawer when the edge is tapped.

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: 4.1.1
• CLI: 4.1.0
• Cross-platform modules: 4.1.0
• Runtime: 4.1.

Please tell us how to recreate the issue in as much detail as possible.

1. Open Examples NativeScript (or any NativeScript app using the RadSideDrawer + NavigationButton combination)
2. Tap just to the left of the menu icon in the top left

[tsonevn]

Hi @interrobrian,
In NativeScirpt templates and sample application are using the required Android UX guidelines. Regarding that, we have set up the needed margins between components. Also, this required space seems to be responsible for this SideDrawer's behaviour. Also, keep in mind that in NativeScript you can disable the SideDrawer gestures, which will allow the user to open the drawer, only by clicking on the NavigationButton.
If you still think that this is a bug, please provide more detailed info, which describes why this is a problem.

[interrobrian]

Here are some gifs which demonstrate the problem, with the Android taps and pointer info visible.

This is the Android Settings app. Other native SDK apps, such as Downloads or Calendar, follow this same behavior:

Note that taps to the left of the drawer icon open the drawer. Similarly, other taps along the left edge of the screen are interpreted as taps. Also, dragging to the right from the pictured tap point opens the drawer according to the drag gesture.

This is the NativeScript "Drawer Navigation" template running with no modification. You can find the same behavior in the "Examples NativeScript" app:

Note that taps to the left of the drawer icon make the drawer appear for a split second. This problem also extends to any other taps along the left edge, and not just the navigation button. This can be frustrating to users because they tap the screen and feel like nothing happens.

We have considered disabling the drawer gestures, but would prefer not to so that our app can behave as closely as possible to the Material Modal Drawer.

[DimitarTodorov]

The issue is fixed with the latest release of nativescript-ui-sidedrawer.
https://github.com/NativeScript/nativescript-ui-sidedrawer/releases/tag/v4.2.1

[milejko]

I don't think it is fixed right way. It is true, that now the sidedrawer is not "blinking", but gestures block tap events on very wide part of the screen. In fact turning off gestures is the only solution for now.

[DimitarTodorov]

Hi @milejko

You can open a new issue for the problem you observe, following the issues guideline and share a demo project where the problem can be reproduced.

[Lehren]

This issue is very annoying. Hoping for a fix.