@spontom/relaykit-react-native

React Native SDK for RelayKit — ship real-time video in your mobile apps.

Installation

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

iOS Setup

cd ios && pod install

Add to your Info.plist:

<key>NSCameraUsageDescription</key>
<string>Required for video calls</string>
<key>NSMicrophoneUsageDescription</key>
<string>Required for audio calls</string>

Android Setup

Add to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

Initialize LiveKit (Required)

In your app entry point (e.g., App.tsx):

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

// Call this before any RelayKit usage
registerGlobals();

Quick Start

import {
  RelayKitProvider,
  useRelayKit,
  useParticipants,
  useLocalCamera,
  useLocalMic,
  VideoView,
  AudioRenderer,
  ControlBar,
} from '@spontom/relaykit-react-native';

function App() {
  return (
    <RelayKitProvider
      apiUrl="https://api.relaykit.live"
      apiKey="rk_live_xxxx"
    >
      <VideoCallScreen />
    </RelayKitProvider>
  );
}

function VideoCallScreen() {
  const { connect, disconnect, status } = useRelayKit();
  const participants = useParticipants();
  const { toggleCamera, switchCamera } = useLocalCamera();
  const { toggleMic } = useLocalMic();

  useEffect(() => {
    connect({
      roomId: 'my-room-id',
      participantIdentity: 'user_123',
      participantName: 'Alice',
    });
    return () => { disconnect(); };
  }, []);

  if (status !== 'connected') {
    return <Text>Connecting...</Text>;
  }

  return (
    <View style={{ flex: 1 }}>
      <AudioRenderer />
      {/* Local video */}
      <VideoView mirror style={{ width: 120, height: 90 }} />
      {/* Remote participants */}
      {participants.map((p) => (
        <VideoView
          key={p.identity}
          participantIdentity={p.identity}
          style={{ flex: 1 }}
        />
      ))}
      <ControlBar onEndCall={() => navigation.goBack()} />
    </View>
  );
}

Pre-built Components

| Component | Description | |---|---| | <VideoView> | Renders a participant's video (local or remote) | | <AudioRenderer> | Headless component that handles audio playback | | <ParticipantGrid> | Auto-layout grid of all participant videos | | <ControlBar> | Mic, camera, flip, and end call buttons |

Hooks

| Hook | Returns | |---|---| | useRelayKit() | { room, connect, disconnect, status, error } | | useParticipants() | RelayKitParticipant[] (remote only) | | useLocalCamera() | { isCameraEnabled, toggleCamera, switchCamera } | | useLocalMic() | { isMicEnabled, toggleMic } | | useLocalScreenShare() | { isScreenShareEnabled, startScreenShare, stopScreenShare, toggleScreenShare } |

Rendering screen share

// Render a participant's screen share instead of their camera
<VideoView participantIdentity={p.identity} source="screen-share" style={{ flex: 1 }} />

Screen share platform setup

iOS: Requires a Broadcast Upload Extension in Xcode. See LiveKit docs.

Android: Add these permissions to AndroidManifest.xml:

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />

Requirements

• React Native >= 0.70
• @livekit/react-native >= 2.x
• @livekit/react-native-webrtc >= 1.x

License

MIT