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

# Text Bubble

> Text Bubble — CometChat documentation.

`CometChatTextBubble` is the content view shown for [TextMessage](/sdk/react-native/send-message#text-message).

## Properties

| Properties | Type                                                                   | Description                                 |
| ---------- | ---------------------------------------------------------------------- | ------------------------------------------- |
| **text**   | String                                                                 | the text to display                         |
| **style**  | [TextBubbleStyle](/ui-kit/react-native/v4/text-bubble#textbubblestyle) | used to customize appearance of this widget |

## TextBubbleStyle

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

| Properties          | Type      | Description                                       |
| ------------------- | --------- | ------------------------------------------------- |
| **textFont**        | FontStyle | used to set font style of the text of the message |
| **textColor**       | string    | used to set text colour of the message            |
| **height**          | number    | used to set height                                |
| **width**           | number    | used to set width                                 |
| **backgroundColor** | string    | used to set background colour                     |
| **border**          | BoxBorder | used to set border                                |
| **borderRadius**    | double    | used to set border radius                         |

## Usage

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatTextBubble
      text='	Hi! how are you?',
      style={{
        backgroundColor: 'cyan'
        }}
    />
    ```
  </Tab>
</Tabs>