cometchat-i18n

Ground truth: localization is the CometChatLocalize class on React, Angular, iOS and Android. Two exceptions: React Native uses CometChatI18nProvider + the useCometChatTranslation hook (there is no CometChatLocalize in the RN kit — catalog-confirmed), and Flutter is moving to CometChatLocalize but the shipping 6.1.0 kit still exposes Translations (see cometchat-flutter-v6-customization → Localization — STAGED pending the kit). Exact methods and built-in string keys differ by family and major — FETCH the signature from the resolved family's localize doc via cometchat-<family>-core/references/docs-map.md (intent: localization / localize). Do not carry an API across families or majors (v6 React, for one, renamed language codes and keys). Never assert a key set from memory — look it up in the kit's resources/<lang>/translation.json / the localize page.

Use this skill when

Making the chat speak another language, shipping to a multi-locale or RTL market, adding/overriding wording, or fixing a UI that shows a raw key (e.g. group_info) instead of text.

The mechanism (per family, one shape)

Most UI Kits localize through CometChatLocalize (React Native is the exception — it uses CometChatI18nProvider + the useCometChatTranslation hook): it can detect the user's browser/device language and set the active locale, and it exposes the current locale to components (which read their strings from it). The three things you do:

1. Set the locale — let it auto-detect, or set it explicitly to match your app's language switcher. Do this before the surface renders (alongside init), so components mount already localized. (React v7: pass the locale prop on CometChatProvider — <CometChatProvider locale="fr"> — applied on mount/change.)
2. Register custom / overridden translations — add your own strings or override the kit defaults per locale (e.g. React v7: CometChatLocalize.getSharedInstance()?.addTranslation({ "en-us": { key: "value" } }) — an INSTANCE method taking a nested per-language map; reach the live instance via getSharedInstance(), never new CometChatLocalize(); other families have the equivalent — React Native instead uses the CometChatI18nProvider translations prop, keyed on the active language code: under the default auto-detect that's the 2-letter device code, so use translations={{ "en": { KEY: "value" } }} — a regional key like en-US is ignored unless you also pass selectedLanguage="en-US", and codes must match the kit's keys exactly (case-sensitive) — e.g. zh-tw is lowercase but en-US/en-GB are uppercase-region; not addTranslation. Provider props: selectedLanguage · autoDetectLanguage · translations · fallbackLanguage — {DOCS_BASE}/ui-kit/react-native/localize). Fetch the exact call for your family.
3. Read a string yourself where you render kit text in your own markup — use the family's localized-string accessor (React v7: useLocale().getLocalizedString(key)), never a hardcoded English literal.