Read receipt

Read receipt is a feature that allows a user to know whether their messages have been read by other users in the channel. The UI for read receipt appears in the MessageList component of the GroupChannel module and in the ChannelPreview component of the GroupChannelList module. If the sender's message has been read by all recipients in the channel, a colored double-tick icon will appear above the message’s timestamp. Read receipt is only visible to the sender of the message.

How to use

While the read receipt feature is turned on by default in the GroupChannel module, you have to set the feature's setter method to true in the GroupChannelList module. Implement the code below to turn on the read receipt in a channel list view.

Using SendbirdProviderUsing GroupChannelListUsing GroupChannelListProvider

import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';


const CustomApp = () => {
  return (
    <SendbirdProvider
      // ...
      isMessageReceiptStatusEnabledOnChannelList
    >
      {/* implement custom app with useSendbirdStateContext() */}
    </SendbirdProvider>
  );
};

Customize the UI for read receipt

You can customize the UI for read receipt by using the following code.

import { SendingStatus } from '@sendbird/chat/message';
import { GroupChannel } from '@sendbird/uikit-react/GroupChannel';
import { useGroupChannelContext } from '@sendbird/uikit-react/GroupChannel/context';
import { Message } from '@sendbird/uikit-react/GroupChannel/components/Message';

const CustomMessage = (props) => {
  const { message } = props;
  const { currentChannel } = useGroupChannelContext();
  if (message.sendingStatus === SendingStatus.SUCCEEDED
  && currentChannel?.getUnreadMemberCount?.(message) === 0) {
    return (
      // Implement if the message was read by all channel members.
    );
  }
  return null;
};

const UseGroupChannel  = () => {
  return (
    <GroupChannel
      // ...
      renderMessage={(props) => (
        <CustomMessage {...props} />
      )}
    />
  );
};

Note : The same double-tick icon is used for both read receipt and delivery receipt. The only difference is the color of the icon. Default icon colors used for read receipt are secondary_300 for Light theme, and secondary_200 for Dark theme.

On this page

How to use Customize the UI for read receipt

Sample app