@cometchat/skills 4.2.1 → 4.4.0

package/skills/cometchat-native-components/SKILL.md

@@ -3,7 +3,6 @@ name: cometchat-native-components
 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."
 license: "MIT"
 compatibility: "Node.js >=18; React Native >=0.70; @cometchat/chat-uikit-react-native ^5"
-allowed-tools: "shell, file-read, file-search, file-list, ask-user"
 metadata:
   author: "CometChat"
   version: "3.0.0"
@@ -16,7 +15,7 @@ Teaches Claude every component the React Native UI Kit exports, with the props,
 
 **Read this skill before writing any `<CometChat*>` JSX.**
 
-Ground truth: `packages/ChatUiKit/src/index.ts` from the UI Kit source + `docs/ui-kit/react-native/components-overview.mdx` + per-component doc pages.
+Ground truth: `packages/ChatUiKit/src/index.ts` from the UI Kit source + `docs/ui-kit/react-native/components-overview.mdx` + per-component doc pages. **Official docs:** https://www.cometchat.com/docs/ui-kit/react-native/components-overview · **Docs MCP:** `claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp` (or fetch the URL directly without MCP).
 
 ---
 
@@ -24,6 +23,8 @@ Ground truth: `packages/ChatUiKit/src/index.ts` from the UI Kit source + `docs/u
 
 The React Native UI Kit is a set of independent components that you compose into chat layouts. Three patterns cover almost every use case:
 
+> ⛔ **Only the components in THIS catalog exist — do not invent or recall names from v4/older memory.** Before emitting ANY `CometChat*` component, confirm it's in this catalog; if it's not here, it doesn't exist (→ unresolved-import build failure). **There is no all-in-one component:** the v4 composites `CometChatConversationsWithMessages`, `CometChatUsersWithMessages`, `CometChatGroupsWithMessages`, the `CometChatMessages` composite, and the `CometChatUI` god-component are all **absent in this RN kit** (verified against its exports) — compose the panes yourself per the table below. This is the #1 v4-memory hallucination.
+
 | Pattern | Components |
 |---|---|
 | **Two-pane** (inbox) | `CometChatConversations` + `CometChatMessageHeader` + `CometChatMessageList` + `CometChatMessageComposer` |
@@ -44,13 +45,13 @@ Four prop families you'll see across the catalog:
 |---|---|---|
 | **Callback** | `on<Event>={(param) => void}` | `onItemPress={(conv) => ...}` • `onError={(err) => ...}` • `onSendButtonPress={(msg) => ...}` |
 | **Request builder** | `<entity>RequestBuilder={new CometChat.<Entity>RequestBuilder()}` | `conversationsRequestBuilder={new CometChat.ConversationsRequestBuilder().setLimit(20)}` |
-| **Hide / visibility toggle** | `hide<Feature>={boolean}` \| `<feature>Visibility={boolean}` | `hideReceipts={true}` • `hideReplyInThreadOption={true}` |
-| **View slot (replace a section)** | `<Slot>View={(params) => JSX}` — **PascalCase**, returns JSX | `TitleView={(user, group) => <MyTitle />}` • `LeadingView={(u, g) => <MyAvatar />}` |
-| **Style** | `style={{ containerStyle: {}, itemStyle: { ... } }}` | see § 13 Style shape |
+| **Hide / visibility toggle** | `hide<Feature>={boolean}` \| `<feature>Visibility={boolean}` | `receiptsVisibility={true}` • `hideReplyInThreadOption={true}` |
+| **View slot (replace a section)** | `<Slot>View={(params) => JSX}` — **PascalCase**, returns JSX | `TitleView={({ user, group }) => <MyTitle />}` • `LeadingView={({ user, group }) => <MyAvatar />}` |
+| **Style** | `style={{ containerStyle: {}, itemStyle: { ... } }}` | see § 14 Style shape |
 
 **On-events take positional args, not an event object.** `onItemPress={(conversation) => ...}` receives the `CometChat.Conversation` directly — no `event.target`.
 
-**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).
+**Slot views are capitalized**: `TitleView`, `SubtitleView`, `LeadingView`, `TrailingView`, `EmptyView`, `ErrorView`, `LoadingView`, `AuxiliaryButtonView`, `ItemView`. Each slot function receives a **single destructured object** — typically `({ user, group }) => JSX` — NOT positional `(user, group)` args.
 
 **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.
 
@@ -79,12 +80,12 @@ import { CometChat } from "@cometchat/chat-sdk-react-native";
   }}
   onError={(err) => console.error(err)}
   hideHeader={false}
-  hideReceipts={false}
+  receiptsVisibility={true}
   style={{ containerStyle: { backgroundColor: "#fff" } }}
 />
 ```
 
-Key props: `conversationsRequestBuilder`, `onItemPress`, `onItemLongPress`, `onError`, `onEmpty`, `hideReceipts`, `hideHeader`, `hideSearch`, `TitleView`, `SubtitleView`, `LeadingView`, `TrailingView`, `EmptyStateView`, `ErrorStateView`, `LoadingStateView`, `BackdropView`, `style`.
+Key props: `conversationsRequestBuilder`, `onItemPress`, `onItemLongPress`, `onError`, `onEmpty`, `receiptsVisibility` (default `true`), `hideHeader`, `showSearchBar` (default `false`), `TitleView`, `SubtitleView`, `LeadingView`, `TrailingView`, `EmptyView`, `ErrorView`, `LoadingView`, `style`.
 
 ### CometChatUsers
 
@@ -93,11 +94,11 @@ Key props: `conversationsRequestBuilder`, `onItemPress`, `onItemLongPress`, `onE
   usersRequestBuilder={new CometChat.UsersRequestBuilder().setLimit(30)}
   onItemPress={(user) => openChatWith(user)}
   searchKeyword=""
-  hideStatus={false}
+  usersStatusVisibility={true}
 />
 ```
 
-Key props: `usersRequestBuilder`, `onItemPress`, `onError`, `onEmpty`, `searchKeyword`, `hideStatus`, `hideSearch`, `LeadingView`, `TitleView`, `SubtitleView`, `EmptyStateView`, `ErrorStateView`, `LoadingStateView`, `style`.
+Key props: `usersRequestBuilder`, `onItemPress`, `onError`, `onEmpty`, `searchKeyword`, `usersStatusVisibility` (default `true`), `LeadingView`, `TitleView`, `SubtitleView`, `EmptyView`, `ErrorView`, `LoadingView`, `style`.
 
 ### CometChatGroups
 
@@ -110,7 +111,7 @@ Key props: `usersRequestBuilder`, `onItemPress`, `onError`, `onEmpty`, `searchKe
 />
 ```
 
-Key props: same shape as Users, with `groupsRequestBuilder` instead.
+Key props: same shape as Users, with `groupsRequestBuilder` instead — plus a `hideSearch` flag (Groups has one; Users does not). Slot views are `EmptyView` / `ErrorView` / `LoadingView`.
 
 ### CometChatGroupMembers
 
@@ -126,7 +127,7 @@ Key props: same shape as Users, with `groupsRequestBuilder` instead.
 />
 ```
 
-Key props: `group` (**required** — pass a `CometChat.Group` instance), `groupMemberRequestBuilder`, `onItemPress`, `onError`, `onBack`, `hideKickMemberOption`, `hideBanMemberOption`, `hideChangeScopeOption`, slot views for each row section, `style`.
+Key props: `group` (**required** — pass a `CometChat.Group` instance), `groupMemberRequestBuilder`, `onItemPress`, `onError` (no args — `() => void`), `showBackButton` (toggle the back button; there is no `onBack` prop), `hideKickMemberOption`, `hideBanMemberOption`, `hideScopeChangeOption`, slot views for each row section, `style`.
 
 ---
 
@@ -137,15 +138,15 @@ Key props: `group` (**required** — pass a `CometChat.Group` instance), `groupM
 ```tsx
 <CometChatMessageHeader
   user={selectedUser}            // OR group — never both
-  hideBackButton={false}
+  showBackButton={true}
   onBack={() => navigation.goBack()}
-  AuxiliaryButtonView={(user, group) => <CometChatCallButtons user={user} group={group} />}
-  TitleView={(user, group) => <CustomTitle />}
-  SubtitleView={(user, group) => <CustomSubtitle />}
+  AuxiliaryButtonView={({ user, group }) => <CometChatCallButtons user={user} group={group} />}
+  TitleView={({ user, group }) => <CustomTitle />}
+  SubtitleView={({ user, group }) => <CustomSubtitle />}
 />
 ```
 
-Key props: `user` OR `group` (one required), `hideBackButton`, `hideVideoCallButton`, `hideVoiceCallButton`, `onBack`, `TitleView`, `SubtitleView`, `LeadingView`, `TrailingView`, `AuxiliaryButtonView`, `BackButtonIconImageResource`, `style`.
+Key props: `user` OR `group` (one required), `showBackButton` (default `false`), `hideVideoCallButton`, `hideVoiceCallButton`, `onBack`, `TitleView`, `SubtitleView`, `LeadingView`, `TrailingView`, `AuxiliaryButtonView`, `ItemView`, `style`. All slot views take a single object — `({ user, group }) => JSX`, NOT positional `(user, group)`.
 
 ### CometChatMessageList
 
@@ -159,16 +160,16 @@ Scrollable message feed. Handles reactions, receipts, mentions, threads, and med
       .setUID(selectedUser.getUid())
       .setLimit(30)
   }
-  hideReplyInThreadOption={true}       // SEE HARD RULE § 11
-  hideReceipts={false}
+  hideReplyInThreadOption={true}       // SEE HARD RULE § 12
+  receiptsVisibility={true}
   onThreadRepliesPress={(message, bubbleView) => openThreadPanel(message)}
   onError={(err) => console.error(err)}
-  EmptyStateView={() => <Text>No messages yet</Text>}
+  EmptyView={() => <Text>No messages yet</Text>}
   style={{ containerStyle: { backgroundColor: "#fff" } }}
 />
 ```
 
-Key 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`.
+Key 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 § 12**, `receiptsVisibility` (default `true`), `hideReactionOption`, `hideReplyOption`, `hideEditMessageOption`, `hideDeleteMessageOption`, `hideTranslateMessageOption`, `hideMessagePrivatelyOption`, `hideCopyMessageOption`, `hideMessageInfoOption`, `hideFlagMessageOption`, `hideShareMessageOption`, `dateSeparatorPattern` (there is no `hideDateSeparator` flag), `onThreadRepliesPress`, `onError`, `EmptyView` / `ErrorView` / `LoadingView`, `style`.
 
 ### CometChatMessageComposer
 
@@ -177,7 +178,8 @@ Rich text input. Attachments, mentions, voice notes, sticker picker, reaction ke
 ```tsx
 <CometChatMessageComposer
   user={selectedUser}
-  placeholderText="Type a message..."
+  initialComposertext="Type a message..."
+  keyboardAvoidingViewProps={Platform.OS === "android" ? {} : { behavior: "padding" }}
   onSendButtonPress={(message) => console.log("sent", message)}
   onError={(err) => console.error(err)}
   disableMentions={false}
@@ -185,12 +187,14 @@ Rich text input. Attachments, mentions, voice notes, sticker picker, reaction ke
     new CometChatMentionsFormatter(),
     new CometChatUrlsFormatter(),
   ]}
-  AuxiliaryButtonView={() => <CustomAuxButton />}
-  attachmentOptions={(user, group) => [ /* CometChatMessageComposerAction[] */ ]}
+  AuxiliaryButtonView={({ user, group }) => <CustomAuxButton />}
+  attachmentOptions={({ user, group }) => [ /* CometChatMessageComposerAction[] */ ]}
 />
 ```
 
-Key props: `user` OR `group`, `parentMessageId` (for thread composer), `placeholderText`, `onSendButtonPress`, `onError`, `onTextChanged`, `disableMentions`, `disableSoundForMessages`, `textFormatters`, `attachmentOptions`, `AuxiliaryButtonView`, `HeaderView`, `SendButtonView`, `VoiceRecordingView`, `AttachmentIconView`, `EmojiIconView`, `style`.
+Key props: `user` OR `group`, `parentMessageId` (for thread composer), `initialComposertext`, `keyboardAvoidingViewProps`, `onSendButtonPress`, `onError`, `onTextChange`, `disableMentions`, `disableSoundForOutgoingMessages`, `textFormatters`, `attachmentOptions` (single-object `({ user, group }) =>`), `HeaderView`, `AuxiliaryButtonView`, `SendButtonView`, `style`.
+
+**Keyboard avoidance is the composer's job.** The kit composer owns it via `keyboardAvoidingViewProps` — do **not** wrap Header/List/Composer in an external `KeyboardAvoidingView` (the kit sample app does not). Pass `{ behavior: "padding" }` on iOS, `{}` on Android (Android relies on the manifest's `android:windowSoftInputMode="adjustResize"`).
 
 ### CometChatCompactMessageComposer
 
@@ -204,7 +208,7 @@ Compact variant for small screens. Auto-expanding input, rich-text, attachments.
 />
 ```
 
-Use this instead of `CometChatMessageComposer` in drawers, widgets, or embedded placements. Same prop family.
+Use this instead of `CometChatMessageComposer` in drawers, widgets, or embedded placements. Same prop family — but note the placeholder prop here is `placeHolderText` (capital H), distinct from the standard composer's `initialComposertext`.
 
 ### CometChatThreadHeader
 
@@ -213,11 +217,12 @@ Header for a threaded reply view — parent message + reply count + close.
 ```tsx
 <CometChatThreadHeader
   parentMessage={threadParent}
-  onClose={() => setThreadMessage(null)}
-  hideReplyCount={false}
+  replyCountVisibility={true}
 />
 ```
 
+Key props: `parentMessage` (**required** — a `CometChat.BaseMessage`), `template` (`CometChatMessageTemplate`), `replyCountVisibility` (default `true`), `style`. There is no `onClose` prop — drive the panel's visibility from the parent's own state (see the threading composition below).
+
 **Threading composition:**
 
 ```tsx
@@ -232,7 +237,6 @@ Header for a threaded reply view — parent message + reply count + close.
   <>
     <CometChatThreadHeader
       parentMessage={threadMessage}
-      onClose={() => setThreadMessage(null)}
     />
     <CometChatMessageList
       user={selectedUser}
@@ -259,46 +263,48 @@ Voice + video call initiators. Drop into `AuxiliaryButtonView` on `CometChatMess
 ```tsx
 <CometChatCallButtons
   user={selectedUser}
-  onVoiceCallPress={(session) => navigation.navigate("OngoingCall", { session })}
-  onVideoCallPress={(session) => navigation.navigate("OngoingCall", { session })}
   hideVideoCallButton={false}
   hideVoiceCallButton={false}
+  onError={(err) => console.error(err)}
 />
 ```
 
+Key props: `user` OR `group`, `hideVideoCallButton`, `hideVoiceCallButton`, `callSettingsBuilder`, `onError`. There are no `onVoiceCallPress` / `onVideoCallPress` props — the kit initiates the call and emits the outgoing-call event itself (see `cometchat-native-features` §3d for wiring the resulting overlay).
+
 ### CometChatIncomingCall
 
-Incoming call notification. Render at the app root so it's visible on any screen.
+Incoming call notification. **Parent-controlled — must be conditionally rendered when an incoming-call event fires on `CometChat.addCallListener`'s `onIncomingCallReceived`.** Render at the app root so it's visible on any screen.
+
+> **DO NOT pass `onAccept`** — it short-circuits the kit's internal `acceptCall` + transition to `<CometChatOngoingCall>`. The kit fires `ccShowOngoingCall` after acceptance; let the parent's `CometChatUIEventHandler.addCallListener` mount the ongoing surface. Only handle `onDecline` + `onError`. See `cometchat-native-calls` §1.8.c and full wiring in `cometchat-native-features` §3d.
 
 ```tsx
 <CometChatIncomingCall
   call={incomingCall}
-  onAccept={(call) => {}}
-  onDecline={(call) => {}}
+  onDecline={() => setIncomingCall(null)}
+  onError={() => setIncomingCall(null)}
   disableSoundForCalls={false}
 />
 ```
 
 ### CometChatOutgoingCall
 
-Ringing-while-calling screen after `CometChat.initiateCall(...)`.
+Ringing-while-calling screen. **Parent-controlled — NOT auto-mounted by `CometChatIncomingCall` or by tapping the call button.** To make the call button in `<CometChatMessageHeader>` actually mount this overlay, register `CometChatUIEventHandler.addCallListener` and listen for `ccOutgoingCall`. Full wiring template in `cometchat-native-features` §3d.
 
 ```tsx
 <CometChatOutgoingCall
   call={outgoingCall}
-  onClosePress={() => {}}
+  onEndCallButtonPressed={(call) => {}}
 />
 ```
 
 ### CometChatOngoingCall
 
-In-call UI — tiles, controls, mute, end-call.
+In-call UI — tiles, controls, mute, end-call. **Parent-controlled — NOT auto-mounted.** Mount when `CometChatUIEventHandler.addCallListener`'s `ccShowOngoingCall` event fires (kit emits this after `acceptCall` succeeds OR when the caller's outgoing call is accepted by the peer). Full wiring in `cometchat-native-features` §3d.
 
 ```tsx
 <CometChatOngoingCall
   sessionID={session.sessionId}
-  callType="audio"    // or "video"
-  onCallEnded={() => navigation.goBack()}
+  callSettingsBuilder={callSettingsBuilder}   // REQUIRED — a CometChatCalls.CallSettingsBuilder
 />
 ```
 
@@ -308,7 +314,7 @@ Scrollable call history.
 
 ```tsx
 <CometChatCallLogs
-  callLogsRequestBuilder={/* CallLogRequest builder from calls-sdk */}
+  callLogRequestBuilder={/* CallLogRequest builder from calls-sdk */}
   onItemPress={(callLog) => openCallDetails(callLog)}
 />
 ```
@@ -350,14 +356,14 @@ Full-featured search across conversations + messages + users + groups. Scoped to
   uid={selectedUser?.getUid()}      // optional — scope to one user's chat
   guid={selectedGroup?.getGuid()}   // optional — scope to one group
   onBack={() => setShowSearch(false)}
-  onConversationPress={(conv) => openConversation(conv)}
-  onMessagePress={(msg) => scrollToMessage(msg)}
+  onConversationClicked={(conv, searchKeyword) => openConversation(conv)}
+  onMessageClicked={(msg, searchKeyword) => scrollToMessage(msg)}
 />
 ```
 
-Key props: `uid` / `guid` (scope), `searchKeyword`, `onBack`, `onConversationPress`, `onMessagePress`, `onUserPress`, `onGroupPress`, `hideConversations`, `hideMessages`, `hideUsers`, `hideGroups`, `style`.
+Key props: `uid` / `guid` (scope), `searchKeyword`, `onBack`, `onConversationClicked` (`(conversation, searchKeyword?) => void`), `onMessageClicked` (`(message, searchKeyword?) => void`), `searchIn` (`CometChatSearchScope[]` — controls which categories are searched; there are no per-category `hide*` flags or `onUserPress` / `onGroupPress` callbacks), `style`.
 
-Wire from `CometChatMessageHeader`'s `onSearchPress`.
+Mount it from your own UI (e.g. a search button in your screen's app bar) — `CometChatMessageHeader` does not expose a search callback.
 
 > **Hard rule — never roll your own search.** Any request involving
 > "search", "find messages", "search conversations", or "search across
@@ -369,7 +375,35 @@ Wire from `CometChatMessageHeader`'s `onSearchPress`.
 
 ---
 
-## 6. Atoms (primitives for custom composition)
+## 6. Notifications
+
+### CometChatNotificationFeed
+
+In-app notification feed UI — a full-screen, scrollable list of campaign/promotional notifications, each rendered as a native card (via `@cometchat/cards-react-native`). Handles fetching, pagination (infinite scroll), category filter chips, timestamp grouping, real-time WebSocket updates, pull-to-refresh, and read/delivered/engagement reporting automatically.
+
+> **NOT push configuration.** This renders the in-app feed of received notifications. It does NOT set up push delivery (FCM/APNs token registration, dashboard providers, background wake). For that, see `cometchat-native-push`.
+
+```tsx
+<CometChatNotificationFeed
+  showBackButton={true}
+  onBackPress={() => navigation.goBack()}
+  onItemClick={(item) => openDetail(item)}
+  onActionClick={(item, action) => {
+    const { type, params, elementId } = action; // e.g. type "openUrl" → params.url
+  }}
+  notificationFeedRequestBuilder={
+    new CometChat.NotificationFeedRequestBuilder().setLimit(30).build()
+  }
+/>
+```
+
+Drop it into a screen/navigation destination — it manages its own data, state, and listeners; you only handle navigation callbacks. Renders with zero props (`<CometChatNotificationFeed />`) given an initialized SDK + logged-in user.
+
+Key props: `title` (default `"Notifications"`), `showHeader` (default `true`), `showBackButton` (default `false`), `showFilterChips` (default `true`), `scrollToItemId` (deep-link to one item), `notificationFeedRequestBuilder` (`CometChat.NotificationFeedRequestBuilder`), `notificationCategoriesRequestBuilder` (`CometChat.NotificationCategoriesRequestBuilder`), `onItemClick` (`(feedItem) => void`), `onActionClick` (`(feedItem, action: { type, params, elementId }) => void`), `onError` (`(error: CometChat.CometChatException) => void`), `onBackPress` (`() => void`), `cardThemeMode` (`"auto" | "light" | "dark"`, default `"auto"`), `cardThemeOverride`, `style`. Slot views are `HeaderView` / `EmptyView` / `ErrorView` / `LoadingView` (each `() => JSX.Element`).
+
+---
+
+## 7. Atoms (primitives for custom composition)
 
 Building blocks the higher-level components use internally. Use inside `<Slot>View` overrides or custom screens.
 
@@ -396,7 +430,7 @@ All atoms take `style={}` in the same nested-object shape.
 
 ---
 
-## 7. Bubbles
+## 8. Bubbles
 
 The message list renders bubbles automatically based on message type. Use them directly only when you need a custom bubble template.
 
@@ -421,7 +455,7 @@ Extension-provided bubbles (only present if the extension is registered):
 
 ---
 
-## 8. Formatters (custom text rendering)
+## 9. Formatters (custom text rendering)
 
 Pass via `CometChatMessageList.textFormatters` or the composer's same prop.
 
@@ -447,7 +481,7 @@ See `cometchat-native-customization` for the `extends CometChatTextFormatter` re
 
 ---
 
-## 9. Infrastructure (static classes + event bus)
+## 10. Infrastructure (static classes + event bus)
 
 ### CometChatUIKit
 
@@ -458,7 +492,7 @@ Static class — init + login + logout + send.
 | `CometChatUIKit.init(settings)` | Initialize. Must resolve before any component renders. |
 | `CometChatUIKit.login({ uid })` | Log in (dev mode). **Takes an object**, not `login("...")`. |
 | `CometChatUIKit.login({ authToken })` | Log in with a server-minted token (production). Same method as dev, different arg. |
-| `CometChatUIKit.getLoggedInUser()` | Returns current `CometChat.User` or `null` (Promise). |
+| `CometChatUIKit.getLoggedInUser()` | Returns the current `CometChat.User` (Promise). **Throws `code: "NOT_FOUND"` when there is no session** — wrap in try/catch (see core §2). |
 | `CometChatUIKit.logout()` | Log out + clear session. |
 | `CometChatUIKit.sendCustomMessage(msg)` | Send custom message (used by calling, extensions). |
 | `CometChatUIKit.uiKitSettings` | Read back the settings passed to `init()`. |
@@ -498,8 +532,8 @@ See `cometchat-native-customization` for recipes.
 ### CometChatSoundManager
 
 ```tsx
-import { CometChatSoundManager, SoundOutput } from "@cometchat/chat-uikit-react-native";
-CometChatSoundManager.play(SoundOutput.incomingMessage);
+import { CometChatSoundManager } from "@cometchat/chat-uikit-react-native";
+CometChatSoundManager.play("incomingMessage");   // string key; SoundOutput is a static member of CometChatSoundManager, not a named export
 ```
 
 ### DataSource / DataSourceDecorator / MessageDataSource / ExtensionsDataSource / ChatConfigurator
@@ -508,7 +542,7 @@ Lower-level extension points for deep customization. `cometchat-native-customiza
 
 ---
 
-## 10. Extensions (opt-in)
+## 11. Extensions (opt-in)
 
 Extensions 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({ ... })`.
 
@@ -526,7 +560,7 @@ See `cometchat-native-features` for the per-extension recipe — most are pure b
 
 ---
 
-## 11. Hard rule — `hideReplyInThreadOption` is mandatory on every MessageList
+## 12. Hard rule — `hideReplyInThreadOption` is mandatory on every MessageList
 
 **Every `<CometChatMessageList>` MUST include `hideReplyInThreadOption`** unless the integration also wires a full thread panel (`CometChatThreadHeader` + scoped `CometChatMessageList` with `parentMessageId` + scoped `CometChatMessageComposer` with `parentMessageId`).
 
@@ -536,13 +570,13 @@ Every example in this catalog includes the flag for a reason — keep it. The on
 
 ---
 
-## 12. Common prop-finding recipe
+## 13. Common prop-finding recipe
 
 When a user's request isn't obviously covered, check in this order before writing custom code:
 
 1. **Named component in this catalog fits?** ("show call history" → `CometChatCallLogs`).
-2. **A `hide*` / visibility prop?** ("hide receipts" → `hideReceipts={true}`, not custom bubbles).
-3. **A `<Slot>View` prop?** ("customize the header title" → `TitleView={(u, g) => <MyTitle />}`, not a wholesale header replacement).
+2. **A `hide*` / visibility prop?** ("hide receipts" → `receiptsVisibility={false}`, not custom bubbles).
+3. **A `<Slot>View` prop?** ("customize the header title" → `TitleView={({ user, group }) => <MyTitle />}`, not a wholesale header replacement).
 4. **A `*RequestBuilder`?** ("filter conversations" → `conversationsRequestBuilder` with `.setUserTags([...])`, not post-render filtering).
 5. **`textFormatters` + `templates`** for message-rendering customization.
 6. **`CometChatUIEventHandler`** for cross-component communication.
@@ -552,7 +586,7 @@ Never hand-roll a bubble, a header, or a list when the kit ships one — you'll
 
 ---
 
-## 13. Style shape reference
+## 14. Style shape reference
 
 Every style prop follows a nested-object shape. Pass `style={}` for no customization; override only the keys you care about.