Localization - CometChat Docs

AI Integration Quick Reference

Field	Value
Goal	Add multi-language support with automatic device language detection
Provider	`CometChatI18nProvider` — wrap app to enable localization
Import	`import { CometChatI18nProvider } from "@cometchat/chat-uikit-react-native";`
Auto-detect	`<CometChatI18nProvider autoDetectLanguage={true}>`
Set language	`selectedLanguage="fr"` — manually set language code
Override strings	`translations={{ "en-US": { CHATS: "My Chats" } }}`
Add language	`translations={{ "custom": { CHATS: "Welcome" } }}` with `selectedLanguage="custom"`
Use in components	`const { t } = useCometChatTranslation(); t("CHATS")`
Supported languages	19: en-US, en-GB, zh, zh-TW, es, hi, ru, pt, ms, fr, de, sv, lt, hu, it, ko, ja, nl, tr
Dependency	Requires `react-native-localize` package for auto-detection

The CometChatI18nProvider manages multi-language localization for the UI Kit. It handles automatic language detection, manual language switching, and custom translations.

Prerequisites:

Install react-native-localize: npm install react-native-localize
Wrap your app with CometChatI18nProvider inside CometChatThemeProvider
Without the provider wrapper, automatic language detection won’t work

Supported Languages

Language	Code
English (United States)	`en-US`
English (United Kingdom)	`en-GB`
Chinese	`zh`
Chinese (Traditional)	`zh-TW`
Spanish	`es`
Hindi	`hi`
Russian	`ru`
Portuguese	`pt`
Malay	`ms`
French	`fr`
German	`de`
Swedish	`sv`
Lithuanian	`lt`
Hungarian	`hu`
Italian	`it`
Korean	`ko`
Japanese	`ja`
Dutch	`nl`
Turkish	`tr`

Provider Props

Prop	Type	Description
`selectedLanguage`	`string`	Language code to use. Defaults to device language or English
`autoDetectLanguage`	`boolean`	Auto-detect device language. Default: `true`
`translations`	`object`	Custom translation overrides per language
`fallbackLanguage`	`string`	Fallback language if selected is unavailable

Prerequisites

To enable localization features in your React Native application, you need to install the react-native-localize package. This package provides native device locale detection and is required for the automatic language detection functionality.

Installation

Install the required dependency:

npm install react-native-localize

Usage

Here is how you can implement custom localization:

Basic Usage (System Language Detection)

TypeScript

import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import {
  CometChatThemeProvider,
  CometChatI18nProvider,
} from "@cometchat/chat-uikit-react-native";

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CometChatThemeProvider theme={{ mode: "light" }}>
        <CometChatI18nProvider autoDetectLanguage={true}>
          {/* Other Components */}
        </CometChatI18nProvider>
      </CometChatThemeProvider>
    </SafeAreaView>
  );
};

Overriding Translations

TypeScript

import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import {
  CometChatThemeProvider,
  CometChatI18nProvider,
} from "@cometchat/chat-uikit-react-native";

const App = () => {
  const translations = {
    // Overridden translations
    "en-US": {
      CHATS: "Welcome to the CometChat App",
    },
    "en-GB": {
      CHATS: "Welcome to CometChat",
    },
    custom: {
      CHATS: "Welcome",
    },
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CometChatThemeProvider theme={{ mode: "light" }}>
        <CometChatI18nProvider
          selectedLanguage="custom"
          translations={translations}
        >
          {/* Other Components */}
        </CometChatI18nProvider>
      </CometChatThemeProvider>
    </SafeAreaView>
  );
};

Using Translations in Custom Components

TypeScript

import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { useCometChatTranslation } from "@cometchat/chat-uikit-react-native";

const CustomComponent = () => {
  const { t } = useCometChatTranslation();

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 18, fontWeight: "bold" }}>
        {t("WELCOME_MESSAGE")}
      </Text>
      <TouchableOpacity
        style={{ marginTop: 10, padding: 10, backgroundColor: "#007bff" }}
        onPress={() => {
          console.log(t("BUTTON_CLICKED"));
        }}
      >
        <Text style={{ color: "white", textAlign: "center" }}>
          {t("CLICK_HERE")}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

CometChat UI Kit provides a useCometChatTranslation hook to access translations within components, which can be used when developing custom components.

Methods

useCometChatTranslation

Hook to access translations within components.

import { useCometChatTranslation } from "@cometchat/chat-uikit-react-native";

const { t } = useCometChatTranslation();
const translatedText = t("CHATS"); // Returns localized string

Customization Capabilities

Below are the things which the developer can customize:

Set a supported language (selectedLanguage): The developer can set a language out of the 19 supported languages.
Customize default localization strings (translations): The developer can customize default localization strings for a particular language.
Add custom strings (translations): A developer can add custom strings in the localization for a particular language.
Add a new language (translations): The developer can add completely new languages.
Disable auto detection (autoDetectLanguage): The developer can disable auto detection of device language.
Handle missing keys: The developer can handle missing localization keys.
Set fallback language (fallbackLanguage): The developer can set a fallback language.

By using the CometChatI18nProvider component and useCometChatTranslation hook, you can provide a user-friendly, localized experience to your users, enhancing the overall user experience within your application.

Next Steps

Introduction to Theming

Learn how CometChatThemeProvider manages light and dark modes

Sound Manager

Manage audio playback for incoming and outgoing events

Components Overview

Explore all available UI Kit components

Getting Started

Set up CometChat UI Kit in your React Native app

​Supported Languages

​Provider Props

​Prerequisites

​Installation

​Usage

​Basic Usage (System Language Detection)

​Overriding Translations

​Using Translations in Custom Components

​Methods

​useCometChatTranslation

​Customization Capabilities

​Next Steps

Introduction to Theming

Sound Manager

Components Overview

Getting Started

Supported Languages

Provider Props

Prerequisites

Installation

Usage

Basic Usage (System Language Detection)

Overriding Translations

Using Translations in Custom Components

Methods

useCometChatTranslation

Customization Capabilities

Next Steps