Nativescript-ui-feedback: [ iOS ] RadListView: issue with setting backgroundColor to transparent for iOS

[tsonevn]

Setting up the RadListView backgroundColor to transparent will not remove the default white color. this issue is reproducable only on iOS.

• CLI: 3.0.1
• Cross-platform modules:3.0.0
• Runtime(s): 3.0.0

Workaround:

To make the background transparent you could handle itemLoading event and to setup a transparent color for backgroundView.
Example:

import {Color} from "color";
import {isIOS} from "platform"
export function onItemLoading(args){
        console.log("onItemLoading");
        if(isIOS){
            console.log(args.ios);
            var newcolor = new Color(20,255,0,0);
            args.ios.backgroundView.backgroundColor = newcolor.ios;
        }

    }

[VladimirAmiorkov]

Hi,

By default the RadListView has multiple layers of elements (itself, the pull to refresh layer, and each Item template layer) in this order. Which is why the backgroundColor is not being see as "applied" if for example the list is full of items or the pull to refresh is enabled. Currently both scenarios can be workaround by setting the backgroundColor in onItemLoading for the Item templates to become transparent and when using the pull to refresh you could do the following:

import * as applicationModule from 'application';
import { Color } from 'color';

if (applicationModule.ios) {
     this.myRadListView.ios.pullToRefreshView.backgroundColor = (new Color("#000000")).ios;
}

We will dicuss what is the best way to apply a background color to the RadListView and its elements, which element should be the top priority etc. If you have any suggestions please share them.

[Ericky14]

Is there any way to change the indicator color through the code? I am using angular with nativescript.

[LSmint]

Hi,

Here is similar case during trigger loadMoreDataRequested, how to set background to transparent for the bottom of the loading indicator, and make the loading indicator orientation at the center of the screen

[alqabali]

any progress about that?

[racknoris]

On several occasions, when i used the itemLoading() event, the performance seemed to have degraded. Is it still the case in version 5.0.0 of RadListView?

[nitrotm]

What about setting background color to transparent for the list header/footer?

[DimitarTodorov]

The feature is available in latest version of [email protected]

[tahir-jamil]

Hi its not working for me @DimitarTodorov
this is how i implement this

 onPullToRefreshInitiated(args: ListViewEventData) {
    if (platformModule.isIOS) {
      console.log("background Color set");
      this.myRadListView.pullToRefreshStyle.indicatorColor = (new Color("#a444a2")).ios;
      this.myRadListView.pullToRefreshStyle.indicatorBackgroundColor = (new Color("#000000")).ios;
    }
    const that = new WeakRef(this);
    const listView = args.object;
    listView.notifyPullToRefreshFinished();
  }

error logs

CONSOLE ERROR [native code]: ERROR TypeError: undefined is not an object (evaluating 'this.myRadListView.pullToRefreshStyle.indicatorColor = (new tns_core_modules_ui_page_page__WEBPACK_IMPORTED_MODULE_2__["Color"]("#a444a2")).ios')
CONSOLE ERROR [native code]: ERROR CONTEXT {
"view": {
"def": {
"nodeFlags": 370524165,
"rootNodeFlags": 33554433,
"nodeMatchedQueries": 6,
"flags": 0,
"nodes": [
{
"nodeIndex": 0,
"parent": null,
"renderParent": null,
"bindingIndex": 0,
"outputIndex": 0,
"checkIndex": 0,
"flags": 33554433,
"childFlags": 336969733,
"directChildFlags": 1359873,
"childMatchedQueries": 6,
"matchedQueries": {},
"matchedQueryIds": 0,
"references": {},
"ngContentIndex": null,
"childCount": 4,
"bindings": [],
"bindingFlags": 0,
"outputs": [
{
"type": 0,
"target": null,
"eventName": "pullToRefreshInitiated",
"propName": null
},
{
"type": 0,
"target": null,
"eventName": "ite<…>

[Stanteq]

@tahir-jamil, @nitrotm place the code when RadListView is loaded:

  loaded(event: ListViewEventData) {
    const style = new PullToRefreshStyle();
    style.indicatorColor = new Color("red");
    style.indicatorBackgroundColor = new Color("blue");

    // Social distancing (due to COVID-19)

    const listView: RadListView = event.object;
    listView.pullToRefreshStyle = style;
  }