Repeater

Using a Repeater requires the repeater module.

import * as repeaterModule from "tns-core-modules/ui/repeater";

Other modules which will be used in the code samples in this article:

import * as observableArray from "tns-core-modules/data/observable-array";
import * as labelModule from "tns-core-modules/ui/label";

Binding the Repeater items property to collection in the view-model.

<Page>
  <Repeater items="{{ myItems }}" />
</Page>

Define the Repeater itemTemplate property.

<Page>
 <Repeater items="{{ myItems }}">
    <Repeater.itemTemplate>
       <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
    </Repeater.itemTemplate>
 </Repeater>
</Page>

Define the Repeater itemsLayout property. Default is StackLayout with orientation="vertical".

<Page>
 <Repeater items="{{ myItems }}">
    <Repeater.itemsLayout>
       <StackLayout orientation="horizontal" />
    </Repeater.itemsLayout>
 </Repeater>
</Page>

Repeater with WrapLayout inside ScrollView.

<Page>
<ScrollView>
  <Repeater items="{{ myItems }}">
    <Repeater.itemsLayout>
       <WrapLayout />
    </Repeater.itemsLayout>
    <Repeater.itemTemplate>
       <Label text="{{ $value }}" margin="10" />
    </Repeater.itemTemplate>
  </Repeater>
 </ScrollView>
</Page>

Using Repeater with Array

var colors = ["red", "green", "blue"];
repeater.items = colors;

Note, that changing the array after the repeater is shown will not update the UI. You can force-update the UI using the refresh() method.

colors.push("yellow");
// Manually trigger the update so that the new color is shown.
repeater.refresh();

Using Repeater with different layout.

var repeater = new repeaterModule.Repeater();
var stackLayout = new stackLayoutModule.StackLayout();
stackLayout.orientation = "horizontal";
repeater.itemsLayout = stackLayout;

Using Repeater with ObservableArray

var colors = new observableArray.ObservableArray(["red", "green", "blue"]);
repeater.items = colors;

When using ObservableArray the repeater will be automatically updated when items are added or removed form the array.

colors.push("yellow");
// The Repeater will be updated automatically.

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.