cometchat-react-native-components

Ground truth: catalog rn-v5.json (216 public symbols) — the closed list below IS the catalog. A component not in it does not exist. Fetch props per component via core/references/docs-map.md.

Companion skills (read first)

• cometchat-react-native-core — install, provider chain, init→login→render. Assumed, not repeated here.

Use this skill when

• "which component do I use for X" · "add a button to the conversation list header"
• "custom list row" · "replace the message bubble" · "what components ship in v5"

Prerequisites & install

None beyond core.

Component catalog (closed list)

Lists

Component	Purpose
CometChatConversations	recent-conversations list — the usual entry screen
CometChatUsers	user directory
CometChatGroups	group directory
CometChatGroupMembers	active members of a group (not banned — see below)

Message pane

Component	Purpose
CometChatMessageHeader	title, presence, back, call buttons
CometChatMessageList	the scrollback; renders bubbles, receipts, reactions
CometChatMessageComposer	input, attachments, voice notes
CometChatCompactMessageComposer	single-line composer for tight layouts
CometChatThreadHeader	thread replies — a screen on RN, not a side panel
CometChatMessageInformation	per-message delivery/read detail

Search · AI · notifications

Component	Purpose
CometChatSearch	message + conversation search
CometChatAIAssistantChatHistory · CometChatAIAssistantTools	AI assistant surfaces
CometChatConversationStarter · CometChatSmartReplies · CometChatConversationSummary	AI suggestions
CometChatNotificationFeed	in-app notification feed

Calling — needs @cometchat/calls-sdk-react-native

Component	Purpose
CometChatCallButtons	audio/video call triggers
CometChatIncomingCall · CometChatOutgoingCall · CometChatOngoingCall	call lifecycle screens
CometChatCallLogs	call history list (detail views were removed in v5)

Bubbles — the list renders these itself; place them only in a custom template CometChatTextBubble · CometChatImageBubble · CometChatVideoBubble · CometChatAudioBubble · CometChatFileBubble · CometChatVoiceNoteBubble · CometChatStickerBubble · CometChatCollaborativeDocumentBubble · CometChatCollaborativeWhiteBoardBubble · CometChatMeetCallBubble

Multi-attachment — RN only, no React equivalent CometChatAttachmentPreview · CometChatAttachmentPreviewItem · CometChatAttachmentTile · CometChatAttachmentTray · CometChatAttachmentViewer and the plural bubbles CometChatImagesBubble · CometChatVideosBubble · CometChatAudiosBubble · CometChatFilesBubble.

DOCS GAP (RN-G4): all nine are undocumented. Build from the kit source and say so.

Not components — but public and load-bearing ChatConfigurator · DataSourceDecorator · CometChatMessageTemplate (custom message types → customization) · CometChatThemeProvider + useTheme() · CometChatI18nProvider · CometChatUIEventHandler · CometChatUiKitConstants.

Primitives & building blocks — exported, and what you reach for when composing a custom row, header or bubble yourself. Existence is baked here; fetch each one's props from the docs (core/references/docs-map.md) — do not infer them from .d.ts.

Group	Exports
Identity	CometChatAvatar · CometChatStatusIndicator · CometChatBadge · CometChatDate
Row shell	CometChatListItem
Overlays	CometChatActionSheet · CometChatBottomSheet · CometChatConfirmDialog · CometChatReportDialog · CometChatMediaViewer
Composer add-ons	CometChatEmojiKeyboard · CometChatMediaRecorder · CometChatInlineAudioRecorder · CometChatCreatePoll · CometChatSuggestionList · CometChatMessagePreview · CometChatMessageComposerAction · CometChatMessageOption
Reactions	CometChatReactions · CometChatQuickReactions · CometChatReactionList
Text formatters	CometChatTextFormatter · CometChatMentionsFormatter · CometChatUrlsFormatter · CometChatRichTextFormatter
Helpers	CometChatUIKit · CometChatUIKitHelper · CometChatSoundManager

Changing a user's own avatar/name is not a component — it is the SDK call CometChat.updateCurrentUserDetails(); see cometchat-react-native-sdk.

Components that do NOT exist in v5

CometChatErrorBoundary · CometChatDetails · CometChatAddMembers · CometChatBannedMembers · CometChatTransferOwnership · CometChatContacts · every *WithMessages composite · CometChatCallLogDetails / History / Participants / Recordings. They were removed in kit v5. Each has an SDK-fallback path in core/references/docs-map.md — banned members has no UI surface at all, so an app that bans must also wire view + unban.

Custom UI goes IN a slot, not on top

Every list and header exposes view slots. Custom UI belongs inside the slot so the component keeps its own layout, scrolling and empty/error states. Stacking a sibling above the list is the classic mistake — it double-renders headers and breaks scroll.

⚠️ RN slot props are PascalCase. React's are camelCase; a ported snippet silently does nothing because an unknown prop is simply ignored.

Component	Slots
CometChatConversations	ItemView · TitleView · SubtitleView · LeadingView · TrailingView · SearchView · EmptyView · ErrorView · LoadingView
CometChatUsers / CometChatGroups	ItemView · TitleView · SubtitleView · LeadingView · TrailingView · EmptyView · ErrorView · LoadingView
CometChatMessageHeader	ItemView · TitleView · SubtitleView · LeadingView · TrailingView · AuxiliaryButtonView
CometChatMessageList	HeaderView · FooterView · EmptyView · ErrorView · LoadingView
CometChatMessageComposer	HeaderView · SendButtonView · AuxiliaryButtonView · CustomView

import { CometChatConversations } from "@cometchat/chat-uikit-react-native";
import { Pressable, Text } from "react-native";

<CometChatConversations
  TrailingView={() => (
    <Pressable onPress={onArchive}>
      <Text>Archive</Text>
    </Pressable>
  )}
/>;

Slot names differ per component — fetch the exact list from that component's docs page rather than copying from a sibling.

Common pitfalls

1. camelCase slot props — itemView is ignored silently. RN uses ItemView.
2. Rendering a sibling above a list instead of using its slot — duplicate headers, broken scroll.
3. Placing a bubble component directly — the list renders bubbles; use a template (customization).
4. Reaching for a removed component — check the closed list above before emitting.
5. Assuming CometChatGroupMembers covers banned users — it lists active members only.

Verify it works

• Every emitted component appears in catalogs/rn-v5.json.
• npm run verify:fences:rn-v5 is green.
• On device: custom slot content renders inside the component, and the list still scrolls.