> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Localization

> Configure multi-language localization, custom translations, and automatic device language detection in CometChat React Native UI Kit.

<Accordion title="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                             |
</Accordion>

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

<Warning>
  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
</Warning>

***

## 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:

```bash theme={null}
npm install react-native-localize
```

## Usage

Here is how you can implement custom localization:

### Basic Usage (System Language Detection)

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    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>
      );
    };
    ```
  </Tab>
</Tabs>

### Overriding Translations

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    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>
      );
    };
    ```
  </Tab>
</Tabs>

### Using Translations in Custom Components

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    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>
      );
    };
    ```
  </Tab>
</Tabs>

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.

```ts theme={null}
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

<CardGroup cols={2}>
  <Card title="Introduction to Theming" icon="paintbrush" href="/ui-kit/react-native/theme">
    Learn how CometChatThemeProvider manages light and dark modes
  </Card>

  <Card title="Sound Manager" icon="volume" href="/ui-kit/react-native/sound-manager">
    Manage audio playback for incoming and outgoing events
  </Card>

  <Card title="Components Overview" icon="grid-2" href="/ui-kit/react-native/components-overview">
    Explore all available UI Kit components
  </Card>

  <Card title="Getting Started" icon="rocket" href="/ui-kit/react-native/react-native-cli-integration">
    Set up CometChat UI Kit in your React Native app
  </Card>
</CardGroup>