Quote reply

Message threading is a feature that allows users to reply to each other's messages in a channel. Users can ask questions, give feedback or add context to a specific message without interrupting the conversation flow. A message thread refers to a group of messages and their replies. Sendbird Chat UIKit for React Native currently only supports quote reply that allows users to exchange and view both non-reply messages and replies in one channel view.

To view the image in full screen, click on the

Quote reply currently has the following limitations:

• UIKit message threading is available for group channels and supergroup channels only.
• Sendbird UIKit only supports 1-depth threads, meaning you can only reply to the original message.

To turn on quote reply mode, set the reply type to quote_reply:

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

const App = () => {
  return (
    <SendbirdUIKitContainer
      appId={APP_ID}
      uikitOptions={{
        groupChannel: {
          replyType: 'quote_reply', // 'none', 'quote_reply'
        },
      }}
    />
  );
};

In a group channel, the messageListComponent of GroupChannelModule allows users to tap and hold the message they wish to reply to. A Message menu will appear and once they tap Reply, they can start quote replying using the reply mode of the Input component. A message that already has a reply is called a quoted message and the replied message is called a reply. Both quoted messages and replies can be in the form of a user message or file message.

The Message menu contains an Emoji reaction bar, a Copy button, and a Reply button. To view the menu, long tap on a message in channel view. Then, tap Reply in the menu to quote reply to the selected message. The onPressSendUserMessage() method of GroupChannelFragment is invoked and the selected message becomes a quoted message.

The Reply button of a message that's already a reply appears as deactivated because the Chat UIKit only supports 1-depth replies.

To view the image in full screen, click on the

The Delete button of a quoted message that has one or more replies appears as deactivated. To delete the quoted message, its replies must be deleted first.

To view the image in full screen, click on the

The UI for quote reply can be customized through the string resource, color resource and icon resource.

The following table shows customizable properties of StringSet.

interface StringSet {
    LABELS: {
        REPLY_FROM_SENDER_TO_RECEIVER: (
          replyMessage: SendbirdUserMessage | SendbirdFileMessage,
          parentMessage: SendbirdUserMessage | SendbirdFileMessage,
          currentUserId?: string,
        ) => string;
        CHANNEL_MESSAGE_REPLY: string;
        CHANNEL_INPUT_PLACEHOLDER_REPLY: string;
        CHANNEL_INPUT_REPLY_PREVIEW_TITLE: (user: SendbirdUser) => string;
        CHANNEL_INPUT_REPLY_PREVIEW_BODY: (message: SendbirdUserMessage | SendbirdFileMessage) => string;
    };
    TOAST: {
        FIND_PARENT_MSG_ERROR: string;
    };
}

The following table shows customizable reaction icons.

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

Icon.Assets['reply'] = require('your_icons/reply_icon.png');