Expo quickstart | LiveKit Docs

Voice AI quickstart

To build your first voice AI app for Expo, use the following quickstart and the starter app. Otherwise follow the getting started guide below.

Voice AI quickstart

Create a voice AI agent in less than 10 minutes.

React Native Voice Agent

A native voice AI assistant app built with React Native and Expo.

livekit-examples/agent-starter-react-native

Getting started guide

The following guide walks you through the steps to build a video-conferencing application using Expo. It uses the LiveKit React Native SDK to render the UI and communicate with LiveKit servers via WebRTC. By the end, you will have a basic video-conferencing application you can run with multiple participants.

Install LiveKit SDK

LiveKit provides a React Native SDK and corresponding Expo config plugin. Install the packages and dependencies with:

npm install @livekit/react-native @livekit/react-native-expo-plugin @livekit/react-native-webrtc @config-plugins/react-native-webrtc livekit-client

Note

The LiveKit SDK is not compatible with the Expo Go app due to the native code required. Using expo-dev-client and building locally will allow you to create development builds compatible with LiveKit.

Configure Expo

In your root folder, add the Expo plugins to the app.json file:

{
  "expo": {
    "plugins": ["@livekit/react-native-expo-plugin", "@config-plugins/react-native-webrtc"]
  }
}

Finally, in your App.js file, setup the LiveKit SDK by calling registerGlobals(). This sets up the required WebRTC libraries for use in Javascript, and is needed for LiveKit to work.

import { registerGlobals } from '@livekit/react-native';

registerGlobals();

Connect to a room, publish video & audio

import * as React from 'react';
import {
  StyleSheet,
  View,
  FlatList,
  ListRenderItem,
} from 'react-native';
import { useEffect } from 'react';
import {
  AudioSession,
  LiveKitRoom,
  useTracks,
  TrackReferenceOrPlaceholder,
  VideoTrack,
  isTrackReference,
  registerGlobals,
} from '@livekit/react-native';
import { Track } from 'livekit-client';

registerGlobals();

// !! Note !!
// This sample hardcodes a token which expires in 2 hours.
const wsURL = "<your LiveKit server URL>"
const token = "<generate a token>"

export default function App() {
  // Start the audio session first.
  useEffect(() => {
    let start = async () => {
      await AudioSession.startAudioSession();
    };

    start();
    return () => {
      AudioSession.stopAudioSession();
    };
  }, []);

  return (
    <LiveKitRoom
      serverUrl={wsURL}
      token={token}
      connect={true}
      options={{
        // Use screen pixel density to handle screens with differing densities.
        adaptiveStream: { pixelDensity: 'screen' },
      }}
      audio={true}
      video={true}
    >
      <RoomView />
    </LiveKitRoom>
  );
};

const RoomView = () => {
  // Get all camera tracks.
  const tracks = useTracks([Track.Source.Camera]);

  const renderTrack: ListRenderItem<TrackReferenceOrPlaceholder> = ({item}) => {
    // Render using the VideoTrack component.
    if(isTrackReference(item)) {
      return (<VideoTrack trackRef={item} style={styles.participantView} />)
    } else {
      return (<View style={styles.participantView} />)
    }
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={tracks}
        renderItem={renderTrack}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
  },
  participantView: {
    height: 300,
  },
});

See the quickstart example repo for a fully configured app using Expo.

Create a backend server to generate tokens

Set up a server to generate tokens for your app at runtime by following this guide: Generating Tokens.

Next steps

The following resources are useful for getting started with LiveKit on React Native and Expo.

Generating tokens

Guide to generating authentication tokens for your users.

Realtime media

Complete documentation for live video and audio tracks.

Realtime data

Send and receive realtime data between clients.

React Native SDK

LiveKit React Native SDK on GitHub.

React Native SDK reference

LiveKit React Native SDK reference docs.