Scrolling up very choppy after using scrollToIndex

[manuhook]

Hi, thank you for this great lib !
I would like to replace Flatlist with it on our app but I'm facing an annoying bug with scrollToIndex.

Current behavior

On Android or iOS, when using scrollToIndex on large list (around 500 items), once the scrollToIndex is done, when I scroll up, the scroll is very choppy. scrolling dow is fine.

iOS : iPhone 12 Pro max : https://imgur.com/a/kf5zvBC
Android : Samsung Galaxy S7 : https://imgur.com/a/fwBBlUt

Expected behavior

Scrolling up should be fluid.

To Reproduce

this.listRef.scrollToIndex({animated:false, index: index})

Adding a setimeout is not helping.

Platform:

• iOS
• Android

Environment

"@shopify/flash-list": "^1.2.1"

Thank you for your help.

[naqvitalha]

Does it work fine with FlatList? If yes, can you share a video?

I understand what's going on but I also want to understand if this works with FlatList.

[manuhook]

Yes it's working with Flatlist but it's much slower (40 secondes on the Galaxy S7)

Here a video on the iPhone 12 Pro with Flatlist : https://www.cookomix.com/temp/RPReplay_Final1662112584.mp4

[manuhook]

Looks like I have the same behavior if I use initialScrollIndex

[Saad-Bashar]

Yup same here, the scrollIndex is also not going to the correct index.

[oiver555]

Any fix or workaround on this? Or better yet if anyone can give an explanation as to why this is happening would be helpful.
I'm having the same issue, and this is only thing holding me back from making the switch to FlashList which is something I really want to do.

@manuhook Were you able to find a workaround?

[manuhook]

Any fix or workaround on this? Or better yet if anyone can give an explanation as to why this is happening would be helpful. I'm having the same issue, and this is only thing holding me back from making the switch to FlashList which is something I really want to do.

@manuhook Were you able to find a workaround?

Nop I didn't find a workaround with FlashList, I changed my approach by still using FlatList with this library to avoid the problem when a scroll to index is needed : https://github.com/GetStream/react-native-bidirectional-infinite-scroll

[RalissonMattias]

Oh, same problem here

[brunoducattii]

Same here

[joesermon]

Same problem @naqvitalha any news on this issue please ?

[siddharth-kt]

@naqvitalha and updates on this ?
This issue it similar to my discussion
: #562

[gvanderclay]

I've been seeing this issue on my end as well, with a list that has items with variable heights. I'm guessing it has something to do with the items being recycled above the item that is being scrolled to.

[zulfio]

same here

[normenster]

@naqvitalha This also happens on horizontal lists with items that differ in width size. For example: i scroll to the end programmatically with scrollToEnd. Then i scroll back the flashlist with swiping gestures. The flashlist always jumps a little making it look like it stutters. This only happens on the first scroll. It seems that calculations are wrong when scrolled
to programmatically in the first place. I had to switch back to recyclerlistview because of that. That lib is very great, hopefully a fix for that is on a roadmap somewhere. That would be just great!

[MichalKrakow]

I would just say it's not trivial task to keep smooth scroll while elements rendered before on the list (wchich is the relative start of coordinate system) keeps changing height. Someone with precise insight into how this works would come up with solution. I think allowing for negative scroll values in this case might make this easier to keep smooth scroll while changing list height. For now i use setTimeout with about 500ms delay and scroll down to desired position. It works in most cases.

[irisjae]

I've published an analysis of this problem and a patch here; feel free to test it out.

[erquhart]

@irisjae incredible work on this! Definitely trying your patch out as soon as I'm able.

[irisjae]

Glad you find the effort useful! Hopefully we can get some maintainers to chime in too.

[SergioAN007]

@irisjae, Your patch works great for a single-column list. Is there a way to adapt it for a list with two or more columns? Thank you!

[irisjae]

@SergioAN007 Not without further work on the patch, unfortunately.

This patch works by reimplementing the layout algorithm of flash-list/recyclerlistview (separately implemented in the Javascript layouting, and also natively in Swift and Kotlin). The algorithm itself is not algorithmically complex and even fairly short, but has a few edge cases to look out for in testing on real devices. In principle it should be simple enough to add support for multiple columns, but since I did not have an app that used multiple columns, I did not have a good test case to validate a multiple column implementation and decided to simplify it that way.

If your use case is simple enough (e.g. predictable number of columns, same height for columns within a row), as a workaround, perhaps you could try to implement each row as a single column.

If you'd like to work on this, I'm happy to provide any help. If the maintainer decides to work on merging my patch, I probably will also be motivated to look into it, so you might also consider voicing your support to help make that happen.

[SergioAN007]

@irisjae Thank you for your response and the work you've done. Of course, I vote for merging your patch into the main branch. It is crucial for the proper functioning of lists with items of varying heights.

I probably won't be able to help you in developing the solution, but I'm ready to assist with testing. Right now, I have a list of items in two columns with sections (one column in row). The sections and columns have different heights, items in the same row have the same height.

[bolandrm]

We're also unable to use FlashList due to this issue.