React Native Quickstart

1. Install LiveKit SDK

LiveKit provides a client SDK for React Native. Install the package and its dependency with:

npm install @livekit/react-native @livekit/react-native-webrtc

This library depends on @livekit/react-native-webrtc, which has additional installation instructions for Android.

Once the @livekit/react-native-webrtc dependency is installed, one last step is required. In your MainApplication.java file:

import com.livekit.reactnative.LiveKitReactNative;
import com.livekit.reactnative.audio.AudioType;

public class MainApplication extends Application implements ReactApplication {

@Override
public void onCreate() {
// Place this above any other RN related initialization
// When AudioType is omitted, it'll default to CommunicationAudioType
// use MediaAudioType if user is only consuming audio, and not publishing
LiveKitReactNative.setup(this, new AudioType.CommunicationAudioType());

//...
}
}

If you are using Expo, LiveKit is available on Expo through development builds. See the instructions found here.

Finally, in your index.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();

2. Connect to a room, publish video & audio

import { Participant, Room, Track } from 'livekit-client';
import { useRoom, AudioSession, VideoView } from '@livekit/react-native';

export const RoomPage = (url: string, token: string) => {

  // Setup Room state
  const [room] = useState(() => new Room());
  const { participants } = useRoom(room);

  // Connect to Room
  useEffect(() => {
    const connect = async () => {
        await AudioSession.startAudioSession();
        await room.connect(url, token, {})
    }
    connect()

    return () => {
      room.disconnect()
      AudioSession.stopAudioSession();
    }
  }, [url, token, room]);

  // Display the video of the first participant.
  const videoView = participants.length > 0 && (
    <VideoView
      style={{flex:1, width:"100%"}}
      videoTrack={participants[0].getTrackPublication(Track.Source.Camera)?.videoTrack}
      />
  );

  return videoView
}

3. 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.