showOverNavigation="true" locks user interaction in IOS

[Jorge]

Hi,

In IOS when using the 'template-drawer-navigation-ng' template with Angular, the content under tkMainContent appears to be locked, no user interaction is allowed. If your remove the showOverNavigation directive then you can interact with the page content.  I am using:

nativescript-angular : 3.1.3

nativescript-telerik-ui-pro : 3.1.0-2017-8-4-1

tns-core-modules : 3.1.1

Nativescript 3.1.1

This only happens in IOS.

Regards,

Jorge Cruz

[Nikolay Tsonev]

Hi ,

Thank you for contacting us I reviewed your case and find in your description that you are using a @next version of the UI for NativeScript(3.1.0-2017-8-4-1), which is still under development and is not officially published. Using this version could lead to the described problem in the ticket.

Something that I could suggest is using the latest official version of nativescript-telerik-ui-pro 3.0.4.
To do that you could firstly run

tns plugin remove nativescript-telerik-ui-pro

and then 

tns plugin add nativescript-telerik-ui-pro

Bear in mind to remove node_modules and platforms folders before rebuilding the application 
For your convenience, I am attaching a sample project and a GIF file from the simulator.
If you still have a problem, please provide a project, which could be debugged locally
Regards,
nikolay.tsonev
Progress Telerik

[Jorge]

Hi Nikolay,

I tested it with official release 3.0.4.  But I realized that the problem is the same as this one already logged: 

https://github.com/NativeScript/template-drawer-navigation-ng/issues/16

If you swipe the Drawer to show over page then you can interact with the page components.  

Regards,

 

Jorge

[Nikolay Tsonev]

Hi Jorge,

Indeed there is an issue with the SideDrawer, which blocks the page interaction on the page. This problem is logged here and should be fixed with the latest @next version in UI for NativeScript.
Regarding that, you could install again @next with 

tns plugin add nativescript-telerik-ui-pro@next

Bear in mind to delete node_modules and platforms and hooks folders from the application before the rebuild.
However, if the problem still persists you could add the following line in ngAfterViewInit event, which will allow you to workaround the issue.

this.drawerComponent.nativeElement.closeDrawer();

Example:

import { Component, OnInit, ViewChild } from "@angular/core";
import { DrawerTransitionBase, SlideInOnTopTransition } from "nativescript-telerik-ui/sidedrawer";
import { RadSideDrawerComponent } from "nativescript-telerik-ui/sidedrawer/angular";
import {isIOS} from "platform"

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    /* ***********************************************************
    * Use the @ViewChild decorator to get a reference to the drawer component.
    * It is used in the "onDrawerButtonTap" function below to manipulate the drawer.
    *************************************************************/
    @ViewChild("drawer") drawerComponent: RadSideDrawerComponent;

    private _sideDrawerTransition: DrawerTransitionBase;

    /* ***********************************************************
    * Use the sideDrawerTransition property to change the open/close animation of the drawer.
    *************************************************************/
    ngOnInit(): void {
        console.log("ng oninit")
        this._sideDrawerTransition = new SlideInOnTopTransition();
        // if(this.drawerComponent.nativeElement.getIsOpen()){
        //     console.log("draweble is opened")

        // }
    }

    get sideDrawerTransition(): DrawerTransitionBase {
        return this._sideDrawerTransition;
    }
    ngAfterViewInit()
    {
        if(isIOS){
this.drawerComponent.nativeElement.closeDrawer();
        }

    }

    /* ***********************************************************
    * According to guidelines, if you have a drawer on your page, you should always
    * have a button that opens it. Use the showDrawer() function to open the app drawer section.
    *************************************************************/
    onDrawerButtonTap(): void {
        this.drawerComponent.sideDrawer.showDrawer();
    }
    onTap(){
        alert("test");
    }
}

Regards,
nikolay.tsonev
Progress Telerik