This is beta documentation for Stream Chat React Native SDK v9. For the latest stable version, see the latest version (v8) .

TranslationContext

TranslationContext is provided by OverlayProvider and Chat. See Adding Internationalization (i18n) for customization details. If you are not familiar with the React Context API, see the React docs.

Best Practices

  • Use useTranslationContext for consistent access and typings.
  • Keep translation keys centralized and avoid hardcoded strings.
  • Use tDateTimeParser for localized date/time display.
  • Apply i18n instances at the provider level for consistent coverage.
  • Avoid formatting in render; memoize if needed.

Basic Usage

Consume TranslationContext in any child of OverlayProvider or Chat.

import { useContext } from "react";
import { TranslationContext } from "stream-chat-react-native";

const { t, tDateTimeParser } = useContext(TranslationContext);

Alternatively, use the useTranslationContext hook.

import { useTranslationContext } from "stream-chat-react-native";

const { t, tDateTimeParser } = useTranslationContext();

Value

t

Given a key, returns translated text from the Streami18n instance.

Type
function

tDateTimeParser

Translates dates and times into the desired locale format.

Type
function

userLanguage

The current user's language code used for translations. Defaults to 'en'.

TypeDefault
TranslationLanguages'en'