nativescriptangular2-nativescriptnativescript-vuenativescript-telerik-ui

How to turn window background black on showing modal view in nativescript


As shown in the image 1 below, when the modal view on ios 13 shows up, the default background is black. But on nativescript, the default background is white as shown in the image 2. How to achieve the image 1 kind of background (black) using nativescript core? I tried changing the color of status bar but that actually changes the color of the top page portion that's partially visible in the images. I tried to define background-color on Frame css, but didn't work. Any suggestions? Thanks in advance.

Image 1:enter image description here

Image 2:enter image description here

The modal view options:

const option: ShowModalOptions = {
    context: { selectedAccount: account },
    closeCallback: (a, b, c, action) => {
        //some code
    },
    fullscreen: false
};
mainView.showModal("./modal-add-page", option);

Solution

  • You have to set the background color of window on iOS.

    Update: Nativescript 7

    import * as app form "@nativescript/core/application";
    import { Color } from "@nativescript/core/color";
    import { isIOS } from '@nativescript/core';
        
    if (isIOS) {
    
       if (app.hasLaunched) {
          app.ios.window.backgroundColor = new Color("black").ios;
    
       } else {
         app.on("launch", _ =>  app.ios.window.backgroundColor = new Color("black").ios)
    
       }
    }
    

    Older versions:

    import * as app form "tns-core-modules/application";
    import { Color } from "tns-core-modules/color";
    
    // You must run it once application is initiated
    app.ios.window.backgroundColor = new Color("black").ios;