LevelChatDocs
Docs
React Native SDK

React Native SDK

react-native-webrtc wrapper.

The React Native SDK wraps react-native-webrtc with an API that mirrors @levelchat/web-react, so you can share screens and component-level code with a web app via react-native-web.

Install

~
npm install @levelchat/react-native react-native-webrtc
cd ios && pod install

You also need to install Expo's config plugin if you're on a managed Expo workflow:

~
npx expo install @config-plugins/react-native-webrtc

Permissions

The package ships the right permission strings in its AndroidManifest.xml and Info.plist, but you still need to request them at runtime:

TypeScript
NSCameraUsageDescription;
NSMicrophoneUsageDescription;
TypeScript
import { PermissionsAndroid } from 'react-native';

await PermissionsAndroid.requestMultiple([
  PermissionsAndroid.PERMISSIONS.CAMERA,
  PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
]);

Connect

Same API surface as the Web SDK — same class names, same event names, same error codes. The only platform-specific differences are hidden behind native bindings (react-native-webrtc for the WebRTC layer, react-native's AppState for lifecycle) — your call site reads identically.

TypeScript (TSX)
import { LevelChatProvider, useLocalParticipant, ParticipantGrid } from '@levelchat/react-native';

export default function App() {
  return (
    <LevelChatProvider
      tokenEndpoint="https://your-app.com/api/lc-token"
      room="r_demo"
      roomType="meeting"
    >
      <ParticipantGrid />
      <Controls />
    </LevelChatProvider>
  );
}

function Controls() {
  const { toggleCamera, toggleMic, camOn, micOn } = useLocalParticipant();
  return (
    <>
      <Button title={camOn ? 'Camera off' : 'Camera on'} onPress={toggleCamera} />
      <Button title={micOn ? 'Mic off' : 'Mic on'} onPress={toggleMic} />
    </>
  );
}

Cross-platform code sharing

Use the same hook names between web and native via react-native-web:

TypeScript (TSX)
import { useParticipants } from '@levelchat/web-react'; // web
// import { useParticipants } from '@levelchat/react-native'; // native

export function Tiles() {
  const participants = useParticipants();
  return participants.map((p) => <ParticipantTile key={p.id} participant={p} />);
}

Background mode (calls when the app is backgrounded)

iOS background-VoIP is opt-in. Add voip to UIBackgroundModes in Info.plist if you want calls to keep flowing when the user backgrounds your app. CallKit integration ships in @levelchat/react-native/callkit (separate entry).

What's not yet shipped

  • Hardware AV1 encode (waiting on react-native-webrtc upstream — H.264 / VP9 / VP8 work today)
  • Screen-share on Android (iOS Replaykit-based screen-share works as of v0.2)