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);
}
}
}