Search code examples
nativescriptangular2-nativescriptnativescript-angular

Create NativeScript Modal View without outlined whitespace?

I have an Angular NativeScript project and I am trying to create a modal view that does not cover the full screen and has a semi-transparent background. What I am trying to achieve works properly on iPad, but on iPhones a white outline appears and the page zooms out when a modal view is clicked. I would like to replicate the functionality of the iPad on the iPhone.

Attached is a photo of the iPad and iPhoneI would like to replicate the functionality of the iPad on the iPhone.

Solution

  • You could override the default presentation style to OverFullScreen which prevents the shrink animation.

    const options: ModalDialogOptions = {
  viewContainerRef: this.viewContainerRef,
  fullscreen: false,
  ios: {
    presentationStyle: UIModalPresentationStyle.OverFullScreen
  },
  context: {}
};
this.modalService.showModal(ModalComponent, options);

    If you haven't installed tns-platform-declarations, you may have to declare UIModalPresentationStyle to avoid TS errors

    declare var UIModalPresentationStyle;