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 19, 2026, 7:48 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.

[jitvarpatil]

🤖 Review Buddy (review-docs-pr)

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

TL;DR — Two-file docs correction for the React Native UI Kit: Step 4 of the Custom Text Formatter guide now registers the formatter on CometChatThreadHeader, and the thread-header reference page documents the textFormatters prop it previously omitted. The claim is verified against source — packages/ChatUiKit/src/CometChatThreadHeader/CometChatThreadHeader.tsx:92 declares textFormatters?: Array<CometChatMentionsFormatter | CometChatUrlsFormatter | CometChatTextFormatter> (byte-identical to the signature added to the reference table) and passes it into getAllMessageTemplates at :247, so the parent bubble really does need its own registration. The prop landed with the original feat: thread header commit, so the guide's existing 5.5.1 floor is not contradicted. No structural risk: no files moved or removed, docs.json untouched, 0 dangling nav refs, 0 broken links, both images on the reference page resolve. Only two nits.

P0

None.

P1

None.

P2

• ui-kit/react-native/guide-custom-text-formatter.mdx:184-185 — the comment says "the thread panel does not inherit it" but the snippet shows only CometChatThreadHeader. The thread screen's own CometChatMessageList (with parentMessageId) and its composer are separate instances and also need textFormatters — the master app's ThreadView.tsx:278 does exactly that for the list. React's guide spells this out ("A thread panel has its own message list and composer, so register the formatter there too", ui-kit/react/guide-custom-text-formatter.mdx:375). Suggest one extra line, e.g. <CometChatMessageList user={user} parentMessageId={id} textFormatters={[colorFormatter]} />, or a half-sentence saying the thread's list and composer take the same registration as Steps 3–4.
• ui-kit/react-native/threaded-messages-header.mdx:164 — code fence is ```tsx while every other block on the page is ```tsx lines (:33, :70, :115, :185). Cosmetic; add lines for consistency. (Placement of "Text Formatters" as an H3 under ## Styling is a data prop, not styling — but it follows the existing "Custom Template" precedent on the page, so fine as-is.)

Passed / skipped

• ✅ Redirect coverage: 0 removed/renamed URLs → nothing to redirect.
• ✅ Navigation integrity: 0 unresolved pages refs (build is safe).
• ✅ In-content links: 0 broken across 65 scanned RN files; the new /ui-kit/react-native/guide-custom-text-formatter link resolves.
• ✅ Images: both <Frame> images on the reference page exist on the branch.
• ✅ Content integrity: prose and code agree; prop type matches source exactly; version floor (5.5.1) consistent; no placeholders/TODOs.
• ✅ Mintlify preview built green (bot comment, Oct 16).
• ℹ️ Pre-existing, not introduced here: /ui-kit/react-native/llms-react-native-v5 is not in navigation (orphan). Branch is 158 commits behind main (GitHub reports MERGEABLE; the two touched files don't conflict).
• ⏭️ Build gate: no local Mintlify build run here; relied on the green preview deployment.

[jitvarpatil]

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

Findings: #548 (review)