Messages are being marked as read outside the chat screen

Sendbird Chat UIKit React Native
1

Messages are being marked as read outside the chat screen

Using the code provided in the tutorial (Send your first message | UIKit React Native SDK | Sendbird Docs), I was able to successfully implement a chat feature in my app using React Native. However, I have noticed that messages are being marked as read outside of the chat view. This issue only occurs when I enter and then exit the chat. After doing so, all messages are automatically marked as read even when I am not actively using the chat feature. The problem persists until the user connects to a different channel or closes the app entirely. After this, new messages will not be instantly marked as read.

// If problem, please fill out the below. If question, please delete.
sendbird/uikit-react-native: "^2.4.1
// What version of the SDK are you using?

[Reproduction Steps]
// Implementing this: Send your first message | UIKit React Native SDK | Sendbird Docs

[Frequency]
// Always after I enter and exit from a channel

2

Hi, it’s not clear to me how to reproduce the issue.

What does “messages are being marked as read outside of the chat view.” mean? Please be as specific as possible.

“This issue only occurs when I enter and then exit the chat.” sounds like how mark as read is supposed to work. Maybe it’s not clear what you mean by enter and then exit the chat.

3

The following link: Send your first message | UIKit React Native SDK | Sendbird Docs provides instructions on how to develop a chat interface using the sendbird uikit in react native. We utilized the provided code to initiate our project, but encountered an issue: Whenever we navigate from a chat or channel back to the chat list, all the messages from the last visited chat are automatically marked as read. This can be identified by the pending message badge appearing and disappearing quickly, and by checking the console logs, which indicate whether a message was read or no

4

Hello,

In Sendbird UIKit, markAsRead is triggered when entering a channel and receiving messages in the channel screen. Therefore, it is expected behavior that all messages in the visited channel are automatically marked as read when moving from a channel(chat) to the channel list.

If your issue is different from what I have mentioned, we would need more specific information to help resolve it.
For example, I would like to know your expectations and requirements regarding the expected and actual behavior.

If possible, please provide more detailed information. Thank you.

5

To recreate the error, follow these steps:

  1. Copy and paste the code from the provided link (uikit with react native): Send your first message | UIKit React Native SDK | Sendbird Docs
  2. Have two users send messages to each other.
  3. The message and a badge showing the number of unread messages should appear.
  4. Enter the chat to read the message.
  5. Exit the chat.

Once step 5 is completed, all messages received from the chat that was just left will be marked as read. This is indicated by the badge disappearing and the message appearing as read on the other user’s screen.

Here is a video of the error:

6

Hello, what version of ChatSDK are you currently using?
I tested it with Chat SDK 4.8.1 and UIKit 2.4.1 but couldn’t reproduce the issue.
Can the issue be reproduced with the sample provided in the following link: https://github.com/sb-repro/mark-as-read-repro?

1 Like
7

Hello Airen,

Upon reviewing the code in the repository, I noticed that the GroupChannelScreen component was using “const GroupChannelFragment = createGroupChannelFragment();” It’s unclear why this caused the behavior mentioned earlier, but once I removed it from the component, everything functioned correctly.

Thank you for your assistance.