Nativescript-ui-feedback: RadListView not displaying remote images initially

[jvdonk]

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

_Yes_, specifically #35 but somehow remote images are still a problem.

Which platform(s) does your issue occur on?

_iOS_, not tested on android. Testing with iOS 11.1

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

• Progress NativeScript UI version:
  3.2.0

• CLI:
  3.3.0

• Cross-platform modules:
  3.3.0

• Runtime(s):
  3.3.0

-package.json:

{
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN <your-license-filename>",
    "readme": "NativeScript Application",
    "repository": "<fill-your-repository-here>",
    "nativescript": {
        "id": "org.nativescript.RadListViewImageBug",
        "tns-ios": {
            "version": "3.3.0"
        }
    },
    "dependencies": {
        "@angular/animations": "4.4.6",
        "@angular/common": "4.4.6",
        "@angular/compiler": "4.4.6",
        "@angular/core": "4.4.6",
        "@angular/forms": "4.4.6",
        "@angular/http": "4.4.6",
        "@angular/platform-browser": "4.4.6",
        "@angular/router": "4.4.6",
        "nativescript-angular": "4.4.1",
        "nativescript-pro-ui": "^3.2.0",
        "nativescript-theme-core": "1.0.4",
        "reflect-metadata": "0.1.10",
        "rxjs": "5.5.2",
        "tns-core-modules": "3.3.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "nativescript-dev-typescript": "0.5.1",
        "typescript": "2.4.2"
    }
}

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

1) With {N} SideKick create a new A+TS, empty template project.
2) Add nativescript-pro-ui plugin
3) Register the RadListView in the home.module.ts (NativeScriptUIListViewModule)
4) Add an png image resource (test/test.png)
5) Add the code+template required for the RadListView to display:

app/home/DataItem.ts:

export class DataItem {
    name: string;
    url: string;
}

app/home/home.component.ts

import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { DataItem } from "./DataItem";

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

    private _dataItems: ObservableArray<DataItem>;

    constructor() {
    }

    ngOnInit(): void {
        var self = this;
        this._dataItems = new ObservableArray<DataItem>();

        setTimeout(function(){
            var item = new DataItem();
            item.name = "Test1";
            item.url = "res://test/test.png"
            self._dataItems.push(item);
        }, 5000);

        setTimeout(function(){
            var item = new DataItem();
            item.name = "Test2";
            item.url = "https://d2odgkulk9w7if.cloudfront.net/images/default-source/default-album/screen696x696-(1)cd16642a7b776b26a649ff04000922f2.jpeg?sfvrsn=42610ffe_0"
            self._dataItems.push(item);
        }, 5000);
    }

    get dataItems(): ObservableArray<DataItem> {
        return this._dataItems;
    }
}

app/home/home.component.html

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

<GridLayout class="page">
    <RadListView [items]="dataItems" height="100%">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical">
                <GridLayout columns="*, 125">
                    <StackLayout col="0" orientation="vertical" padding="10">
                        <Label [text]="item.name"></Label>
                    </StackLayout>
                    <StackLayout col="1" orientation="vertical">
                        <Image [src]="item.url" width="125"></Image>
                    </StackLayout>
                </GridLayout>
                <StackLayout height="1" backgroundColor="lightgray"></StackLayout>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

After 5 seconds, 2 items are pushed into the RadListView observed array. The first, an image as a resource, is displayed correctly. The second image, a remote url, is not displayed initially.

Only after rotating the screen the second images shows, or refreshing the listview with a timeout function also displays the second image.

I hope I have made this as simple as possible to demonstrate my issue.

[tsonevn]

Hi @jvdonk,
I tested your scenario and was able to recreate the similar scenario in iOS, However, during the investigation, I found that this issue has been caused due to the fact that the height of the Image was not specified. if you set up the height for the image which is loaded from the URL will be shown. For example:

<StackLayout col="1" orientation="vertical">
                        <Image [src]="item.url" height="125" width="125"></Image>
                    </StackLayout>

[jvdonk]

Confirmed! Images are displaying now, thank for clarifying.