How to disable 'swipe-open' gesture on RadSideDrawer


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)!

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.

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, '' 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 '' 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";

  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;

    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.transitionDuration;

  onLoaded() {
    if (isAndroid) {
      // This disables the swipe gesture to open menu, by setting the treshhold to '0';


Hi KalongLaw
Thanks for sharing this tip


Hi @KalongLaw,

How can I do this in Vanilla Nativescript?


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

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

More info in the class details:

It works for me in Android and iOS.