Unread messages auto reads

Sendbird Chat UIKit React Native
1

[Problem/Question]
// Detailed description of issue.
I am currently using the sendbird chat ui kit for react native. For chat screen I am using the createGroupChannelFragment and for the home screen to list all the group channels I am using createGroupChannelListFragment. Now the issue is, when I read a message from a particular channel and come back to home screen and later on if I get any new message in that particular group channel which was initially opened, the message shows up as unread for a second or 2 and then get read automatically. I want to make the messages state as unread till the time the user has not opened that particular group channel and read the message.

// If problem, please fill out the below. If question, please delete.
[UIKit Version]
// What version of the SDK are you using?

@sendbird/uikit-react-native “^2.5.0”

[Reproduction Steps]
// Please provide reproduction steps and, if possible, code snippets.
Have two screens. One with createGroupChannelListFragment and another which routes to the createGroupChannelFragment with that particular channel url. Open a particular channel and read any message from the channel fragment and again go back to the Channel List fragment screen. Now, if you get any new message in that groupChannel it will get automatically read.

[Frequency]
// How frequently is this issue occurring?
By default it is happening.

[Current impact]
// How is this currently impacting your implementation?
Did not find any work around for this due to which our development is stuck with this bug.

3

Hello @poojesh_shetty ,

Welcome to the Sendbird community!
To keep the messages in a group channel as unread until the user opens and reads them, you can use the markAsRead() method in the Sendbird Chat SDK.

In your React Native code, you can call the markAsRead() method when the user opens a group channel. This will mark all the messages in that channel as read.

You can refer markAsRead() method, found here: Mark messages as read | Chat JavaScript SDK | Sendbird Docs

Let me know if you have any queries.

4

problem is not reading the message. problem is message gets auto read in the home screen where we list all the chat preview.
I am adding a video. So once i open a message and go back to the home screen somewhere I guess it is listening and marking the messages read though the main chat screen is not openend.

5

Thanks for clarifying and sharing the video.
Could you please share the implementation details and code snippets for the same so that I can test and see if its reproducible .

6

Hi. Appreciate your reply.
I have refactored the code and used the plain send bird chat ui component for react native for now. I am also attaching a video for the same issue happening using the plain send bird UI kit.
GroupChannelList fragment -
This lists down the preview of all the user chats preview

const ChatHomeScreen = () => {
  const GroupChannelList = createGroupChannelListFragment();

  return (
    <GroupChannelList
      onPressChannel={channel =>
        NavigationService.navigate('ChatScreen', {
          channelUrl: channel.url
        })
      }
    />
  );
};

GroupChannelFragment
This shows the main chat screen for the send bird

const ChatScreen = () => {
  const navigation = useNavigation();
  const { params } = useRoute();

  const { sdk } = useSendbirdChat();

  const { channel } = useGroupChannel(sdk, params.channelUrl);

  const GroupChannelFragment = createGroupChannelFragment();

  if (!channel) return null;

  return (
    <GroupChannelFragment
      channel={channel}
      onPressHeaderRight={() => {
        navigation.navigate('GroupChannelSettings', {
          channelUrl: params.channelUrl
        });
      }}
      onPressHeaderLeft={() => {
        navigation.goBack();
      }}
    />
  );
};

In the video, if I get the notification it does not get read automatically. Once I open the chat and then go back to the home screen then later on any new message that comes up gets read automatically.

7

Hi @poojesh_shetty
I just tried testing this using our latest react native version but was unable to reproduce the issue. Do you mind testing this using our latest RN version and share your observations? Additionally do let us know if you have done any customisations at your end?
Please refer below link for the latest version :