WebView default background color?

[razorsyntax]

The webview background color is white and then the chart loads and successfully hides it at 100% width/height. But that means just before the chart loads, it briefly flashes white. Is there a way to configure the webview background color?

[razorsyntax]

Apologies for all the issues. I'm using the crap out of this library. lol I'm pretty sure this is the last one.

[razorsyntax]

After playing with it for a bit, it looks like it'll flash white no matter what. I was able to change the webview backgoround color in the body and html tags to no avail (in the plugin folder) but it might be a highcharts thing.

http://jsfiddle.net/mwuto084/2/ <--- jsfiddle without that white flashing.

[mhtghn]

Hi, Sorry for the late reply, usually Im not very active in the weekends. No worries for the issues, it helps me a lot making this plugin better, because right now Im not using it in any of my projects. I should be the one thanking you. About this issue, after some research I think it is related to this. So in the 1.1.2 release I set the webview background color to transparent, can you test it and tell me if it is working as you expect now ?

[razorsyntax]

Well awesome.

It's still flashing white though. Changing the webview.android.setBackgroundColor(0x00000000); value doesn't seem to make a difference. It's always white even when I used the blue screen of death color.

I'm running emulated Android 7 and iOS 13.2.

[mhtghn]

Ok, can you provide a repo ? I dont know how to reproduce your issue, tried it with some emulators and I didnt observe it

[razorsyntax]

So I'm using async pipe and had a thought. If the chart has no data and is waiting for something to return... then the chart won't have any options and the chart would display a white background until data returns (but that's the theory).

<GridLayout rows="*" columns="*" 
        width="100%" 
        height="100%" 
        (loaded)="onLoad($event)">
    <Highcharts row="0" col="0" 
        [options]="chartService$ | async" 
        id="ChartContainer">
    </Highcharts>   
</GridLayout>

It looks like you might be able to replicate the behavior with a timeout.

chartOptions = [{...}]

this.chartService$ = this.getDataService();

getDataService() {
    setTimeout(() => {
        return of(JSON.stringify(this.chartOptions));
    }, 1000);
}

Thinking all I have to do is give it some options on load, I've created some default chart options with no data but when the component loads it, it renders a white chart with a title of "Chart Title". I poked around in the plugin and found something called defaultOptions and it looks like that's loading, rather than my empty chart options.

Is it not playing well with async pipe?

[razorsyntax]

I don't know if this matters but here's my package.json.

{
  "description": "",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "",
    "tns-ios": {
      "version": "6.2.0"
    },
    "tns-android": {
      "version": "6.2.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/cli": "^7.1.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@nstudio/nativescript-loading-indicator": "^1.0.0",
    "@types/lodash": "^4.14.110",
    "bignumber.js": "^9.0.0",
    "crypto-js": "^3.1.9-1",
    "growl": "^1.10.2",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "nativescript-angular": "^8.2.1",
    "nativescript-app-sync": "^1.0.7",
    "nativescript-carousel": "^6.1.1",
    "nativescript-couchbase": "^1.0.18",
    "nativescript-filterable-listpicker": "^2.2.6",
    "nativescript-localize": "^4.2.0",
    "nativescript-modal-datetimepicker": "^1.2.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-toasty": "^2.0.1",
    "nativescript-ui-autocomplete": "6.0.0",
    "nativescript-ui-chart": "7.0.0",
    "nativescript-ui-highcharts": "^1.1.2",
    "nativescript-ui-listview": "^8.0.0",
    "nativescript-unit-test-runner": "0.7.0",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^6.4.0",
    "tns-core-modules": "^6.2.0",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.2.0",
    "@ngtools/webpack": "~8.2.0",
    "@types/crypto-js": "^3.1.43",
    "@types/jasmine": "3.3.12",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "husky": "^0.14.3",
    "karma": "4.1.0",
    "karma-jasmine": "2.0.1",
    "karma-nativescript-launcher": "0.4.0",
    "karma-webpack": "3.0.5",
    "lazy": "1.0.11",
    "lint-staged": "^7.2.0",
    "nativescript-css-loader": "~0.26.1",
    "nativescript-dev-webpack": "^1.3.0",
    "node-sass": "4.12.0",
    "prettier": "^1.13.7",
    "tns-platform-declarations": "^6.0.1",
    "tslib": "~1.9.2",
    "tslint": "^5.10.0",
    "typescript": "~3.5.3"
  },
  "author": "",
  "scripts": {
    "e2e": "tsc -p e2e && mocha --opts ./e2e/config/mocha.opts",
    "compile-tests": "tsc -p e2e --watch"
  }
}

[razorsyntax]

I'm getting the message parse() is deprecated. Use Builder.parse() instead. in the console when the charts load. Is this part of it?

[razorsyntax]

I'm going to see if this is an issue with core Nativescript. Looks like someone else is having issues on a similar version: https://stackoverflow.com/questions/58734302/cant-get-transparent-webview-in-nativescript-6-angular-set-backgroundcolor-tra