How to add a voice agent to a React Native app

server.js

import express from 'express';

const app = express();

// Your app asks your server for a call; your server asks Crackle.
app.post('/api/call', async (req, res) => {
  const response = await fetch('https://goblins-call-api.onrender.com/v1/calls', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.CRACKLE_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ agentId: process.env.CRACKLE_AGENT_ID }),
  });
  if (!response.ok) return res.status(502).json(await response.json());

  // Only what the app needs to join. The API key stays here.
  const { callId, livekitUrl, token } = await response.json();
  res.json({ callId, livekitUrl, token });
});

app.listen(3000);

Terminal

npx expo install @livekit/react-native @livekit/react-native-webrtc livekit-client \
  @livekit/react-native-expo-plugin @config-plugins/react-native-webrtc expo-keep-awake

app.json

{
  "expo": {
    "plugins": ["@livekit/react-native-expo-plugin", "@config-plugins/react-native-webrtc"],
    "ios": { "infoPlist": { "NSMicrophoneUsageDescription": "Allow the microphone so you can talk on a call." } },
    "android": { "permissions": ["android.permission.RECORD_AUDIO"] }
  }
}

index.js

import { registerGlobals } from '@livekit/react-native';
import { registerRootComponent } from 'expo';
import App from './App';

registerGlobals();
registerRootComponent(App);

CallScreen.jsx

import { useEffect, useState } from 'react';
import { Button, Text, View } from 'react-native';
import { AudioSession, LiveKitRoom, useRoomContext } from '@livekit/react-native';
import { useKeepAwake } from 'expo-keep-awake';

export default function CallScreen({ onDone }) {
  const [session, setSession] = useState(null);
  const [error, setError] = useState('');
  useKeepAwake(); // a call that stops when the screen dims is a dropped call

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        await AudioSession.startAudioSession();
        // Your own backend, which calls POST /v1/calls with the API key.
        const response = await fetch('https://your-app.com/api/call', { method: 'POST' });
        if (!response.ok) throw new Error('The call could not be started.');
        const body = await response.json();
        if (!cancelled) setSession(body);
      } catch (err) {
        if (!cancelled) setError(err.message);
      }
    })();
    return () => {
      cancelled = true;
      AudioSession.stopAudioSession();
    };
  }, []);

  if (error) return <Text>{error}</Text>;
  if (!session) return <Text>Connecting…</Text>;

  return (
    <LiveKitRoom serverUrl={session.livekitUrl} token={session.token} connect audio video={false} onDisconnected={onDone}>
      <InCall />
    </LiveKitRoom>
  );
}

function InCall() {
  const room = useRoomContext();
  const [muted, setMuted] = useState(false);

  const toggleMute = async () => {
    await room.localParticipant.setMicrophoneEnabled(muted);
    setMuted(!muted);
  };

  return (
    <View>
      <Button title={muted ? 'Unmute' : 'Mute'} onPress={toggleMute} />
      <Button title="Hang up" onPress={() => room.disconnect()} />
    </View>
  );
}