[info] Always start at the bottom of the list about react-virtuoso HOT 7 CLOSED

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.

from react-virtuoso.

@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.

from react-virtuoso.

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

from react-virtuoso.

@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!

from react-virtuoso.

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.

from react-virtuoso.

Thanks both @iJimmyWei and @petyosi!

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

Thanks again,
Nic

from react-virtuoso.

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 👍

from react-virtuoso.