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