How to disable 'swipe-open' gesture on RadSideDrawer


#1

Hi all,

This was something I struggled with for some time, as I could not find any solutions provided.
I hope this will save others some time (and headaches)!

Problem:
You don’t want your RadSideDrawer to be opened by swiping from the edge, but you do want to close the RadSideDrawer by tapping outside of it. As 'gesturesEnabled="false"' disables all gestures.

Solution:
Set 'gesturesEnabled="true"' in your RadSideDrawer tag.

For iOS all you have to do is set 'this.drawer.ios.defaultSideDrawer.allowEdgeSwipe = false;' in your 'ngAfterViewInit()'.

For Android, 'this.drawer.android' kept giving me 'undefined' when put inside the 'ngAfterViewInit()'.
It works if you attach it to a '(loaded)="onLoaded()"' inside the RadSideDrawer tag. (Perhaps someone could explain to me why this is different between platforms?)
Then, just set 'this.drawer.android.setTouchTargetThreshold(0)' and you’re done!

See the complete code below:

import { Component, AfterViewInit, OnInit, ViewChild, ChangeDetectorRef } from "@angular/core";

import { RadSideDrawerComponent } from "nativescript-telerik-ui/sidedrawer/angular";
import { RadSideDrawer } from "nativescript-telerik-ui/sidedrawer";

import { isAndroid, isIOS } from "tns-core-modules/ui/frame/frame";

@Component({
  moduleId: module.id,
  selector: "yoursidedrawer",
  templateUrl: "yoursidedrawer.component.html"
})
export class YourSideDrawerComponent implements OnInit, AfterViewInit {
  @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
  private drawer: RadSideDrawer;

  constructor(private changeDetectionRef: ChangeDetectorRef) {}

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    this.drawer = this.drawerComponent.sideDrawer;
    this.changeDetectionRef.detectChanges();

    if (isIOS) {
      // This disables the swipe gesture to open menu
      this.drawer.ios.defaultSideDrawer.allowEdgeSwipe = false;

      // You can set other properties the same way, to style your RadSideDrawer for iOS. 
      // Such as:
      // ios.defaultSideDrawer.style.dimOpacity;
      // ios.defaultSideDrawer.style.shadowOpacity; 
      // ios.defaultSideDrawer.style.shadowRadius;
      // ios.defaultSideDrawer.transitionDuration;
    }
  }

  onLoaded() {
    if (isAndroid) {
      // This disables the swipe gesture to open menu, by setting the treshhold to '0'
      this.drawer.android.setTouchTargetThreshold(0);
    }
  }
}

#2

Hi KalongLaw
Thanks for sharing this tip


#3

Hi @KalongLaw,

How can I do this in Vanilla Nativescript?


#4

You can set the gesturesEnabled property to false in the XML, like this:

<RadSideDrawer [drawerTransition]="sideDrawerTransition" gesturesEnabled="false">

More info in the class details: https://docs.telerik.com/devtools/nativescript-ui/api/classes/radsidedrawercomponent.html#gesturesenabled

It works for me in Android and iOS.