> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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-llms-scoped-indexes/d5xW_uJ3Iif7doR1/images/b4340440-w232uj22obu4ydktf8eevb1ky86ua4z3nlk1e0cz89a2srt1lnq9h4wau9l5m7m0-073175cd4e0f3bf83e0e063cf1dfe144.png?fit=max&auto=format&n=d5xW_uJ3Iif7doR1&q=85&s=18b9a16ca87c506ec716a674610f4a60" 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 |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.