React Native SDK

Soniox React SDK works with React Native and Expo out of the box, providing the same hooks for real-time speech-to-text. It lets you:

Capture audio from the device microphone with a single hook
Stream audio to Soniox in real time
Receive transcription and translation results as reactive state

Quickstart

Install

Install via your preferred package manager:

npm install @soniox/react @soniox/client

yarn add @soniox/react @soniox/client

pnpm add @soniox/react @soniox/client

bun add @soniox/react @soniox/client

Set up your temporary API key endpoint

In client environments (browser, mobile app, React Native, etc.), you don't want to expose your API key. Create a temporary API key endpoint on your server and use it to issue short-lived keys for the client.

Read more about using temporary API keys with the React SDK.

Create a custom audio source

Wrap any RN audio streaming library (e.g. @siteed/expo-audio-studio) with the AudioSource interface to stream PCM audio chunks to Soniox

import type { AudioSource, AudioSourceHandlers } from "@soniox/client";

class MyAudioSource implements AudioSource {
  private handlers: AudioSourceHandlers | null = null;

  async start(handlers: AudioSourceHandlers): Promise<void> {
    this.handlers = handlers;

    // Start your audio capture here.
    // Call handlers.onData(chunk) with each audio chunk as an ArrayBuffer.
    // Call handlers.onError(error) if something goes wrong.
    // Call handlers.onMuted?.() / handlers.onUnmuted?.() when the mic is
    // muted or unmuted externally (e.g. OS-level, hardware switch).
  }

  stop(): void {
    // Stop audio capture and release resources.
    this.handlers = null;
  }
}

Create your first real-time session

The core hooks (e.g. useRecording) are platform-agnostic. To use them in React Native, provide a custom AudioSource that streams PCM audio chunks

import { useRef } from "react";
import { SonioxProvider, useRecording } from "@soniox/react";
import { MyAudioSource } from "./MyAudioSource";

// Fetch a temporary API key from your server endpoint.
async function fetchConfig() {
  const res = await fetch("/api/soniox-temporary-key", { method: "POST" });
  const { api_key } = await res.json();
  return { api_key };
}

function App() {
  return (
    // Wrap your app with a SonioxProvider. `permissions={null}` disables the
    // default browser permission resolver — not applicable on React Native.
    <SonioxProvider config={fetchConfig} permissions={null}>
      <Transcription />
    </SonioxProvider>
  );
}

function Transcription() {
  // Instantiate the audio source
  const sourceRef = useRef<MyAudioSource | null>(null);
  if (sourceRef.current === null) {
    sourceRef.current = new MyAudioSource();
  }

  // Create a recording session
  const { state, isActive, finalText, partialText, start, stop } = useRecording({
    model: "stt-rt-v4",
    audio_format: "pcm_s16le",
    sample_rate: 16000,
    num_channels: 1,
    source: sourceRef.current,
  });

  return (
    <View>
      <Text>
        <Text>{finalText}</Text>
        <Text style={{ color: "gray" }}>{partialText}</Text>
      </Text>
      {isActive ? (
        <Button title="Stop" onPress={() => void stop()} />
      ) : (
        <Button title="Start" onPress={start} />
      )}
    </View>
  );
}

Quickstart

Install

Set up your temporary API key endpoint

Create a custom audio source

Create your first real-time session

Next steps

Package links

On this page