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

# File Bubble

> File Bubble — CometChat documentation.

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

## Properties

| Properties | Type | Description |
| - | - | - |
| **fileUrl** | String | the path of the image to display |
| **title** | String | a text to display as name of the file |
| **subtitle** | String | a text to display below the name of the file |
| **icon** | Icon | customize the icon to display to download the file |
| **style** | [FileBubbleStyle](/ui-kit/react-native/v4/file-bubble#filebubblestyle) | used to customize appearance of this widget |

## FileBubbleStyle

FileBubbleStyle is the class containing attributes to customize appearance of this widget.

| Properties | Type | Description |
| - | - | - |
| titleFont | TextStyle | used to set style of the name of the file |
| titleColor | string | |
| subtitleFont | TextStyle | used to set style of the text below the name of the file |
| iconTint | string | used to provide colour to the download icon |
| height | string \| number | used to set height |
| width | string \| number | used to set width |
| backgroundColor | string | used to set background colour |
| border | BroderStyle | used to set border |
| borderRadius | number | used to set border radius |

## Usage

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatFileBubble 
      fileUrl='https://images.pexels.com/photos/1496372/pexels-photo-1496372.jpeg',
      style= {{borderRadius: 6}}
    />
    ```
  </Tab>
</Tabs>


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