How to show content on top when total content height is less than list height?

[zollipaul]

Desired Behavior
This should happen:

1. When the messages are not big enough to fill the whole list, show them on top.
2. Otherwise, the chat should show the last messages on first render.
   The images below illustrate the above requirements (copied images from [Inverted FlashList] How to show content on upper side when total content height is less than list height? Shopify/flash-list#773)

Can you do that easily with LegendList? Or do I need a complex custom solution with useLayoutEffect (measure height of items via refs before render)?

Same issues exists for FlashList: Shopify/flash-list#773 (unresolved AFAIK)
Also FlatList: https://stackoverflow.com/questions/57161189/can-i-render-from-top-when-using-flatlist-inverted (solved)

[jmeistrich]

LegendList does not use inverted so this is very easy. Just use initialScrollIndex={data.length - 1} to have it scrolled to the end on mount. Messages show at the top by default, nothing to change there. If you did want to show them at the bottom you could set alignItemsAtEnd to true.

See details of these props at:
https://www.legendapp.com/open-source/list/api/props/

[zollipaul]

using initialScrollIndex={data.length - 1} leads to jumpy behavior on inital render and I am not sure this works fine with infinite lists. Using alignItemsAtEnd leads to the problem i initially described. So what I want is like the chat in WhatsApp: infinite scroll + first item render on top + initial scroll is at the end of chat. I don't know if this is feasible with this library yet.

[jmeistrich]

It is feasible. I've done it. What jumpy behavior are you seeing? If you're on the latest version and seeing jumpy behavior it's a bug I want to fix. Can you share a repro or a video?