Custom dialog(Modal Dialog) should display half of the screen in nativescript angular2

Question

I referred this link and this link

when click on the floating action button, I'm using custom modal dialog to show the listview to half of the screen.

But it is taking full screen like below image:

I tried to set boolean variable fullScreen to false then also its showing full screen only.

ts file:

 public showModal() {

     console.log("showmod", "Test");

     let options = {
         context: {},
         fullscreen: false,
         viewContainerRef: this.vcRef
     };
     this.modal.showModal(ModalComponent, options).then(res => {
         console.log("ModRes :", ""+res);
     });
 }

dialogs.d.ts: (node-modules/nativescript-angular/directives)

import { ViewContainerRef, Type } from "@angular/core";
export interface ModalDialogOptions {
    context?: any;
    fullscreen?: boolean;
    viewContainerRef?: ViewContainerRef;
}
export declare class ModalDialogParams {
    context: any;
    closeCallback: (...args) => any;
    constructor(context: any, closeCallback: (...args) => any);
}
export declare class ModalDialogService {

    showModal(type: Type<any>, options: ModalDialogOptions): Promise<any>;
    private static showDialog(type, options, doneCallback, containerRef, resolver, parentPage, pageFactory);
}
export declare class ModalDialogHost {
    constructor();
}

Any help is appreciated.thanks.

Answer 1

This is the native behavior on iOS.

By design on iPhone, a modal page appears only in fullscreen.

Noted here