Skip to main content

​
Overview

CometChatThreadHeader is a Component that displays the parent message & number of replies of thread.

​
Usage

​
Integration

The following code snippet illustrates how you can directly incorporate the CometChatMessageList component into your app.
  • App.tsx
import {
  CometChatMessageList,
  CometChatThreadHeader,
} from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
//code
return (
  <>
    {!parentMessage && (
      <CometChatMessageList
        group={group}
        onThreadRepliesPress={(message: CometChat.BaseMessage) => {
          // Set Parent Message
          setParentMessage(message);
        }}
      />
    )}
    {parentMessage && <CometChatThreadHeader parentMessage={parentMessage} />}
  </>
);

​
Customization

To fit your app’s design requirements, you can customize the appearance of the conversation component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

​
Style

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.

​
Thread Header

The CometChatThreadHeader is used in threaded message views, displaying information about the parent message. It provides a seamless way to navigate between the thread and the main conversation.
  • App.tsx
import {
  CometChatMessageList,
  CometChatThreadHeader,
} from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
//code
return (
  <>
    {!parentMessage && (
      <CometChatMessageList
        group={group}
        onThreadRepliesPress={(message: CometChat.BaseMessage) => {
          // Set Parent Message
          setParentMessage(message);
        }}
      />
    )}
    {parentMessage && (
      <CometChatThreadHeader
        parentMessage={parentMessage}
        style={{
        containerStyle: {
          backgroundColor: "#FEEDE1",
        },
        messageBubbleContainerStyle: {
          backgroundColor: "#FEEDE1",
        },
        replyCountBarStyle: {
          backgroundColor: "#FBA46B",
        },
        replyCountTextStyle: {
          color: "#FFFFFF",
        },
        outgoingMessageBubbleStyles: {
          containerStyle: {
            backgroundColor: "#F76808",
          },
        },
       }}
      />
    )}
  </>
);

​
Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. Below is a list of customizations along with corresponding code snippets
PropertyDescriptionCode
parentMessageUsed to to set the message for which the replies need to be fetchedparentMessage={messageObject}
templateUsed to to set custom template for the parent messagetemplate={templateObject}
replyCountVisibilityUsed to toggle reply count visibilityreplyCountVisibility={true}
replyCountBarVisibilityUsed to to toggle reply count bar visibilitytemplate={templateObject}
receiptsVisibilityUsed to to toggle receipts Visibilitytemplate={templateObject}
avatarVisibilityUsed to to toggle avatarVisibilitytemplate={templateObject}

​
Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

​
Template

The template property is used to configure and set a custom template for parent message bubble. It allows for dynamic customization of message appearance, content, or other predefined settings based on the template provided.
  • App.tsx
import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatMessageList,
  BorderStyleInterface,
  AvatarStyleInterface,
} from "@cometchat/chat-uikit-react-native";
//code

const getTemplate = () => {
  //for example customizing text message template
  let templates: CometChatMessageTemplate[] =
    ChatConfigurator.getDataSource().getAllMessageTemplates(theme);
  const textTemplate = templates.find((template) => {
    if (template.type == "text") {
      template.ContentView = (
        messageObject: CometChat.BaseMessage,
        alignment: MessageBubbleAlignmentType
      ) => {
        const textMessage: CometChat.TextMessage =
          messageObject as CometChat.TextMessage;
        return (
          <Text style={{ backgroundColor: "#fff5fd", padding: 10 }}>
            {textMessage.getText()}
          </Text>
        );
      };
      return template;
    }
  });
  return textTemplate;
};

return (
  <>
    {!parentMessage && (
      <CometChatMessageList
        group={group}
        onThreadRepliesPress={(message: CometChat.BaseMessage) => {
          // Set Parent Message
          setParentMessage(message);
        }}
      />
    )}
    {parentMessage && (
      <CometChatThreadHeader
        parentMessage={parentMessage}
        template={getTemplate()}
      />
    )}
  </>
);
⌘I