> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-flag-and-channel.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Upgrading From V5

## Introduction

The **CometChat v6 React UI Kit** introduces a **revamped localization system** with enhanced support for **language management, date formatting, and missing key handling**. This guide outlines the key differences and provides a **step-by-step migration process** from **v5 to v6**.

***

## **Overview of Changes**

| Feature                      | v5                                                     | v6                                                                       |
| ---------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------ |
| **Initialization**           | Used `init(language, resources)` with separate params. | Uses `init(settings: LocalizationSettings)` with a configuration object. |
| **Translation Management**   | Manually updated translations using `resources`.       | Uses `translationsForLanguage` in `init()` and `addTranslation()`.       |
| **Language Codes**           | Used shorthand codes (e.g., `en`, `fr`).               | Uses full language-region codes (e.g., `en-US`, `fr`).                   |
| **Date & Time Localization** | Not configurable.                                      | Supports `CalendarObject` for date formatting.                           |
| **Timezone Handling**        | Not available.                                         | Introduced `timezone` setting.                                           |
| **Missing Key Handler**      | Not available.                                         | Introduced `missingKeyHandler` to handle missing translations.           |

***

## CometChatLocalize

### **Initialization**

In CometChat v5 UI Kit, the [`CometChatLocalize.init()`](/ui-kit/react/v5/localize#methods) accepts 2 parameters: `language` & `resources`

```js V5 UI Kit theme={null}
CometChatLocalize.init("en", {
  CHATS: "Chats",
});
```

In CometChat v6 UI Kit, the [`CometChatLocalize.init()`](/ui-kit/react/localize#initialize-cometchatlocalize) method accepts a [**localization setting**](/ui-kit/react/localize#localizationsettings) instead of individual parameters.

```js V6 UI Kit theme={null}
CometChatLocalize.init({
  language: "en-US",
  translationsForLanguage: {
    "en-US": { conversation_chat_title: "Chats" },
  },
  disableAutoDetection: false,
  disableDateTimeLocalization: false,
  timezone: "Europe/Madrid",
  calendarObject: new CalendarObject({
    today: "hh:mm A",
    yesterday: "[Yesterday]",
    otherDays: "DD MMM YYYY, hh:mm A",
    relativeTime: {
      minute: "%d minute ago",
      minutes: "%d minutes ago",
      hour: "%d hour ago",
      hours: "%d hours ago",
    },
  }),
  missingKeyHandler: (key) => `Missing translation: ${key}`,
});
```

***

### **Language Code Changes**

In CometChat v5 UI Kit, the language code for English was `en`. In CometChat v6 UI Kit, the language codes have been expanded to distinguish between regional variants: • `en-US` for American English • `en-GB` for British English

There are no changes for any other languages.

***

### **Managing Translations**

In CometChat v5 UI Kit, the only way to add or override translations was by passing them in the [`init()`](/ui-kit/react/v5/localize#methods) method.

```js V5 UI Kit theme={null}
CometChatLocalize.init("en", {
  CHATS: "Chats",
});
```

In CometChat v6 UI Kit, translations can be added or overridden using the [`init()`](/ui-kit/react/localize#initialize-cometchatlocalize) method or the [`addTranslation()`](/ui-kit/react/localize#add-custom-translations) method.

```js V6 UI Kit theme={null}
CometChatLocalize.addTranslation({
  "en-US": { conversation_chat_title: "Chats" },
});
```

***

### **Handling Date & Time Localization**

CometChat v5 UI Kit lacked support for date formatting, but CometChat v6 UI Kit introduces the [`CalendarObject`](/ui-kit/react/localize#calendarobject) for date and time formatting.

```js V6 UI Kit theme={null}
const formattedDate = new CalendarObject({
  today: "[Today at] hh:mm A",
  yesterday: "[Yesterday at] hh:mm A",
  otherDays: "DD MMM YYYY, hh:mm A",
});
CometChatLocalize.init({
  calendarObject: formattedDate,
});
```

***

### **Handling Missing Translation Keys**

CometChat v5 UI Kit did not handle missing translation keys, whereas CometChat v6 UI Kit introduces a [`missingKeyHandler`](/ui-kit/react/localize#initialize-cometchatlocalize) for better control.

```javascript V6 UI Kit theme={null}
CometChatLocalize.init({
  missingKeyHandler: (key) => `Missing translation: ${key}`,
});
```

***

### **Migrating JSON Translation Files**

In CometChat v5 UI Kit, the language code for English was `en`.

```json V5 UI Kit theme={null}
{
  "en": {
    "CHATS": "Chats"
  }
}
```

In CometChat v6 UI Kit, the language codes have been expanded to distinguish between regional variants: `en-US` & `en-GB`.

```json V6 UI Kit theme={null}
{
  "en-US": {
    "conversation": "conversation_chat_title"
  }
}
```

🔹 **Make sure your JSON translation files follow the new format.**

***

## **Additional Resources**

🔹 **Check the GitHub Repository for More Info:** ➡ [CometChatLocalize Class](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/resources/CometChatLocalize/cometchat-localize.ts) ➡ [Language JSON Files](https://github.com/cometchat/cometchat-uikit-react/tree/v6/src/resources/CometChatLocalize/resources)

## Properties & Methods

In CometChat v6 UI Kit, several props and methods in components and the CometChatLocalize class have been updated. For a detailed overview of newly added, renamed, and removed properties/methods, refer to the [Property Changes](/ui-kit/react/property-changes) Documentation.