ListView

<ListView> is a UI component that renders items in a vertically scrolling list, the template for the items can be defined via itemTemplate (or multiple templates via itemTemplates - more on that below). The ListView only renders the visible items, as the user scrolls, new items render by reusing a no-longer-visible item's view—this is usually referred to as view-recycling.

<ListViewitems="{{ items }}">
 <ListView.itemTemplate>
 <GridLayoutpadding="16"columns="20, *">
 <ContentViewwidth="20"height="20"borderRadius="20"backgroundColor="#65adf1" />
 <Labeltext="{{ title }}"col="1"textWrap="true"marginLeft="8" />
 </GridLayout>
 </ListView.itemTemplate>
</ListView>

constitems= Array.from({ length: 100 }).map((_, i) => ({
 title: `Item ${i}`,
}))

<ListView[items]="items">
 <ng-templatelet-item="item"let-i="index">
 <GridLayout>
 <label[text]="item.title"></label>
 </GridLayout>
 </ng-template>
</ListView>

items = Array.from({ length: 100 }).map((_, i) => ({
 title: `Item ${i}`,
}));

exportfunctionListViewCmp({ navigation }:HomeProps) {

constitems:Array<{ title:string }> = []
for (let i =0; i <100; i++) {
 items.push({
 title: `Item ${i+1}`,
 })
 }
constcellFactory= (item: { title }) => {
return <labeltext={item.title} />
 }
consttestItemTap= (args:ItemEventData) => {
alert(args.index +' - '+ items[args.index].title)
 }

return (
 <frame>
 <pagestyle={styles.container}>
 <actionBartitle="ListView"onTap={() => Frame.goBack()}></actionBar>

 <gridLayout>
 <ListView
items={items}
cellFactory={cellFactory}
onItemTap={testItemTap}
 ></ListView>
 </gridLayout>
 </page>
 </frame>
 )
}

exportconstListView= () => {
constitems= []
for (let i =0; i <100; i++) {
 items.push({
 text: `Item ${i+1}`,
 })
 }
return (
 <>
 <actionbartitle="ListView">
 </actionbar>
 <gridlayout>
 <list-viewitems={items}></list-view>
 </gridlayout>
 </>
 )
}

<scriptlang="ts">
import { Template } from'svelte-native/components'

constitems= []
for (let i =0; i <100; i++) {
 items.push({
 title: `Item ${i+1}`,
 })
 }
</script>

<page>
 <actionBartitle="ListView">
 </actionBar>

 <gridLayout>
 <listView{items}>
 <Templatelet:item>
 <stackLayout>
 <label>{item.title}</label>
 </stackLayout>
 </Template>
 </listView>
 </gridLayout>
</page>

<scriptlang="ts"setup>
constitems= [];
for(let i =0; i <100; i++) {
 items.push({
 title: `Item ${i+1}`
 })
 }
</script>

<template>
 <Page>
 <ActionBartitle="ListView Example">
 </ActionBar>
 <GridLayout>
 <ListView:items="items">
 <template #default="{ item }">
 <StackLayout>
 <Label:text="item.title"/>
 </StackLayout>
 </template>
 </ListView>
 </GridLayout>
 </Page>
</template>

Examples ​

ListView with multiple itemTemplates ​

Individual items can be rendered using a different template. For example, let's say our items can either be headings or items. In that case, we can define a template for them, and pass in an itemTemplateSelector function that will get called before rendering an item.

<ListViewitems="{{ items }}"itemTemplateSelector="{{ itemTemplateSelector }}">
 <ListView.itemTemplates>
 <templatekey="heading">
<!-- template for headings -->
 </template>
 <templatekey="item">
<!-- template for items -->
 </template>
 </ListView.itemTemplates>
</ListView>

// example item definition
typeItemType= {
title:string
type:'heading'|'item'
}

// called for each item in the list before rendering
functionitemTemplateSelector(
item:ItemType,
index:number,
items:Array<ItemType>
) {
return item.type ==='heading'?'heading':'item'
}

Props ​

items ​

items: Array | ObservableArray

Gets or set the items of the ListView.

For static lists using an Array is fine, however for dynamically changed arrays it's recommended to use an ObservableArray to optimize re-rendering performance.

See ObservableArray.

itemTemplateSelector ​

itemTemplateSelector: (
 item: T,
 index: number,
 items: Array | ObservableArray,
) => string

A function to be called when selecting the template for the item.

itemTemplate ​

itemTemplate: KeyedTemplate

Gets or sets the default item template.

Note: this is usually set by the framwork (eg. ListView.itemTemplate via xml).

See KeyedTemplate.

itemTemplates ​

itemTemplates: KeyedTemplate[]

Gets or sets the available itemTemplates.

Note: this is usually set by the framwork (eg. ListView.itemTemplates via xml).

See KeyedTemplate.

separatorColor ​

separatorColor: Color

Gets or sets the color of the line separating each item.

See Color.

rowHeight ​

rowHeight: number

Gets or sets the row height of the ListView. Useful when your items have a fixed height, as the required calculations are greatly simplified and the rendering can be faster.

iosEstimatedRowHeight ​

Gets or sets the estimated height of rows in the ListView. Default value: 44px

...Inherited ​

For additional inherited properties, refer to the API Reference.

Methods ​

refresh() ​

listView.refresh()

Forces the ListView to reload all its items.

scrollToIndex() ​

listView.scrollToIndex(index: number)

Scrolls the item with the specified index into view.

scrollToIndexAnimated() ​

listView.scrollToIndexAnimated(index: number)

Scrolls the item with the specified index into view with animation.

isItemAtIndexVisible() ​

listView.isItemAtIndexVisible(index: number) // boolean

Checks if the item with the specified index is visible.

Events ​

itemTap ​

on('itemTap', (args:ItemEventData) => {
constlistView= args.object asListView
 console.log('Tapped index', args.index)
 console.log('Tapped item', listView.items[args.index])
})

Emitted when a user taps an item in the ListView.

See ItemEventData.

itemLoading ​

on('itemLoading', (args:ItemEventData) => {
constlistView= args.object asListView
})

Emitted when the ListView is loading/recycling an item. args.view is set if the ListView is recycling an item, otherwise it's undefined.

Note: frameworks use this event to update the args.view with new data.

See ItemEventData.

loadMoreItems ​

on('loadMoreItems', (args:EventData) => {
constlistView= args.object asListView

// example: add new items
 listView.items.push(newItems)
})

Emitted when the user reaches the end of the ListView. Useful for loading additional items (ie. infinite scroll).

Native component ​

• Android: android.widget.ListView
• iOS: UITableView

Contributors