{"id":"656ab92c-017e-4df6-872e-ea6a9e396a23","shortId":"Jfz6NE","kind":"skill","title":"cometchat-native-components","tagline":"Component catalog for the CometChat React Native UI Kit v5 — names, props, slot views, request builders, hide flags, style shape. Always loaded before writing CometChat* JSX.","description":"## Purpose\n\nTeaches Claude every component the React Native UI Kit exports, with the props, callback signatures, slot views, request builders, and style shapes that actually exist. This is the authoritative reference — never invent component names or props from memory; look them up here.\n\n**Read this skill before writing any `<CometChat*>` JSX.**\n\nGround truth: `packages/ChatUiKit/src/index.ts` from the UI Kit source + `docs/ui-kit/react-native/components-overview.mdx` + per-component doc pages.\n\n---\n\n## How to use this catalog\n\nThe React Native UI Kit is a set of independent components that you compose into chat layouts. Three patterns cover almost every use case:\n\n| Pattern | Components |\n|---|---|\n| **Two-pane** (inbox) | `CometChatConversations` + `CometChatMessageHeader` + `CometChatMessageList` + `CometChatMessageComposer` |\n| **Single thread** (1-to-1) | `CometChatMessageHeader` + `CometChatMessageList` + `CometChatMessageComposer` (with a resolved `user` or `group`) |\n| **Tab-based messenger** | `CometChatConversations` + `CometChatUsers` + `CometChatGroups` + `CometChatCallLogs` in a bottom-tab bar |\n\n**Data flow** (identical across all 3): a list component emits a `CometChat.Conversation` / `User` / `Group` via `onItemPress`. Extract the entity (`conversation.getConversationWith()` for conversations) and pass it as a prop to the header / list / composer.\n\nAll components share the same API surface — see § Prop conventions.\n\n---\n\n## Prop conventions (applies to every `<CometChat*>` component)\n\nFour prop families you'll see across the catalog:\n\n| Family | Shape | Example |\n|---|---|---|\n| **Callback** | `on<Event>={(param) => void}` | `onItemPress={(conv) => ...}` • `onError={(err) => ...}` • `onSendButtonPress={(msg) => ...}` |\n| **Request builder** | `<entity>RequestBuilder={new CometChat.<Entity>RequestBuilder()}` | `conversationsRequestBuilder={new CometChat.ConversationsRequestBuilder().setLimit(20)}` |\n| **Hide / visibility toggle** | `hide<Feature>={boolean}` \\| `<feature>Visibility={boolean}` | `hideReceipts={true}` • `hideReplyInThreadOption={true}` |\n| **View slot (replace a section)** | `<Slot>View={(params) => JSX}` — **PascalCase**, returns JSX | `TitleView={(user, group) => <MyTitle />}` • `LeadingView={(u, g) => <MyAvatar />}` |\n| **Style** | `style={{ containerStyle: {}, itemStyle: { ... } }}` | see § 13 Style shape |\n\n**On-events take positional args, not an event object.** `onItemPress={(conversation) => ...}` receives the `CometChat.Conversation` directly — no `event.target`.\n\n**Slot views are capitalized**: `TitleView`, `SubtitleView`, `LeadingView`, `TrailingView`, `EmptyStateView`, `ErrorStateView`, `LoadingStateView`, `AuxiliaryButtonView`. Each slot function gets the same props the default view would have (usually `user, group` or a single entity).\n\n**Style is nested objects.** Top-level `style` accepts `containerStyle` (outermost wrapper) then component-specific keys. Each inner style is a regular React Native `StyleSheet` object.\n\n---\n\n## 1. Lists\n\nAll four list components take a request builder, an `onItemPress` callback, `on<List>LongPress` for long-press, and `style={}`.\n\n### CometChatConversations\n\nScrollable list of recent conversations (both user and group).\n\n```tsx\nimport { CometChatConversations } from \"@cometchat/chat-uikit-react-native\";\nimport { CometChat } from \"@cometchat/chat-sdk-react-native\";\n\n<CometChatConversations\n  conversationsRequestBuilder={\n    new CometChat.ConversationsRequestBuilder().setLimit(20)\n  }\n  onItemPress={(conversation) => {\n    const entity = conversation.getConversationWith();   // User | Group\n    const type = conversation.getConversationType();      // \"user\" | \"group\"\n    // navigate / open panel with `entity`\n  }}\n  onError={(err) => console.error(err)}\n  hideHeader={false}\n  hideReceipts={false}\n  style={{ containerStyle: { backgroundColor: \"#fff\" } }}\n/>\n```\n\nKey props: `conversationsRequestBuilder`, `onItemPress`, `onItemLongPress`, `onError`, `onEmpty`, `hideReceipts`, `hideHeader`, `hideSearch`, `TitleView`, `SubtitleView`, `LeadingView`, `TrailingView`, `EmptyStateView`, `ErrorStateView`, `LoadingStateView`, `BackdropView`, `style`.\n\n### CometChatUsers\n\n```tsx\n<CometChatUsers\n  usersRequestBuilder={new CometChat.UsersRequestBuilder().setLimit(30)}\n  onItemPress={(user) => openChatWith(user)}\n  searchKeyword=\"\"\n  hideStatus={false}\n/>\n```\n\nKey props: `usersRequestBuilder`, `onItemPress`, `onError`, `onEmpty`, `searchKeyword`, `hideStatus`, `hideSearch`, `LeadingView`, `TitleView`, `SubtitleView`, `EmptyStateView`, `ErrorStateView`, `LoadingStateView`, `style`.\n\n### CometChatGroups\n\n```tsx\n<CometChatGroups\n  groupsRequestBuilder={\n    new CometChat.GroupsRequestBuilder().setLimit(30).joinedOnly(true)\n  }\n  onItemPress={(group) => openGroupChat(group)}\n/>\n```\n\nKey props: same shape as Users, with `groupsRequestBuilder` instead.\n\n### CometChatGroupMembers\n\n```tsx\n<CometChatGroupMembers\n  group={selectedGroup}\n  groupMemberRequestBuilder={\n    new CometChat.GroupMembersRequestBuilder(selectedGroup.getGuid()).setLimit(30)\n  }\n  onItemPress={(member) => openMemberDetails(member)}\n  hideKickMemberOption={false}\n  hideBanMemberOption={false}\n/>\n```\n\nKey props: `group` (**required** — pass a `CometChat.Group` instance), `groupMemberRequestBuilder`, `onItemPress`, `onError`, `onBack`, `hideKickMemberOption`, `hideBanMemberOption`, `hideChangeScopeOption`, slot views for each row section, `style`.\n\n---\n\n## 2. Messages\n\n### CometChatMessageHeader\n\n```tsx\n<CometChatMessageHeader\n  user={selectedUser}            // OR group — never both\n  hideBackButton={false}\n  onBack={() => navigation.goBack()}\n  AuxiliaryButtonView={(user, group) => <CometChatCallButtons user={user} group={group} />}\n  TitleView={(user, group) => <CustomTitle />}\n  SubtitleView={(user, group) => <CustomSubtitle />}\n/>\n```\n\nKey props: `user` OR `group` (one required), `hideBackButton`, `hideVideoCallButton`, `hideVoiceCallButton`, `onBack`, `TitleView`, `SubtitleView`, `LeadingView`, `TrailingView`, `AuxiliaryButtonView`, `BackButtonIconImageResource`, `style`.\n\n### CometChatMessageList\n\nScrollable message feed. Handles reactions, receipts, mentions, threads, and media out of the box.\n\n```tsx\n<CometChatMessageList\n  user={selectedUser}\n  messageRequestBuilder={\n    new CometChat.MessagesRequestBuilder()\n      .setUID(selectedUser.getUid())\n      .setLimit(30)\n  }\n  hideReplyInThreadOption={true}       // SEE HARD RULE § 11\n  hideReceipts={false}\n  onThreadRepliesPress={(message, bubbleView) => openThreadPanel(message)}\n  onError={(err) => console.error(err)}\n  EmptyStateView={() => <Text>No messages yet</Text>}\n  style={{ containerStyle: { backgroundColor: \"#fff\" } }}\n/>\n```\n\nKey props: `user` OR `group`, `parentMessageId` (for thread replies), `messageRequestBuilder`, `goToMessageId` (scroll-to-message), `searchKeyword` (highlight in bubbles), `textFormatters`, `templates` (custom message type rendering — `CometChatMessageTemplate[]`), `hideReplyInThreadOption` **see hard rule § 11**, `hideReceipts`, `hideReactions`, `hideReplyOption`, `hideEditMessageOption`, `hideDeleteMessageOption`, `hideTranslateMessageOption`, `hideMessagePrivatelyOption`, `hideDateSeparator`, `onThreadRepliesPress`, `onMessageLongPress`, `onError`, all `*StateView` slots, `style`.\n\n### CometChatMessageComposer\n\nRich text input. Attachments, mentions, voice notes, sticker picker, reaction keyboard.\n\n```tsx\n<CometChatMessageComposer\n  user={selectedUser}\n  placeholderText=\"Type a message...\"\n  onSendButtonPress={(message) => console.log(\"sent\", message)}\n  onError={(err) => console.error(err)}\n  disableMentions={false}\n  textFormatters={[\n    new CometChatMentionsFormatter(),\n    new CometChatUrlsFormatter(),\n  ]}\n  AuxiliaryButtonView={() => <CustomAuxButton />}\n  attachmentOptions={(user, group) => [ /* CometChatMessageComposerAction[] */ ]}\n/>\n```\n\nKey props: `user` OR `group`, `parentMessageId` (for thread composer), `placeholderText`, `onSendButtonPress`, `onError`, `onTextChanged`, `disableMentions`, `disableSoundForMessages`, `textFormatters`, `attachmentOptions`, `AuxiliaryButtonView`, `HeaderView`, `SendButtonView`, `VoiceRecordingView`, `AttachmentIconView`, `EmojiIconView`, `style`.\n\n### CometChatCompactMessageComposer\n\nCompact variant for small screens. Auto-expanding input, rich-text, attachments.\n\n```tsx\n<CometChatCompactMessageComposer\n  user={selectedUser}\n  enableRichTextEditor={true}\n  onSendButtonPress={(message) => {}}\n/>\n```\n\nUse this instead of `CometChatMessageComposer` in drawers, widgets, or embedded placements. Same prop family.\n\n### CometChatThreadHeader\n\nHeader for a threaded reply view — parent message + reply count + close.\n\n```tsx\n<CometChatThreadHeader\n  parentMessage={threadParent}\n  onClose={() => setThreadMessage(null)}\n  hideReplyCount={false}\n/>\n```\n\n**Threading composition:**\n\n```tsx\n// In the main message list, capture a thread-open request\n<CometChatMessageList\n  user={selectedUser}\n  onThreadRepliesPress={(message) => setThreadMessage(message)}\n/>\n\n// When a thread is open, render the thread panel\n{threadMessage && (\n  <>\n    <CometChatThreadHeader\n      parentMessage={threadMessage}\n      onClose={() => setThreadMessage(null)}\n    />\n    <CometChatMessageList\n      user={selectedUser}\n      parentMessageId={threadMessage.getId()}\n    />\n    <CometChatMessageComposer\n      user={selectedUser}\n      parentMessageId={threadMessage.getId()}\n    />\n  </>\n)}\n```\n\n---\n\n## 3. Calling (separate SDK)\n\nCall components live in `@cometchat/chat-uikit-react-native` but **require `@cometchat/calls-sdk-react-native` to be installed** to work. Don't import any of these if the calls SDK isn't in the project.\n\n### CometChatCallButtons\n\nVoice + video call initiators. Drop into `AuxiliaryButtonView` on `CometChatMessageHeader` for phone + camera icons next to a user's name.\n\n```tsx\n<CometChatCallButtons\n  user={selectedUser}\n  onVoiceCallPress={(session) => navigation.navigate(\"OngoingCall\", { session })}\n  onVideoCallPress={(session) => navigation.navigate(\"OngoingCall\", { session })}\n  hideVideoCallButton={false}\n  hideVoiceCallButton={false}\n/>\n```\n\n### CometChatIncomingCall\n\nIncoming call notification. Render at the app root so it's visible on any screen.\n\n```tsx\n<CometChatIncomingCall\n  call={incomingCall}\n  onAccept={(call) => {}}\n  onDecline={(call) => {}}\n  disableSoundForCalls={false}\n/>\n```\n\n### CometChatOutgoingCall\n\nRinging-while-calling screen after `CometChat.initiateCall(...)`.\n\n```tsx\n<CometChatOutgoingCall\n  call={outgoingCall}\n  onClosePress={() => {}}\n/>\n```\n\n### CometChatOngoingCall\n\nIn-call UI — tiles, controls, mute, end-call.\n\n```tsx\n<CometChatOngoingCall\n  sessionID={session.sessionId}\n  callType=\"audio\"    // or \"video\"\n  onCallEnded={() => navigation.goBack()}\n/>\n```\n\n### CometChatCallLogs\n\nScrollable call history.\n\n```tsx\n<CometChatCallLogs\n  callLogsRequestBuilder={/* CallLogRequest builder from calls-sdk */}\n  onItemPress={(callLog) => openCallDetails(callLog)}\n/>\n```\n\n### CometChatMeetCallBubble\n\nCall-event message bubble. Auto-picked up by the message list — you don't render it manually.\n\n**Wiring**: requires `CallingExtension` to be initialized before `CometChatUIKit.init` (handled by the calls-sdk auto-init), and `<CometChatIncomingCall>` mounted at the app root. See `cometchat-native-features` § Calls.\n\n---\n\n## 4. AI\n\n### CometChatAIAssistantChatHistory\n\nAI assistant conversation history UI.\n\n```tsx\n<CometChatAIAssistantChatHistory\n  user={loggedInUser}\n  onMessageClicked={(message) => openChat(message)}\n  onNewChatButtonClick={() => startNewChat()}\n/>\n```\n\nSeparate dashboard setup required to enable AI agents. See `cometchat-native-features` § AI agent.\n\n---\n\n## 5. Search\n\n### CometChatSearch\n\nFull-featured search across conversations + messages + users + groups. Scoped to a user/group when passed a target.\n\n```tsx\n<CometChatSearch\n  uid={selectedUser?.getUid()}      // optional — scope to one user's chat\n  guid={selectedGroup?.getGuid()}   // optional — scope to one group\n  onBack={() => setShowSearch(false)}\n  onConversationPress={(conv) => openConversation(conv)}\n  onMessagePress={(msg) => scrollToMessage(msg)}\n/>\n```\n\nKey props: `uid` / `guid` (scope), `searchKeyword`, `onBack`, `onConversationPress`, `onMessagePress`, `onUserPress`, `onGroupPress`, `hideConversations`, `hideMessages`, `hideUsers`, `hideGroups`, `style`.\n\nWire from `CometChatMessageHeader`'s `onSearchPress`.\n\n> **Hard rule — never roll your own search.** Any request involving\n> \"search\", \"find messages\", \"search conversations\", or \"search across\n> conversations\" MUST use `<CometChatSearch>` (or `hideSearch={false}`\n> on `CometChatConversations` for a basic name filter). Do NOT build\n> custom `TextInput` search bars, hand-rolled result lists, or filter\n> UIs — they bypass the SDK's pagination, highlighting, and dual-scope\n> matching that ship with the built-in component.\n\n---\n\n## 6. Atoms (primitives for custom composition)\n\nBuilding blocks the higher-level components use internally. Use inside `<Slot>View` overrides or custom screens.\n\n| Component | Purpose |\n|---|---|\n| `CometChatAvatar` | Circular / rounded avatar. `image`, `name` (initials fallback), `backgroundColor`, `size` |\n| `CometChatBadge` | Small pill badge — unread count, typing indicator, labels |\n| `CometChatStatusIndicator` | Online/offline dot. `status`, `borderColor` |\n| `CometChatListItem` | Standard row — leading view + title/subtitle + trailing view |\n| `CometChatDate` | Relative-time date pill. `timestamp`, `pattern` |\n| `CometChatBottomSheet` | Modal sheet from bottom. Imperative `show()` / `hide()` via ref |\n| `CometChatActionSheet` | iOS-style action-sheet list |\n| `CometChatConfirmDialog` | Standard confirm / cancel dialog |\n| `CometChatReportDialog` | Report-user dialog |\n| `CometChatEmojiKeyboard` | Full emoji picker |\n| `CometChatMediaRecorder` | Voice-note recorder UI |\n| `CometChatInlineAudioRecorder` | Inline variant used inside the composer |\n| `CometChatReactions` | Reaction-bar UI |\n| `CometChatReactionList` | Full reaction-list popup |\n| `CometChatQuickReactions` | Quick reactions prompt (long-press) |\n| `CometChatMessagePreview` | Reply-quote preview in the composer |\n\nAll atoms take `style={}` in the same nested-object shape.\n\n---\n\n## 7. Bubbles\n\nThe message list renders bubbles automatically based on message type. Use them directly only when you need a custom bubble template.\n\n| Bubble | Renders |\n|---|---|\n| `CometChatTextBubble` | Text messages |\n| `CometChatImageBubble` | Image messages |\n| `CometChatAudioBubble` | Audio clip messages |\n| `CometChatVideoBubble` | Video messages |\n| `CometChatFileBubble` | File attachments |\n| `CometChatMeetCallBubble` | Call event marker (auto) |\n\nExtension-provided bubbles (only present if the extension is registered):\n\n| Bubble | Extension |\n|---|---|\n| `CometChatStickerBubble` | Stickers |\n| `LinkPreviewBubble` | Link previews |\n| `MessageTranslationBubble` | Translation inline |\n| `CometChatCollaborativeDocumentBubble` | Collab doc |\n| `CometChatCollaborativeWhiteBoardBubble` | Collab whiteboard |\n\n---\n\n## 8. Formatters (custom text rendering)\n\nPass via `CometChatMessageList.textFormatters` or the composer's same prop.\n\n| Formatter | Transforms |\n|---|---|\n| `CometChatMentionsFormatter` | `@uid` → linked mention bubble |\n| `CometChatUrlsFormatter` | URLs → tappable links |\n| `CometChatRichTextFormatter` | Markdown-ish `**bold**`, `*italic*`, `__underline__`, inline code |\n| `CometChatTextFormatter` | Base class — extend for custom formatters |\n\n```tsx\n<CometChatMessageList\n  user={selectedUser}\n  textFormatters={[\n    new CometChatMentionsFormatter(),\n    new CometChatUrlsFormatter(),\n    new CometChatRichTextFormatter(),\n  ]}\n/>\n```\n\nSee `cometchat-native-customization` for the `extends CometChatTextFormatter` recipe.\n\n---\n\n## 9. Infrastructure (static classes + event bus)\n\n### CometChatUIKit\n\nStatic class — init + login + logout + send.\n\n| Method | Purpose |\n|---|---|\n| `CometChatUIKit.init(settings)` | Initialize. Must resolve before any component renders. |\n| `CometChatUIKit.login({ uid })` | Log in (dev mode). **Takes an object**, not `login(\"...\")`. |\n| `CometChatUIKit.login({ authToken })` | Log in with a server-minted token (production). Same method as dev, different arg. |\n| `CometChatUIKit.getLoggedInUser()` | Returns current `CometChat.User` or `null` (Promise). |\n| `CometChatUIKit.logout()` | Log out + clear session. |\n| `CometChatUIKit.sendCustomMessage(msg)` | Send custom message (used by calling, extensions). |\n| `CometChatUIKit.uiKitSettings` | Read back the settings passed to `init()`. |\n\n### UIKitSettings (flat object passed to `init`)\n\nThe v5 RN UI Kit's `init()` takes a flat `UIKitSettings` object — there is **no** `UIKitSettingsBuilder` on RN (that's a web-kit pattern). See `cometchat-native-core` § 1.\n\n### CometChatUIEventHandler\n\nEvent bus. Subscribe to UI events emitted by components.\n\n```tsx\nimport { CometChatUIEventHandler } from \"@cometchat/chat-uikit-react-native\";\n\nconst listenerId = \"MY_LISTENER_\" + Date.now();\n\nCometChatUIEventHandler.addMessageListener(listenerId, {\n  ccMessageSent: ({ message }) => { /* ... */ },\n  ccMessageEdited: ({ message }) => { /* ... */ },\n  ccMessageDeleted: ({ message }) => { /* ... */ },\n});\n\n// Cleanup:\nCometChatUIEventHandler.removeMessageListener(listenerId);\n```\n\nAlso: `addConversationListener`, `addGroupListener`, `addUserListener`, `addCallListener` (all paired with `remove*Listener`).\n\n### CometChatMessageTemplate + CometChatMessageOption\n\n- **`CometChatMessageTemplate`**: register a custom message type. Pass via `templates` prop on `CometChatMessageList`.\n- **`CometChatMessageOption`**: override or extend long-press options on a message.\n\nSee `cometchat-native-customization` for recipes.\n\n### CometChatSoundManager\n\n```tsx\nimport { CometChatSoundManager, SoundOutput } from \"@cometchat/chat-uikit-react-native\";\nCometChatSoundManager.play(SoundOutput.incomingMessage);\n```\n\n### DataSource / DataSourceDecorator / MessageDataSource / ExtensionsDataSource / ChatConfigurator\n\nLower-level extension points for deep customization. `cometchat-native-customization` § Tier 4 covers when to use these instead of props.\n\n---\n\n## 10. Extensions (opt-in)\n\nExtensions add message types + features that are toggled on the app's backend (via `cometchat apply-feature <id>` for boolean extensions and AI features, or via the dashboard for third-party-key extensions like Giphy / Stipop). Each ships its own bubble + composer action. Register via the `extensions` field on `CometChatUIKit.init({ ... })`.\n\n| Extension | Adds |\n|---|---|\n| `PollsExtension` | `CometChatCreatePoll` composer action + vote-tracking bubble |\n| `StickersExtension` | Sticker picker + `CometChatStickerBubble` |\n| `LinkPreviewExtension` | `LinkPreviewBubble` for rich link cards |\n| `MessageTranslationExtension` | Per-message translate option |\n| `CollaborativeDocumentExtension` | Shared-doc composer action + bubble |\n| `CollaborativeWhiteboardExtension` | Shared-whiteboard composer action + bubble |\n| `ThumbnailGenerationExtension` | Auto-thumbnails for image attachments |\n\nSee `cometchat-native-features` for the per-extension recipe — most are pure boolean (`cometchat apply-feature <id>`); the AI ones need `--openai-key sk-...`; Giphy / Stipop / Tenor / Chatwoot / Intercom need third-party config in the dashboard.\n\n---\n\n## 11. Hard rule — `hideReplyInThreadOption` is mandatory on every MessageList\n\n**Every `<CometChatMessageList>` MUST include `hideReplyInThreadOption`** unless the integration also wires a full thread panel (`CometChatThreadHeader` + scoped `CometChatMessageList` with `parentMessageId` + scoped `CometChatMessageComposer` with `parentMessageId`).\n\nThe kit's default (`hideReplyInThreadOption: false`) puts a \"Reply in Thread\" entry in the message action menu that silently does nothing when no panel is wired. In drawer / widget / modal / stack-screen integrations without a thread panel, the option is a dead click.\n\nEvery example in this catalog includes the flag for a reason — keep it. The only place you can omit it is inside a full thread-panel composition (see § 2 Threading).\n\n---\n\n## 12. Common prop-finding recipe\n\nWhen a user's request isn't obviously covered, check in this order before writing custom code:\n\n1. **Named component in this catalog fits?** (\"show call history\" → `CometChatCallLogs`).\n2. **A `hide*` / visibility prop?** (\"hide receipts\" → `hideReceipts={true}`, not custom bubbles).\n3. **A `<Slot>View` prop?** (\"customize the header title\" → `TitleView={(u, g) => <MyTitle />}`, not a wholesale header replacement).\n4. **A `*RequestBuilder`?** (\"filter conversations\" → `conversationsRequestBuilder` with `.setUserTags([...])`, not post-render filtering).\n5. **`textFormatters` + `templates`** for message-rendering customization.\n6. **`CometChatUIEventHandler`** for cross-component communication.\n7. **Only then** escalate to `cometchat-native-customization` § Tier 4 (DataSource decorators, ChatConfigurator).\n\nNever hand-roll a bubble, a header, or a list when the kit ships one — you'll miss theming, reactions, typing indicators, receipts, and cross-framework behavior the built-ins handle.\n\n---\n\n## 13. Style shape reference\n\nEvery style prop follows a nested-object shape. Pass `style={}` for no customization; override only the keys you care about.\n\n```tsx\n<CometChatMessageList\n  style={{\n    containerStyle: { backgroundColor: \"#fff\", flex: 1 },\n    headerStyle: { titleStyle: { color: \"#000\" } },\n    avatarStyle: { containerStyle: { borderRadius: 8 } },\n    dateStyle: { textStyle: { fontSize: 10 } },\n  }}\n/>\n```\n\nCommon style keys across components:\n\n- `containerStyle` — outermost wrapper\n- `itemStyle` — individual list rows\n- `headerStyle`, `titleStyle`, `subtitleStyle`\n- `avatarStyle`, `badgeStyle`, `statusIndicatorStyle`\n- `bubbleStyle` (message list), `composerStyle` (composer)\n- `emptyStateStyle`, `errorStateStyle`, `loadingStateStyle`\n\nTheme-level tokens (`primary`, `textPrimary`, etc.) propagate via `CometChatThemeProvider` — prefer overriding theme tokens for app-wide changes and `style={}` only for per-component tweaks. See `cometchat-native-theming`.\n\n---\n\n## Skill routing reference\n\n| Skill | When to route |\n|---|---|\n| `cometchat-native-core` | Always read first — init, login, provider chain |\n| `cometchat-native-components` | This skill — any time you write `<CometChat*>` JSX |\n| `cometchat-native-placement` | Deciding WHERE components go (stack / tabs / modal / sheet) |\n| `cometchat-native-customization` | `textFormatters`, `templates`, custom slot views, event bus |\n| `cometchat-native-features` | Adding calls, extensions, AI |\n| `cometchat-native-theming` | `style={}` not enough — need app-wide color / typography changes |\n| `cometchat-native-production` | `login({ authToken })` setup |\n| `cometchat-native-troubleshooting` | `<CometChat*>` renders nothing or throws at runtime |","tags":["cometchat","native","components","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-native-components","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-native-components","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (23,032 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:54.128Z","embedding":null,"createdAt":"2026-05-07T13:05:14.257Z","updatedAt":"2026-05-18T19:04:54.128Z","lastSeenAt":"2026-05-18T19:04:54.128Z","tsv":"'-1':139 '000':2158 '1':137,358,1625,2007,2154 '10':1735,2166 '11':625,675,1878 '12':1984 '13':279,2122 '2':547,1982,2018 '20':245,403 '3':168,860,2030 '30':459,490,516,619 '4':1056,1726,2046,2084 '5':1089,2059 '6':1227,2067 '7':1373,2074 '8':1446,2162 '9':1508 'accept':339 'across':166,219,1096,1178,2170 'action':1306,1783,1796,1822,1829,1924 'action-sheet':1305 'actual':55 'ad':2282 'add':1741,1792 'addcalllisten':1661 'addconversationlisten':1658 'addgrouplisten':1659 'adduserlisten':1660 'agent':1081,1088 'ai':1057,1059,1080,1087,1762,1858,2285 'almost':121 'also':1657,1894 'alway':25,2236 'api':201 'app':937,1048,1750,2209,2295 'app-wid':2208,2294 'appli':208,1756,1855 'apply-featur':1755,1854 'arg':287,1559 'assist':1060 'atom':1228,1363 'attach':695,769,1413,1837 'attachmenticonview':753 'attachmentopt':728,748 'audio':985,1405 'authorit':60 'authtoken':1544,2305 'auto':763,1014,1042,1418,1833 'auto-expand':762 'auto-init':1041 'auto-pick':1013 'auto-thumbnail':1832 'automat':1380 'auxiliarybuttonview':311,562,591,727,749,899 'avatar':1254 'avatarstyl':2159,2182 'back':1583 'backbuttoniconimageresourc':592 'backdropview':450 'backend':1752 'backgroundcolor':431,643,1259,2151 'badg':1264 'badgestyl':2183 'bar':162,1198,1339 'base':151,1381,1481 'basic':1189 'behavior':2116 'block':1234 'bold':1475 'boolean':250,252,1759,1852 'bordercolor':1274 'borderradius':2161 'bottom':160,1295 'bottom-tab':159 'box':608 'bubbl':663,1012,1374,1379,1394,1396,1422,1430,1466,1781,1800,1823,1830,2029,2093 'bubblestyl':2185 'bubbleview':630 'build':1194,1233 'builder':20,50,236,367,998 'built':1224,2119 'built-in':1223,2118 'bus':1513,1628,2277 'bypass':1208 'call':861,864,885,895,932,948,951,953,960,966,972,979,992,1001,1009,1039,1055,1415,1579,2015,2283 'call-ev':1008 'callback':45,225,370 'callingextens':1029 'calllog':1004,1006 'calllogrequest':997 'calllogsrequestbuild':996 'calls-sdk':1000,1038 'calltyp':984 'camera':904 'cancel':1312 'capit':303 'captur':821 'card':1810 'care':2145 'case':124 'catalog':6,100,221,1957,2012 'ccmessagedelet':1652 'ccmessageedit':1650 'ccmessages':1648 'chain':2242 'chang':2211,2299 'chat':116,1120 'chatconfigur':1712,2087 'chatwoot':1868 'check':1999 'circular':1252 'class':1482,1511,1516 'claud':33 'cleanup':1654 'clear':1570 'click':1952 'clip':1406 'close':803 'code':1479,2006 'collab':1441,1444 'collaborativedocumentextens':1817 'collaborativewhiteboardextens':1824 'color':2157,2297 'cometchat':2,9,29,80,211,239,395,1052,1084,1500,1622,1694,1722,1754,1840,1853,2080,2222,2233,2244,2253,2256,2268,2279,2287,2301,2308,2311 'cometchat-native-compon':1,2243 'cometchat-native-cor':1621,2232 'cometchat-native-custom':1499,1693,1721,2079,2267 'cometchat-native-featur':1051,1083,1839,2278 'cometchat-native-plac':2255 'cometchat-native-product':2300 'cometchat-native-them':2221,2286 'cometchat-native-troubleshoot':2307 'cometchat.conversation':174,296 'cometchat.conversationsrequestbuilder':243,401 'cometchat.group':531 'cometchat.groupmembersrequestbuilder':513 'cometchat.groupsrequestbuilder':488 'cometchat.initiatecall':963 'cometchat.messagesrequestbuilder':615 'cometchat.user':1563 'cometchat.usersrequestbuilder':457 'cometchat/calls-sdk-react-native':871 'cometchat/chat-sdk-react-native':397 'cometchat/chat-uikit-react-native':393,868,1640,1705 'cometchatactionsheet':1301 'cometchataiassistantchathistori':1058,1065 'cometchataudiobubbl':1404 'cometchatavatar':1251 'cometchatbadg':1261 'cometchatbottomsheet':1291 'cometchatcallbutton':565,892,913 'cometchatcalllog':156,990,995,2017 'cometchatcollaborativedocumentbubbl':1440 'cometchatcollaborativewhiteboardbubbl':1443 'cometchatcompactmessagecompos':756,771 'cometchatconfirmdialog':1309 'cometchatconvers':131,153,379,391,398,1186 'cometchatcreatepol':1794 'cometchatd':1283 'cometchatemojikeyboard':1319 'cometchatfilebubbl':1411 'cometchatgroup':155,483,485 'cometchatgroupmemb':506,508 'cometchatimagebubbl':1401 'cometchatincomingcal':930,947 'cometchatinlineaudiorecord':1329 'cometchatlistitem':1275 'cometchatmediarecord':1323 'cometchatmeetcallbubbl':1007,1414 'cometchatmentionsformatt':724,1462,1493 'cometchatmessagecompos':134,142,691,704,782,855,1906 'cometchatmessagecomposeract':731 'cometchatmessagehead':132,140,549,551,901,1158 'cometchatmessagelist':133,141,594,610,827,850,1488,1680,1902,2148 'cometchatmessagelist.textformatters':1453 'cometchatmessageopt':1668,1681 'cometchatmessagepreview':1354 'cometchatmessagetempl':670,1667,1669 'cometchatongoingcal':969,981 'cometchatoutgoingcal':956,965 'cometchatquickreact':1347 'cometchatreact':1336 'cometchatreactionlist':1341 'cometchatreportdialog':1314 'cometchatrichtextformatt':1471,1497 'cometchatsearch':1091,1110 'cometchatsoundmanag':1699,1702 'cometchatsoundmanager.play':1706 'cometchatstatusind':1270 'cometchatstickerbubbl':1432,1804 'cometchattextbubbl':1398 'cometchattextformatt':1480,1506 'cometchatthemeprovid':2202 'cometchatthreadhead':792,805,844,1900 'cometchatuieventhandl':1626,1638,2068 'cometchatuieventhandler.addmessagelistener':1646 'cometchatuieventhandler.removemessagelistener':1655 'cometchatuikit':1514 'cometchatuikit.getloggedinuser':1560 'cometchatuikit.init':1034,1523,1790 'cometchatuikit.login':1532,1543 'cometchatuikit.logout':1567 'cometchatuikit.sendcustommessage':1572 'cometchatuikit.uikitsettings':1581 'cometchaturlsformatt':726,1467,1495 'cometchatus':154,452,454 'cometchatvideobubbl':1408 'common':1985,2167 'communic':2073 'compact':757 'compon':4,5,35,64,93,111,126,171,197,212,345,363,865,1226,1239,1249,1530,1635,2009,2072,2171,2218,2246,2261 'component-specif':344 'compos':114,195,740,1335,1361,1456,1782,1795,1821,1828,2189 'composerstyl':2188 'composit':814,1232,1980 'config':1874 'confirm':1311 'console.error':423,635,718 'console.log':713 'const':406,411,1641 'containerstyl':276,340,430,642,2150,2160,2172 'control':975 'conv':230,1133,1135 'convent':205,207 'convers':184,293,384,405,1061,1097,1175,1179,2050 'conversation.getconversationtype':413 'conversation.getconversationwith':182,408 'conversationsrequestbuild':241,399,435,2051 'core':1624,2235 'count':802,1266 'cover':120,1727,1998 'cross':2071,2114 'cross-compon':2070 'cross-framework':2113 'current':1562 'custom':666,1195,1231,1247,1393,1448,1485,1502,1575,1672,1696,1720,1724,2005,2028,2034,2066,2082,2139,2270,2273 'dashboard':1075,1767,1877 'data':163 'datasourc':1708,2085 'datasourcedecor':1709 'date':1287 'date.now':1645 'datestyl':2163 'dead':1951 'decid':2259 'decor':2086 'deep':1719 'default':320,1912 'dev':1536,1557 'dialog':1313,1318 'differ':1558 'direct':297,1387 'disablement':720,745 'disablesoundforcal':954 'disablesoundformessag':746 'doc':94,1442,1820 'docs/ui-kit/react-native/components-overview.mdx':90 'dot':1272 'drawer':784,1936 'drop':897 'dual':1216 'dual-scop':1215 'embed':787 'emit':172,1633 'emoji':1321 'emojiiconview':754 'emptystatestyl':2190 'emptystateview':308,447,479,637 'enabl':1079 'enablerichtexteditor':774 'end':978 'end-cal':977 'enough':2292 'entiti':181,330,407,420 'entri':1920 'err':232,422,424,634,636,717,719 'errorstatestyl':2191 'errorstateview':309,448,480 'escal':2077 'etc':2199 'event':284,290,1010,1416,1512,1627,1632,2276 'event.target':299 'everi':34,122,210,1885,1887,1953,2126 'exampl':224,1954 'exist':56 'expand':764 'export':41 'extend':1483,1505,1684 'extens':1420,1427,1431,1580,1716,1736,1740,1760,1773,1787,1791,1847,2284 'extension-provid':1419 'extensionsdatasourc':1711 'extract':179 'fallback':1258 'fals':426,428,466,522,524,559,627,721,812,927,929,955,1131,1184,1914 'famili':215,222,791 'featur':1054,1086,1094,1744,1757,1763,1842,1856,2281 'feed':597 'fff':432,644,2152 'field':1788 'file':1412 'filter':1191,1205,2049,2058 'find':1172,1988 'first':2238 'fit':2013 'flag':22,1960 'flat':1590,1604 'flex':2153 'flow':164 'follow':2129 'fontsiz':2165 'formatt':1447,1460,1486 'four':213,361 'framework':2115 'full':1093,1320,1342,1897,1976 'full-featur':1092 'function':314 'g':273,2040 'get':315 'getguid':1123 'getuid':1113 'giphi':1775,1865 'go':2262 'gotomessageid':655 'ground':82 'group':148,176,270,326,388,410,415,494,496,509,527,555,564,568,569,572,575,580,649,730,736,1100,1128 'groupmemberrequestbuild':511,533 'groupsrequestbuild':486,504 'guid':1121,1143 'hand':1200,2090 'hand-rol':1199,2089 'handl':598,1035,2121 'hard':623,673,1161,1879 'header':193,793,2036,2044,2095 'headerstyl':2155,2179 'headerview':750 'hide':21,246,249,1298,2020,2023 'hidebackbutton':558,583 'hidebanmemberopt':523,538 'hidechangescopeopt':539 'hideconvers':1151 'hidedatesepar':683 'hidedeletemessageopt':680 'hideeditmessageopt':679 'hidegroup':1154 'hidehead':425,441 'hidekickmemberopt':521,537 'hidemessag':1152 'hidemessageprivatelyopt':682 'hidereact':677 'hidereceipt':253,427,440,626,676,2025 'hidereplycount':811 'hidereplyinthreadopt':255,620,671,1881,1890,1913 'hidereplyopt':678 'hidesearch':442,475,1183 'hidestatus':465,474 'hidetranslatemessageopt':681 'hideus':1153 'hidevideocallbutton':584,926 'hidevoicecallbutton':585,928 'higher':1237 'higher-level':1236 'highlight':661,1213 'histori':993,1062,2016 'icon':905 'ident':165 'imag':1255,1402,1836 'imper':1296 'import':390,394,879,1637,1701 'in':2120 'in-cal':970 'inbox':130 'includ':1889,1958 'incom':931 'incomingcal':949 'independ':110 'indic':1268,2110 'individu':2176 'infrastructur':1509 'init':1043,1517,1588,1594,1601,2239 'initi':896,1032,1257,1525 'inlin':1330,1439,1478 'inner':349 'input':694,765 'insid':1243,1333,1974 'instal':874 'instanc':532 'instead':505,780,1732 'integr':1893,1942 'intercom':1869 'intern':1241 'invent':63 'involv':1170 'io':1303 'ios-styl':1302 'ish':1474 'isn':887,1995 'ital':1476 'itemstyl':277,2175 'joinedon':491 'jsx':30,81,264,267,2254 'keep':1964 'key':347,433,467,497,525,576,645,732,1140,1772,1863,2143,2169 'keyboard':702 'kit':13,40,88,105,1599,1618,1910,2101 'label':1269 'layout':117 'lead':1278 'leadingview':271,306,445,476,589 'level':337,1238,1715,2195 'like':1774 'link':1435,1464,1470,1809 'linkpreviewbubbl':1434,1806 'linkpreviewextens':1805 'list':170,194,359,362,381,820,1020,1203,1308,1345,1377,2098,2177,2187 'listen':1644,1666 'listenerid':1642,1647,1656 'live':866 'll':217,2105 'load':26 'loadingstatestyl':2192 'loadingstateview':310,449,481 'log':1534,1545,1568 'loggedinus':1067 'login':1518,1542,2240,2304 'logout':1519 'long':375,1352,1686 'long-press':374,1351,1685 'longpress':372 'look':70 'lower':1714 'lower-level':1713 'main':818 'mandatori':1883 'manual':1026 'markdown':1473 'markdown-ish':1472 'marker':1417 'match':1218 'media':604 'member':518,520 'memori':69 'mention':601,696,1465 'menu':1925 'messag':548,596,629,632,639,659,667,710,712,715,777,800,819,831,833,1011,1019,1069,1071,1098,1173,1376,1383,1400,1403,1407,1410,1576,1649,1651,1653,1673,1691,1742,1814,1923,2064,2186 'message-rend':2063 'messagedatasourc':1710 'messagelist':1886 'messagerequestbuild':613,654 'messagetranslationbubbl':1437 'messagetranslationextens':1811 'messeng':152 'method':1521,1555 'mint':1551 'miss':2106 'modal':1292,1938,2265 'mode':1537 'mount':1045 'msg':234,1137,1139,1573 'must':1180,1526,1888 'mute':976 'name':15,65,911,1190,1256,2008 'nativ':3,11,38,103,355,1053,1085,1501,1623,1695,1723,1841,2081,2223,2234,2245,2257,2269,2280,2288,2302,2309 'navig':416 'navigation.goback':561,989 'navigation.navigate':918,923 'need':1391,1860,1870,2293 'nest':333,1370,2132 'nested-object':1369,2131 'never':62,556,1163,2088 'new':238,242,400,456,487,512,614,723,725,1492,1494,1496 'next':906 'note':698,1326 'noth':1929,2313 'notif':933 'null':810,849,1565 'object':291,334,357,1371,1540,1591,1606,2133 'obvious':1997 'omit':1971 'on-ev':282 'onaccept':950 'onback':536,560,586,1129,1146 'oncallend':988 'onclos':808,847 'onclosepress':968 'onconversationpress':1132,1147 'ondeclin':952 'one':581,1117,1127,1859,2103 'onempti':439,472 'onerror':231,421,438,471,535,633,686,716,743 'ongoingcal':919,924 'ongrouppress':1150 'onitemlongpress':437 'onitempress':178,229,292,369,404,436,460,470,493,517,534,1003 'online/offline':1271 'onmessageclick':1068 'onmessagelongpress':685 'onmessagepress':1136,1148 'onnewchatbuttonclick':1072 'onsearchpress':1160 'onsendbuttonpress':233,711,742,776 'ontextchang':744 'onthreadrepliespress':628,684,830 'onuserpress':1149 'onvideocallpress':921 'onvoicecallpress':916 'open':417,825,838 'openai':1862 'openai-key':1861 'opencalldetail':1005 'openchat':1070 'openchatwith':462 'openconvers':1134 'opengroupchat':495 'openmemberdetail':519 'openthreadpanel':631 'opt':1738 'opt-in':1737 'option':1114,1124,1688,1816,1948 'order':2002 'outermost':341,2173 'outgoingcal':967 'overrid':1245,1682,2140,2204 'packages/chatuikit/src/index.ts':84 'page':95 'pagin':1212 'pair':1663 'pane':129 'panel':418,842,1899,1932,1946,1979 'param':227,263 'parent':799 'parentmessag':806,845 'parentmessageid':650,737,853,858,1904,1908 'parti':1771,1873 'pascalcas':265 'pass':186,529,1106,1451,1586,1592,1675,2135 'pattern':119,125,1290,1619 'per':92,1813,1846,2217 'per-compon':91,2216 'per-extens':1845 'per-messag':1812 'phone':903 'pick':1015 'picker':700,1322,1803 'pill':1263,1288 'place':1968 'placeholdertext':707,741 'placement':788,2258 'point':1717 'pollsextens':1793 'popup':1346 'posit':286 'post':2056 'post-rend':2055 'prefer':2203 'present':1424 'press':376,1353,1687 'preview':1358,1436 'primari':2197 'primit':1229 'product':1553,2303 'project':891 'promis':1566 'prompt':1350 'prop':16,44,67,190,204,206,214,318,434,468,498,526,577,646,733,790,1141,1459,1678,1734,1987,2022,2033,2128 'prop-find':1986 'propag':2200 'provid':1421,2241 'pure':1851 'purpos':31,1250,1522 'put':1915 'quick':1348 'quot':1357 'react':10,37,102,354 'reaction':599,701,1338,1344,1349,2108 'reaction-bar':1337 'reaction-list':1343 'read':74,1582,2237 'reason':1963 'receipt':600,2024,2111 'receiv':294 'recent':383 'recip':1507,1698,1848,1989 'record':1327 'ref':1300 'refer':61,2125,2227 'regist':1429,1670,1784 'regular':353 'relat':1285 'relative-tim':1284 'remov':1665 'render':669,839,934,1024,1378,1397,1450,1531,2057,2065,2312 'replac':259,2045 'repli':653,797,801,1356,1917 'reply-quot':1355 'report':1316 'report-us':1315 'request':19,49,235,366,826,1169,1994 'requestbuild':237,240,2048 'requir':528,582,870,1028,1077 'resolv':145,1527 'result':1202 'return':266,1561 'rich':692,767,1808 'rich-text':766 'ring':958 'ringing-while-cal':957 'rn':1597,1612 'roll':1164,1201,2091 'root':938,1049 'round':1253 'rout':2226,2231 'row':544,1277,2178 'rule':624,674,1162,1880 'runtim':2317 'scope':1101,1115,1125,1144,1217,1901,1905 'screen':761,945,961,1248,1941 'scroll':657 'scroll-to-messag':656 'scrollabl':380,595,991 'scrolltomessag':1138 'sdk':863,886,1002,1040,1210 'search':1090,1095,1167,1171,1174,1177,1197 'searchkeyword':464,473,660,1145 'section':261,545 'see':203,218,278,622,672,1050,1082,1498,1620,1692,1838,1981,2220 'selectedgroup':510,1122 'selectedgroup.getguid':514 'selectedus':553,612,706,773,829,852,857,915,1112,1490 'selecteduser.getuid':617 'send':1520,1574 'sendbuttonview':751 'sent':714 'separ':862,1074 'server':1550 'server-mint':1549 'session':917,920,922,925,1571 'session.sessionid':983 'sessionid':982 'set':108,1524,1585 'setlimit':244,402,458,489,515,618 'setshowsearch':1130 'setthreadmessag':809,832,848 'setuid':616 'setup':1076,2306 'setusertag':2053 'shape':24,53,223,281,500,1372,2124,2134 'share':198,1819,1826 'shared-doc':1818 'shared-whiteboard':1825 'sheet':1293,1307,2266 'ship':1220,1778,2102 'show':1297,2014 'signatur':46 'silent':1927 'singl':135,329 'size':1260 'sk':1864 'skill':76,2225,2228,2248 'skill-cometchat-native-components' 'slot':17,47,258,300,313,540,689,2274 'small':760,1262 'soundoutput':1703 'soundoutput.incomingmessage':1707 'sourc':89 'source-cometchat' 'specif':346 'stack':1940,2263 'stack-screen':1939 'standard':1276,1310 'startnewchat':1073 'stateview':688 'static':1510,1515 'status':1273 'statusindicatorstyl':2184 'sticker':699,1433,1802 'stickersextens':1801 'stipop':1776,1866 'style':23,52,274,275,280,331,338,350,378,429,451,482,546,593,641,690,755,1155,1304,1365,2123,2127,2136,2149,2168,2213,2290 'stylesheet':356 'subscrib':1629 'subtitlestyl':2181 'subtitleview':305,444,478,573,588 'surfac':202 'tab':150,161,2264 'tab-bas':149 'take':285,364,1364,1538,1602 'tappabl':1469 'target':1108 'teach':32 'templat':665,1395,1677,2061,2272 'tenor':1867 'text':693,768,1399,1449 'textformatt':664,722,747,1491,2060,2271 'textinput':1196 'textprimari':2198 'textstyl':2164 'theme':2107,2194,2205,2224,2289 'theme-level':2193 'third':1770,1872 'third-parti':1871 'third-party-key':1769 'thread':136,602,652,739,796,813,824,836,841,1898,1919,1945,1978,1983 'thread-open':823 'thread-panel':1977 'threadmessag':843,846 'threadmessage.getid':854,859 'threadpar':807 'three':118 'throw':2315 'thumbnail':1834 'thumbnailgenerationextens':1831 'tier':1725,2083 'tile':974 'time':1286,2250 'timestamp':1289 'titl':2037 'title/subtitle':1280 'titlestyl':2156,2180 'titleview':268,304,443,477,570,587,2038 'toggl':248,1747 'token':1552,2196,2206 'top':336 'top-level':335 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'track':1799 'trail':1281 'trailingview':307,446,590 'transform':1461 'translat':1438,1815 'troubleshoot':2310 'true':254,256,492,621,775,2026 'truth':83 'tsx':389,453,484,507,550,609,703,770,804,815,912,946,964,980,994,1064,1109,1487,1636,1700,2147 'tweak':2219 'two':128 'two-pan':127 'type':412,668,708,1267,1384,1674,1743,2109 'typographi':2298 'u':272,2039 'ui':12,39,87,104,973,1063,1206,1328,1340,1598,1631 'uid':1111,1142,1463,1533 'uikitset':1589,1605 'uikitsettingsbuild':1610 'underlin':1477 'unless':1891 'unread':1265 'url':1468 'use':98,123,778,1181,1240,1242,1332,1385,1577,1730 'user':146,175,269,325,386,409,414,461,463,502,552,563,566,567,571,574,578,611,647,705,729,734,772,828,851,856,909,914,1066,1099,1118,1317,1489,1992 'user/group':1104 'usersrequestbuild':455,469 'usual':324 'v5':14,1596 'variant':758,1331 'via':177,1299,1452,1676,1753,1765,1785,2201 'video':894,987,1409 'view':18,48,257,262,301,321,541,798,1244,1279,1282,2032,2275 'visibl':247,251,942,2021 'voic':697,893,1325 'voice-not':1324 'voicerecordingview':752 'void':228 'vote':1798 'vote-track':1797 'web':1617 'web-kit':1616 'whiteboard':1445,1827 'wholesal':2043 'wide':2210,2296 'widget':785,1937 'wire':1027,1156,1895,1934 'without':1943 'work':876 'would':322 'wrapper':342,2174 'write':28,78,2004,2252 'yet':640","prices":[{"id":"a2a7cba4-a132-42e0-8d3a-241a90ab30ac","listingId":"656ab92c-017e-4df6-872e-ea6a9e396a23","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T13:05:14.257Z"}],"sources":[{"listingId":"656ab92c-017e-4df6-872e-ea6a9e396a23","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-native-components","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-native-components","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:14.257Z","lastSeenAt":"2026-05-18T19:04:54.128Z"}],"details":{"listingId":"656ab92c-017e-4df6-872e-ea6a9e396a23","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-native-components","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"8540496a780a7e994f849d41dfeb4839fd17821c","skill_md_path":"skills/cometchat-native-components/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-native-components"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-native-components","license":"MIT","description":"Component catalog for the CometChat React Native UI Kit v5 — names, props, slot views, request builders, hide flags, style shape. Always loaded before writing CometChat* JSX.","compatibility":"Node.js >=18; React Native >=0.70; @cometchat/chat-uikit-react-native ^5"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-native-components"},"updatedAt":"2026-05-18T19:04:54.128Z"}}