Customize the appearance of incoming and outgoing message bubbles in CometChat React Native UI Kit, including text, image, video, audio, file, poll, and other message types.
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.
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 codereturn ( <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 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 theme.Customizing Incoming Message Bubble
import { CometChatThemeProvider } from "@cometchat/chat-uikit-react-native";//other codereturn ( <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 codereturn ( <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.
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
