diff --git a/ui-kit/react-native/guide-custom-text-formatter.mdx b/ui-kit/react-native/guide-custom-text-formatter.mdx index cb7b99f0f..de7f178b6 100644 --- a/ui-kit/react-native/guide-custom-text-formatter.mdx +++ b/ui-kit/react-native/guide-custom-text-formatter.mdx @@ -171,6 +171,7 @@ import { CometChatPinnedMessages, CometChatSavedMessages, CometChatSearch, + CometChatThreadHeader, } from "@cometchat/chat-uikit-react-native"; // user={user} or group={group} on the conversation-scoped components — one, never both @@ -179,6 +180,9 @@ import { + +// on your thread screen — the thread panel does not inherit it + ``` Media captions, the quoted reply inside a bubble, the reply and edit previews above the composer, and the message information screen all inherit the formatter from the component that renders them — you do not register those separately. diff --git a/ui-kit/react-native/threaded-messages-header.mdx b/ui-kit/react-native/threaded-messages-header.mdx index f8a9b2138..c83221d0d 100644 --- a/ui-kit/react-native/threaded-messages-header.mdx +++ b/ui-kit/react-native/threaded-messages-header.mdx @@ -11,7 +11,7 @@ description: "Display the parent message and reply count for threaded conversati | Package | `@cometchat/chat-uikit-react-native` | | Import | `import { CometChatThreadHeader } from "@cometchat/chat-uikit-react-native";` | | Purpose | Displays the parent message and number of replies in a thread. | -| Data props | `parentMessage` · `template` | +| Data props | `parentMessage` · `template` · `textFormatters` | | Primary output | None — presentational; renders the parent message and reply count | | Styling | `style` prop — [tokens and overrides](#styling) | | Prerequisites | `CometChatUIKit.init()` completed and a user logged in | @@ -157,6 +157,23 @@ function CustomTemplateDemo() { } ``` +### Text Formatters + +The thread header renders the parent message with its own `textFormatters`. It does **not** inherit them from `CometChatMessageList`, so pass the same formatters to both, or the parent message shows raw, unformatted text while the replies are formatted. + +```tsx + +``` + +| Property | Description | Code | +| --- | --- | --- | +| `textFormatters` | Formatters applied to the parent message text | `textFormatters?: Array` | + +See the [Custom Text Formatter guide](/ui-kit/react-native/guide-custom-text-formatter) for a full example. + --- ## Thread Subscription