Repeater

The Repeater widget allows you to display a collection of data, which is present in an array.

const repeaterModule = require("tns-core-modules/ui/repeater");

import { Repeater } from "tns-core-modules/ui/repeater";

Basics

The example shows how to define Repeater in the XML and how to load its data.

<Label row="0" text="Binding the Repeater items property to collection" textWrap="true" />
<Button row="1" text="Add new item" tap="onTap" />
<ScrollView row="2">
    <Repeater  id="firstRepeater" items="{{ myItems }}" />
</ScrollView>
<Label row="3" text="Define the Repeater itemTemplate property" textWrap="true" />
<Button row="4" text="Add new item (Second Repeater)" tap="onSecondTap" />
<ScrollView row="5" orientation="horizontal">
    <Repeater items="{{ mySecondItems }}">
        <Repeater.itemsLayout>
            <StackLayout orientation="horizontal" />
        </Repeater.itemsLayout>
        <Repeater.itemTemplate>
            <Label text="{{ $value }}" margin="10" />
        </Repeater.itemTemplate>
    </Repeater>
</ScrollView>

const colors = ["red", "green", "blue"];
const secondColorsArray = new observableArrayModule.ObservableArray(["red", "green", "blue"]);
function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();

    vm.set("myItems", colors);
    vm.set("mySecondItems", secondColorsArray);

    page.bindingContext = vm;
}

const colors = ["red", "green", "blue"];
const secondColorsArray = new ObservableArray(["red", "green", "blue"]);
export function onNavigatingTo(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();

    vm.set("myItems", colors);
    vm.set("mySecondItems", secondColorsArray);
    page.bindingContext = vm;
}

Note: 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();

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

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

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

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

Code Behind

In the following example is shown, how to create Repeater via Code-behind

<StackLayout id="stackLayoutId">
        <Label text="{{ 'Result: ' + prResult}}" textWrap="true" />

</StackLayout>

function onPageLoaded(args) {
    const page = args.object;
    const stackLayoutContainer = page.getViewById("stackLayoutId");
    const secondColorsArray = new observableArrayModule.ObservableArray(["red", "green", "blue"]);

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

    stackLayoutContainer.addChild(repeater);
}

exports.onPageLoaded = onPageLoaded;

export function onPageLoaded(args) {
    const page: Page = <Page>args.object;
    const stackLayoutContainer: StackLayout = <StackLayout>page.getViewById("stackLayoutId");
    const secondColorsArray = new ObservableArray(["red", "green", "blue"]);

    const repeater = new Repeater();
    const stackLayout = new StackLayout();
    stackLayout.orientation = "horizontal";
    repeater.itemsLayout = stackLayout;
    repeater.items = secondColorsArray;

    stackLayoutContainer.addChild(repeater);
}

API Reference for Repeater Class