Skip to main content
FieldValue
GoalAdd multi-language support with automatic device language detection
ProviderCometChatI18nProvider — wrap app to enable localization
Importimport { CometChatI18nProvider } from "@cometchat/chat-uikit-react-native";
Auto-detect<CometChatI18nProvider autoDetectLanguage={true}>
Set languageselectedLanguage="fr" — manually set language code
Override stringstranslations={{ "en-US": { CHATS: "My Chats" } }}
Add languagetranslations={{ "custom": { CHATS: "Welcome" } }} with selectedLanguage="custom"
Use in componentsconst { t } = useCometChatTranslation(); t("CHATS")
Supported languages19: en-US, en-GB, zh, zh-TW, es, hi, ru, pt, ms, fr, de, sv, lt, hu, it, ko, ja, nl, tr
DependencyRequires 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:
  1. Install react-native-localize: npm install react-native-localize
  2. Wrap your app with CometChatI18nProvider inside CometChatThemeProvider
  3. Without the provider wrapper, automatic language detection won’t work

​
Supported Languages

LanguageCode
English (United States)en-US
English (United Kingdom)en-GB
Chinesezh
Chinese (Traditional)zh-TW
Spanishes
Hindihi
Russianru
Portuguesept
Malayms
Frenchfr
Germande
Swedishsv
Lithuanianlt
Hungarianhu
Italianit
Koreanko
Japaneseja
Dutchnl
Turkishtr

​
Provider Props

PropTypeDescription
selectedLanguagestringLanguage code to use. Defaults to device language or English
autoDetectLanguagebooleanAuto-detect device language. Default: true
translationsobjectCustom translation overrides per language
fallbackLanguagestringFallback 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)

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

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

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