Handle starting from a random point in the bidirectional-list

[kidroca]

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)

• when the list is opened
• we show a general loading as the initial batch (500 - 525) are loading
• then we render 500 - 525. We want be anchored at 500 but we actually see message 525 on the bottom of the list
• then we fix scroll position by scrolling to the indexOf message 500
• this triggers a onStartReached which is OK and loads messages above 500 (475 - 500)
• scroll position stays at 500 - OK

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 data

When 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

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

[kidroca]

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

1. you have an inverted list
2. when you are near the to bottom of the chat (recent messages) (depends on the threshold)
3. when new message arrives
4. the list auto scrolls down (since it's inverted) to review the new message
5. Otherwise (outside of threshold or false) when a new message arrives scroll position is not affected and you can manually scroll down by swiping if you want to

https://getstream.github.io/react-native-bidirectional-infinite-scroll/props#enableautoscrolltotop

[kidroca]

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