> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Bubble

> Image Bubble — CometChat documentation.

`CometChatImageBubble` is the content view for a MediaMessage if the media sent is an image.

## Methods

| Methods                                       | Parameters             | Description                                                   |
| --------------------------------------------- | ---------------------- | ------------------------------------------------------------- |
| `set(imageUrl: String)`                       | String url             | It used to set image url which to be rendered in image bubble |
| `set(caption: String)`                        | String caption         | a text to display below the image                             |
| `set(style: ImageBubbleStyle)`                | ImageBubbleStyle style | used to customize appearance of this bubble                   |
| `setOnClick(onClick: @escaping (() -> Void))` | @escaping (() -> ())   | custom action on tapping the image                            |

## ImageBubbleStyle

ImageBubbleStyle is the class containing attributes to customize appearance of this bubble.

| Methods                                 | Type                 | Description                                     |
| --------------------------------------- | -------------------- | ----------------------------------------------- |
| set(captionTextFont: UIFont)            | UIFont               | used to set font of the caption of the message  |
| set(captionTextColor: UIColor)          | UIColor              | used to set color of the caption of the message |
| set(background: UIColor)                | UIColor              | used to set background color                    |
| set(borderColor: UIColor)               | UIColor              | used to set a border color                      |
| set(borderWidth: CGFloat)               | CGFloat              | used to set border                              |
| set(cornerRadius: CometChatCornerStyle) | CometChatCornerStyle | used to set border radius                       |
| set(activityIndicatorTint: UIColor)     | UIColor              | used to set the activity indicator color        |

## Usage

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    //create image bubble style object
      let imageBubbleStyle = ImageBubbleStyle()

    //modify the style properties
     imageBubbleStyle.set(activityIndicatorTint: .blue)
            imageBubbleStyle.set(borderColor: .black)
            imageBubbleStyle.set(captionTextColor: .brown)
            imageBubbleStyle.set(captionTextFont: UIFont.systemFont(ofSize: 12.0))
            imageBubbleStyle.set(background: .red)
            imageBubbleStyle.set(cornerRadius: CometChatCornerStyle(cornerRadius: 5.0))

    //set style to the image bubble object
     imageBubble.set(style: imageBubbleStyle)
    ```
  </Tab>
</Tabs>