How to change text messages colour

[Afroz]

Guide Overview

Language/Framework: React Native UI Kit

UI Kit Version:

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

This guide can be used to customize the text message colour.

Define Custom Content View for Text Messages

Override the ContentView for text messages using values from the message object

const getTemplates = () => {
    const defaultTemplates =
      ChatConfigurator.getDataSource().getAllMessageTemplates(
        new CometChatTheme({}),
      ); // get default templates
    defaultTemplates.map(template => {
      if (template.category === 'message' && template.type === 'text') { 
    // override text message content view
        template.ContentView = (
          messageObject: CometChat.BaseMessage,
          _alignment: MessageBubbleAlignmentType,
        ) => // get default text message content view and pass CometChatTheme along with other required parameters
          ChatConfigurator.getDataSource().getTextMessageContentView(
            messageObject,
            _alignment,
            new CometChatTheme({
              palette: new Palette({
                mode: 'light',
                accent: {
                  light: 'red', // set colour of received text messages
                  dark: 'red', // set colour of received text messages
                },
                secondary: {
                  light: 'yellow', // set colour of sent text messages
                  dark: 'yellow', // set colour of sent text messages
                },
              }),
            }),
          );
      }
    });
    return defaultTemplates;
  };

Message List Configuration

Pass the updated message templates to the Message List Configuration.

const messageListConfiguration = new MessageListConfiguration({
    templates: getTemplates(), // override message templates
  });

Messages Configuration

After defining messageListConfiguration, pass it to the Messages Configuration.

  const messagesConfiguration = new MessagesConfiguration({
    messageListConfiguration: messageListConfiguration,
  });

Modify the CometChat Component

Use the ConversationsWithMessages component to view the customized text messages.

return (
  <CometChatConversationsWithMessages
    messagesConfigurations={messagesConfiguration}
  />
);