Message Bubble Styling

Customize CometChat React Native UI Kit message bubbles for text, image, video, audio, file, poll, and other message types.

AI Integration Quick Reference

Field	Value
Goal	Customize incoming/outgoing message bubble appearance
Provider	CometChatThemeProvider — pass bubble styles in theme.messageListStyles
Import	import { CometChatThemeProvider } from "@cometchat/chat-uikit-react-native";
Incoming bubbles	messageListStyles: { incomingMessageBubbleStyles: { containerStyle: { backgroundColor: "#FEEDE1" } } }
Outgoing bubbles	messageListStyles: { outgoingMessageBubbleStyles: { containerStyle: { backgroundColor: "#F76808" } } }
Bubble types	textBubbleStyles, imageBubbleStyles, videoBubbleStyles, audioBubbleStyles, fileBubbleStyles, pollBubbleStyles, stickerBubbleStyles, assistantBubbleStyles
Special bubbles	deletedBubbleStyles, collaborativeBubbleStyles, groupCallBubbleStyles, linkPreviewBubbleStyles
Action bubbles	groupActionBubbleStyles, callActionBubbleStyles, userCallBubbleStyles
Precedence	Specific bubble style > Container style > Default (deep merge)
Source	GitHub theme interface

Customize message bubble appearance by passing bubble styles in theme.messageListStyles.

Prerequisites:

1. Wrap your app with CometChatThemeProvider
2. Bubble styles are passed via theme={{ light: { messageListStyles: { ... } } }}
3. Specific bubble type styles (e.g., textBubbleStyles) override general containerStyle

---

Bubble Style Keys

Bubble Type	Style Key	Common Properties
All incoming	incomingMessageBubbleStyles	containerStyle, avatarStyle, receiptStyles, reactionStyles
All outgoing	outgoingMessageBubbleStyles	containerStyle, avatarStyle, receiptStyles, reactionStyles
Text	textBubbleStyles	containerStyle, textStyle, mentionsStyle
AI Assistant	assistantBubbleStyles	containerStyle, textStyle, copyButtonStyle, errorContainerStyle
Image	imageBubbleStyles	containerStyle, imageStyle
Video	videoBubbleStyles	containerStyle, playIconStyle, playIconContainerStyle
Audio	audioBubbleStyles	containerStyle, playIconStyle, waveStyle
File	fileBubbleStyles	containerStyle, titleStyle, subtitleStyle, downloadIconStyle
Sticker	stickerBubbleStyles	containerStyle, imageStyle
Poll	pollBubbleStyles	containerStyle, progressBarStyle, selectedIconStyle, titleStyle
Link Preview	linkPreviewBubbleStyles	containerStyle, bodyStyle, headerImageContainerStyle
Collaborative	collaborativeBubbleStyles	containerStyle, iconStyle, buttonTextStyle, dividerStyle
Meet Call	meetCallBubbleStyles	containerStyle, iconStyle, dividerStyle
Deleted	deletedBubbleStyles	containerStyle, icon
Group Action	groupActionBubbleStyles	containerStyle, textStyle
Call Action	callActionBubbleStyles	containerStyle, textStyle, iconStyle, missedCallContainerStyle

---

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 theme.

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 learn more about such attributes, refer to the theme interface.

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

CometChatImagesBubble renders a message’s image attachments as a grid inside a single bubble. When there are more images than visible cells, the last cell shows a +N overflow overlay; tapping any cell opens the full-screen viewer, and an optional caption renders below the grid.

Styling

Style the bubble globally through the mediaGridBubbleStyles theme key:

import { CometChatThemeProvider } from "@cometchat/chat-uikit-react-native";

//other code
return (
  <CometChatThemeProvider
    theme={{
      light: {
        mediaGridBubbleStyles: {
          cellStyle: { borderRadius: 12 },
          overflowTextStyle: { fontSize: 28 },
        },
      },
    }}
  >
    {/*your component*/}
  </CometChatThemeProvider>
);

To learn more about such attributes, refer to the theme interface.

Video Bubble

CometChatVideosBubble renders a message’s video attachments as a thumbnail grid — each cell showing a poster with a centered play overlay and a duration chip, plus a +N overflow overlay when there are more videos than visible cells. Tapping a cell opens full-screen playback.

Styling

CometChatVideosBubble shares the mediaGridBubbleStyles theme key with the image grid:

import { CometChatThemeProvider } from "@cometchat/chat-uikit-react-native";

//other code
return (
  <CometChatThemeProvider
    theme={{
      light: {
        mediaGridBubbleStyles: {
          durationChipStyle: { borderRadius: 6 },
          playButtonStyle: { opacity: 0.9 },
        },
      },
    }}
  >
    {/*your component*/}
  </CometChatThemeProvider>
);

To learn more about such attributes, refer to the theme interface.

Audio Bubble

CometChatAudiosBubble renders a message’s audio file attachments as stacked playback cards — each with play/pause, a draggable seek bar, elapsed/total time, and download. Past 3 attachments the rest collapse behind a “Show N more” toggle. Recorded voice notes render separately as a voice-note bubble with a waveform player.

Styling

Style the bubble globally through the audiosBubbleStyles theme key:

import { CometChatThemeProvider } from "@cometchat/chat-uikit-react-native";

//other code
return (
  <CometChatThemeProvider
    theme={{
      light: {
        audiosBubbleStyles: {
          seekProgressStyle: { backgroundColor: "#6852D6" },
          fileNameStyle: { fontWeight: "600" },
        },
      },
    }}
  >
    {/*your component*/}
  </CometChatThemeProvider>
);

To learn more about such attributes, refer to the theme interface.

File Bubble

CometChatFilesBubble renders a message’s document attachments as a vertical list of downloadable cards — each with a per-type icon, file name, and size. Past 3 files the rest collapse behind a “Show N more” toggle, and an optional caption renders below.

Styling

Style the bubble globally through the filesBubbleStyles theme key:

import { CometChatThemeProvider } from "@cometchat/chat-uikit-react-native";

//other code
return (
  <CometChatThemeProvider
    theme={{
      light: {
        filesBubbleStyles: {
          expandButtonTextStyle: { fontWeight: "600" },
          fileNameStyle: { fontWeight: "600" },
        },
      },
    }}
  >
    {/*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: {
          groupActionBubbleStyles: {
            containerStyle: {
              backgroundColor: "#FEEDE1",
              borderWidth: 1,
              borderColor: "#F76808",
            },
            textStyle: {
              color: "#F76808",
            },
          },
        },
      },
    }}
  >
    {/*your component*/}
  </CometChatThemeProvider>
);

To learn more about such attributes, refer to the theme interface.

AI Assistant Bubble

AI Assistant bubbles display messages and interactions from an AI assistant within the chat interface.

Default

Customization

Customizing Bubble

import { CometChatThemeProvider } from "@cometchat/chat-uikit-react-native";

//other code
return (
  <CometChatThemeProvider
    theme={{
      light: {
        messageListStyles: {
          incomingMessageBubbleStyles: {
            assistantBubbleStyles: {
              containerStyle: {
                backgroundColor: "transparent",
              },
              textStyle: {
                color: "#F76808",
              },
              placeholderTextStyle: {
                color: "#F76808",
                opacity: 0.6,
              },
              copyButtonStyle: {
                backgroundColor: "#F76808",
              },
              errorContainerStyle: {
                backgroundColor: "#FEEDE1",
                borderWidth: 1,
                borderColor: "#F76808",
              },
              errorTextStyle: {
                color: "#F76808",
              },
            },
          },
        },
      },
    }}
  >
    {/*your component*/}
  </CometChatThemeProvider>
);

To learn more about such attributes, refer to the theme interface.

---

Next Steps

Introduction to Theming

Learn how CometChatThemeProvider manages light and dark modes

Colors

Customize primary, neutral, alert, and other color tokens

Component Styling

Style individual UI Kit components like Conversations and Users

Message List

Explore the Message List component and its customization options