Stack Listviews on top of each other ( in a scrollView )


I’m Having issues trying to stack multiple ListViews on top of each other. It is kind of hard to explain.
This is what my code looks like right now. Currently it only displays the last list out of the three. I have no clue why that is.

I have tried using a gridLayout and a stackLayout as well. When i warp my code around them ,my listViews turn into one element height each and lets me scroll within them.

I don’t want my lists to be scrollable by themselves, instead I want the whole page to be scrollable as the lists are stacked on top of each other. ( as if they were one list )
I have thought of using *ngFor but i want be as native as possible.

If anyone has any kind of solution for this issue I appreciate you help very much.



Just replace the word ListView with Repeater



Thanks for the reply.
I just tried it and it doesn’t seem to work. I think Repeater is only for Nativescript Core. I’m using {N} angular.


@AkshatGiri ListView is not meant to stack one after each other. So @multishiv19 suggested you to use Repeater which is nothing but something similar to ngFor in Angular.

But ListView is still best for performance as it recycles the views unlike ngFor (in Angular) or Repeater (in core). To use ListView with multiple data sources, think of combining your data under one array of items, you can still use multiple templates if required.


I see your point. I’ll just use *ngFor for now and hope it doesn’t kill the performance in production.


Like @manojdcoder said,
It is better if you can combine your arrays into 1 array and use multiple templates. If you want better performance.