[info] Always start at the bottom of the list

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]

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

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