LiveKit React Native SDK

Initialize the LiveKit native module in your AppDelegate file. This must be placed above any other React Native initialization.

Swift Implementation

In AppDelegate.swift:

import livekit_react_native
import livekit_react_native_webrtc

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  func application(
    _ application: UIApplication, 
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    // Place this above any other RN related initialization
    LivekitReactNative.setup()
    // ...
  }
}

Objective-C Implementation

In AppDelegate.m:

#import "LivekitReactNative.h"
#import "WebRTCModuleOptions.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // Place this above any other RN related initialization
  [LivekitReactNative setup];
  // ...
}
@end

Background Camera Access (iOS 18+): To use the camera in the background, you require the voip background mode and must enable multitasking camera access via WebRTCModuleOptions:

// Objective-C
WebRTCModuleOptions *options = [WebRTCModuleOptions sharedInstance];
options.enableMultitaskingCameraAccess = YES;

// Swift
let options = WebRTCModuleOptions.sharedInstance()
options.enableMultitaskingCameraAccess = true

import livekit_react_native
import livekit_react_native_webrtc

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  func application(
    _ application: UIApplication, 
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    LivekitReactNative.setup()
    return true
  }
}

iOS screensharing requires a Broadcast Extension.

1. Integration: Follow the Jitsi Broadcast Extension integration guide. This involves copying specific files from a sample project into your iOS project and registering a Broadcast Extension in Xcode.
2. Background Stability: It is highly recommended to use CallKeep to register calls with CallKit and enable the voip background mode. This prevents the app from being restricted in the background, which would otherwise interrupt screen recording.
3. Implementation: You must include a ScreenCapturePickerView in your view tree and use NativeModules.ScreenCapturePickerViewManager.show to trigger the picker before enabling screen share via the participant API.

Note: Camera and microphone tracks cannot be published on the iOS Simulator.

const screenCaptureRef = React.useRef(null);
const screenCapturePickerView = Platform.OS === 'ios' && (
  <ScreenCapturePickerView ref={screenCaptureRef} />
);

const startBroadcast = async () => {
  if (Platform.OS === 'ios') {
    const reactTag = findNodeHandle(screenCaptureRef.current);
    await NativeModules.ScreenCapturePickerViewManager.show(reactTag);
    room.localParticipant.setScreenShareEnabled(true);
  } else {
    room.localParticipant.setScreenShareEnabled(true);
  }
};

return (
  <View style={styles.container}>
    {/* Make sure the ScreenCapturePickerView exists in the view tree. */}
    {screenCapturePickerView}
  </View>
);

The LiveKitRoom component manages the Room object and provides context for LiveKit hooks. To build a functional app, follow these steps:

1. Initialize Globals: Call registerGlobals() in index.js.
2. Manage Audio Session: Use AudioSession.startAudioSession() and AudioSession.stopAudioSession() within a useEffect hook to manage the native audio lifecycle.
3. Wrap with LiveKitRoom: Provide serverUrl, token, and connection options.
4. Consume Tracks: Use the useTracks hook to retrieve tracks (e.g., Track.Source.Camera) and the VideoTrack component to render them.

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

const wsURL = "wss://example.com";
const token = "your-token-here";

export default function App() {
  React.useEffect(() => {
    let start = async () => {
      await AudioSession.startAudioSession();
    };
    start();
    return () => {
      AudioSession.stopAudioSession();
    };
  }, []);

  return (
    <LiveKitRoom
      serverUrl={wsURL}
      token={token}
      connect={true}
      options={{ adaptiveStream: { pixelDensity: 'screen' } }}
      audio={true}
      video={true}
    >
      <RoomView />
    </LiveKitRoom>
  );
}

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

  const renderTrack = ({item}) => {
    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 },
});

import { registerGlobals, LiveKitRoom, useTracks, VideoTrack, isTrackReference, AudioSession } from '@livekit/react-native';
import { Track } from 'livekit-client';

// 1. registerGlobals() in index.js
// 2. Use LiveKitRoom to manage connection
// 3. Use useTracks() to get tracks
// 4. Use VideoTrack to render