Nativescript: Can't set backgroundcolor to transparent on modal after upgrade

[sudhanshu-15]

Please, provide the details below:

Did you verify this is a real problem by searching [Stack Overflow]

Yes I searched the repo and Stack Overflow for existing questions and solutions.

Tell us about the problem

After updating to NS 3.0, I am not able to set background color of Modal dialog page to transparent on Android. It was working fine with NS 2.5 with tns-core-modules 2.4.2.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 3.0.2
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
  package.json file of your project)
• Plugin(s): (look for the version number in the package.json file of your
  project)

┌──────────────────┬─────────────────┬──────────│ Component │ Current version │ Latest version │ Information │
│ nativescript │ 3.0.2 │ 3.0.2 │ Up to date │
│ tns-core-modules │ │ 3.0.1 │ Not installed │
│ tns-android │ │ 3.0.1 │ Not installed │
│ tns-ios │ │ 3.0.1 │ Not installed │
└──────────────────┴─────────────────┴──────────

Please tell us how to recreate the issue in as much detail as possible.

Try creating a modal page with backgroundColor set to transparent.
Also tried setting background-color: transparent on css also tried setting backgroundColor="#00000000"

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

modalPage.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally">
    <GridLayout class="mainstack" rows="auto, auto" columns="auto">
    <Label text="  " class="avatar-circle-halo" row="0" />
    <Label text="&#xE7FB;" horizontalAlignment="center" class="avatar-circle-icon" row="0" />
    <GridLayout rows="auto, auto, auto, auto, auto" columns="auto" class="headerFooter" row="1">
        <Label text="Connect with Us" class="headingtxt align-center" row="0"/>
        <Button text="&#xf099; Twitter" horizontalAlignment="center" tap="moveTo" class="socialbtn" row="1" id="twitter"/>
        <Button text="&#xf230; Facebook" horizontalAlignment="center" tap="moveTo" class="socialbtn" row="2" id="fb"/>
        <Button text="&#xf16d; Instagram" horizontalAlignment="center" tap="moveTo" class="socialbtn" row="3" id="insta"/>
        <Button text="&#xf166; YouTube" horizontalAlignment="center" tap="moveTo" class="socialbtn" row="4" id="youtube"/>
    </GridLayout>
    </GridLayout>
</Page>

modalPage.css

.mainstack {
    margin-left: 10;
    margin-right: 10;
    margin-top: 10;
    background-color: transparent;
    opacity: 0.8;
    border-radius: 10;
}

.socialbtn {
    font-family: FontAwesome, fontawesome;
    padding: 10;
    font-size: 24;
    background-color: #7D110C;
    color: white;
    border-radius: 15;
    height: 45;
    width: 160;
    margin-left: 20;
    margin-right: 20;
    margin-bottom: 10;
    margin-top: 2;
    text-transform: capitalize;
}


.headerFooter {
    background-color: white;
    border-radius: 10;
    width: 200;
}

.avatar-circle-icon {
    font-size:40px;
    height: 50;
    width: 50;
    color: #fff;
    background-color: #7D110C;
    border-radius: 30;
    margin-left: 12;
    margin-top: 3.75;
    margin-bottom: 3.75;
    text-align: center;
    font-family: MaterialIcons, Material Icons;
    vertical-align: middle;
}

.avatar-circle-halo {
    /*font-size:20;*/
    height: 60;
    width: 60;
    color: #fff;
    background-color: white;
    border-radius: 30;
    margin-left: 12;
    margin-top: 3.75;
    margin-bottom: 3.75;
    text-align: center;
    font-family: MaterialIcons, Material Icons;
    font-weight: normal;
    font-style: normal;
    font-size: 42px;   /*Preferred icon size */
}

Images for reference:

Before update->

After update->

[NickIliev]

@sudhanshu-15 this occurs because the default color of the modal page is not transparent.
To overcome this just assign a background color to your page inline or via CSS.
e.g. in modalPage.xml

<Page shownModally="onShownModally" backgroundColor="transparent" xmlns="http://schemas.nativescript.org/tns.xsd">

Full demonstration can be found here

[sudhanshu-15]

@NickIliev thank your for looking into it. It is working now.

[felixkrautschuk]

@NickIliev I have exactly the same problem using NativeScript 5.1.

<Page shownModally="onShownModally" backgroundColor="transparent">
This makes no difference, I cannot see anything that is behind the modal page because it is not transparent at all.

[brandon-sigao]

I have the same issue while trying to use border radius on the top level StackLayout of my modal. My stack layout gets rounded corners, but there's a white background visible under them.

I have tried:

 constructor(
    private params: ModalDialogParams,
    private page: Page,
    private modalDataService: ModalDataService) {
      this.page.frame.backgroundColor = 'transparent';
      this.page.frame.borderRadius = "20";
      this.page.backgroundColor ='transparent';
      this.page.borderRadius = "20";
  }

with no effect. The white background is there no matter what.

[schnapzz]

I have a similar issue with {N} v. 6.0.0 and the same for the runtimes.
Also, on ios i've encountered that the page is slightly visible when background colour is set to transparent. Think @brandon-sigao and I might experience the same issue.

[prajilshresthaiw]

Here is how we did it! https://stackoverflow.com/questions/61245835/nativescript-angular-modal-view-border-radius-not-working/62714210#62714210