React Native SDK

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;
  }
}

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

// Create a temporary API key endpoint on your server and use it to issue temporary API keys for the client.
async function fetchApiKey() {
  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 and pass the temporary API key getter function
    <SonioxProvider apiKey={fetchApiKey} permissions={null}>
      <Transcription />
    </SonioxProvider>
  );
}

function Transcription() {
  // Create a custom audio source
  const source = useRef(new MyAudioSource()).current;

  // 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,
  });

  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>
  );
}