Add margin bottom to last ListView item in NativeScript

Question

What I'm trying to achieve is allow a ListView to scroll past the last item in the list, in order to clear a floating button on the bottom of the list view:

I did this for now by adding padding to the last item in the list, so list will scroll past the last item:

While this looks ok, the problem is that the user can tap on the blank space on the bottom of the list:

Adding margin to the last element doesn't seem to work.

Any idea how can I achieve this behavior without the issues. For a working example, please see the Gmail Android app.

PS: I don't want to migrate to the RadListView, if that would fix the issue, as RadListView has some performance penalties :(

@Peter That doesn't solve my problem: the StackLayout is still clickable — Nicu Surdu
That's my bad, I always use RadListView. ListView doesn't have one, you might have to do it natively. — Manoj

Aosi Aosi · Accepted Answer · 2020-09-24T05:31:58

I think this is a job for...nsTemplateKey

<ListView [items]="items" class="list-group" [itemTemplateSelector]="templateSelector" row="0">
<ng-template nsTemplateKey="regular" let-item="item" let-i="index">
    <GridLayout (tap)="regularAction()">
        <Label [text]="item.name" backgroundColor="red" color="white"></Label>
    </GridLayout>
</ng-template>

<ng-template nsTemplateKey="margin" let-item="item" let-i="index">
    <GridLayout marginBottom="50" rows="auto, *">
        <Label row="0" (tap)="innerClick()" [text]="item.name" backgroundColor="green" color="yellow"></Label>
        <Label row="1"><Label>
    </GridLayout>
</ng-template>

Now we just require the last item to have special params and options:

templateSelector(item, index: number, items: any) {
    return index < items.length -1 ? "regular" : "margin";
}

I think this is a nice way to do this, now you can also use isPassThroughParentEnabled and isUserInteractionEnabled with your current code, you will have to play a lil bit with all this options and find the best solution for you, cheers.

<ListView [items]="items" class="list-group" 
      backgroundColor="red" separatorColor="blue">
<ng-template let-item="item">
    <GridLayout height="60" isPassThroughParentEnabled="!isLast">
        <Label (tap)="action" isUserInteractionEnabled="!isLast"[text]="item.name" class="list-group-item" color="white"></Label>
    </GridLayout>
</ng-template>

Add margin bottom to last ListView item in NativeScript

1 Answers