NativeScript/tests/app/ui/repeater/repeater.md

nav-title	title	environment	description	previous_url
repeater How-To	repeater	nativescript	Examples for using repeater	/ApiReference/ui/repeater/HOW-TO

Repeater

Using a Repeater requires the repeater module. {%snippet article-require-repeater-module%} Other modules which will be used in the code samples in this article: {%snippet article-require-modules-repeater%}

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

<Page>
  {%raw%}<Repeater items="{{ myItems }}" />{%endraw%}
</Page>

Define the Repeater itemTemplate property.

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

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

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

Repeater with WrapLayout inside ScrollView.

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

Using Repeater with Array

{%snippet article-repeater-with-array%}

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. {%snippet artcle-array-push-element%}

Using Repeater with different layout.

{%snippet article-repeater-layout%}

Using Repeater with ObservableArray

{%snippet article-repeater-observablearray%}

When using ObservableArray the repeater will be automatically updated when items are added or removed form the array. {%snippet article-push-to-observablearray%}