Repeater

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

Basics

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

XML
JavaScript
TypeScript

<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.

JavaScript
TypeScript

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.

Improve this document

Demo Source

Code Behind

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

XML
JavaScript
TypeScript

<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);
}

Improve this document

Demo Source

API Reference for Repeater Class

NativeScript Core

Repeater

Basics

Code Behind