Chat UIKit React Native v2
Chat UIKit React Native
Chat UIKit
React Native
Version 2

Delivery receipt

Copy link

Delivery receipt is a feature that allows a user to know whether their messages have been successfully delivered to other users in the channel. Once the recipients in the channel receive a message notification or see the message in the channel list view, it will be marked as delivered. The delivery receipt appears in the MessageList component of GroupChannelModule. If the sender’s message has been delivered to all recipients of the channel, a double-tick icon will appear above the message’s timestamp. Delivery receipt is only visible to the sender of the message.

Note: In order to use this feature, you must first create a channel and start the chat service. To learn how to allow users to chat in a channel, refer to the chat in a group channel page.


How to use

Copy link

The delivery receipt feature is turned on by default in group channels but in order to use it in a channel list view, you need to set the feature's prop to true in SendbirdUIKitContainer. Follow the code below.

import { SendbirdUIKitContainer } from "@sendbird/uikit-react-native";

const App = () => {
    return <SendbirdUIKitContainer chatOptions={{ enableChannelListMessageReceiptStatus: true }} />;
};

Customize the UI for delivery receipt

Copy link

You can customize the UI for delivery receipt through the done-all and done properties of the icon resource.

Icon resource

Copy link

The following table shows customizable delivery receipt icons.

IconImageDescription

done-all

An icon used to indicate that a message has been delivered to all members of a channel.

done

An icon used to indicate that a message has been sent by the current user but not delivered to every member.

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

Icon.Assets['done-all'] = require('your_icons/done-all_icon.png');
Icon.Assets['done'] = require('your_icons/done_icon.png');

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 delivery receipt are onBackgroundLight03 for Light theme, and onBackgroundDark03 for Dark theme.