ListView doesn't render all items at once

ListView in nativescript-ng doesn't render all of its items at once.

I have an array with about 26 items, only strings for now. When I used tns debug ios, and check inside my chrome browser only 20 of them are rendered and the ListView height is set to 1000. Even adding more items won't change this value and the last element to render will still be the one in position 20.

I am adding animation on the ListView's translateY property and I need the full height for the animation to work.

<GridLayout rows="auto, auto" columns="*">
  <MapView height="400" ...></MapView>
  <ListView [items]="countries" class="list-group" row="1" col="0">
   <StackLayout *ngFor="let item of countries" height="100">
      <Label [text]="item"></Label>
    </StackLayout >
  </ListView>
</GridLayout

this.countries = ["Austria", "Belgium", "Bulgaria", "Croatia", "Cyprus", "Czech Republic",
    "Denmark", "Estonia", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland", "Italy",
    "Latvia", "Lithuania", "Luxembourg", "Malta", "Netherlands", "Poland", "Portugal", "Romania", "Slovakia",
    "Slovenia", "Spain", "Sweden", "United Kingdom"];

expected: ListView height would be set to the sum of all heights from its children. In this case ~2600

actual: ListView height is chopped at 1000.

Solution

Was able to replicate this on IOS, and after I changed the row height to * from auto in the GridLayout, the ListView goes to end of list.

Auto generates the total space based on what is in the space, so I'm assuming not everything is loaded when the page is constructed, so even though all the items are there, the height of the ListView is being capped.

<GridLayout rows="auto, *" columns="*">
...
</GridLayout>