Can't get transparent WebView in NativeScript 6 Angular (set backgroundColor transparent & layertype software)

2

I set up a basic HelloWorld project and added two WebViews, where the top one was expected to have a transparent background with the other WebView showing through: the text should be overlayed on the threeJS example scene (just testing). Instead the top WebView has a white background. I can see the other WebView is being logged too.

Attached to the WebView pageLoaded event is a function which changes the background colour to transparent and the layer type to "software", as advised in other answers.

The overlaying html page also has and style background-color set to transparent

Using NativeScript 6

home.component.html:

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<GridLayout class="page">
    <!-- Add your page content here -->
    <WebView row="0" col="0" id="WebView0" src="http://threejs.org/examples/#webgl_clipping_stencil"></WebView>
    <WebView row="0" col="0" id="webView" (loadFinished)="vwloaded" src="myServerName.com/transparent1.html"></WebView>
</GridLayout>

home.component.ts:

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";

import { isIOS, isAndroid } from "tns-core-modules/platform";
import { EventData } from "tns-core-modules/data/observable";
import { WebView, LoadEventData } from "tns-core-modules/ui/web-view";

@Component({
    selector: "Home",
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

    constructor() {
        // Use the component constructor to inject providers.
    }

    ngOnInit(): void {
        // Init your component properties here.
    }
}

export function wvloaded(args: LoadEventData){
    var newwv:WebView =<WebView> args.object;
    if(isAndroid){
        //console.log("new WV ", newwv.android);
        //newwv.android.setBackgroundColor(0x00000000);
        newwv.android.setBackgroundColor(newwv.android.graphics.Color.TRANSPARENT);//
        newwv.android.setLayerType(newwv.android.view.View.LAYER_TYPE_SOFTWARE, null);

    }
    if(isIOS){
        //console.log(newwv.ios);
        newwv.ios.backgroundColor = newwv.ios.UIColor.clearColor;
        newwv.ios.opaque=false;
    }
}

The overlaying html page is as follows:

<!doctype html>
<html style="background-color: transparent;">
<head>
</head>
<body style="background-color: transparent;">
<p>kjhgfdsdfghjhgfdsdfghjuhytrfdesdf
<br>
ghjhytrdfgbnhgtfdfghgtfhgtfrdghgtfrcvbhgfdcv
<br>
nhgfdshytreszgfres
<br>fgfdsds
<br>
nsdfgtre
</p>
</body>
</html>
android
angular
webview
nativescript
nativescript-angular
asked on Stack Overflow Nov 6, 2019 by MurServ

1 Answer

0

You are suppose to use android name space, not the native instance.

declare var android, UIColor;

....

onLoaded(event) {
    const view = event.object;
    if (view.android) {
        view.android.setBackgroundColor(android.graphics.Color.TRANSPARENT);
    }
    if (view.ios) {
        view.ios.opaque = false;
        view.ios.backgroundColor = UIColor.clearColor;
        view.ios.scrollView.backgroundColor = UIColor.clearColor;
    }
}

Playground Sample

answered on Stack Overflow Nov 9, 2019 by Manoj

User contributions licensed under CC BY-SA 3.0