Render a given number of messages

1

Hi all.

There is a warning popping up for Android in which an inverted FlatList causes performance issues, and apparently SendBird uses this feature internally.

What I want then to render a certain amount of messages to avoid performance issues, but I can’t find any property of createGroupChannelFragment that does that.

[UIKit Version]
sendbird/chat: 4.6.1,
sendbird/uikit-react-native: 2.4.1

[Reproduction Steps]
Entering a chat

2

Hello @omedranoc, this issue is known in React-Native core. It is affected by the length of the message text, not the number of messages.

Since we are a SDK operating on top of React-Native, we cannot provide any workaround patches or hacks that would compromise backward compatibility. Instead, we display a warning to alert users about this issue.

Currently, the options available are to follow the methods mentioned in the existing issue thread for applying a patch, customize the message component, or wait for a fix from the React-Native team.

Thank you.

2 Likes
3

Hi @Airen_Kang, thank you very much for taking the time to respond, and I understand what you are telling me.

The other question would be, if it is not at the level of length but at the level of number of messages, I see that when I use renderMessage, GroupChannelFragment is rendered for each message that is in a group channel, in the documentation is there information about pagination of messages, since so far I have searched and can’t find, or the pagination is automatic and handled by SendBird inside, I mention it in order to avoid that a group channel that has 10,000 messages, they are all rendered when opening that chat.

Thank you in advance.

1 Like
4

Yes, the GroupChannelFragment utilizes the message collection of the Sendbird Chat SDK to handle message data.

The message collection has pagination functionality(docs), and this is automatically handled internally by the UIKit (code).

To adjust the default pagination limit value set in the UIKit, you can use the collectionCreator prop of the GroupChannelFragment.

<GroupChannelFragment
  channel={channel}
  collectionCreator={(options) => channel?.createMessageCollection({ limit: 200, ...options })}
/>
1 Like
5

React Native 0.72.4 includes the performance fix! See comment on same issue referenced above.

In my early testing, I’m not seeing performance degradation in Android, but I don’t have any channels with a ton of conversations. Can someone with a richer test environment confirm?

Also @sendbird team, can we get the warning message removed for clients using React Native 0.72.4+?

1 Like
6

Thank you for your kindness @curthipster!
We will update this after testing. Thank you.