> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Bubble

> Message Bubble — CometChat documentation.

`CometChatMessageBubble` is the reusable components which forms different types of message bubbles accordingly.

There are different section available in message bubble which can be altered by passing `CometChatMessageTemplate` in `CometChatMessages`

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b4340440-w232uj22obu4ydktf8eevb1ky86ua4z3nlk1e0cz89a2srt1lnq9h4wau9l5m7m0-073175cd4e0f3bf83e0e063cf1dfe144.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=0a1f522c4dde9e141163ba2f734cbfda" width="408" height="149" data-path="images/b4340440-w232uj22obu4ydktf8eevb1ky86ua4z3nlk1e0cz89a2srt1lnq9h4wau9l5m7m0-073175cd4e0f3bf83e0e063cf1dfe144.png" />
</Frame>

## Sections

Following are the sections in message bubble

1. Header View
2. Leading View
3. Content View
4. Bottom View
5. Thread View
6. footer view

#### Properties

| Properties      | Type                                                               | Description                                                                       |
| --------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------- |
| **LeadingView** | () => JSX.Element                                                  | used to set view in leading View section                                          |
| **headerView**  | () => JSX.Element                                                  | used to set view in header view section                                           |
| **replyView**   | () => JSX.Element                                                  | used to set view in reply view section                                            |
| **contentView** | () => JSX.Element                                                  | used to set content view , by default all different type of bubble are shown here |
| **threadView**  | () => JSX.Element                                                  | used to set view in thread view section , by default threaded section is shown    |
| **footerView**  | () => JSX.Element                                                  | used to set footer view for message bubble , by default message receipt is shown  |
| **alignment**   | 'left' \| 'right' \| 'center'                                      | used to set bubble alignment , can be **left**, **right** and **centar**          |
| **style**       | [MessageBubbleStyle](/ui-kit/react-native/v4/message-bubble#style) | used to set styling properties foe message bubble                                 |
| **bottomView**  | () => JSX.Element                                                  | used to set bottom view for message bubble , by default reactions are shown here  |

### style

| Properties          | Type             | Description                       |
| ------------------- | ---------------- | --------------------------------- |
| **height**          | string \| number | used to set height                |
| **width**           | string \| number | used to set width                 |
| **backgroundColor** | string           | used to set the background colour |
| **border**          | BorderStyle      | used to set border                |
| **borderRadius**    | number           | used to set border radius         |