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

## Overview

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

## Components

`CometChatMessageBubble` contains below component in it.

1. **Leading View**
2. **Header View**
3. **FooterView**
4. **ContainerView**
5. **BubbleView**

These are the below list of bubbles used in the CometChatMessageBubble.

***

## Methods

### Leading View

The avatar is a `UIImageView` that specifies an avatar for **`MessageBubble`**. You can modify the title using the below methods:

| Method                          | Description                                                   |
| ------------------------------- | ------------------------------------------------------------- |
| `set(avatarName: String)`       | Sets the avatar initials for **`MessageBubble`**.             |
| `set(avatarURL: String)`        | Sets the avatar image with given URL for **`MessageBubble`**. |
| `set(avatarStyle: AvatarStyle)` | styles the avatar in **`MessageBubble`**                      |
| `hide(leadingView: Bool)`       | Hide/shows the avatar in **`MessageBubble`**                  |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(avatarName: String)
    messageBubble.set(avatarName: "George Alan")

    // syntax for hide(leadingView: Bool)
    messageBubble.hide(leadingView: false)
    ```
  </Tab>
</Tabs>

***

### Set Avatar Style

User can style the avatar component in message bubble with the help of properties provided by the `AvatarStyle`.

| Method                                    | Description                           |
| ----------------------------------------- | ------------------------------------- |
| `set(background: UIColor)`                | Sets the background color for Avatar  |
| `set(cornerRadius: CometChatCornerStyle)` | Sets the corner radius for Avatar     |
| `set(borderWidth: CGFloat)`               | Sets the border width for Avatar      |
| `set(borderColor: UIColor)`               | Sets the border color for Avatar      |
| `set(textFont: UIFont)`                   | Sets the text font for Avatar         |
| `set(textColor: UIColor)`                 | Sets the text color for Avatar        |
| `set(outerViewWidth: CGFloat)`            | Sets the outerView width for Avatar   |
| `set(outerViewSpacing: CGFloat)`          | Sets the outerView spacing for Avatar |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // Creating  AvatarStyle object
    let avatarStyle = AvatarStyle()

    // Creating  Modifying the propeties of avatar
     avatarStyle.set(background: .red)
                .set(textFont: .systemFont(ofSize: 18))
                .set(textColor: .white)
                .set(cornerRadius: CometChatCornerStyle(cornerRadius: 8.0))
                .set(borderColor: .white)
                .set(borderWidth: 5)
                .set(outerViewWidth: 3)
                .set(outerViewSpacing: 3)

    // Setting the avatar style
    messageBubble.set(avatarStyle: avatarStyle)
    ```
  </Tab>
</Tabs>

***

### Controller

This method will set the instance of the view controller from which the **`MessageBubble`** is presented.

| Method                              | Description                                                                                               |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `set(controller: UIViewController)` | This method will set the instance of the view controller from which the **`MessageBubble`** is presented. |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(controller: UIViewController)
    messageBubble.set(controller: controller)
    ```
  </Tab>
</Tabs>

***

### Message Bubble Alignment

This method will set the alignment for the \*\*`MessageBubble .`\*\*This will take the MessageBubbleAlignment as a enum and render the alignment of the **`MessageBubble.`**

MessageBubbleAlignment has two cases:

**1. Left**

**2. Right**

| Method                                         | Description                                                                                                                                                                                                                        |
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `set(bubbleAlignment: MessageBubbleAlignment)` | This method will set the alignment for the \*\*`MessageBubble .`\*\*This will take the MessageBubbleAlignment as a enum and render the alignment of the **`MessageBubble.`** MessageBubbleAlignment has two cases: .`left, .right` |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(bubbleAlignment: MessageBubbleAlignment)
    messageBubble.set(bubbleAlignment: .left)
    ```
  </Tab>
</Tabs>

***

### Setup Views

You can pass multiple views in the MessageBubble

| Method                          | Description                                                    |
| ------------------------------- | -------------------------------------------------------------- |
| `set(headerView: UIStackView)`  | This will set the header view in the **`MessageBubble`**       |
| `hide(headerView: Bool)`        | This will hide/show the header view in the **`MessageBubble`** |
| `set(footerView: UIStackView)`  | This will set the footer view in the **`MessageBubble`**       |
| `hide(footerView: Bool)`        | This will hide/show the header view in the **`MessageBubble`** |
| `set(bubbleView: UIStackView?)` | This will set the bubble view in the **`MessageBubble`**       |
| `set(replyView: UIStackView)`   | This will set the reply view in the **`MessageBubble`**        |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(headerView: UIStackView)
    let headerView = UIStackView()
    messageBubble.set(headerView: headerView)

    // syntax for hide(headerView: Bool)
    messageBubble.hide(headerView: false)

    // syntax for set(footerView: UIStackView)
    let footerView = UIStackView()
    messageBubble.set(footerView: footerView)

    // syntax for hide(footerView: Bool)
    messageBubble.hide(footerView: false)

    // syntax for set(bubbleView: UIStackView)
    let bubbleView = UIStackView()
    messageBubble.set(bubbleView: bubbleView)

    // syntax for set(replyView: UIStackView)
    let replyView = UIStackView()
    messageBubble.set(replyView: replyView)
    ```
  </Tab>
</Tabs>

***

### Set MessageBubbleStyle

User can style the **`MessageBubble`** with the help of properties provided by the `MessageBubbleStyle`.

| Method                                    | Description                            |
| ----------------------------------------- | -------------------------------------- |
| `set(background: UIColor)`                | Sets the background color for ListItem |
| `set(cornerRadius: CometChatCornerStyle)` | Sets the corner radius for ListItem    |
| `set(borderWidth: CGFloat)`               | Sets the border width for ListItem     |
| `set(borderColor: UIColor)`               | Sets the border color for ListItem     |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // Creating  MessageBubbleStyle object
    let messageBubbleStyle = MessageBubbleStyle()

    // Creating  Modifying the propeties of messageBubble
    messageBubbleStyle.set(background: .black)
                  .set(cornerRadius: CometChatCornerStyle(cornerRadius: 2.0))
                  .set(borderColor: .white)
                  .set(borderWidth: 5)

    // Setting the messageBubbleStyle
    messageBubble.set(messageBubbleStyle: messageBubbleStyle)
    ```
  </Tab>
</Tabs>

***