NativeScript virtualScroll in huge list

vahid.vdn 2017-08-08 05:18:33 UTC #1

Beforehand I was using Ionic for my cross platform apps. When using Angular repeat, there was performance and memory issues in huge lists.

But ionic has a feature called virtualRepeat (or collection-repeat in v1.x). But it has lots of bugs and is not usable.

Is there such a feature in NativeScript? (It must not keep all elements alive in the list, and as user scroll change the list.) The same feature is available in React Native.

Thanks.

vahid.vdn 2017-08-08 06:04:53 UTC #2

Is it called RadListView?

Pete.K 2017-08-08 12:49:30 UTC #3

I think the built-in cross-platform ListView’s default behavior comes with virtualization, and about RadListView, I am almost certain it’s a default there as well.

vahid.vdn 2017-08-08 15:55:36 UTC #4

But I don’t think so. Because if it comes with virtualization, it must render a few items of a huge list. But when I give it a very huge list, it takes a few seconds to render them.

I’m going to test RadListView.

jeffswitzer 2017-08-08 21:40:05 UTC #5

@vahid.vdn take a look at this link about faster nativescript listviews. It might answer some of the questions you have. I’m pretty sure from my experiences that listview only renders / updates items in the current view as opposed to wrapping a StackLayout inside a ScrollView for example.

Hristo 2017-08-09 06:44:41 UTC #6

@vahid.vdn You could also check our cuteness demo which have support for infinity list:

ListView will create only few items (not items for the whole array) and the reuse them (once they go out of view port).

vahid.vdn 2017-08-09 13:16:42 UTC #7

@jeffswitzer @Hristo

Thanks for the reply. I took a screenshot video. for performance demonstration. At first I have 20 items. Then for load more in scroll, I load a very huge list . Then, see the result:

Hristo 2017-08-10 19:22:23 UTC #8

@jeffswitzer Can you open a GitHub issue and attach a sample project so that I can investigate it?
Or if you can’t share the project you could profile it following this blog post:

vahid.vdn 2017-08-14 07:58:48 UTC #9

Finally I found out, it uses virtulization. I ran this command:

tns debug android

Then I could be able to see the elements from chrome dev tools:

It uses only a few elements and while scrolling changes them.