Chat UIKit React Native v3
Chat UIKit React Native
Chat UIKit
React Native
Version 3

Quote reply

Copy link

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.


Copy link

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.

How to use

Copy link

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

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

const App = () => {
  return (
        groupChannel: {
          replyType: 'quote_reply', // 'none', 'quote_reply'

Reply to messages

Copy link

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.

Message menu

Copy link

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.

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.

Customize the quote reply UI

Copy link

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

String resource

Copy link

The following table shows customizable properties of StringSet.




A text indicating that who has replied to whose message.



A reply text on the message menu.



A placeholder text for the input field when replying.



A preview of title text for the message that's being replied to.



A preview of body text for the message that's being replied to.



An error message shown when a message is selected to see the parent message, but the parent message couldn't be found.

interface StringSet {
    LABELS: {
          replyMessage: SendbirdUserMessage | SendbirdFileMessage,
          parentMessage: SendbirdUserMessage | SendbirdFileMessage,
          currentUserId?: string,
        ) => string;
        CHANNEL_MESSAGE_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;

Icon resource

Copy link

The following table shows customizable reaction icons.



An icon used to indicate that a user replied to another user’s message in a channel.

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

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