Overview

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

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

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 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
CometChatUsers	Scrollable list of users	usersRequestBuilder, onItemPress, onError	Users
CometChatGroups	Scrollable list of groups	groupsRequestBuilder, onItemPress, onError	Groups
CometChatGroupMembers	Scrollable list of group members	group, groupMemberRequestBuilder, onItemPress	Group Members

Messages

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

Calling

Component	Purpose	Key Props	Page
CometChatCallButtons	Voice and video call initiation buttons	user, group, onVoiceCallPress, onVideoCallPress	Call Buttons
CometChatIncomingCall	Incoming call notification with accept/decline	call, onAccept, onDecline	Incoming Call
CometChatOutgoingCall	Outgoing call screen with cancel control	call, onClosePress	Outgoing Call
CometChatCallLogs	Scrollable list of call history	callLogsRequestBuilder, onItemPress	Call Logs

AI

Component	Purpose	Key Props	Page
CometChatAIAssistantChatHistory	AI assistant conversation history	user, onMessageClicked, onNewChatButtonClick	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:

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

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:

<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:

<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:

<CometChatConversations
  style={{
    containerStyle: { backgroundColor: "#FAFAFA" },
    itemStyle: {
      avatarStyle: { containerStyle: { borderRadius: 8 } },
    },
  }}
/>

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.

---

Next Steps

Core Features

Chat features included out of the box

Theming

Customize colors, fonts, and styles

Extensions

Add-on features like polls, stickers, and translation

Methods

Initialize, authenticate, and send messages