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

# Audio Bubble

> Audio Bubble — CometChat documentation.

`CometChatAudioBubble` is the content view for a [MediaMessage](/sdk/react-native/send-message#media-message) if the media sent is an audio.

## Properties

| Properties    | Type                                                                      | Description                                        |
| ------------- | ------------------------------------------------------------------------- | -------------------------------------------------- |
| **audioUrl**  | string                                                                    | the path of the image to display                   |
| **title**     | string                                                                    | a text to display as name of the audio file        |
| **subtitle**  | string                                                                    | a text to display below the name of the audio file |
| **style**     | [AudioBubbleStyle](/ui-kit/react-native/v4/audio-bubble#audiobubblestyle) | used to customize appearance of this widget        |
| **playIcon**  | ImageType                                                                 | customize the icon to display to play the audio    |
| **pauseIcon** | ImageType                                                                 | customize the icon to display to pause the audio   |
| **onPress**   | Function                                                                  | An action to be performed on pressing the icon     |

## AudioBubbleStyle

attributes to customize appearance of this widget.

| Properties      | Type                 | Description                                     |
| --------------- | -------------------- | ----------------------------------------------- |
| titleFont       | FontStyle            | used to set style of the name of the audio file |
| iconTint        | string               | used to provide colour to the audio play icon   |
| subtitleFont    | FontStyle            | used to set font style of subtitle              |
| subtitleColor   | string               | used to set subtitle colour                     |
| titleFont       | FontStyle            | used to set font style of title                 |
| titleColor      | string               | used to provide colour to the title             |
| backgroundColor | string               | Sets the background colour for Avatar           |
| borderRadius    | number               | Sets the corner radius for Avatar               |
| border          | BorderStyleInterface | Sets the border styles for Avatar               |
| height          | number \| string     | Sets the height for Avatar                      |
| width           | number \| string     | Sets the width for Avatar                       |
|                 |                      |                                                 |

## Usage

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatAudioBubble
        audioUrl='https://data-us.cometchat.io/2379614bd4db65dd/media/1682517916_1406731591_130612180fb2e657699814eb52817574.mp3'
        title='Sample Audio'
      />
    ```
  </Tab>
</Tabs>