Adding depth / shadow to your NativeScript RadSideDrawer (iOS)

radsidedrawer-component.ts

// In case of Angular, this is the component that contains a view with a <RadSideDrawer>

export class MenuComponent implements AfterViewInit {

  @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
  private _drawer: SideDrawerType;

  ngAfterViewInit(): void {
    this._drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();

    // here comes the magic!
    if (this._drawer.ios) {
      // if your menu is drawn 'below' the hostview, do this:
      this._drawer.ios.defaultSideDrawer.style.shadowMode = 1; // TKSideDrawerShadowMode.Hostview;
      // .. but if the menu is drawn 'above' the hostview, do this:
      this._drawer.ios.defaultSideDrawer.style.shadowMode = 2; // TKSideDrawerShadowMode.SideDrawer;

      // if you have shadowMode = 2, then you can add a little dim to the lower layer to add some depth. Keep it subtle though:
      this.drawer.ios.defaultSideDrawer.style.dimOpacity = 0.12;

      // then tweak the shadow to your liking:
      this._drawer.ios.defaultSideDrawer.style.shadowOpacity = 0.75; // 0-1, higher is darker
      this._drawer.ios.defaultSideDrawer.style.shadowRadius = 5; // higher is more spread

      // bonus feature: control the menu animation speed (in seconds)
      this._drawer.ios.defaultSideDrawer.transitionDuration = 0.25;
    }
  }
}

Example result (the shadow is most notable at the bottom, when cast over the pink-ish color):

Thanks for this. One issue I have is with this._drawer.ios.defaultSideDrawer.style.dimOpacity
When I use the menu button the style instantly pops on with no animation, but if i grab the menu handle and drag back and forth the opacity does indeed animate. I also noticed that this threw a error ' this._changeDetectionRef.detectChanges();' Maybe that was deprecated? Do you have any issues with the animation being different between dragging vs pressing the menu?
Thanks!

Very nice Eddy - love this 👍