🤖 Create an engaging chatbot from scratch and add it to your NativeScript app! Learn more at our webinar on March 28th.

NativeScript Core

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.

Improve this document

Demo Source


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

Improve this document

Demo Source


API Reference for Repeater Class