Message

The Message component is a fundamental building block for creating dynamic and interactive chat interfaces. It allows you to effortlessly present messages in a conversational format, making it easy for users to follow and engage in discussions.

Customisations Available

Message component supports below styling customisations as of now. All of the styling customisations are optional as of now, if some styling customisation is not provided, then we pick up the default styling which we have.

Customisable props available along with their types:

Parameter	Type	Optional	Customizable Properties for objects
borderRadius	number	✔️
sentMessageBackgroundColor	string	✔️
receivedMessageBackgroundColor	string	✔️
selectedBackgroundColor	string	✔️
selectedMessageBackgroundColor	string	✔️
textStyles	object	✔️	• fontSize: number • fontStyle: string • fontFamily: string
linkTextColor	string	✔️
taggingTextColor	string	✔️
selectedMessagesBackgroundColor	string	✔️
stateMessagesTextStyles	object	✔️	• fontSize: number • fontStyle: string • fontFamily: string • color: string
messageReceivedHeader	object	✔️	• senderNameStyles: object • fontSize: number • fontFamily: string • color: string • senderDesignationStyles: object • fontSize: number • fontFamily: string • color: string
dateStateMessage	object	✔️	• fontSize: number • fontFamily: string • color: string • backgroundColor: string
playPauseBoxIcon	object	✔️	• backgroundColor: string
voiceNoteSlider	object	✔️	• minimumTrackTintColor: string • thumbTintColor: string
pollVoteSliderColor	object	✔️	• backgroundColor: string

Code snippet

import { STYLES } from "@likeminds.community/chat-rn-core";

// styling for messageBubble
const messageBubbleStyles = {
  textStyles: {
    fontSize: 15,
  },
  linkTextColor: "#3CA874",
  taggingTextColor: "#3CA874",
  selectedMessagesBackgroundColor: "#3CA87429",
  stateMessagesTextStyles: {
    color: "#808080",
    backgroundColor: "#C7E3D6",
  },
  dateStateMessage: {
    color: "#808080",
  },
  messageReceivedHeader: {
    senderNameStyles: {
      color: "#3CA874",
      fontSize: 15,
    },
    senderDesignationStyles: {
      fontSize: 14,
    },
  },
  playPauseBoxIcon: {
    backgroundColor: "#B7D340",
  },
  voiceNoteSlider: {
    minimumTrackTintColor: "#B7D340",
    thumbTintColor: "#B7D340",
  },
  pollVoteSliderColor: {
    backgroundColor: "#3CA87429",
  },
  sentMessageBackgroundColor: "#C7E3D6",
};

if (messageBubbleStyles) {
  STYLES.setChatBubbleStyle(messageBubbleStyles);
}

return <LMOverlayProvider
  lmChatClient={lmChatClient}
  userName={userName}
  userUniqueId={userUniqueId}
  profileImageUrl={profileImageUrl}
  lmChatInterface={lmChatInterface}
>
  {/* Add navigation container */}
</LMOverlayProvider>;