Is it possible to pre-compute all row heights?

I’m trying to build a chat app, but the size of messages could vary wildly. The chat starts from the bottom (so I want to use initialTopMostItemIndex={messages.length - 1}.

The problem is that because you can have large differences message heights, when you scroll up it is very janky.

This is only a problem because obviously the height of each row has not been computed, so it is computing them on the way up.

#44 I checked this out and had hope for the <Virtuoso style={{rotate(180deg) scaleX(-1)}}> solution presented by @iJimmyWei, but unfortunately, it messes up the scrollbar direction, so it isn’t usable.

Possibly a feature request, but Is there a way to pre-compute all row heights? Perhaps via a prop? It’s not feasible for all products, but for some, it won’t actually impact performance much I imagine.

Another change would be to measure all the rows on the way down in initialTopMostItemIndex but I fear that could be expensive.

I’m exploring this project as a replacement for react-virtualized in my current project which while great can be a nightmare to get some features to work.

[jmeistrich]

I was encountering a similar problem and I noticed scroll was stuttering only if the initially topmost item was unusually large. Setting defaultItemHeight to my lists’s minimum item size solved the problem for me. @dilizarov Maybe that will fix it for you? @petyosi I can’t quite follow the internal logic of how defaultItemHeight is used, but if no default is provided would using the minimum size of all rendered items as the expected default work better?

[petyosi]

The problem is that because you can have large differences message heights, when you scroll up it is very janky.

This should work fine in v1, see #203 for instructions on upgrade.