Provides a headless SDK for React Native to build custom chat UIs and access features not available in the standard UI Kit.
- GitHub stars
- 171
- Files
- 3
- Last commit
- Oct 15, 2026
- License
- MIT
- Allowed tools
- —
What does the cometchat-react-native-sdk skill do?
cometchat-react-native-sdk provides a headless SDK for React Native to build custom chat UIs and access features not available in the standard UI Kit.
Summary generated from the skill's SKILL.md.
About the cometchat-react-native-sdk skill
Building custom chat interfaces in React Native is what developers achieve using this headless SDK. It serves as a fallback for when the standard UI Kit lacks specific components, such as screens for managing group details, transferring ownership, or viewing banned members. By providing a direct method-to-contract map, it allows for deep customization of the data layer while maintaining control over the user experience.
An agent should load this skill when a developer needs to implement features like sending messages, managing user profiles, or handling paginated message history. The skill relies on specific reference maps, including a page-wise index and a per-method companion, to provide exact signatures and return types. It is designed to prevent common integration errors, such as listener leaks during the component lifecycle or incorrect initialization sequences. Users must ensure that the init process resolves before attempting to log in to avoid silent failures.
What an agent can do with it
- 1Prevent duplicate message bugsYou can ensure proper listener cleanup in React Native to avoid the common issue of duplicate messages appearing in the UI.
- 2Handle paginated message historyDevelopers can implement efficient message loading by using the builder pattern for paginated requests.
Written from the skill's SKILL.md. Every use case is checked against a quote from it.
How to install the cometchat-react-native-sdk skill
Each command copies the skill folder into the client's skills directory. Restart the client or start a new session to load it.Install the cometchat-react-native-sdk skill in Plugin
/plugin marketplace add cometchat/cometchat-skills /plugin install cometchat-skills@cometchat
Install the cometchat-react-native-sdk skill in Claude Code
~/.claude/skills/cometchat-react-native-sdk/SKILL.md
$ npx degit cometchat/cometchat-skills/skills/cometchat-react-native-sdk ~/.claude/skills/cometchat-react-native-sdkInstall the cometchat-react-native-sdk skill in Claude Code (project)
.claude/skills/cometchat-react-native-sdk/SKILL.md
$ npx degit cometchat/cometchat-skills/skills/cometchat-react-native-sdk .claude/skills/cometchat-react-native-sdkInstall the cometchat-react-native-sdk skill in Codex
~/.agents/skills/cometchat-react-native-sdk/SKILL.md
$ npx degit cometchat/cometchat-skills/skills/cometchat-react-native-sdk ~/.agents/skills/cometchat-react-native-sdkInstall the cometchat-react-native-sdk skill in Gemini CLI
~/.gemini/skills/cometchat-react-native-sdk/SKILL.md
$ npx degit cometchat/cometchat-skills/skills/cometchat-react-native-sdk ~/.gemini/skills/cometchat-react-native-sdkInstall the cometchat-react-native-sdk skill in Claude.ai
npx degit cometchat/cometchat-skills/skills/cometchat-react-native-sdk cometchat-react-native-sdk && zip -r cometchat-react-native-sdk.zip cometchat-react-native-sdk # claude.ai → Customize → Skills → + → Create skill → Upload a skill → cometchat-react-native-sdk.zip
Automated checks
Ran Nov 14, 2026Full report →Passed our automated checks. That is not a security audit: read the scripts before you let an agent run them. How checks work
- Source repository linked and reachablecometchat/cometchat-skills/skills/cometchat-react-native-sdk is public and reachablegithub.com/cometchat/cometchat-skills/tree/HEAD/skills/comet ↗Pass
- Open source license (OSI)MITspdx.org/licenses/MIT.html ↗Pass
- Commit or release in the last yearLast commit 2026-10-15github.com/cometchat/cometchat-skills/commits ↗Pass
- No download-and-run or credential theft in scriptsNo scripts in the skill folderPass
- No hidden instructions in SKILL.mdNo override phrases, safeguard switches, credential requests or hidden charactersgithub.com/cometchat/cometchat-skills/blob/HEAD/skills/comet ↗Pass
- Pre-approved tools are scopedNo pre-approved tools; the agent asks before using onegithub.com/cometchat/cometchat-skills/blob/HEAD/skills/comet ↗Pass
- SKILL.md follows the Agent Skills formatValid name and description; says when to use it; 134 linesgithub.com/cometchat/cometchat-skills/blob/HEAD/skills/comet ↗Pass
SKILL.md
View on GitHubGround truth:
@cometchat/chat-sdk-react-native@4+ catalogrn-sdk-v4.json(317 symbols). Signatures inreferences/method-map.mdare verbatim from the installed.d.ts, not from prose. Docs:/sdk/react-native/llms-react-native-v4.md(scoped index).
Companion skills (read first)
cometchat-react-native-core— install, provider chain, init→login→render. Assumed, not repeated here.
Use this skill when
- the UI Kit has no component for what you need — the common case, see below
- "build my own chat UI" · "just give me the data layer" · "sendMessage in React Native"
- "duplicate messages" · "listener leak" · "how do I page through history"
Prerequisites & install
The SDK ships under the UI Kit — if core is installed, so is this. A headless-only app
installs it alone:
npm install @cometchat/chat-sdk-react-native@4 @react-native-async-storage/async-storage@^2.1.2
⚠️ Not @cometchat/chat-sdk-javascript — that is the web package.
The rule: UI Kit first, SDK as fallback
For any feature, check whether the UI Kit has a component (components skill + the catalog).
If it does, use it. Reach for the SDK only when it does not.
On React Native that fallback path is not rare. Kit v5 removed the detail and management screens, so these have no component at all and are pure SDK work:
| Need | Why there is no component | Map section |
|---|---|---|
| user / group details | CometChatDetails removed in v5 |
Users & groups |
| add members | CometChatAddMembers removed |
Users & groups |
| view / unban banned members | no UI surface exists at all | Users & groups |
| transfer ownership | CometChatTransferOwnership removed |
Users & groups |
| call log detail | only the list ships | Calls |
The maps — page-wise first
references/page-map.md — the primary index, page-wise like the JavaScript SDK repo:
intent → the docs page → the methods that page demonstrates → the contract facts the RN page
does not carry. 37 pages, derived from the live docs so it cannot drift. Start here.
references/method-map.md — the per-method companion for when you already know the method
and need its exact signature, return type and constraints. 80 methods, 127/127 accounted for.
Both open with the same fallback ladder, and it matters: these cover most of the SDK, not all of it, so "not listed" never means "does not exist." Rung 2 is the catalog — that, not a map, is the existence authority.
Load page-map.md for any SDK question. It answers, per method: signature, what it resolves to, what it
rejects with, prerequisites, and what it will refuse to do. That last one matters most — it records
negative facts a docs page cannot express by omission, e.g. there is no sendCardMessage(),
which an agent would otherwise invent by symmetry with the three send methods that do exist.
Each row is marked D (backed by the RN docs) or T (recovered from the .d.ts because the RN
page is thin — RN-G15). Do not present a T row as documented; it is correct, and the docs gap
is real.
Ordering — the invariant
Init (initFromSettings) must resolve before login(). login() must resolve before you fetch or
send. Anything else fails quietly rather than throwing.
import { CometChat } from "@cometchat/chat-sdk-react-native";
// DEFAULT via skills: the ai-agent / telemetry-attributed init — persists integrationSource="ai-agent"
// (RULES §Ordering), the SDK sibling of the UI Kit's initFromSettings. Web/JS settings-OBJECT form,
// NOT the classic AppSettingsBuilder + init(APP_ID, settings). initFromSettings is @nodoc (ai-agent-only).
await CometChat.initFromSettings({
appId: APP_ID,
region: REGION,
credentials: { authKey: AUTH_KEY }, // dev only; prod logs in with an auth token
chatSDK: { presenceSubscription: { type: "ALL_USERS" } }, // = the old .subscribePresenceForAllUsers()
});
await CometChat.login(UID, AUTH_KEY); // dev only; production passes an auth token
// FALLBACK only (non-skills / doc-following context) — the publicly-documented classic path:
// const settings = new CometChat.AppSettingsBuilder()
// .setRegion(REGION).subscribePresenceForAllUsers().autoEstablishSocketConnection(true).build();
// await CometChat.init(APP_ID, settings);
⚠️ login is variadic and untyped in the .d.ts (login(...args: any)), so TypeScript will
not catch a wrong call. The two real shapes are login(uid, authKey) and login(authToken).
Listener lifecycle — the defect this skill exists to prevent
useEffect(() => {
const id = "chat-screen";
CometChat.addMessageListener(id, new CometChat.MessageListener({
onTextMessageReceived: (m) => setMessages((prev) => [...prev, m]),
}));
return () => CometChat.removeMessageListener(id); // NOT optional
}, []);
addMessageListener returns void, not a subscription — the string id is your only handle. The
SDK holds the listener, not React, so it survives navigation and unmount. Omitting the cleanup is
the top cause of duplicate messages, and it worsens the longer the app runs.
Fetching is always a builder
Lists are paginated: new CometChat.XRequestBuilder().setLimit(n).build() then .fetchNext().
An empty array means the end — it does not throw. There is no bare getMessages().
Common pitfalls
- Dropping the listener cleanup — duplicate messages that grow over time.
- Calling a bare
sendMessage()— everything is namespaced underCometChat. - Inventing
sendCardMessage()— card messages are receive-only. awaitingstartTyping— it returns void.- Treating
getLoggedinUser()returningnullas an error — it is the normal no-session answer. (Note the lowercasein.) - Shipping ban without unban —
CometChatGroupMembersshows active members only; wireBannedMembersRequestBuilder+unbanGroupMembertoo. - Registering a push token before
loginresolves — it belongs to no user.
Verify it works
- Every symbol appears in
catalogs/rn-sdk-v4.json. npm run verify:fences:rn-v5is green.- Every
add*Listenerhas a matchingremove*Listeneron the teardown path. - Pagination, error handling and the ban round trip are wired — not just the happy path.
Files in this skill
3cometchat-react-native-sdk skill questions
How do I install the cometchat-react-native-sdk skill in Claude Code?
Run npx degit cometchat/cometchat-skills/skills/cometchat-react-native-sdk ~/.claude/skills/cometchat-react-native-sdk. Claude Code loads skills from ~/.claude/skills (all projects) or .claude/skills (one project) and uses a skill when its description matches the task.
Which clients can use the cometchat-react-native-sdk skill?
Any client that reads the Agent Skills format: Claude Code, Codex, Gemini CLI and claude.ai (upload as a ZIP). Scripts in the skill run only where the client allows code execution.
When should I use the SDK instead of the UI Kit?
You should use the SDK as a fallback when the UI Kit does not have a specific component for your needs, such as managing banned members or user details.
How do I prevent duplicate messages in React Native?
Ensure you remove message listeners during the component unmount phase using the unique string ID provided when the listener was added.