Nativescript-ui-feedback: SideDrawer Angular over UI dialogs when using showOverNavigation

[davorpeic]

Hi,

using latest NS 2.5, nativescript-ui 1.6, iOS

I have sideDrawer showing "logout" button, when pressed I'm showing confirm dialog and in combination with drawer attribute showOverNavigation=true, the dialog goes under the drawer. When I don't show drawer over navigation, then the dialog is presented correct.

I also tried to close drawer before showing dialog, but dialog shows up and then hides, I guess layout change triggers that.

thanks

[mn-martin]

I'm having the same issue

[davorpeic]

This is only possible to activate on iOS, and I actually ended up disabling showOverNavigation because after I press "ok" on alert under, is messes up all ui components so tabs stop working and drawer too, and eventually app crashes, no errors thou. I guess this feature is available but not fully tested.

[mn-martin]

How did you disable it?

export function navigatingTo(args: EventData) {
    let page = args.object as DrawerPage;

    if (isIOS) {
        // Make the iOS status bar appear white on transparent
        let navigationBar = topmost().ios.controller.navigationBar;
        navigationBar.barStyle = UIBarStyle.BlackTranslucent;

        let sideDrawer: RadSideDrawer = page.sideDrawer;
        sideDrawer.showOverNavigation = false;
    }
}

The above code actually didn't solve the problem for me. (there's now a ~20px margin on the bottom of my drawer thought, but the dialog issues stay the same)

(I'd prefer to not change my android app appearance as well)

[davorpeic]

Well, if you don't set that parameter, default is false, but you can alter that value setting the value in component

showOverNavigation:boolean = false; 

ngOnInit() {
        if(application.ios) {
            this.showOverNavigation = false; // or true
        }
}

and then applying it depending on the platform

<RadSideDrawer tkExampleTitle tkToggleNavButton transition="SlideInOnTopTransition" [showOverNavigation]="showOverNavigation">
...

[mn-martin]

@davorpeic Unfortunately your solution is giving me the same result as my code did.

How does your XML file look like?

• Getting started
• Drawer over navigation

Drawer over navigation is how mine does look like.

[davorpeic]

I'm working with angular version so my drawer follows this template
https://github.com/telerik/nativescript-ui-samples-angular/blob/release/sdkAngular/app/sidedrawer/getting-started/getting-started.component.html

But theirs is based on the core docs http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started

[mn-martin]

@davorpeic Ah ok, that seems to be the reason then. Thank you for clarification 👍

[mn-martin]

I wanted to note that after several attempts I'm still unable to use the SideDrawer without showOverNavigation. I'm using TypeScript and followed the samples. I think the docs need an update?

Also it doesn't seem to be possible to know if the SideDrawer is currently visible.

The Events onDrawerClosingEvent & onDrawerOpening won't fire on Slide Gestures. Also it doesn't seem to be possible attaching a gesture event listener to the page content because that would disable user interactivity for any buttons and stuff. Therefore we cannot tell if someone is currently sliding out the SideDrawer. (The issue with dialogs would also occur if it's in the middle of a sliding transition)

This makes my app crashable via push notifications while the user is opening the SlideDrawer and I cannot delay the Dialog because I don't know whats going on with the drawer.

[VladimirAmiorkov]

Hi all,

Currently the "show over navigation bar" feature of the RadSideDrawer is not supported in {N} + Angular. We have been working on this feature and it is planned for official release with the next major version of the nativescript-telerik-ui plugin. You can expect it in the middle of next month. With this new feature for {N} + Angular the mentioned overlapping of UI dialogs should also be resolved.

You can test this feature in our "next" tag of the plugin by doing tns plugin add nativescript-telerik-ui@next, please let me know if the UI dialogs issue is still present when using the "next" version.

_Disclaimer: Note that the "next" version of the plugin is considered unstable because it is updated daily even hourly by the nativescript-telerik-ui team which is why it is not recommended to be used in a production project. Its main goal is to provide you with an immediate way to verify bug fixes and new features without the need to wait for official release._

[davorpeic]

Thanks for the update @VladimirAmiorkov

[mn-martin]

Yes, thanks indeed @VladimirAmiorkov 👍

[VladimirAmiorkov]

This feature has been implemented in nativescript-telerik-ui version "^2.0.0", more details can be found in the documentation here.

[VladimirAmiorkov]

Reopened due to this issue still being reproducible with latest nativescript-ui-sidedrawer: "3.5.1"

[VladimirAmiorkov]

This issue will be resolved with the upcoming 4.0.0 release of NativeScript and the nativescript-ui-sidedrawer plugin.

[audaciousanil]

We are using nativescript-angular 5.1 components in our NativeScript (3.4.3) mobile app and the issue is observed in iOS.

[VladimirAmiorkov]

Hi @audaciousanil ,

As mentioned above this issue will be resolved once the 4.0.0 release is available for both NativeScript and nativescript-ui-sidedrawer.

[balachandran1988]

Hi @davorpeic , can u pls provide solution for this.

[davorpeic]

Hi @balachandran1988, please check Vladimir's response before closing this issue.