NativeScript FancyListView 🍵

Install

tns plugin add nativescript-fancy-list-view

Usage

IMPORTANT: Make sure you include xmlns:lv="nativescript-fancy-list-view" on the Page element any element can be used in the list

<lv:FancyListView items="{{items}}" row="2" id="listView">
            <lv:FancyListView.itemTemplate>
                <GridLayout rows="auto, *" columns="*" backgroundColor="red">
                    <Label text="{{title}}"/>
                    <Image row="1" src="{{image}}"/>
                </GridLayout>
            </lv:FancyListView.itemTemplate>
</lv:FancyListView>

Multi Template

<lv:FancyListView itemTemplateSelector="$index % 2 === 0 ? 'even' : 'odd'" items="{{items}}" id="listView">
      <FancyListView.itemTemplates>
        <template key="even">
          <GridLayout rows="auto,auto,*" columns="*">
            <Label text="Even"/>
            <Label row="1" text="{{title}}"/>
            <Image loaded="loadedImage" row="2" src="{{image}}"/>
          </GridLayout>
        </template>
        <template key="odd">
          <GridLayout rows="auto,auto ,auto,*" columns="*" backgroundColor="white">
            <Label text="Odd"/>
            <Label row="1" text="{{title}}"/>
            <StackLayout row="2">
              <Label text="{{image}}"/>
            </StackLayout>
            <Image loaded="loadedImage" row="3" src="{{image}}"/>
          </GridLayout>
        </template>
      </FancyListView.itemTemplates>
    </lv:FancyListView>

Angular

import { FancyListViewModule } from "nativescript-fancy-list-view/angular";

@NgModule({
    imports: [
    FancyListViewModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

Angular v2

<FancyListView [items]="items" #listview (itemTap)="onTap($event)" class="listview">
        <template let-i="index" let-item="item">
            <GridLayout class="list-item" rows="auto, *" columns="*" backgroundColor="red">
                <Label  [text]="item.title"></Label>
                <Image row="1" [src]="item.image"></Image>
            </GridLayout>
        </template>
    </FancyListView>

Angular v4+

<FancyListView [items]="items" #listView (itemTap)="onTap($event)" class="listview">
        <ng-template let-i="index" let-item="item">
            <GridLayout class="list-item" rows="auto, *" columns="*" backgroundColor="red">
                <Label  [text]="item.title"></Label>
                <Image row="1" [src]="item.image"></Image>
            </GridLayout>
        </ng-template>
    </FancyListView>

Multi Template

 public templateSelector = (item: any, index: number, items: any) => {
    return index % 2 === 0 ? 'even' : 'odd';
  }

<FancyListView [items]="items | async" [itemTemplateSelector]="templateSelector"  #listView (itemTap)="onTap($event)" class="listview">
        <ng-template flvTemplateKey="even" let-i="index" let-item="item">
            <GridLayout class="list-item" rows="auto,auto,*" columns="*">
                <Label text="Even"></Label>
                <Label row="1" [text]="item.title"></Label>
                <Image loaded="loadedImage" row="2" [src]="item.image"></Image>
            </GridLayout>
        </ng-template>

        <ng-template flvTemplateKey="odd" let-i="index" let-item="item">
            <GridLayout class="list-item" rows="auto,auto,auto,*" columns="*" backgroundColor="white">
                <Label text="Odd"></Label>
                <Label row="1" [text]="item.title"></Label>
                <StackLayout row="2">
                    <Label [text]="item.image"></Label>
                </StackLayout>
                <Image loaded="loadedImage" row="3" [src]="item.image" ></Image>
            </GridLayout>
        </ng-template>

    </FancyListView>

Configuration

<FancyListView items="{{items}}" itemWidth="25%" itemHeight="50%" max="75%" min="20%" spanCount="2" layoutType="grid"><FancyListView>

Properties