Message Bubble Styling - CometChat Docs

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.

​Overview

​Types for Incoming and Outgoing Bubble Style

​Message Bubbles

​Text Bubble

​Link Preview Bubble

​Image Bubble

​Video Bubble

​Audio Bubble

​File Bubble

​Sticker Bubble

​Poll Bubble

​Collaborative Bubble

​Meet Call Bubble

​Delete Bubble

​Call Action Bubble

​Action Bubble

Overview

Types for Incoming and Outgoing Bubble Style

Message Bubbles

Text Bubble

Link Preview Bubble

Image Bubble

Video Bubble

Audio Bubble

File Bubble

Sticker Bubble

Poll Bubble

Collaborative Bubble

Meet Call Bubble

Delete Bubble

Call Action Bubble

Action Bubble