nativescript - Create NativeScript Modal View without outlined whitespace?

Question

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 iPhone

标签： nativescriptangular2-nativescriptnativescript-angular

Answer 1

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;