Nativescript ListView scrollToIndex with animation on android

Question

I am developing a chat app, when list loaded and when a new item added to list I need to scroll to bottom of list. I can do that with this.

scrollToBottom() {
  let lv =  <ListView>frame.topmost().getViewById('messageList');
  lv.scrollToIndex(this.store.items.getValue().length - 1)
}

But it showing bottom of list instant

There is a guide to do that on IOS but not on Android

private srollListView(position: number) {
     if (this._listView.ios) {
        this._listView.ios.scrollToRowAtIndexPathAtScrollPositionAnimated(
            NSIndexPath.indexPathForItemInSection(position, 0),
            UITableViewScrollPosition.UITableViewScrollPositionTop,
            true
        );
     }
     else {
         this._listView.scrollToIndex(position);
     }
}

link to guide: http://nuvious.com/Blog/2016/4/4/how-to-make-the-nativescript-listview-scrolltoindex-animated-on-ios

Is there any way to do that on Android?

Refer Similar Question here : stackoverflow.com/a/38305534/6449750 — Hardik Vaghani
– Hardik Vaghani, Commented Jan 9, 2017 at 10:10

Nikolay Tsonev · Accepted Answer · 2017-01-09 13:17:32Z

3

You could use smoothScrollToPosition android method, which provides smooth scroll for the ListView, which you need. I am providing sample code.

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
    <GridLayout>
        <ListView items="{{ source }}"  id="lvid" loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
            <ListView.itemTemplate>
                <StackLayout>
                    <Label text="{{title}}" textWrap="true" />
                </StackLayout>
            </ListView.itemTemplate>
        </ListView>
    </GridLayout>
</Page>

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import {ListView} from "ui/list-view"

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {

    let page = <Page>args.object;
    var array=[];
    for(var i=0;i<100;i++){
        array.push({title:"title"+i});
    }
    page.bindingContext = {source:array};

    setTimeout(function(){
        var listview:ListView =<ListView> page.getViewById("lvid");
        listview.android.smoothScrollToPosition(60);
    }, 4000)
}

answered Jan 9, 2017 at 13:17

Nikolay Tsonev

1,9193 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Samed Over a year ago

It works. Thank you. Is there any doc for this and this kind of methods. it feels like it is a secret method? I mean i dig around the doc for it a lot but was not able to find it. Where did you find this? docs.nativescript.org/api-reference/classes/…

Kansen Over a year ago

This method (smoothScrollToPosition) is not nativescript's method but android one, then you'll have all the needed informations docs.nativescript.org/api-reference/classes/… about the attribute 'android' on listviews, then you'll have access to those methods developer.android.com/reference/android/widget/ListView.html which contains smoothScrollToPosition

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Just to let everyone who are still looking for this know, they have added the scrollToIndexAnimated method to ListView since v4.2.0

https://github.com/NativeScript/NativeScript/blob/master/CHANGELOG.md#420-2018-08-08

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 23, 2019 at 15:50

codey

112 bronze badges

Collectives™ on Stack Overflow

Nativescript ListView scrollToIndex with animation on android

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related