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

# Component Styling

> Customize the appearance of individual CometChat React Native UI Kit components using theme overrides for colors, typography, icons, and layout styles.

<Accordion title="AI Integration Quick Reference">
  | Field            | Value                                                                                                                            |
  | ---------------- | -------------------------------------------------------------------------------------------------------------------------------- |
  | Goal             | Style individual UI Kit components via theme overrides                                                                           |
  | Provider         | `CometChatThemeProvider` — pass component styles in `theme` prop                                                                 |
  | Import           | `import { CometChatThemeProvider } from "@cometchat/chat-uikit-react-native";`                                                   |
  | Pattern          | `theme={{ light: { <componentStyles>: { ... } } }}`                                                                              |
  | Conversations    | `conversationStyles: { itemStyle: { avatarStyle: { containerStyle: { borderRadius: 8 } } } }`                                    |
  | Users            | `userStyles: { titleStyle: { color: "#F76808" }, itemStyle: { ... } }`                                                           |
  | Groups           | `groupStyles: { titleStyle: { ... }, itemStyle: { ... } }`                                                                       |
  | Message List     | `messageListStyles: { containerStyle: { ... }, outgoingMessageBubbleStyles: { ... } }`                                           |
  | Message Composer | `messageComposerStyles: { sendIconContainerStyle: { ... }, attachmentIconStyle: { ... } }`                                       |
  | Precedence       | Style prop > Custom theme > Default theme (deep merge)                                                                           |
  | Source           | [GitHub theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts) |
</Accordion>

Style individual UI Kit components by passing component-specific style objects in the theme.

<Warning>
  Prerequisites:

  1. Wrap your app with `CometChatThemeProvider`
  2. Component styles are passed via `theme={{ light: { <componentStyles>: { ... } } }}`
  3. Style props on components take precedence over theme styles
</Warning>

***

## Component Style Keys

| Component           | Theme Key                  | Common Style Properties                                                            |
| ------------------- | -------------------------- | ---------------------------------------------------------------------------------- |
| Conversations       | `conversationStyles`       | `containerStyle`, `itemStyle`, `avatarStyle`                                       |
| Users               | `userStyles`               | `titleStyle`, `titleSeparatorStyle`, `itemStyle`                                   |
| Groups              | `groupStyles`              | `titleStyle`, `titleSeparatorStyle`, `itemStyle`                                   |
| Group Members       | `groupMemberStyle`         | `titleStyle`, `titleSeparatorStyle`, `backButtonIconStyle`                         |
| Message Header      | `messageHeaderStyles`      | `titleTextStyle`, `avatarStyle`, `callButtonStyle`                                 |
| Message List        | `messageListStyles`        | `containerStyle`, `incomingMessageBubbleStyles`, `outgoingMessageBubbleStyles`     |
| Message Composer    | `messageComposerStyles`    | `sendIconContainerStyle`, `attachmentIconStyle`, `voiceRecordingIconStyle`         |
| Thread Header       | `threadHeaderStyles`       | `containerStyle`, `replyCountBarStyle`, `messageBubbleContainerStyle`              |
| Call Logs           | `callLogsStyles`           | `titleTextStyle`, `titleSeparatorStyle`, `itemStyle`                               |
| Incoming Call       | `incomingCallStyle`        | `containerStyle`, `avatarStyle`, `acceptCallButtonStyle`, `declineCallButtonStyle` |
| Outgoing Call       | `outgoingCallStyle`        | `avatarStyle`, `endCallButtonStyle`                                                |
| Call Buttons        | `callButtonStyles`         | `audioCallButtonIconStyle`, `videoCallButtonIconStyle`                             |
| Avatar              | `avatarStyle`              | `containerStyle`, `imageStyle`                                                     |
| Badge               | `badgeStyle`               | `containerStyle`, `textStyle`                                                      |
| Status Indicator    | `statusIndicatorStyle`     | `containerStyleOnline`, `containerStyleOffline`                                    |
| Date                | `dateStyles`               | `textStyle`, `containerStyle`                                                      |
| Receipt             | `receiptStyles`            | `readIconStyle`, `deliveredIconStyle`, `sentIconStyle`                             |
| Action Sheet        | `actionSheetStyle`         | `optionsItemStyle`                                                                 |
| AI Chat History     | `chatHistoryStyles`        | `containerStyle`, `headerStyle`, `messageItemStyle`                                |
| Confirm Dialog      | `confirmDialogStyles`      | `containerStyle`, `titleStyle`, `messageStyle`                                     |
| Media Recorder      | `mediaRecorderStyle`       | `animationStyle`, `playIconStyle`, `pauseIconStyle`                                |
| Message Information | `messageInformationStyles` | `containerStyle`, `titleStyle`, `messageBubbleContainerStyle`                      |
| Reaction List       | `reactionListStyles`       | `tabStyle`, `reactionListItemStyle`                                                |

***

## Overview

CometChat UIKit enables developers to seamlessly integrate customizable components into their applications. Each component is designed to ensure a consistent user experience while offering flexibility to adapt to your app's design system. You can modify attributes such as colors, fonts, sizes, icons, and more using the theme provider or programmatically. Below is a detailed guide for styling individual components within the UIKit.

## Components

### Conversations

The `CometChatConversations` component provides a list of recent chats, showing participants, message previews, and timestamps. It supports default themes while offering deep customization for text appearance, icons, and overall layout. With this component, you can create an intuitive and visually appealing chat list that matches your app's branding.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/k0f_g7UwNe_JINeP/images/433c987e-Conversation_Styling-1e5686a26eb349d5cbc40262b9b6df0e.png?fit=max&auto=format&n=k0f_g7UwNe_JINeP&q=85&s=c31e7cb303da50ab23c8c5fd4b8b974d" width="1280" height="800" data-path="images/433c987e-Conversation_Styling-1e5686a26eb349d5cbc40262b9b6df0e.png" />
</Frame>

```javascript theme={null}
import {
  CometChatConversations,
  CometChatUIKit,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

///code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          conversationStyles: {
            itemStyle: {
              avatarStyle: {
                containerStyle: {
                  borderRadius: 8,
                  backgroundColor: "#FBAA75",
                },
                imageStyle: {
                  borderRadius: 8,
                },
              },
            },
          },
        },
      }}
    >
      {loggedIn && <CometChatConversations></CometChatConversations>}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Users

The `CometChatUsers` component displays a scrollable list of users. It is ideal for showcasing available contacts for messaging, calls, or group creation. Developers can style elements like user avatars, status indicators, and list backgrounds to align with their design guidelines.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/c8909b74-users_styling-3acb1ffef7870b6903a070fd83b5103f.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=18397b1b8f7cf63001b55db0f37d161d" width="1280" height="800" data-path="images/c8909b74-users_styling-3acb1ffef7870b6903a070fd83b5103f.png" />
</Frame>

```javascript theme={null}
import {
  CometChatUsers,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          userStyles: {
            titleStyle: {
              color: "#FBAA75",
            },
            titleSeparatorStyle: {
              borderBottomColor: "#FBAA75",
            },
            itemStyle: {
              avatarStyle: {
                containerStyle: {
                  borderRadius: 8,
                  backgroundColor: "#FBAA75",
                },
                imageStyle: {
                  borderRadius: 8,
                },
              },
            },
          },
        },
      }}
    >
      {loggedIn && <CometChatUsers showLetterHeader={false}></CometChatUsers>}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Groups

The `CometChatGroups` component allows you to display and interact with chat groups. Each group item highlights key details like the group name, participant count, and last active time. Customization options include avatar styles, fonts, borders, and background colors, ensuring the component blends seamlessly with your app.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/XgQ9DxAoWn0btB5m/images/5b3c1825-groups_styling-f8164f3a9b1247ad1db859328c199051.png?fit=max&auto=format&n=XgQ9DxAoWn0btB5m&q=85&s=241addf3bc97d623dfcb400b1825841e" width="1280" height="800" data-path="images/5b3c1825-groups_styling-f8164f3a9b1247ad1db859328c199051.png" />
</Frame>

```javascript theme={null}
import {
  CometChatGroups,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          groupStyles: {
            titleStyle: {
              color: "#FBAA75",
            },
            titleSeparatorStyle: {
              borderBottomColor: "#FBAA75",
            },
            itemStyle: {
              avatarStyle: {
                containerStyle: {
                  borderRadius: 8,
                  backgroundColor: "#FBAA75",
                },
                imageStyle: {
                  borderRadius: 8,
                },
              },
            },
          },
        },
      }}
    >
      {loggedIn && <CometChatGroups></CometChatGroups>}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Message Header

The `CometChatMessageHeader` component provides essential information about the active chat, such as the recipient's name, avatar, and status (online/offline). It often includes options like back navigation, search, or menu buttons. Customization options allow you to style the header background, text appearance, and icons to match your app's overall design.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/c761803d-message_header_styling-ae4670a5a130374818f37e2144246748.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=e5f1ef0c9636d141bf0218d70f190f41" width="1280" height="240" data-path="images/c761803d-message_header_styling-ae4670a5a130374818f37e2144246748.png" />
</Frame>

```javascript theme={null}
import {
  CometChatConversations,
  CometChatMessageHeader,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          messageHeaderStyles: {
            titleTextStyle: {
              color: "#F76808",
            },
            avatarStyle: {
              containerStyle: {
                borderRadius: 8,
                backgroundColor: "#FBAA75",
              },
            },
            callButtonStyle: {
              audioCallButtonIconStyle: {
                tintColor: "#F76808",
              },
              videoCallButtonIconStyle: {
                tintColor: "#F76808",
              },
            },
          },
        },
      }}
    >
      {loggedIn && (
        <View style={{ flex: 1 }}>
          <CometChatConversations
            style={{
              containerStyle: {
                display: messageUser || messageGroup ? "none" : "flex",
              },
            }}
            onItemPress={(item: CometChat.Conversation) => {
              if (
                item.getConversationType() ==
                CometChatUiKitConstants.ConversationTypeConstants.user
              ) {
                setMessageUser(item.getConversationWith() as CometChat.User);
                return;
              }
              setMessageGroup(item.getConversationWith() as CometChat.Group);
            }}
          ></CometChatConversations>
          {(messageUser || messageGroup) && (
            <CometChatMessageHeader
              user={messageUser}
              group={messageGroup}
            ></CometChatMessageHeader>
          )}
        </View>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Message List

The `CometChatMessageList` component displays the sequence of messages in a conversation, supporting text, media, reactions, and more. It includes smooth scrolling, timestamps, and grouping for better readability. Developers can customize bubble colors, text appearance, timestamps, and alignment to provide a tailored chat experience.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7a4hqm7gLVRmX34O/images/03a08ce8-message_list_styling-ebbb6bea74da1c21078f037fb50d8bff.png?fit=max&auto=format&n=7a4hqm7gLVRmX34O&q=85&s=b6cb78aa6a9957953aeabe25cc25cb99" width="1280" height="800" data-path="images/03a08ce8-message_list_styling-ebbb6bea74da1c21078f037fb50d8bff.png" />
</Frame>

```javascript theme={null}
import {
  CometChatConversations,
  CometChatMessageList,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          messageListStyles: {
            containerStyle: {
              backgroundColor: "#FEEDE1",
            },
            outgoingMessageBubbleStyles: {
              containerStyle: {
                backgroundColor: "#F76808",
              },
            },
          },
        },
      }}
    >
      {loggedIn && (
        <View style={{ flex: 1 }}>
          <CometChatConversations
            style={{
              containerStyle: {
                display: messageUser || messageGroup ? "none" : "flex",
              },
            }}
            onItemPress={(item: CometChat.Conversation) => {
              if (
                item.getConversationType() ==
                CometChatUiKitConstants.ConversationTypeConstants.user
              ) {
                setMessageUser(item.getConversationWith() as CometChat.User);
                return;
              }
              setMessageGroup(item.getConversationWith() as CometChat.Group);
            }}
          ></CometChatConversations>
          {(messageUser || messageGroup) && (
            <CometChatMessageList
              user={messageUser}
              group={messageGroup}
            ></CometChatMessageList>
          )}
        </View>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

#### Message Options (Long Press)

To style the action sheet that appears when long-pressing a message, use `messageOptionsStyles` within `messageListStyles`:

```javascript theme={null}
<CometChatThemeProvider
  theme={{
    light: {
      messageListStyles: {
        messageOptionsStyles: {
          optionsItemStyle: {
            containerStyle: { backgroundColor: "#FEEDE1" },
            iconStyle: { tintColor: "#F76808" },
            titleStyle: { color: "#1A1A1A" },
          },
        },
      },
    },
  }}
>
  {/* Components */}
</CometChatThemeProvider>
```

<Note>
  `messageOptionsStyles` is separate from the top-level `actionSheetStyle`. The top-level `actionSheetStyle` applies to attachment options and other standalone action sheets, while `messageOptionsStyles` specifically styles the message long-press options.
</Note>

### Message Composer

The `CometChatMessageComposer` component enables users to compose and send messages, including text, attachments, and stickers. This highly interactive component supports customization of input box styles, button appearances, and interaction feedback, ensuring it blends seamlessly with your app's chat UI.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/_MYSdWhXnUkTkjEH/images/482915e0-message_composer_styling-db627f8855f376a0287e9d2d7f0be603.png?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=fe719e924fae4184690af713328fdf28" width="1280" height="232" data-path="images/482915e0-message_composer_styling-db627f8855f376a0287e9d2d7f0be603.png" />
</Frame>

```javascript theme={null}
import {
  CometChatConversations,
  CometChatMessageComposer,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          messageComposerStyles: {
            voiceRecordingIconStyle: {
              tintColor: "#F76808",
            },
            attachmentIconStyle: {
              tintColor: "#F76808",
            },
            sendIconContainerStyle: {
              backgroundColor: "#F76808",
            },
            stickerIcon: {
              inactive: (
                <StickerIcon
                  height={24}
                  width={24}
                  color="#F76808"
                ></StickerIcon>
              ),
            },
          },
        },
      }}
    >
      {loggedIn && (
        <View style={{ flex: 1 }}>
          <CometChatConversations
            style={{
              containerStyle: {
                display: messageUser || messageGroup ? "none" : "flex",
              },
            }}
            onItemPress={(item: CometChat.Conversation) => {
              if (
                item.getConversationType() ==
                CometChatUiKitConstants.ConversationTypeConstants.user
              ) {
                setMessageUser(item.getConversationWith() as CometChat.User);
                return;
              }
              setMessageGroup(item.getConversationWith() as CometChat.Group);
            }}
          ></CometChatConversations>
          {(messageUser || messageGroup) && (
            <CometChatMessageComposer
              user={messageUser}
              group={messageGroup}
            ></CometChatMessageComposer>
          )}
        </View>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Group Members

The `CometChatGroupMembers` component lists participants in a chat group with details like names, avatars, and roles (e.g., admin or member). It supports customizable styles for list items, fonts, and background colors, ensuring it integrates with your app's group management interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/1bd5a982-group_members_styling-ee7427e23be4ccf40776d8b1df1342f4.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=49a4d4a702b6c223714ab18696132cb8" width="1280" height="800" data-path="images/1bd5a982-group_members_styling-ee7427e23be4ccf40776d8b1df1342f4.png" />
</Frame>

```javascript theme={null}
import {
  CometChatConversations,
  CometChatGroupMembers,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          color: {
            primary: "#F76808",
          },
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          groupMemberStyle: {
            titleSeparatorStyle: {
              borderBottomColor: "#F76808",
            },
            titleStyle: {
              color: "#F76808",
            },
            backButtonIconStyle: {
              tintColor: "#F76808",
            },
          },
        },
      }}
    >
      {loggedIn && (
        <View style={{ flex: 1 }}>
          <CometChatConversations
            style={{
              containerStyle: {
                display: messageUser || messageGroup ? "none" : "flex",
              },
            }}
            conversationsRequestBuilder={new CometChat.ConversationsRequestBuilder()
              .setConversationType("group")
              .setLimit(30)}
            onItemPress={(item: CometChat.Conversation) => {
              setMessageGroup(item.getConversationWith() as CometChat.Group);
            }}
          ></CometChatConversations>
          {messageGroup && (
            <CometChatGroupMembers
              group={messageGroup!}
            ></CometChatGroupMembers>
          )}
        </View>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Thread Header

The `CometChatThreadHeader` component is used in threaded message views, displaying information about the parent message and its context. It provides a seamless way to navigate between the thread and the main conversation while maintaining context.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/76d4d00d-thread_header_styling-447011f9a5da276b357ce91cafa04e94.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=864c682fec9df0d320c485627f9e19ba" width="1280" height="329" data-path="images/76d4d00d-thread_header_styling-447011f9a5da276b357ce91cafa04e94.png" />
</Frame>

```javascript theme={null}
import {
  CometChatConversations,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatThemeProvider,
  CometChatThreadHeader,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          threadHeaderStyles: {
            containerStyle: {
              backgroundColor: "#FEEDE1",
            },
            messageBubbleContainerStyle: {
              backgroundColor: "#FEEDE1",
            },
            replyCountBarStyle: {
              backgroundColor: "#FBA46B",
            },
            replyCountTextStyle: {
              color: "#FFFFFF",
            },
            outgoingMessageBubbleStyles: {
              containerStyle: {
                backgroundColor: "#F76808",
              },
            },
          },
        },
      }}
    >
      {loggedIn && (
        <View style={{ flex: 1 }}>
          <CometChatConversations
            style={{
              containerStyle: {
                display: messageUser || messageGroup ? "none" : "flex",
              },
            }}
            onItemPress={(item: CometChat.Conversation) => {
              if (
                item.getConversationType() ==
                CometChatUiKitConstants.ConversationTypeConstants.user
              ) {
                setMessageUser(item.getConversationWith() as CometChat.User);
                return;
              }
              setMessageGroup(item.getConversationWith() as CometChat.Group);
            }}
          ></CometChatConversations>
          {(messageUser || messageGroup) && !parentMessage && (
            <>
              <CometChatMessageHeader
                user={messageUser}
                group={messageGroup}
              ></CometChatMessageHeader>
              <CometChatMessageList
                user={messageUser}
                group={messageGroup}
                onThreadRepliesPress={(
                  msg: CometChat.BaseMessage,
                  view: any
                ) => {
                  setParentMessage(msg);
                }}
              ></CometChatMessageList>
              <CometChatMessageComposer
                user={messageUser}
                group={messageGroup}
              ></CometChatMessageComposer>
            </>
          )}
          {(messageUser || messageGroup) && parentMessage && (
            <CometChatThreadHeader
              parentMessage={parentMessage}
            ></CometChatThreadHeader>
          )}
        </View>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Call Logs

The `CometChatCallLogs` component provides a list of recent calls (voice or video), showing details like call type, duration, participants, and timestamps. Developers can style text, icons, and background elements, making it easy to match the app's design system.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d0eb378f-calls_styling-72e5f287e16313403492a56094660446.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=c9a98d867c580745a4a5dc651a2b5300" width="1280" height="800" data-path="images/d0eb378f-calls_styling-72e5f287e16313403492a56094660446.png" />
</Frame>

```javascript theme={null}
import {
  CometChatCallLogs,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          callLogsStyles: {
            titleSeparatorStyle: {
              borderBottomColor: "#F76808",
            },
            titleTextStyle: {
              color: "#F76808",
            },
            itemStyle: {
              avatarStyle: {
                containerStyle: {
                  borderRadius: 8,
                  backgroundColor: "#FBAA75",
                },
                imageStyle: {
                  borderRadius: 8,
                },
              },
            },
          },
        },
      }}
    >
      {loggedIn && (
        <View style={{ flex: 1 }}>
          <CometChatCallLogs></CometChatCallLogs>
        </View>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Incoming Call

The `CometChatIncomingCall` component displays a notification for an incoming call. It typically includes caller details like name, avatar, and call type (audio/video), along with buttons to accept or decline the call.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/edb0ab59-incoming_call_styled-d36b6a11d6d67a3aedc24f543ac94e0d.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=c6d80ea80f3ec32e33f6b194eadf52f2" width="4524" height="3200" data-path="images/edb0ab59-incoming_call_styled-d36b6a11d6d67a3aedc24f543ac94e0d.png" />
</Frame>

```javascript theme={null}
import {
  CometChatIncomingCall,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          incomingCallStyle: {
            containerStyle: {
              backgroundColor: theme.color.extendedPrimary100,
            },
            avatarStyle: {
              containerStyle: {
                backgroundColor: theme.color.extendedPrimary500,
                borderRadius: 8,
              },
              imageStyle: {
                borderRadius: 8,
              },
            },
            declineCallButtonStyle: {
              backgroundColor: theme.color.staticWhite,
            },
            declineCallTextStyle: {
              color: theme.color.error,
            },
            acceptCallButtonStyle: {
              backgroundColor: theme.color.primary,
            },
          },
        },
      }}
    >
      {callReceived && (
        <CometChatIncomingCall
          call={incomingCall.current!}
          onDecline={(call) => {
            setCallReceived(false);
          }}
        />
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Outgoing Call

The `CometChatOutgoingCall` component displays a status view for calls initiated by the user, showing the recipient's details, call type, and call status (e.g., ringing or connecting).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/k0f_g7UwNe_JINeP/images/430add9e-outgoing_call_styling-4478d162278403121a8f89d481625c9e.png?fit=max&auto=format&n=k0f_g7UwNe_JINeP&q=85&s=54d3565dce96adb0eaa790ba9f081059" width="1280" height="800" data-path="images/430add9e-outgoing_call_styling-4478d162278403121a8f89d481625c9e.png" />
</Frame>

```javascript theme={null}
import {
  CometChatConversations,
  CometChatMessageHeader,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          typography: {
            heading1: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          outgoingCallStyle: {
            avatarStyle: {
              containerStyle: {
                borderRadius: 8,
              },
              imageStyle: {
                borderRadius: 8,
              },
            },
            endCallButtonStyle: {
              borderRadius: 8,
            },
          },
        },
      }}
    >
      {loggedIn && (
        <View style={{ flex: 1 }}>
          <CometChatConversations
            style={{
              containerStyle: {
                display: messageUser || messageGroup ? "none" : "flex",
              },
            }}
            onItemPress={(item: CometChat.Conversation) => {
              if (
                item.getConversationType() ==
                CometChatUiKitConstants.ConversationTypeConstants.user
              ) {
                setMessageUser(item.getConversationWith() as CometChat.User);
                return;
              }
              setMessageGroup(item.getConversationWith() as CometChat.Group);
            }}
          ></CometChatConversations>
          {(messageUser || messageGroup) && (
            <CometChatMessageHeader
              user={messageUser}
              group={messageGroup}
            ></CometChatMessageHeader>
          )}
        </View>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Call Button

The `CometChatCallButton` component initiates voice or video calls with a single click. It supports various customization options for button color and icon styles, making it adaptable to different screen layouts and themes. These components further enhance the versatility of CometChat UIKit, ensuring that all aspects of messaging and calling functionality are cohesive, user-friendly, and fully customizable.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mkn0UqPQ5BXljCV1/images/9864ab5c-DqXqOIPBfs6BAAAAAElFTkSuQmCC.png?fit=max&auto=format&n=mkn0UqPQ5BXljCV1&q=85&s=7024bcfbf74e0e204030fb72a50e2de8" width="1280" height="232" data-path="images/9864ab5c-DqXqOIPBfs6BAAAAAElFTkSuQmCC.png" />
</Frame>

```javascript theme={null}
import {
  CometChatCallButtons,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView
    style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <CometChatThemeProvider
      theme={{
        light: {
          callButtonStyles: {
            audioCallButtonIconStyle: {
              tintColor: theme.color.primary,
            },
            audioCallButtonIconContainerStyle: {
              backgroundColor: theme.color.extendedPrimary100,
              paddingHorizontal: theme.spacing.padding.p4,
              paddingVertical: theme.spacing.padding.p2,
              borderRadius: 8,
            },
            videoCallButtonIconStyle: {
              tintColor: theme.color.primary,
            },
            videoCallButtonIconContainerStyle: {
              backgroundColor: theme.color.extendedPrimary100,
              paddingHorizontal: theme.spacing.padding.p4,
              paddingVertical: theme.spacing.padding.p2,
              borderRadius: 8,
            },
          },
        },
      }}
    >
      {loggedIn && <CometChatCallButtons></CometChatCallButtons>}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### AI Assistant Chat History

The `CometChatAIAssistantChatHistory` component displays the history of interactions with an AI assistant. It provides a seamless way to view past conversations, ensuring users can easily reference previous AI responses.

<Frame>
  <img alt="AI assistant chat history styling preview" src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/android-ai-assistant-chat-history-style.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=9c3a93e224bff5c9eccf8177f325e49a" width="3040" height="1760" data-path="images/android-ai-assistant-chat-history-style.png" />
</Frame>

```javascript theme={null}
import {
  CometChatAIAssistantChatHistory,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          chatHistoryStyles: {
            containerStyle: {
              backgroundColor: '#FFFAF6',
            },
            headerStyle: {
              backgroundColor: '#FFFAF6',
            },
            headerTitleStyle: {
              color: '#F76808',
            },
            newChatButtonStyle: {
              backgroundColor: '#FEEDE1',
            },
            newChatTextStyle: {
              color: '#F76808',
            },
            sectionHeaderStyle: {
              backgroundColor: '#FFFAF6',
            },
            sectionHeaderTextStyle: {
              color: '#888888',
            },
            messageItemStyle: {
              backgroundColor: '#FFFAF6',
            },
            messageTextStyle: {
              color: '#333333',
            },
          },
        },
      }}
    >
      {loggedIn && (
        <CometChatAIAssistantChatHistory
          user={selectedUser}
          onItemClick={(conversation) => {
            // Handle chat history item click
            console.log('Chat history item clicked:', conversation);
          }}
          onNewChatButtonClick={() => {
            // Handle new chat button click
            console.log('New chat button clicked');
          }}
        />
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

## Base Components

### Avatar

The `CometChatAvatar` component is used across the UIKit to represent users, groups, or placeholders visually. This highly reusable component supports various shapes (circle or square), sizes, borders, and fallback icons, allowing complete design consistency for profile or group images.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b7ff2aa0-base_component_avatar_styling-c10c14904152585dcf4c46f3a1c0a875.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=c9d35cb63ea34c9a742248c50fa1d058" width="1280" height="240" data-path="images/b7ff2aa0-base_component_avatar_styling-c10c14904152585dcf4c46f3a1c0a875.png" />
</Frame>

```javascript theme={null}
import {
  CometChatAvatar,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView
    style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <CometChatThemeProvider
      theme={{
        light: {
          avatarStyles: {
            containerStyle: {
              borderRadius: 8,
              backgroundColor: "#FBAA75",
            },
            imageStyle: {
              borderRadius: 8,
            },
          },
        },
      }}
    >
      {loggedIn && (
        <CometChatAvatar
          name="Some Name"
          image=":ImageSourcePropType"
        ></CometChatAvatar>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Status Indicator

The `CometChatStatusIndicator` component visually represents user presence (online, offline, or custom states). It can be styled for different shapes, sizes, and colors to reflect your app's visual preferences while maintaining clarity in conveying status information.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/3ad97c61-base_component_status_indicator_styling-b6a26bc571a79184023e5b40950bbb53.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=5ab50d9b33e57959f94852af6cd8e3c6" width="1280" height="240" data-path="images/3ad97c61-base_component_status_indicator_styling-b6a26bc571a79184023e5b40950bbb53.png" />
</Frame>

```javascript theme={null}
import {
  CometChatStatusIndicator,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView
    style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <CometChatThemeProvider
      theme={{
        light: {
          statusIndicatorStyles: {
            containerStyleOnline: {
              backgroundColor: "#FFAB00",
            },
          },
        },
      }}
    >
      {loggedIn && (
        <CometChatStatusIndicator
          style={{
            containerStyle: {
              position: "relative",
              borderRadius: 2,
            },
          }}
          type={CometChatUiKitConstants.USER_ONLINE_STATUS}
        ></CometChatStatusIndicator>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Badge

The `CometChatBadge` component displays notifications or counts, such as unread messages. It can be styled for background colors, border radius, text size, and colors, allowing you to create visually distinct indicators for different notifications.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mNTojjz_O28of40c/images/f4d337e9-base_component_badge_styling-5245f3662a3847ceb76fb4b84564ef6b.png?fit=max&auto=format&n=mNTojjz_O28of40c&q=85&s=e1db5982f6bc2773d9e8f6560e271b1e" width="5120" height="960" data-path="images/f4d337e9-base_component_badge_styling-5245f3662a3847ceb76fb4b84564ef6b.png" />
</Frame>

```javascript theme={null}
import {
  CometChatBadge,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView
    style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <CometChatThemeProvider
      theme={{
        light: {
          badgeStyles: {
            containerStyle: {
              borderRadius: 4,
              backgroundColor: theme.color.error,
            },
          },
        },
      }}
    >
      {loggedIn && <CometChatBadge count={244}></CometChatBadge>}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Date

The `CometChatDate` component formats and displays timestamps in conversation lists and message threads. It ensures time-related information is clear and consistent. Developers can customize its text appearance, alignment, and colors to fit various contexts.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/e952a7ae-base_component_date_styling-f5654b78737ce3802df87334ea4e0b00.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=d16d1677c5a9a9515b5c665648376ea5" width="1280" height="240" data-path="images/e952a7ae-base_component_date_styling-f5654b78737ce3802df87334ea4e0b00.png" />
</Frame>

```javascript theme={null}
import {
  CometChatDate,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView
    style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <CometChatThemeProvider
      theme={{
        light: {
          dateStyles: {
            textStyle: {
              color: "#141414",
            },
          },
        },
      }}
    >
      {loggedIn && (
        <CometChatDate
          timeStamp={Date.now()}
          pattern={"dayDateTimeFormat"}
        ></CometChatDate>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Receipts

The `CometChatReceipts` component indicates message delivery and read statuses using intuitive icons. These can be styled for icon size, tint, and alignment, ensuring they remain clear and consistent with your app's UI.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/3ae434db-base_component_receipt_styling-a961997323883712776365f4a8b4825f.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=fa689ea866e6c8edd11b03cd48efff8f" width="5120" height="960" data-path="images/3ae434db-base_component_receipt_styling-a961997323883712776365f4a8b4825f.png" />
</Frame>

```javascript theme={null}
import {
  CometChatReceipt,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView
    style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <CometChatThemeProvider
      theme={{
        light: {
          receiptStyles: {
            readIconStyle: {
              tintColor: "#FFAB00",
            },
          },
        },
      }}
    >
      {loggedIn && (
        <CometChatReceipt
          receipt={CometChatUiKitConstants.MessageReceipt.READ}
        ></CometChatReceipt>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Media Recorder

The `CometChatMediaRecorder` component facilitates the recording of audio and video messages. It supports full customization of its recording controls, including button sizes, shapes, and colors, making it an integral part of your media-rich chat experience.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/39d562ac-base_component_media_recorder_styling-a71efb9d9af23f26d7984a97e5ab892e.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=8c7d2f8eebe6edad8fea2bb78c55447c" width="5120" height="3360" data-path="images/39d562ac-base_component_media_recorder_styling-a71efb9d9af23f26d7984a97e5ab892e.png" />
</Frame>

```javascript theme={null}
import {
  CometChatMediaRecorder,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView
    style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <CometChatThemeProvider
      theme={{
        light: {
          mediaRecorderStyle: {
            animationStyle: {
              innerAnimationContainerStyle: {
                backgroundColor: "#EDEAFA",
                borderRadius: 20,
              },
              outerAnimationContainerStyle: {
                backgroundColor: "#F9F8FD",
                borderRadius: 20,
              },
              animatedIconStyle: {
                containerStyle: {
                  borderRadius: 20,
                  backgroundColor: "#F44649",
                },
              },
            },
            pauseIconStyle: {
              containerStyle: {
                height: 60,
                width: 60,
                borderRadius: 8,
                alignItems: "center",
                justifyContent: "center",
              },
            },
            deleteIconStyle: {
              containerStyle: {
                borderRadius: 8,
              },
            },
            stopIconStyle: {
              containerStyle: {
                borderRadius: 8,
              },
            },
          },
        },
      }}
    >
      {loggedIn && <CometChatMediaRecorder></CometChatMediaRecorder>}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Reaction List

The `CometChatReactionList` component provides a visual representation of emoji reactions on messages. It supports customization for reaction sizes, spacing, and colors, enabling you to build an engaging and personalized messaging environment.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/19qJLi95IaEk2j9s/images/fcaa0634-base_component_reaction_list_styling-16aceef74885c475b8dc129f3114456d.png?fit=max&auto=format&n=19qJLi95IaEk2j9s&q=85&s=a5a1d9fe333359b129c970caefe182a8" width="1280" height="840" data-path="images/fcaa0634-base_component_reaction_list_styling-16aceef74885c475b8dc129f3114456d.png" />
</Frame>

```javascript theme={null}
import {
  CometChatReactionList,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView
    style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <CometChatThemeProvider
      theme={{
        light: {
          color: {
            primary: "#F76808",
          },
          reactionListStyles: {
            tabStyle: {
              selectedItemStyle: {
                borderBottomColor: "#F76808",
              },
              selectedItemTextStyle: {
                color: "#F76808",
              },
            },
          },
        },
      }}
    >
      {loggedIn && <CometChatReactionList message={messageWithReactions} />}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Message Information

The `CometChatMessageInformation` component displays metadata for messages, such as delivery timestamps, sender details, and read receipts. Customization options include text styles, colors, and alignment, making it adaptable to various app layouts.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Xgdtn9VZPDi47bm-/images/237b6e0a-base_component_message_information_styling-d51400af46b6aebae636302be9ec863a.png?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=510a5fd93fe152628b07f7b696c52db5" width="1280" height="840" data-path="images/237b6e0a-base_component_message_information_styling-d51400af46b6aebae636302be9ec863a.png" />
</Frame>

```javascript theme={null}
import {
  CometChatMessageInformation,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          color: {
            primary: "#F76808",
          },
          typography: {
            heading4: {
              bold: {
                fontFamily: "TimesNewRoman-Bold",
              },
              medium: {
                fontFamily: "TimesNewRoman",
              },
              regular: {
                fontFamily: "TimesNewRoman",
              },
            },
          },
          messageInformationStyles: {
            titleStyle: {
              color: "#F76808",
            },
            messageBubbleContainerStyle: {
              backgroundColor: "#FEEDE1",
            },
          },
        },
      }}
    >
      {loggedIn && (
        <CometChatMessageInformation message={messageWithReactions} />
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Bottom Sheet

The `CometChatBottomSheet` component is a wrapper around the React Native Modal that provides a bottom sheet experience. While the Modal component offers basic functionality for displaying content in a popup overlay, `CometChatBottomSheet` enhances this by offering features like smooth slide-in animations and a background overlay. It picks up most of its styling from the theme, ensuring a consistent design with minimal configuration. This component simplifies the implementation of bottom sheet interactions.

```javascript theme={null}
import {
  CometChatBottomSheet,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView
    style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <CometChatThemeProvider>
      {loggedIn && (
        <CometChatBottomSheet
          style={{
            minHeight: Dimensions.get("screen").height * 0.3,
          }}
          doNotOccupyEntireHeight={true}
        >
          {/*child component*/}
        </CometChatBottomSheet>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

### Action Sheet

The `CometChatActionSheet` component is a customizable action sheet designed to display a list of actionable options. Often integrated with the [CometChatBottomSheet](/ui-kit/react-native/component-styling#bottom-sheet), it provides a structured and interactive menu for user actions.

```javascript theme={null}
import {
  CometChatBottomSheet,
  CometChatActionSheet,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView
    style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <CometChatThemeProvider
      theme={{
        light: {
          actionSheetStyle: {
            optionsItemStyle: {
              containerStyle: {
                backgroundColor: "yellow",
              },
            },
          },
        },
      }}
    >
      {loggedIn && (
        <CometChatBottomSheet
          style={{
            minHeight: Dimensions.get("screen").height * 0.3,
          }}
          doNotOccupyEntireHeight={true}
        >
          <CometChatActionSheet
            actions={[
              {
                id: "1",
                title: "First Option",
                onPress: () => {
                  console.log("First Option Pressed");
                },
              },
            ]}
          ></CometChatActionSheet>
        </CometChatBottomSheet>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Mentions

The `CometChatMentions` component highlights referenced users or groups within messages. With customizable styles for text color and background, you can ensure mentions stand out clearly in chats while maintaining a cohesive visual theme.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/NN4EdpOU3viwWMb_/images/07e42ebc-react_native_base_component_mentions_styling-38ae2da1f7db9e5c67b0885b4a34aefd.png?fit=max&auto=format&n=NN4EdpOU3viwWMb_&q=85&s=9345deeacbf424e4c8e49803fade9d07" width="5120" height="3360" data-path="images/07e42ebc-react_native_base_component_mentions_styling-38ae2da1f7db9e5c67b0885b4a34aefd.png" />
</Frame>

```javascript theme={null}
import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

//code
return (
  <SafeAreaView style={{ flex: 1 }}>
    <CometChatThemeProvider
      theme={{
        light: {
          messageListStyles: {
            incomingMessageBubbleStyles: {
              textBubbleStyles: {
                mentionsStyle: {
                  textStyle: {
                    color: "#D6409F",
                  },
                  selfTextStyle: {
                    color: "#30A46C",
                  },
                },
              },
            },
            outgoingMessageBubbleStyles: {
              textBubbleStyles: {
                mentionsStyle: {
                  textStyle: {
                    color: "#D6409F",
                  },
                  selfTextStyle: {
                    color: "#30A46C",
                  },
                },
              },
            },
          },
        },
      }}
    >
      {loggedIn && (
        <View style={{ flex: 1 }}>
          <CometChatConversations
            style={{
              containerStyle: {
                display: messageUser || messageGroup ? "none" : "flex",
              },
            }}
            onItemPress={(item: CometChat.Conversation) => {
              if (
                item.getConversationType() ==
                CometChatUiKitConstants.ConversationTypeConstants.user
              ) {
                setMessageUser(item.getConversationWith() as CometChat.User);
                return;
              }
              setMessageGroup(item.getConversationWith() as CometChat.Group);
            }}
          ></CometChatConversations>
          {(messageUser || messageGroup) && (
            <>
              <CometChatMessageHeader
                user={messageUser}
                group={messageGroup}
              ></CometChatMessageHeader>
              <CometChatMessageList
                user={messageUser}
                group={messageGroup}
              ></CometChatMessageList>
              <CometChatMessageComposer
                user={messageUser}
                group={messageGroup}
              ></CometChatMessageComposer>
            </>
          )}
        </View>
      )}
    </CometChatThemeProvider>
  </SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Introduction to Theming" icon="paintbrush" href="/ui-kit/react-native/theme">
    Learn how CometChatThemeProvider manages light and dark modes
  </Card>

  <Card title="Colors" icon="palette" href="/ui-kit/react-native/colors">
    Customize primary, neutral, alert, and other color tokens
  </Card>

  <Card title="Message Bubble Styling" icon="message" href="/ui-kit/react-native/message-bubble-styling">
    Style individual message bubbles and their content
  </Card>

  <Card title="Components Overview" icon="grid-2" href="/ui-kit/react-native/components-overview">
    Explore all available UI Kit components
  </Card>
</CardGroup>