Nativescript: ListView component is crashing when scrollToIndex() is used with async data source

[bozhidarc]

The issue can be seen on the link bellow.
I make a sample with a list of dogs breeds which is loaded from a REST service (DogService).
The ListView is bound to an Observable from BehaviorSubject (DogStore).
After the data is loaded from the REST service it is passed to the store.
If after the data is passed to the data store the scrollToIndex() method is called the app crashes.

In the example I made maybe there is no sense to passing data like that but in a bigger project where the data can come from a different data sources I think there is.
I'm open to suggestion for alternative implementations.

https://play.nativescript.org/?template=play-ng&id=ehB2Sd

[tsonevn]

Hi @bozhidarc,
Thank you for the sample project.
I reviewed the case and was able to reproduce the issue with the async pipe only on the iOS device.
Could you confirm that the issue is reproducible only for iOS or the problem also exists for Android?

[bozhidarc]

I can say with sure that it can be reproduced for iOS, I didn't try it for Android.

[bozhidarc]

Is there any chance this can go with the next release? :)

[tsonevn]

Hi @bozhidarc,
This issue is still under review, and I could not commit to the exact time when the fix will be available.

At this time I would suggest keeping track on the issue, and we will update it when we have further info.

[fhackenb]

@tsonevn any update on this? I'm getting a similar issue (for iOS, haven't tried android). I have two pages with listviews and everytime a new item comes in, I push it to the bottom of the list and scroll to the bottom using scrollToIndex(listLength - 1). It doesn't crash consistently, appears to happen only after switching back and forth between pages a few times and inserting new items.

I've tried surrounding the function call with a try{}catch block, but I'm not getting any output, the app just crashes.

[tsonevn]

Hi @fhackenb,
First of all, thank you for your interest in NativeScript.
The issue is still under review, and I can not commit to the exact time when the fix will be available.
At this time I would suggest keeping track on the issue, and we will provide more info on it when the fix is available.

[fhackenb]

Thanks @tsonevn. In the meantime, are you aware of a work-around to scroll to the bottom of a list w/o calling the scrollToIndex function?

[fhackenb]

@tsonevn Any update on this? For android the scrollToBottom function doesn't cause issues but for iOS it occasionally crashes. Alternatively is there a way to catch this error instead of having it crash the app? Because surrounding the call in try{}catch blocks does not do the trick

[idroxid]

Hi,
I have the same problem. What I did and seems to be a temporary workaround is to call the scrollToIndex in a timeout. In my case, 20ms is sufficient to prevent the app from crashing.

setTimeout(() => { this.listView.scrollToIndex(items.length - 1); }, 20);

[abhayastudios]

I am facing the same issue on iOS only (Android works fine). Even with the setTimeout it occasionally crashes. By the way, even when I don't use an async pipe it crashes occasionally without the timeout.

[manoldonev]

https://github.com/NativeScript/NativeScript/pull/6182 should address the crash.

As for the setTimeout(...) workaround -- generally we do not have control over which will execute first between the async pipe and the observable subscription (obviously the latter does so items are not set when scrollToIndex(...) is called). So if you do not want to use the timeout you can remove the async pipe from html and move the items' initialization logic in the subscription like this:

    ngAfterViewInit() { 
        this.dogsStore.dogs$.subscribe((breeds) => {
            if (breeds.length === 0) {
                return;
            }

            const listView = this.listview.nativeElement as ListView;
            listView.items = breeds;
            listView.scrollToIndex(breeds.length - 1);
        });

        this.dogsService.getDogs().subscribe((breeds: string[]) => { 
            this.dogsStore.addDog(breeds)
        }, (err) => { 
            console.log(err);
        });
    }

[liam-nirvana]

Hi @fhackenb, I have the same problem, Are you fix it now ?

[tsonevn]

Hi @liam-nirvana,
The problem is fixed with PR https://github.com/NativeScript/NativeScript/pull/6182. If you still facing an issue, please send us a sample project, that can be used for debugging.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.