NativeScript virtualScroll in huge list


#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.


#2

Is it called RadListView?


#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.


#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.


#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.


#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).


#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:


#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:


#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.