docs(react-native): register the text formatter on the thread header too

[suraj-chauhan-cometchat]

Problem

Step 4 of the React Native Custom Text Formatter guide lists five surfaces and then says the rest inherit the formatter from the component that renders them. CometChatThreadHeader does not.

The word "thread" did not appear anywhere on the page. A reader who follows the guide exactly ships a thread whose parent message shows the raw {color:…} marker, while the replies below it render in colour — a confusing symptom, and one you only hit after opening a thread, so it survives a casual test pass.

React's guide already lists CometChatThreadHeader in its Step 7.

Why it is not inherited

It takes its own textFormatters and feeds it into the template builder that renders the parent message bubble:

// CometChatThreadHeader.tsx:280
templates: ChatConfigurator.dataSource.getAllMessageTemplates(mergedTheme, {
  textFormatters,
}),

Our own sample app has always done this — ThreadView.tsx passes a formatter to the thread header independently of the main chat. That line would not be needed if it inherited.

Verified, not assumed

The failure mode, before documenting it — applyRawFormatters returns the text untouched when given no formatters, and the kit's own matchColorTagAt does not recognise a consumer token, so nothing downstream picks it up either:

✓ undefined formatters: text comes back untouched
✓ empty array: text comes back untouched
✓ the kit's own colour parser does NOT recognise the customer token
✓ for contrast, WITH a formatter it becomes kit markup

The fix, on a simulator — the guide's own formatter, extracted verbatim by script, registered per this change, with the parent message at the top of the thread rendering in colour.

Context

Raised from a customer ticket about colour not surviving between Web and React Native. The reply points at this guide, so the gap would have been the customer's next question.

🤖 Generated with Claude Code

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated
cometchat	🟢 Ready	View Preview	Oct 16, 2026, 11:02 AM

💡 Tip: Enable Automations to automatically generate PRs for you.

[raj-dubey1]

Docs review: approve ✅

Checked against the React Native UI Kit source (5.5.1 on master-v5) and the published 5.5.2.

• Correct: CometChatThreadHeader is a root export and takes its own textFormatters prop. It passes the formatters into the parent message's template (CometChatThreadHeader.tsx:280), so it does not inherit them, and this step really was missing from the guide. The sample app's ThreadView.tsx already registers a formatter on the thread header separately.
• Structural checks: no 404s, no unresolved navigation refs, no broken links.

Optional nit: the thread's replies are a separate <CometChatMessageList parentMessage={…}>, and the thread composer is separate too, so both need textFormatters={[colorFormatter]} as well. The single <CometChatMessageList user={user} …/> line could leave readers thinking the main list covers threads. Half a sentence ("…and on the thread's message list and composer") would close that.

[jitvarpatil]

🤖 Review Buddy (review-docs-pr)

Recommendation: approve. Automated review; the final decision stays with a maintainer.

TL;DR — A 4-line, single-file fix to ui-kit/react-native/guide-custom-text-formatter.mdx: Step 4 now imports CometChatThreadHeader and registers the formatter on it, with a one-line comment explaining why the thread panel doesn't inherit it. The claim is verified against the RN UI Kit source (packages/ChatUiKit/src/CometChatThreadHeader/CometChatThreadHeader.tsx): parentMessage is a required prop (:39), textFormatters? is a declared prop (:92), and it is passed into getAllMessageTemplates(mergedTheme, { textFormatters }) (:246) which builds the parent-message bubble — so without it the parent message does render the raw marker. The snippet matches the React guide's equivalent line (ui-kit/react/guide-custom-text-formatter.mdx:390). No structural risk: no files moved, no docs.json change, no new links or images.

Findings

P0 — none.

P1 — none.

P2

• PR description — "Our own sample app has always done this — ThreadView.tsx passes a formatter to the thread header independently" is not what the sample does. On master-v5, examples/masterapp/src/components/conversations/screens/ThreadView.tsx:270 renders <CometChatThreadHeader parentMessage={message} receiptsVisibility={…} /> with no textFormatters; the formatter at :278 goes to the thread's CometChatMessageList. The doc change is still correct (the prop exists and is consumed), but the justification in the PR body is wrong — worth fixing so nobody cites it later. (The :280 line ref in the body is also :246 on master-v5; harmless.)
• ui-kit/react-native/threaded-messages-header.mdx:14 — the component reference page's prop summary lists only parentMessage · template and never mentions textFormatters anywhere on the page. Pre-existing gap, not introduced here, but now that the guide tells readers to pass textFormatters to the thread header, the reference page should document it. Suggested follow-up, not a blocker.

Passed / skipped

• ✅ Redirect coverage: 0 removed/renamed URLs (nothing to redirect).
• ✅ Chained 404s: 0.
• ✅ Navigation integrity (build): 0 dangling docs.json refs.
• ✅ In-content link rot: 0 broken targets across 65 scanned ui-kit/react-native/ files.
• ✅ Content integrity: prose and code agree; snippet is consistent with the rest of Step 4 and with the React guide; no version/package drift, no placeholders, no image refs added.
• ℹ️ Orphan /ui-kit/react-native/llms-react-native-v5 and a −21 redirect delta are both pre-existing main drift since the branch forked (Sep 30) — this PR does not touch docs.json.
• ⏭️ Mintlify build: not run locally; the mintlify[bot] preview on the PR reports 🟢 Ready.

[jitvarpatil]

✅ Approved via Review Buddy after an automated review (P0: 0 · P1: 0 · P2: 2).

Findings: #548 (review)

[raj-dubey1]

Re-reviewed at ff9c5c3. Approving.

• CometChatThreadHeader declares textFormatters with the type documented here and passes it into getAllMessageTemplates(...) for the parent message (CometChatThreadHeader.tsx:96, :280 on v5.5.2, unchanged since 5.5.0). So the guide step and the new Text Formatters section on threaded-messages-header.mdx are both accurate.
• Structural checks pass: no 404s, no unresolved nav refs, no broken links in ui-kit/react-native/. Mintlify deployment and link-rot checks are green.

Optional follow-up, not blocking: the thread's own CometChatMessageList parentMessage={…} and its composer also need textFormatters. Also, a matching custom template on the thread header bypasses textFormatters.