import { useContext } from "react";
import { TranslationContext } from "stream-chat-react-native";
const { t, tDateTimeParser } = useContext(TranslationContext);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
useTranslationContextfor consistent access and typings. - Keep translation keys centralized and avoid hardcoded strings.
- Use
tDateTimeParserfor 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.
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 |