Nativescript: Dynamic listview showing only one row

Question

Can anyone help me with this issue? The listview is showing only one row.

Is there a way to show all the items in the listview?

XML View

<ScrollView>
    <stack-layout id="stackID">

    </stack-layout>
</ScrollView>

Code Behind

var listViewModule = require("ui/list-view");
var layout = page.getViewById("stackID");

var listView = new listViewModule.ListView(); 
var colors = ["red", "green", "blue"];
listView.items = colors;

layout.addChild(listView);

Screenshot

Answer 1

Two things:

1. Unless you have to; don't put a ListView inside a ScrollView. ListViews have their own scrollview code built in.

2. If you HAVE to put a ListView into the ScrollView, you need to set the Height of the ListView to make everything work properly. (It is also recommended you set the size of the ScrollView in this case also).

You layout should be

<Page><StackLayout> ....  other views ....
<StackLayout id="stackID">
  <!-- ListView dynamically inserted here -->
</StackLayout>
</StackLayout></Page>