Message Bubble
Overview
The Messages
component in this file is responsible for rendering the list of chat messages within a chatroom. It handles message rendering, updates, and the layout for displaying user messages, media, and interactions like replies or reactions. The component likely manages message-related features like timestamps, avatars, and typing indicators.
GitHub File:

Styling Customisations
These styling customisations can be applied through the setChatBubbleStyle
method on the STYLES
class
Property | Type | Description |
---|---|---|
borderRadius | number | Defines the border radius of message bubbles |
sentMessageBackgroundColor | string | Background color of sent messages |
receivedMessageBackgroundColor | string | Background color of received messages |
selectedBackgroundColor | string | Background color when a message is selected |
selectedMessageBackgroundColor | string | Background color of the selected message |
textStyles | TextStyles | Styles for message text |
linkTextColor | string | Color of the hyperlink text |
taggingTextColor | string | Color of the tagging text |
selectedMessagesBackgroundColor | string | Background color for multiple selected messages |
stateMessagesTextStyles | StateMessagesTextStyles | Styles for state messages text |
messageReceivedHeader | MessageReceivedHeader | Styles for message received header |
dateStateMessage | DateStateMessage | Styles for date state message text |
playPauseBoxIcon | PlayPauseBoxIcon | Styles for play/pause icon box |
voiceNoteSlider | VoiceNoteSlider | Styles for voice note slider |
pollVoteSliderColor | PollVoteSliderColor | Styles for poll vote slider |
imageVideoAttachmentsBorderRadius | number | Border radius for image/video attachments |
retryButtonStyle | retryButtonStyle | Styles for the retry button |
TextStyles
Property | Type | Description |
---|---|---|
fontSize | number | Font size of the text |
fontStyle | string | Font style of the text |
fontFamily | string | Font family of the text |
StateMessagesTextStyles
Property | Type | Description |
---|---|---|
fontSize | number | Font size of the state message text |
fontStyle | string | Font style of the state message text |
fontFamily | string | Font family of the state message text |
color | string | Color of the state message text |
backgroundColor | string | Background color of the state message |
MessageReceivedHeader
Property | Type | Description |
---|---|---|
senderNameStyles | SenderNameStyles | Styles for the sender's name |
senderDesignationStyles | SenderDesignationStyles | Styles for the sender's designation |
SenderNameStyles
Property | Type | Description |
---|---|---|
fontSize | number | Font size of the sender's name |
fontFamily | string | Font family of the sender's name |
color | string | Color of the sender's name |
SenderDesignationStyles
Property | Type | Description |
---|---|---|
fontSize | number | Font size of the sender's designation |
fontFamily | string | Font family of the sender's designation |
color | string | Color of the sender's designation |
DateStateMessage
Property | Type | Description |
---|---|---|
fontSize | number | Font size of the date state message |
fontFamily | string | Font family of the date state message |
color | string | Color of the date state message |
backgroundColor | string | Background color of the date state message |
PlayPauseBoxIcon
Property | Type | Description |
---|---|---|
backgroundColor | string | Background color of play/pause icon box |
VoiceNoteSlider
Property | Type | Description |
---|---|---|
minimumTrackTintColor | string | Color of the minimum track of the slider |
thumbTintColor | string | Color of the thumb of the slider |
PollVoteSliderColor
Property | Type | Description |
---|---|---|
backgroundColor | string | Background color of the poll vote slider |
RetryButtonStyle
Property | Type | Description |
---|---|---|
textStyle | TextStyle | Text size of the text to retry button text |
viewStyle | ViewStyle | View style of the retry button |
Usage Example
- Call the
setChatBubbleStyle
method on theSTYLES
class to pass your style object
import { STYLES } from "@likeminds.community/chat-rn-core"
STYLES.setChatBubbleStyle({
taggingTextColor: 'red',
textStyles: {
fontSize: 16
},
linkTextColor: 'blue',
selectedMessageBackgroundColor: 'yellow',
showMoreTextStyle: {
color: 'grey'
},
messageReceivedHeader: {
senderNameStyles: {
color: 'yellow'
}
}
})