MessageList inverted doesn't initially display first message if conversation is long

[TianrenWang]

Describe the bug

1. Uninverted MessageList doesn't initially display the earliest page of the channel (if the channel has multiple pages of messages). Instead, it displays the latest page of the channel.
2. If you want to load the earlier messages, you have to scroll to the BOTTOM even though the earlier messages should appear ABOVE the first message being displayed.

Dev environment info (please complete/provide the following information):

"expo": "~43.0.0",
"react-native": "0.64.3",
"stream-chat": "^6.5.0",
"stream-chat-expo": "^4.3.1"

This is in my real device iPhone SE, version 15.4.1

To Reproduce Steps to reproduce the behavior:

1. Start a channel and send a large number of messages (maybe 100?) and display it with MessageList component.
2. Set the inverted prop of MessageList to false
3. Notice that the first message displayed in the list is not the first message that was sent in this channel
4. You cannot get the earlier messages by scrolling up

Expected behavior MessageList that is not inverted should display the earliest page of messages rather than the latest page. If this is fixed, then behaviour 2 should be fixed too.

Additional context For my application, I just want to display messages from the top (earliest) rather than from the bottom (latest) of the conversation. If there is an elegant solution that doesn't involve manipulating inversion of MessageList, then I am happy to take that solution instead of waiting for a fix for this.

[TianrenWang]

I figured out a workaround for this issue. MessageList displays messages that the current channel object has fetched. On initialization, channel fetches the latest 100 messages. The following code will populate channel with all the messages (I am assuming that all of my channels have less than 999 messages):

channel
      .query({
        messages: { limit: 999, id_lt: channel.lastMessage().id },
      })

One more thing that I had to do for the UI to work properly was to load the <Channel> component ONLY after all my 999 messages are fetched by channel. If I didn't do this, the UI will only display the latest 100 messages, and I would have to refresh the screen to see all 999.

[vanGalilea]

Hey @TianrenWang, thanks for reaching out. I have managed to reproduce this issue, and I'll be adding it to our backlog.

Your solution might work, but we want to ensure this issue will be fixed more sustainably.

[vanGalilea]

loadMore logics can be found here

loadMoreRecent and loadMore might be needing inversion when inverted=false on MessageList

naming change suggestion: loadMore --> loadMoreStart loadMoreRecent --> loadMoreEnd

[vanGalilea]

https://user-images.githubusercontent.com/25864161/187430993-c722dcb2-2e94-43fa-9e94-ca3c00742501.mp4

• first message is 'test' from december
• after scrolling the 2nd page is shown at the top instead at the bottom
• date labels should also be inverted
• when a new message is entered, it should scroll to top instead of bottom

[vanGalilea]

Hey team! Please add your planning poker estimate with ZenHub @madsroskar @santhoshvai @vishalnarkhede

[TianrenWang]

@vanGalilea thanks for responding to this problem. I actually found a graceful solution, and that is to use loadChannelAtMessage function of ChannelContext. However, a slight issue I found with this function is that the channel automatically scrolls to the bottom when I call it, but I want the screen to stay at the message I loaded at. Is there a small part of the source code that I can modify to adjust this behaviour?

[vishalnarkhede]

Fixed in https://github.com/GetStream/stream-chat-react-native/releases/tag/v5.4.2