Unread messages

Sendbird UIKit for React Native provides features for unread messages that help users keep track of their conversation in group channels. These features are designed to enhance the user experience by allowing users to easily identify and revisit messages they haven't read yet, especially in busy group channels where messages can accumulate quickly. For unread messages, the UIKit provides the following features:

• Unread message count: the number of unread messages appears in the channel list view, helping users quickly identify which channels have new messages they haven't read yet.

• Mark messages as unread: a user can mark messages that have arrived after a certain time point as unread, allowing them to revisit important messages or catch up on the conversation later on. Once this feature is enabled, visual indicators such as a divider and a floating view will appear in the channel view.

• Unread message divider and floating view: visual indicators that help users keep track of unread messages in the channel view. The divider appears at the top of the first unread message, while the floating view indicates the number of unread messages in the channel.

Note: Unread message counts are enabled by default, but marking messages as unread is an optional feature that can be enabled during the UIKit initialization or through Sendbird Dashboard. Both features are available only for group channels.

Unread message count informs users the number of messages they haven’t read in each group channel. If the message count exceeds 100, it will show as 99+.

To view the image in full screen, click on the

Note : In order to use the unread message counts feature, you must first build a channel list-based service and get a channel list view. To learn how to display channel list view, refer to the List channels page.

Users can also mark messages as unread in a group channel. This feature is useful for users who want to revisit important messages or catch up on conversations they may have missed while they were away from the channel.

When a user selects the Mark as unread option from the message menu item, the app will change the read status of the message and those that came after the marked message to unread.

Note: Mark as unread can be used only on user messages, file messages, and multiple files messages.

To view the image in full screen, click on the

Note: Depending on the Reactions settings, the message menu may show up as a bottom sheet or a context menu. If Reactions are enabled, the menu will appear as a bottom sheet. For more information on Reactions, refer our guide on Reactions.

To enable this feature, you can do one of the following:

• Sendbird Dashboard: Log in to Sendbird Dashboard. Then navigate to Chat > UIKit config > Group channel and enable the Mark as unread option.

• UIKit initialization: You can also enable the feature during the initialization of the UIKit: set the isMarkAsUnreadEnabled property in the SendbirdUIKit.init() to true. The default value is false.

Note: The values set during the initialization can overrides the settings configured in the Sendbird Dashboard. When you set isMarkAsUnreadEnabled to true and turn the option off in the dashboard, the UIKit will still use the value set during the initialization.

A Mark as unread button appears in the message menu of each message in a group channel. When a user clicks this button, the messages that arrived after the marked message will be marked as unread.

The button text property can be found in StringSet that appears in the message menu.

interface StringSet {
  LABELS: {
    CHANNEL_MESSAGE_MARK_AS_UNREAD: string;
  };
}

UIKit for React Native provides an icon for the Mark as unread button in the message menu. You can customize the icon by replacing the default image with your own image file.

import { Icon } from '@sendbird/uikit-react-native-foundation';

Icon.Assets['mark-as-unread'] = require('your_icons/icon-mark-as-unread.png');

When a user marks a message as unread, the UIKit provides visual indicators to help them keep track of unread messages in the channel view.

To view the image in full screen, click on the

• Divider: Once a message is marked as unread, a divider will appear at the top of the first unread message in the channel view and visually indicate that there are unread messages in the channel. This can help users quickly identify where they left off in the conversation.

• Floating view: If the divider isn't shown in the current screen but there are one or more unread messages in the channel, a floating view is displayed at the top of the channel view to indicate the unread message count. Tapping on the X button of this view will mark all unread messages as read and make the floating view disappear.

Both of the divider and floating view are customizable properties of StringSet. The following snippet shows how to customize the text of the unread message divider and floating view.

interface StringSet {
  GROUP_CHANNEL: {
    LIST_NEW_LINE: string;
    LIST_FLOATING_UNREAD_MSG: (unreadMessageCount: number) => string;
  };
}