Nativescript ListView showing only one item
What is really happening in your code is that you are creating a grid with two rows and then your list-view by default is put in the first row with setting "auto". This setting will give you space only as big as ONE item template space - in fact, all of your items are loaded and can be scrolled but there is a place to visualize only one of them.
Either change the auto to * or remove the nested grid-layout. Just to make sure that you are in control of which element is shown at the exact place I would recommend also to always declare your positions within the grid with row=" col=" even when there is a pretty simple architecture.
Example:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
<GridLayout rows="auto, *">
<!-- Header -->
<StackLayout row="0" cssClass="page-header">
<Label text="Header" cssClass="page-title bold" horizontalAlignment="center" margin="15"/>
</StackLayout>
<!-- Sessions Views -->
<ListView row="1" items="{{ sessions }}">
<ListView.itemTemplate>
<Label text="{{ title }}"/>
</ListView.itemTemplate>
</ListView>
</GridLayout>
</Page>
I had the same problem. I also noticed that the one line on Android in the ListView
did scroll. I added height to the ListView
and everything worked fine.
<GridLayout rows="*" class="SSGridLayout">
<ListView items="{{ calcItems }}" itemTap="onItemTap" height="280">
<ListView.itemTemplate>
<GridLayout columns="auto, auto, auto, auto, auto, auto" rows="*" class="SSGridLayout">
<Label text="{{ year }}" class="ScrollDataField" width="{{ widthB }}" col="1" textWrap="false" />
</GridLayout>
</ListView.itemTemplate>
</ListView>
</GridLayout>