showOverNavigation="true" locks user interaction in IOS

4 posts, 0 answers
  1. Jorge
    Jorge avatar
    3 posts
    Member since:
    Feb 2017

    Posted 07 Aug Link to this post

    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

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 08 Aug Link to this post

    Hi Joorge,

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Jorge
    Jorge avatar
    3 posts
    Member since:
    Feb 2017

    Posted 09 Aug in reply to nikolay.tsonev Link to this post

    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

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 10 Aug Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top