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

# Overview

> Browse all prebuilt UI components in the CometChat React Native UI Kit — conversations, messages, users, groups, calls, and AI.

<Accordion title="AI Integration Quick Reference">
  | Field            | Value                                                                             |
  | ---------------- | --------------------------------------------------------------------------------- |
  | Package          | `@cometchat/chat-uikit-react-native`                                              |
  | Required setup   | `CometChatUIKit.init()` + `CometChatUIKit.login()` before rendering any component |
  | Callback actions | `on<Event>={(param) => {}}` (e.g., `onItemPress`)                                 |
  | Data filtering   | `<entity>RequestBuilder={new CometChat.<Entity>RequestBuilder()}`                 |
  | Toggle features  | `hide<Feature>={true}` or `<feature>Visibility={false}`                           |
  | Custom rendering | `<Slot>View={(<params>) => JSX}` (PascalCase)                                     |
  | Style overrides  | `style={{ containerStyle: {}, itemStyle: {} }}`                                   |
  | Calling          | Requires separate `@cometchat/calls-sdk-react-native` package                     |
</Accordion>

## Architecture

The UI Kit is a set of independent components that compose into chat layouts. A typical two-panel layout uses four core components:

* **CometChatConversations** — sidebar listing recent conversations (users and groups)
* **CometChatMessageHeader** — toolbar showing avatar, name, online status, and typing indicator
* **CometChatMessageList** — scrollable message feed with reactions, receipts, and threads
* **CometChatMessageComposer** — rich text input with attachments, mentions, and voice notes

Data flow: selecting a conversation in CometChatConversations yields a `CometChat.Conversation` object. Extract the `User` or `Group` via `getConversationWith()` and pass it as a prop to CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer.

Components communicate through a publish/subscribe event bus (`CometChatUIEventHandler`). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/react-native/events) for the full list.

Each component accepts callback props (`on<Event>`), view slot props (`<Slot>View`) for replacing UI sections, `RequestBuilder` props for data filtering, and `style` props for customization.

***

## Component Catalog

All components are imported from `@cometchat/chat-uikit-react-native`.

### Conversations and Lists

| Component              | Purpose                                 | Key Props                                               | Page                                                |
| ---------------------- | --------------------------------------- | ------------------------------------------------------- | --------------------------------------------------- |
| CometChatConversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `onItemPress`, `onError` | [Conversations](/ui-kit/react-native/conversations) |
| CometChatUsers         | Scrollable list of users                | `usersRequestBuilder`, `onItemPress`, `onError`         | [Users](/ui-kit/react-native/users)                 |
| CometChatGroups        | Scrollable list of groups               | `groupsRequestBuilder`, `onItemPress`, `onError`        | [Groups](/ui-kit/react-native/groups)               |
| CometChatGroupMembers  | Scrollable list of group members        | `group`, `groupMemberRequestBuilder`, `onItemPress`     | [Group Members](/ui-kit/react-native/group-members) |

### Messages

| Component                       | Purpose                                                                                | Key Props                                                    | Page                                                                      |
| ------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------- |
| CometChatMessageHeader          | Toolbar with avatar, name, status, typing indicator                                    | `user`, `group`, `showBackButton`                            | [Message Header](/ui-kit/react-native/message-header)                     |
| CometChatMessageList            | Scrollable message list with reactions, receipts, threads                              | `user`, `group`, `messageRequestBuilder`, `goToMessageId`    | [Message List](/ui-kit/react-native/message-list)                         |
| CometChatMessageComposer        | Rich text input with attachments, mentions, voice notes                                | `user`, `group`, `onSendButtonPress`, `placeholderText`      | [Message Composer](/ui-kit/react-native/message-composer)                 |
| CometChatCompactMessageComposer | Compact message input with rich text formatting, auto-expanding input, and attachments | `user`, `group`, `onSendButtonPress`, `enableRichTextEditor` | [Compact Message Composer](/ui-kit/react-native/compact-message-composer) |
| CometChatThreadHeader           | Parent message bubble and reply count for threaded view                                | `parentMessage`, `onClose`                                   | [Thread Header](/ui-kit/react-native/threaded-messages-header)            |

### Calling

| Component             | Purpose                                        | Key Props                                               | Page                                                |
| --------------------- | ---------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------- |
| CometChatCallButtons  | Voice and video call initiation buttons        | `user`, `group`, `onVoiceCallPress`, `onVideoCallPress` | [Call Buttons](/ui-kit/react-native/call-buttons)   |
| CometChatIncomingCall | Incoming call notification with accept/decline | `call`, `onAccept`, `onDecline`                         | [Incoming Call](/ui-kit/react-native/incoming-call) |
| CometChatOutgoingCall | Outgoing call screen with cancel control       | `call`, `onClosePress`                                  | [Outgoing Call](/ui-kit/react-native/outgoing-call) |
| CometChatCallLogs     | Scrollable list of call history                | `callLogsRequestBuilder`, `onItemPress`                 | [Call Logs](/ui-kit/react-native/call-logs)         |

### AI

| Component                       | Purpose                           | Key Props                                          | Page                                                                        |
| ------------------------------- | --------------------------------- | -------------------------------------------------- | --------------------------------------------------------------------------- |
| CometChatAIAssistantChatHistory | AI assistant conversation history | `user`, `onMessageClicked`, `onNewChatButtonClick` | [AI Assistant Chat History](/ui-kit/react-native/ai-assistant-chat-history) |

***

## Component API Pattern

All components share a consistent API surface.

### Actions

Actions control component behavior. They split into two categories:

**Predefined Actions** are built into the component and execute automatically on user interaction (e.g., tapping send dispatches the message). No configuration needed.

**User-Defined Actions** are callback props that fire on specific events. Override them to customize behavior:

```tsx lines theme={null}
<CometChatMessageList
  user={chatUser}
  onThreadRepliesPress={(message, bubbleView) => openThreadPanel(message)}
  onError={(error) => logError(error)}
/>
```

### Events

Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references.

```tsx lines theme={null}
import { CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";

useEffect(() => {
  const listenerId = "MESSAGE_LISTENER_" + Date.now();
  
  CometChatUIEventHandler.addMessageListener(listenerId, {
    ccMessageSent: ({ message }) => {
      console.log("Message sent:", message);
    },
  });

  return () => {
    CometChatUIEventHandler.removeMessageListener(listenerId);
  };
}, []);
```

Each component page documents its emitted events in the Events section.

### Filters

List-based components accept `RequestBuilder` props to control which data loads:

```tsx lines theme={null}
<CometChatMessageList
  user={chatUser}
  messageRequestBuilder={
    new CometChat.MessagesRequestBuilder().setLimit(20)
  }
/>
```

### Custom View Slots

Components expose named view slots (PascalCase) to replace sections of the default UI:

```tsx lines theme={null}
<CometChatMessageHeader
  user={chatUser}
  TitleView={(user, group) => <CustomTitle />}
  SubtitleView={(user, group) => <CustomSubtitle />}
  LeadingView={(user, group) => <CustomAvatar />}
/>
```

### Style Overrides

Every component accepts a `style` prop for customization:

```tsx lines theme={null}
<CometChatConversations
  style={{
    containerStyle: { backgroundColor: "#FAFAFA" },
    itemStyle: {
      avatarStyle: { containerStyle: { borderRadius: 8 } },
    },
  }}
/>
```

<Tip>
  All default icons are implemented as SVGs.

  For these icons, only the following imageStyle properties are supported:

  * tintColor
  * height
  * width

  Any extra properties provided in imageStyle will be ignored for default icons.

  For custom icons, you can provide either JSX components or an ImageSourcePropType. JSX Components are rendered as-is with no additional styles applied. ImageSourcePropType (e.g., PNG, JPEG) will have the entire imageStyle applied as expected.
</Tip>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Core Features" icon="comments" href="/ui-kit/react-native/core-features">
    Chat features included out of the box
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react-native/theme">
    Customize colors, fonts, and styles
  </Card>

  <Card title="Extensions" icon="puzzle-piece" href="/ui-kit/react-native/extensions">
    Add-on features like polls, stickers, and translation
  </Card>

  <Card title="Methods" icon="code" href="/ui-kit/react-native/methods">
    Initialize, authenticate, and send messages
  </Card>
</CardGroup>