Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ui-kit/react-native/guide-custom-text-formatter.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -179,6 +180,9 @@ import {
<CometChatSearch textFormatters={[colorFormatter]} />
<CometChatPinnedMessages user={user} textFormatters={[colorFormatter]} />
<CometChatSavedMessages textFormatters={[colorFormatter]} />

// on your thread screen — the thread panel does not inherit it
<CometChatThreadHeader parentMessage={parentMessage} textFormatters={[colorFormatter]} />
```

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.
Expand Down
19 changes: 18 additions & 1 deletion ui-kit/react-native/threaded-messages-header.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
| 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 |
Expand Down Expand Up @@ -157,6 +157,23 @@
}
```

### Text Formatters

Check warning on line 160 in ui-kit/react-native/threaded-messages-header.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/threaded-messages-header.mdx#L160

Did you really mean '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.

Check warning on line 162 in ui-kit/react-native/threaded-messages-header.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/threaded-messages-header.mdx#L162

Did you really mean 'formatters'?

Check warning on line 162 in ui-kit/react-native/threaded-messages-header.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/threaded-messages-header.mdx#L162

Did you really mean 'unformatted'?

```tsx
<CometChatThreadHeader
parentMessage={parentMessage}
textFormatters={[myFormatter]}
/>
```

| Property | Description | Code |
| --- | --- | --- |
| `textFormatters` | Formatters applied to the parent message text | `textFormatters?: Array<CometChatMentionsFormatter \| CometChatUrlsFormatter \| CometChatTextFormatter>` |

See the [Custom Text Formatter guide](/ui-kit/react-native/guide-custom-text-formatter) for a full example.

---

## Thread Subscription
Expand Down
Loading