Video SDK useTranslation Hook - React Native

useTranslation Hook

useTranslation takes the callback functions for realtime translation as parameters and returns the methods to start translation, change its language and stop it.

Set the languages in the config of RoomProvider. speakingLanguage is the language a participant speaks, and translationLanguage is the language they receive translated text in. A participant without a translationLanguage receives no translated text.

To learn how to use it, see the Realtime Translation guide.

useTranslation example

useTranslation react native hook

import { Constants, useTranslation } from "@videosdk.live/react-native-sdk";

function onTranslationStateChanged(data) {
  const { state } = data;

  if (state === Constants.translationEvents.TRANSLATION_STARTED) {
    console.log("Realtime Translation is started");
  } else if (state === Constants.translationEvents.TRANSLATION_STOPPED) {
    console.log("Realtime Translation is stopped");
  }
}

function onTranslationText(data) {
  const { participantName, text, language } = data;
  console.log(`${participantName} (${language}): ${text}`);
}

function onTranslationLanguageChanged(data) {
  const { participantId, language } = data;
  console.log(`${participantId} now receives ${language}`);
}

const { startTranslation, changeTranslationLanguage, stopTranslation } =
  useTranslation({
    onTranslationStateChanged,
    onTranslationText,
    onTranslationLanguageChanged,
  });

Parameters

onTranslationStateChanged

• onTranslationStateChanged() will be triggered when the state of realtime translation changes.
• It receives { state }, where state is one of the Constants.translationEvents values: TRANSLATION_STARTING, TRANSLATION_STARTED, TRANSLATION_STOPPING or TRANSLATION_STOPPED.
• The current state is also available as translationState from useRoom().

---

onTranslationText

• onTranslationText() will be triggered for each translated line.
• It receives an object with these properties:
  • participantId and participantName: the participant who spoke.
  • participantLanguage: the language the speaker spoke, their speakingLanguage.
  • language: the language the text was translated into, which is the language this participant receives.
  • text: the translated text.
  • timestamp: when the text was translated, in milliseconds since the epoch.
  • type: "PARTIAL" or "FULL", the values of Constants.TranslationType.
• Consecutive PARTIAL lines revise the same sentence, so replace the last line you show instead of adding a new one. A FULL line is final, and its text can differ from the last PARTIAL line. Add a line to a transcript only when it is FULL.

---

onTranslationLanguageChanged

• onTranslationLanguageChanged() will be triggered when a participant changes the language they receive.
• It receives { participantId, language }.

---

Returns

startTranslation()

• startTranslation() starts realtime translation for the whole room. Each participant receives text only in their own translationLanguage.
• A participant who joins while translation is already running does not receive TRANSLATION_STARTED.

Parameters

config

• type : Object
• required : false
• The translation configuration, sent to VideoSDK as it is. Leave it out to use the default configuration.

Returns

• Promise<void>

---

changeTranslationLanguage()

• changeTranslationLanguage() changes the language this participant receives translated text in. Other participants keep their own language.
• The change takes effect when onTranslationLanguageChanged() reports it. Until then, onTranslationText() delivers text in the previous language.

Parameters

language

• type : String
• required : true
• A language code from Supported Languages. The SDK does not check the code. With a code that is not supported, the call succeeds, but no translated text arrives.

Returns

• Promise<void>

---

stopTranslation()

• stopTranslation() stops realtime translation for the whole room, not only for you.
• The last lines can still arrive on onTranslationText() while the state changes from TRANSLATION_STOPPING to TRANSLATION_STOPPED.

Returns

• Promise<void>

---

Example

const { startTranslation, changeTranslationLanguage, stopTranslation } =
  useTranslation();

const run = async () => {
  try {
    await startTranslation();

    await changeTranslationLanguage("fr");

    await stopTranslation();
  } catch (err) {
    console.error("Translation request failed:", err);
  }
};

run();

note

Call these methods after you join. The errors they can report are listed under Translation on the error codes page.