# TranslationContext

`TranslationContext` is provided by [`OverlayProvider`](/chat/docs/sdk/react-native/core-components/overlay-provider/) and [`Chat`](/chat/docs/sdk/react-native/core-components/chat/). See [Adding Internationalization (i18n)](/chat/docs/sdk/react-native/basics/translations/) for customization details. If you are not familiar with the React Context API, see the [React docs](https://reactjs.org/docs/context.html).

## 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`.

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

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

Alternatively, use the `useTranslationContext` hook.

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

const { t, tDateTimeParser } = useTranslationContext();
```

## Values

| Value             | Description                                                                 | Type                   |
| ----------------- | --------------------------------------------------------------------------- | ---------------------- |
| `t`               | Given a key, returns translated text from the Streami18n instance.          | `function`             |
| `tDateTimeParser` | Translates dates and times into the desired locale format.                  | `function`             |
| `userLanguage`    | The current user's language code used for translations. Defaults to `'en'`. | `TranslationLanguages` |


---

This page was last updated at 2026-05-13T13:38:50.517Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/contexts/translation-context/](https://getstream.io/chat/docs/sdk/react-native/contexts/translation-context/).