Internationalization

The SDK includes translation services powered by i18next, 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:

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

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.

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.

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

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:

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: