# Internationalization

The SDK includes translation services powered by [`i18next`](https://www.i18next.com/), supporting:

- **Language switching** - Change languages dynamically
- **Custom translations** - Add or override translations in any language
- **i18next API access** - Full access to the underlying library

Default translations are provided for all SDK components.

## Integration

Access translation services via the `StreamVideo` provider using `useI18n` consumer.

`StreamI18nContextValue` properties:

- **`t` function** - Translates strings, returns original if no translation found
- **`StreamI18n` instance** - Direct access for advanced control

`StreamI18nProvider` also works independently of `StreamVideo`.

### Configuration

`StreamI18nProvider` configuration parameters:

```ts
type StreamI18nProviderProps = {
  i18nInstance?: StreamI18n;
  language?: string;
  fallbackLanguage?: string;
  translationsOverrides?: TranslationsMap;
};
```

>
> **Note:** `StreamVideo` internally forwards these parameters to `StreamI18nProvider`.
>

#### Custom translations

Override or add translations using `translationsOverrides` prop (type: `TranslationsMap`).

```ts
type TranslationsMap = Record<TranslationLanguage, TranslationSheet>;

type TranslationLanguage = keyof typeof defaultTranslations | string;

type TranslationSheet = typeof defaultTranslations.en | Record<string, string>;
```

Translations merge with SDK defaults - overriding existing keys or adding new ones.

```tsx
const translations = {
    en: {
        ...
        terminate: "terminate"
        ...
    },
    de: {
        ...
        terminate: "beended"
        ...
    },
    ...
}

const App = () => {
    ...
    return (
        <StreamVideo
            client={client}
            translationsOverrides={translations}
        >
            ...
        </StreamVideo>
    );
}
```

#### Provide your own instance of `StreamI18n`

Pass a pre-initialized instance via `i18nInstance` prop. It forwards to context unchanged.

```tsx
type CreateI18nParams = {
  language?: string;
  translationsOverrides?: TranslationsMap;
};

const useCreateI18n = ({
  language,
  translationsOverrides,
}: CreateI18nParams) => {
  const i18nRef = useRef(
    new StreamI18n({ currentLanguage: language, translationsOverrides }),
  );

  useEffect(() => {
    const i18n = i18nRef.current;
    if (i18n.isInitialized && language && i18n?.currentLanguage !== language) {
      i18n.changeLanguage(language);
    } else if (!i18n.isInitialized) {
      // sets the default language
      if (!language) i18n.changeLanguage();
      i18n.init();
    }
  }, [language, translationsOverrides]);

  return i18n;
};

const App = () => {
  const i18n = useCreateI18n();

  return (
    <StreamVideo client={client} i18nInstance={i18n}>
      ...
    </StreamVideo>
  );
};
```

#### Language

Set current language with `language` prop using language codes (`en`, `de`, etc.) matching `translationsOverrides` keys or SDK defaults (`TranslationLanguage`).

```tsx
const App = () => {
    {/*  a hook that keeps track of the current language in your app  */}
    const {language, setLanguage} = useLanguage();
    ...
    return (
        <StreamVideo
            client={client}
            language={language}
            translationsOverrides={translations}
        >
            ...
        </StreamVideo>
    );
}
```

## Translation function

The `t` function translates strings, returning originals if no translation found. Powered by `i18next`.

### Accessing the translation function

Access via `useI18n` in any child of `StreamVideo` or `StreamI18nProvider`:

```tsx
import { useI18n } from "@stream-io/video-react-native-sdk";

const CustomButton = () => {
  const { t } = useI18n();

  return <button>{t("Submit")}</button>;
};
```

## Final recommendations

Consult the `i18next` documentation for:

- <a href="https://www.i18next.com/translation-function/essentials" target="_blank">Translation function basics</a>
- <a href="https://www.i18next.com/translation-function/interpolation" target="_blank">Dynamic text interpolation</a>
- <a href="https://www.i18next.com/translation-function/formatting" target="_blank">Value formatting</a>
- <a href="https://www.i18next.com/translation-function/plurals" target="_blank">Pluralization</a>

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react-native/v2/advanced/i18n/](https://getstream.io/video/docs/react-native/v2/advanced/i18n/).