Open kidroca opened 3 years ago
@kidroca Have you tried passing enableAutoScrollToTop: true
? This prop seems like it might do exactly what we need - anchor the chat at 500 instead of 525.
@roryabraham
@kidroca Have you tried passing
enableAutoScrollToTop: true
? This prop seems like it might do exactly what we need - anchor the chat at 500 instead of 525.
Yes, I did
The prop name can be a bit ambiguous when used together with inverted
it does the opposite and scrolls to the bottom
The short answer is (for an inverted list) you will be on message 525
no matter of enableAutoScrollToTop
value
Here's how enableAutoScrollToTop: true
work in chats:
inverted
listfalse
) when a new message arrives scroll position is not affected and you can manually scroll down by swiping if you want tohttps://getstream.github.io/react-native-bidirectional-infinite-scroll/props#enableautoscrolltotop
Actually here's a prop that I've stumbled on: https://reactnative.dev/docs/virtualizedlist#initialscrollindex
Instead of starting at the top with the first item, start at initialScrollIndex. This disables the "scroll to top" optimization that keeps the first initialNumToRender items always rendered and immediately renders the items starting at this initial index. Requires getItemLayout to be implemented.
It should probably do the trick, but requires getItemLayout
to be implemented
I'm not sure if this is handled or this is the expected behavior - start the bidirectional list from a random point The scroll position is always on the last item when the list is inverted
Let's say we have a chat with 1000 messages and we load chunks of 25 at a time Let's say we want to start from message 500 Here's what we do ATM (we use an
inverted
bidirectional-infinite-scroll
)indexOf
message 500onStartReached
which is OK and loads messages above 500 (475 - 500)The problem is, since that messages are complex we don't use
getItemLayout
and have to wait for the items to be rendered before scrolling, which causes a bad UX Ideally we want to be anchored on message 500 when we load past dataWhen we use a non-inverted list this seems to work OK as scroll position is naturally top to bottom and we're on the top Which brings the question - why use the
inverted
prop at all? The explanation is that most chat apps prefer it that way, but isn't a bidirectional list solving this problem - you can easily add message at the begging as well as at the end