[info] Always start at the bottom of the list

[nicgutierrez]

Hi! I'm building a chat system using React Virtuoso and I'm using scrollToIndex to scroll right to the bottom of the list, with a tiny delay. This works "ok" but as I said there's a tiny delay. I was wondering if there's a way to automatically show the list scrolled at the bottom already?

Thanks!

[petyosi]

Hey,

there are 2 probing rendering cycles that are necessary for Vrituoso to determine the probable size of the items. From what you describe, the delay might be related to that. Do you have the whole thing (or part of it) working somewhere? I can take a look.

[iJimmyWei]

For anyone looking at this issue when building a "chat" system, one way to get around this is to apply a transformation on the Virtuoso style prop, i.e <Virtuoso style={{rotate(180deg) scaleX(-1)}}> and then apply the same transformation but on the ItemContainer too (so the item is reversed back to be readable again).

The scrollbar itself naturally reverses too (works on mac, chrome and firefox), so you'll be starting from the bottom. Furthermore, you'll have to manually invert scrolling. This kind of methodology works well as onEndReached will get called properly when you scroll to the "top".

The idea was taken from https://facebook.github.io/react-native/docs/flatlist#inverted where they apply a transformation too for their inverted prop.

[petyosi]

@iJimmyWei Thanks for sharing that! I am working on this feature right now (with a timeline / chat UI in mind), should be available in the upcoming weeks.

[nicgutierrez]

Thanks both @iJimmyWei and @petyosi!

@petyosi do you want to keep this open until the release? Otherwise, feel free to close.

Thanks again,
Nic

[petyosi]

@nicgutierrez Yes, I will keep this open to notify you on when it is ready, as I will appreciate feedback on the behavior.

[ysael]

Hi from 🇨🇦 and great work @petyosi I was wondering if its possible to do like @iJimmyWei is proposing but avoid that part --> The scrollbar itself naturally reverses too thanks in advance and hopefully we can start leveraging the lib in our current project 👍

[petyosi]

@ysael @nicgutierrez - v 0.13.1 includes the necessary configuration: https://virtuoso.dev/initial-index/

Check the rest of the new items from the navigation, they might be relevant for your cases. Cheers!