How to modify a particular message template

How-To Guides
1

Modify a Message Template

This documentation provides a step-by-step guide on modifying message template using our React Native UI Kit.

Guide Details:

Language/Framework: React Native
SDK and UI Kit Versions:

"@cometchat/calls-sdk-react-native": "^4.0.4",

"@cometchat/chat-sdk-react-native": "^4.0.6",

"@cometchat/chat-uikit-react-native": "^4.3.2"

SDK Documentation: React Native SDK

UI Kit Documentation: React Native UI Kit

Introduction

There are 5 categories of messages in CometChat Android UI Kit.

  • Message
  • Custom
  • Action
  • Call
  • Interactive

And these categories have types. For example message category has 5 types, please refer to the documentation for more information. By default, our Messages come with a built in template that takes care of the message functionality in your app. It might be the case that you want to modify the appearance and functionality of your messages. To do this, you can override the template for Messages in CometChatMessageTemplate . This guide walks you through how to override the message template for an image in our ReactNative UI Kit.

Step by step Guide

  1. Retrieve All Message Templates
    Using the CometChatUIKit, retrieve all existing message templates. This can be done using the getAllMessageTemplates method as shown:
let _theme = new CometChatTheme({});
let definedTemplates =
  CometChatUIKit.getDataSource().getAllMessageTemplates(_theme);

  1. Find the Image Template
    From the array of message templates you retrieved, locate the image template. Our aim is to modify it to suit our requirements.

  2. Override the Image Template Content View
    Upon locating the image template, override the content view. You can change the content view to display anything you want instead of the image. Here’s an example where it’s replaced with a ‘My Image’ text:

let modifiedTemp = definedTemplates.map((template) => {
  if (
    template.category === MessageCategoryConstants.message &&
    template.type === MessageTypeConstants.image
  ) {
    template.ContentView = (messageObj, alignMent) => (
      <View>
        <Text>My Image</Text>
      </View>
    );
  }
  return template;
});
  1. Pass the Modified Template Array Into the Component
    Finally, pass the new template array into the component where you want to render it. This can be done as shown:
<CometChatConversationsWithMessages
  messagesConfigurations={{
    messageListConfiguration: {
      templates: modifiedTemp,
    },
  }}
/>