@unith-ai/react-native

@unith-ai/react-native

React Native WebView wrapper for the Unith AI digital human SDK. This package embeds the existing web SDK inside a WebView and bridges events/commands via postMessage.

Installation

npm install @unith-ai/react-native react-native-webview

Usage (component)

import { UnithConversationView } from "@unith-ai/react-native";

export default function Screen() {
  return (
    <UnithConversationView
      style={{ height: 420 }}
      options={{
        orgId: "YOUR_ORG_ID",
        headId: "YOUR_HEAD_ID",
        apiKey: "YOUR_API_KEY",
        language: "en-US",
        username: "React Native User",
        dataTag: "custom-data",
      }}
      onStatusChange={status => console.log("Status:", status)}
      onConnect={data => console.log("Connected:", data)}
      onDisconnect={data => console.log("Disconnected:", data)}
      onMessage={msg => console.log("Message:", msg)}
      onSuggestions={suggestions => console.log("Suggestions:", suggestions)}
      onSpeakingStart={() => console.log("Speaking started")}
      onSpeakingEnd={() => console.log("Speaking ended")}
      onError={error => console.log("Error:", error)}
    />
  );
}

Usage (hook + custom WebView)

import { WebView } from "react-native-webview";
import { useConversation } from "@unith-ai/react-native";

export default function Screen() {
  const convo = useConversation(
    {
      orgId: "YOUR_ORG_ID",
      headId: "YOUR_HEAD_ID",
      apiKey: "YOUR_API_KEY",
      language: "en-US",
      username: "React Native User",
      dataTag: "custom-data",
    },
    {
      onStatusChange: status => console.log("Status:", status),
      onConnect: data => console.log("Connected:", data),
      onDisconnect: data => console.log("Disconnected:", data),
      onMessage: msg => console.log("Message:", msg),
      onSuggestions: suggestions => console.log("Suggestions:", suggestions),
      onSpeakingStart: () => console.log("Speaking started"),
      onSpeakingEnd: () => console.log("Speaking ended"),
      onError: error => console.log("Error:", error),
      onSpeechRecognitionToken: token => console.log("Token:", token),
    }
  );

  return <WebView ref={convo.webViewRef} {...convo.webViewProps} />;
}

Examples

For a complete working example, check out the React Native example.

Available Events

• onStatusChange - Fired when the conversation status changes
• onConnect - Fired when connection is established
• onDisconnect - Fired when disconnected
• onMessage - Fired when a message is received
• onSuggestions - Fired when suggestions are available
• onSpeakingStart - Fired when the digital human starts speaking
• onSpeakingEnd - Fired when the digital human stops speaking
• onTimeoutWarning - Fired as a warning before session timeout
• onTimeout - Fired when the session times out
• onKeepSession - Fired to keep the session alive
• onMuteStatusChange - Fired when mute status changes
• onError - Fired when an error occurs
• onStoppingStart - Fired to signal we're in the process of stopping a response.
• onStoppingEnd - Fired to signal a response has been completely stopped.
• onSpeechRecognitionToken - Fired when the speech recognition token is generated.

Available Methods

The useConversation hook returns an object with the following methods:

• startSession() - Start a new conversation session
• endSession() - End the current session
• sendMessage(text) - Send a text message
• toggleMute() - Toggle output mute status
• keepSession() - Keep the session alive
• stopResponse() - Stop an ongoing response
• generateSpeechRecognitionToken() - Generate a new speech recognition token.

Configuration Options

• orgId - Organization ID (required)
• headId - Digital human head ID (required)
• apiKey - API key for authentication (required)
• language - Language code (e.g., "en-US", default: undefined)
• username - Username for the session (default: undefined)
• dataTag - Custom data that can be used for analytics. (default: undefined)