Nativescript: Some properties of ListView items are not visible

[jorotenev]

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

I saw other issues that seem related to the problem I have (#4836 & #angular-377), however the mentioned temporary solution of using listview.refresh() does not help.

Tell us about the problem

The view has a single ListView with items. The properties of some of the items are not immediately visible - they sometimes become visible if I scroll down and then back up. There's an onTap handler which console.logs the correct item properties even for currently hidden items.

Which platform(s) does your issue occur on?

Android (haven't tried iOS)

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

• CLI: 3.2.1
• Cross-platform modules: 3.2.0
• Runtime(s): tns-androd: 3.2.0
• Plugin(s): (look for the version number in the package.json file of your
  project)

"dependencies": {
    "moment": "^2.18.1",
    "nativescript-theme-core": "~1.0.2",
    "tns-core-modules": "^3.2.0",
    "underscore": "^1.8.3"
  }

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

Use this repo to launch the app and then scroll down/up. There's a gif in the repo showing the problem.

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

Check:

• expense/list/list-view-model.ts#L51
• list.xml

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @jorotenev,
Thank you for reporting this issue and for the sample project.

I reviewed it and found that the problem might be related to the earlier firing of loadMoreItems event for the ListView. We will investigate further the case and regarding that, you could keep track on the issue.

In the meantime, as a temporary solution, I would suggest setting a timeout inside the event callback, which will resolve the problem. For example:

list.ts

export function loadMoreItems(ev: EventData): void {
    console.log("loadMoreItems");
 setTimeout(()=>{
    listModel.loadMoreItems(ev);
 }, 0);

}

[jorotenev]

Thanks for the prompt response, @tsonevn
I tried your fix but it didn't seem to remedy the problem. I used different delays for the setTimeout() - 0,100,1000ms, etc. but the "amount" property (the right-most column) doesn't show on some rows, as it was the case before.

[tsonevn]

Hi @jorotenev,
I tested again the above-given workaround and it seems to work as expected. Try deleting platforms',node_modulesandhooks` and rebuild again the application.

[Buuhuu]

Might be related to #4962

[jorotenev]

@tsonevn deleting the folders didn't help. deleting them and setting the timeout to 100ms helped though.
Thanks :)

[jorotenev]

Hi. Just checking what's the status of this issue.
I could still experience the bug every now and then even with the fix applied (with a considerably lower frequency though).

Cheers

[tsonevn]

Hi @jorotenev,
This issue is still under review. You could keep track on the issue, for further info.