Translate integration: React Native

Version 0.1.0 · Last updated October 3, 2026

Welcome to the Translate Integration Guide! This document provides detailed instructions for embedding the Translate, an AI-powered sign language player based on WebGL, into your iOS and Android app using React Native. Unlike the web SDKs, the player is delivered as a <TranslateView /> component you place directly in your layout, so it participates in your normal React Native view tree.

Requirements

• react 18.0.0 or later
• react-native 0.71.0 or later
• react-native-webview 11.0.0 or later — the player renders inside a WebView

Installation

npm install dt-translate-react-native react-native-webview

react-native-webview is a peer dependency and ships native code, so install the iOS pods after adding it:

cd ios && pod install

Then import the component and, if you use TypeScript, its ref type:

import { TranslateView } from 'dt-translate-react-native';
import type { TranslateViewRef } from 'dt-translate-react-native';

Usage

There is no init call. Render <TranslateView /> with your API key and the player initializes itself; the first load downloads and caches the WebGL build.

<TranslateView
  ref={translateRef}
  apiKey="YOUR_API_KEY"
  width={320} // Optional: 275-500, height follows by aspect ratio
  character={0} // Optional: Initial character index (default: 0)
  appMode={4} // Optional: 4 = live avatar, 3 = pre-rendered video
  speed={0.025} // Optional: Animation speed (default: 0.025)
  backgroundColor="#FFFFFF" // Optional: Player background color
  characterClothColor="#808080" // Optional: Character cloth color
  enableCharacterChange={true} // Optional: Show character change controls
  showLangDd={false} // Optional: Show the language switcher
  selectedLanguage="en" // Optional: 'en' (ASL) or 'da' (DSL)
  onLoad={() => console.log('Player ready')}
  onError={(message) => console.error('Player error:', message)}
/>

Options map one-to-one onto the web SDKs — see Vanilla JavaScript for the full options table. Two naming differences are worth noting: enableCharacterChange and showLangDd are the React Native names for chanageCharacter and showLanguageChangeOptions. The original names are still accepted.

Methods

Methods are called through a ref rather than on a global object. Attach a TranslateViewRef to the component to reach them.

1. playPose(data, callback)

Plays a sign language pose for the provided text in the player.

data (object, required):

• text (string, required): The text to be translated into sign language
• language (string, optional): 'en' for ASL or 'da' for DSL
• callback (function, optional): A function to be executed when the pose animation starts or if an error occurs

Pass empty string in text to reset avatar to default position.

Example:

translateRef.current?.playPose({ text: 'Hello, world!' }, (error) => {
  if (error) {
    console.error('Pose playback error:', error);
  } else {
    console.log('Pose playback started.');
  }
});

2. showWindow() and hideWindow()

Show or hide the player. When hidden, a floating button appears so the user can bring it back — the React Native equivalent of toggleWebgl() in the web SDKs.

translateRef.current?.hideWindow();
translateRef.current?.showWindow();

Player behavior

The player is a normal view in your layout, not an overlay, so position it with the style prop as you would any other component. width is clamped to 275–500 and the height follows automatically by aspect ratio. When the app returns to the foreground the last signed text is replayed so the avatar never resumes mid-pose.

Example component

import React, { useRef } from 'react';
import { Button, SafeAreaView } from 'react-native';
import { TranslateView } from 'dt-translate-react-native';
import type { TranslateViewRef } from 'dt-translate-react-native';

export default function App() {
  const translateRef = useRef<TranslateViewRef>(null);

  const sign = () => {
    translateRef.current?.playPose({ text: 'Hello, world!' }, (error) => {
      if (error) {
        console.error('Pose playback error:', error);
      }
    });
  };

  return (
    <SafeAreaView>
      <TranslateView ref={translateRef} apiKey="YOUR_API_KEY" width={320} />
      <Button title="Sign greeting" onPress={sign} />
    </SafeAreaView>
  );
}

In production, drive playPose from user actions rather than firing on mount unless you intend autoplay.