Message Bubble Styling
Overview
Message bubbles are the core visual element in chat applications, encapsulating different types of messages like text, images, or attachments. Customizing message bubbles allows developers to create a consistent and engaging user experience that aligns with their app's theme and design language. This guide provides an overview of how to style outgoing and incoming message bubbles and customize the appearance for specific message types.
Types for Incoming and Outgoing Bubble Style
Incoming bubbles represent messages received from other users.
import {
ImageStyle,
TextStyle,
ViewStyle,
//...
} from "react-native";
type BubbleStyles = {
/**common bubble Style attributes for all message types**/
containerStyle: ViewStyle;
threadedMessageStyles: DeepPartial<CometChatTheme["threadedMessageStyles"]>;
avatarStyles: DeepPartial<CometChatTheme["avatarStyles"]>;
receiptStyles: DeepPartial<CometChatTheme["receiptStyles"]>;
reactionStyles: DeepPartial<CometChatTheme["messageBubbleReactionStyles"]>;
dateStyles: DeepPartial<CometChatTheme["dateStyles"]>;
dateReceiptContainerStyle: ViewStyle;
senderNameTextStyles: TextStyle;
/**The above common properties are available for the below individual bubble styles as well**/
textBubbleStyles?: DeepPartial<CometChatTheme["textBubbleStyles"]>;
imageBubbleStyles?: DeepPartial<CometChatTheme["imageBubbleStyles"]>;
videoBubbleStyles?: DeepPartial<CometChatTheme["videoBubbleStyles"]>;
audioBubbleStyles?: DeepPartial<CometChatTheme["audioBubbleStyles"]>;
deletedBubbleStyles?: DeepPartial<CometChatTheme["deletedBubbleStyles"]>;
fileBubbleStyles?: DeepPartial<CometChatTheme["fileBubbleStyles"]>;
collaborativeBubbleStyles?: DeepPartial<
CometChatTheme["collaborativeBubbleStyles"]
>;
groupCallBubbleStyles?: DeepPartial<CometChatTheme["groupCallBubbleStyles"]>;
stickerBubbleStyles?: DeepPartial<CometChatTheme["stickerBubbleStyles"]>;
pollBubbleStyles?: DeepPartial<CometChatTheme["pollBubbleStyles"]>;
linkPreviewBubbleStyles?: DeepPartial<
CometChatTheme["linkPreviewBubbleStyles"]
>;
};
type UserCallBubbleStyles = {
containerStyle: ViewStyle;
textStyle: TextStyle;
iconStyle: ImageStyle;
};
interface CometChatTheme {
groupActionBubbleStyles: {
containerStyle: ViewStyle;
textStyle: TextStyle;
textContainerStyle?: ViewStyle;
};
messageListStyles: {
incomingMessageBubbleStyles: DeepPartial<BubbleStyles>;
outgoingMessageBubbleStyles: DeepPartial<BubbleStyles>;
/** style for group action bubbles **/
groupActionBubbleStyles: DeepPartial<
CometChatTheme["groupActionBubbleStyles"]
>;
/** style for one to one calling bubbles **/
userCallBubbleStyles: DeepPartial<UserCallBubbleStyles>;
//other style properties for message list
};
}
- DeepPartial is an internal utility that ensures all style properties are optional, allowing only the required fields to be overridden.
- When customizing theme properties, whether by overriding specific properties or supplying a completely custom theme, the provided values will be deeply merged with the default theme. This means that only the specified properties will be overridden, while all other properties will retain their default values. Additionally, if a style is passed through props, it will take priority over the style provided via the theme.
In the code snippet below, incoming text message bubbles will have a background color of #f90ac6, while all other incoming message bubbles will have #f90a4e. The paddingHorizontal value set in incomingMessageBubbleStyles.containerStyle will also apply to all incoming message bubbles, unless explicitly overridden for a specific bubble type.
For instance, you can set incomingMessageBubbleStyles.textBubbleStyles.containerStyle.paddingHorizontal to 0 if you want to remove horizontal padding for text bubbles.
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
dark: {
messageListStyles: {
incomingMessageBubbleStyles: {
//will apply to all the incoming bubble types
containerStyle: {
backgroundColor: "#f90a4e",
paddingHorizontal: 20,
},
textBubbleStyles: {
//will be merged with the container style above.
//{paddingHorizontal: 20} will be applied unless overriden here
containerStyle: {
backgroundColor: "#f90ac6",
},
},
},
},
},
}}
></CometChatThemeProvider>;
);
Message Bubbles
Message bubbles are core elements of the messaging interface. Their collective appearance can be customized to create a consistent design, including color, shape, and overall style for both outgoing and incoming messages. The message bubbles' styles can be customized by extending the predefined styles in your themes.xml file.
Customizing Incoming Message Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
incomingMessageBubbleStyles: {
//will apply to all the incoming message bubbles
containerStyle: {
backgroundColor: "#F76808",
},
},
},
},
}}
></CometChatThemeProvider>;
);
Customizing Outgoing Message Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
outgoingMessageBubbleStyles: {
//will apply to all the outgoing message bubbles
containerStyle: {
backgroundColor: "#F76808",
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
Text Bubble
Text bubbles display plain text messages. These are the most common bubble type in a chat interface.
Default
Customization
Customizing Incoming and Outgoing Bubbles
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
incomingMessageBubbleStyles: {
textBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
},
},
},
outgoingMessageBubbleStyles: {
textBubbleStyles: {
containerStyle: {
backgroundColor: '#F76808',
},
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To know more such attributes, visit the attributes file.
Link Preview Bubble
The Link Preview Bubble is designed to display a preview of links shared in messages. It enriches the messaging experience by showing details such as the page title, description, and an image from the linked content, making links more engaging and informative.
Default
Customization
Customizing Incoming and Outgoing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
outgoingMessageBubbleStyles: {
linkPreviewBubbleStyles: {
containerStyle: {
backgroundColor: '#F76808'
},
bodyStyle: {
containerStyle: {
backgroundColor: '#FBAA75'
}
},
headerImageContainerStyle: {
backgroundColor: '#FBAA75'
}
},
},
incomingMessageBubbleStyles: {
linkPreviewBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1'
},
bodyStyle: {
containerStyle: {
backgroundColor: '#FBAA75'
}
},
headerImageContainerStyle: {
backgroundColor: '#FBAA75'
}
},
}
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
Image Bubble
Image bubbles display images shared within a conversation.
Default
Customization
Customizing Incoming and Outgoing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
incomingMessageBubbleStyles: {
imageBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
},
},
},
outgoingMessageBubbleStyles: {
imageBubbleStyles: {
containerStyle: {
backgroundColor: '#F76808',
},
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
Video Bubble
Video bubbles display video messages or clips in a chat.
Default
Customization
Customizing Incoming and Outgoing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
incomingMessageBubbleStyles: {
videoBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
},
},
},
outgoingMessageBubbleStyles: {
videoBubbleStyles: {
containerStyle: {
backgroundColor: '#F76808',
},
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
Audio Bubble
Audio bubbles represent audio messages or voice recordings.
Default
Customization
Customizing Incoming and Outgoing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
incomingMessageBubbleStyles: {
audioBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
},
playIconStyle: {
tintColor: '#F76808'
},
waveStyle: {
backgroundColor: '#F76808'
}
},
},
outgoingMessageBubbleStyles: {
audioBubbleStyles: {
containerStyle: {
backgroundColor: '#F76808',
},
playIconStyle: {
tintColor: '#F76808'
}
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
File Bubble
File bubbles are used to display shared files, such as documents, PDFs, or spreadsheets.
Default
Customization
Customizing Incoming and Outgoing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
incomingMessageBubbleStyles: {
fileBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
}
},
},
outgoingMessageBubbleStyles: {
fileBubbleStyles: {
containerStyle: {
backgroundColor: '#F76808',
}
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
Sticker Bubble
Sticker bubbles display stickers shared in a conversation, enhancing visual expression.
Default
Customization
Customizing Incoming and Outgoing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
incomingMessageBubbleStyles: {
stickerBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
}
},
},
outgoingMessageBubbleStyles: {
stickerBubbleStyles: {
containerStyle: {
backgroundColor: '#F76808',
}
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
Poll Bubble
Poll bubbles represent polls shared within the chat, showing options and results.
Default
Customization
Customizing Incoming and Outgoing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
incomingMessageBubbleStyles: {
pollBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
},
activeProgressBarTint: '#F76808'
},
},
outgoingMessageBubbleStyles: {
pollBubbleStyles: {
containerStyle: {
backgroundColor: '#F76808',
},
progressBarStyle: {
backgroundColor: '#FBAA75'
},
selectedIconStyle: {
tintColor: '#F76808'
}
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
Collaborative Bubble
Collaborative bubbles display collaborative content, such as shared documents or tasks.
Default
Customization
Customizing Incoming and Outgoing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
typography: {
heading4: {
bold: {
fontFamily: "TimesNewRoman-Bold",
},
medium: {
fontFamily: "TimesNewRoman",
},
regular: {
fontFamily: "TimesNewRoman",
},
},
},
messageListStyles: {
incomingMessageBubbleStyles: {
collaborativeBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
},
iconStyle: {
tintColor: '#F76808'
},
buttonTextStyle: {
color: '#F76808'
}
},
},
outgoingMessageBubbleStyles: {
collaborativeBubbleStyles: {
containerStyle: {
backgroundColor: '#F76808',
},
dividerStyle: {
backgroundColor: '#FBAA75'
}
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
Meet Call Bubble
Meet call bubbles display call-related actions and statuses in the chat interface.
Default
Customization
Customizing Incoming and Outgoing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
typography: {
button: {
medium: {
fontFamily: 'TimesNewRoman',
},
},
},
messageListStyles: {
incomingMessageBubbleStyles: {
meetCallBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
},
iconStyle: {
tintColor: '#F76808',
},
buttonTextStyle: {
color: '#F76808',
},
},
},
outgoingMessageBubbleStyles: {
meetCallBubbleStyles: {
containerStyle: {
backgroundColor: '#F76808',
},
iconStyle: {
tintColor: '#F76808',
},
dividerStyle: {
backgroundColor: '#FBAA75',
},
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
Delete Bubble
Delete bubbles are used to display messages that have been deleted by the sender. These indicate the message removal within the chat interface.
Default
Customization
Customizing Incoming and Outgoing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
incomingMessageBubbleStyles: {
deletedBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
},
icon: {uri: 'url-to-icon'}
},
},
outgoingMessageBubbleStyles: {
deletedBubbleStyles: {
containerStyle: {
backgroundColor: '#F76808',
},
icon: {uri: 'url-to-icon'}
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
Call Action Bubble
Call action bubbles display call-related actions, such as missed calls, in the chat interface.
Default
Customization
Customizing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
callActionBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
borderWidth: 1,
borderColor: '#F76808',
},
textStyle: {
color: '#F76808',
},
iconStyle: {
tintColor: '#F76808',
},
missedCallContainerStyle: {
backgroundColor: '#FEEDE1',
borderWidth: 1,
borderColor: '#F76808',
},
missedCallTextStyle: {
color: '#F76808',
},
missedCallIconStyle: {
tintColor: '#F76808',
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.
Action Bubble
Action bubbles provide a customizable interface for displaying a variety of actions, such as group actions, within a chat.
Default
Customization
Customizing Bubble
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
messageListStyles: {
callActionBubbleStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
borderWidth: 1,
borderColor: '#F76808',
},
textStyle: {
color: '#F76808',
},
iconStyle: {
tintColor: '#F76808',
},
missedCallContainerStyle: {
backgroundColor: '#FEEDE1',
borderWidth: 1,
borderColor: '#F76808',
},
missedCallTextStyle: {
color: '#F76808',
},
missedCallIconStyle: {
tintColor: '#F76808',
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>;
);
To learn more about such attributes, refer to the theme interface.