# 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/) components.
Read the [Adding Internationalization (i18n) section](/chat/docs/sdk/react-native/basics/translations/) for more information on how to customize your translations.
If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).

## Basic Usage

`TranslationContext` can be consumed by any of the child component of `OverlayProvider` or `Chat` components.

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

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

Alternatively, you can also use `useTranslationContext` hook provided by library to consume TranslationContext.

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

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

## Value

### t

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

| Type     |
| -------- |
| function |

### tDateTimeParser

Used for translating dates and times into the desired local format.

| Type     |
| -------- |
| function |

---

This page was last updated at 2025-08-15T14:16:31.391Z.

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/).