NativeScript/apps/tests/ui/repeater/repeater.md

nav-title, title, description

nav-title	title	description
repeater How-To	How-To	Examples for using repeater

Repeater

Using a Repeater requires the repeater module. Other modules which will be used in the code samples in this article:

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

> 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. ### Using Repeater with different layout. ### Using Repeater with ObservableArray > When using ObservableArray the repeater will be automatically updated when items are added or removed form the array.