PurpleCallio documentation
Add Video Calling to React Native
The PurpleCallio React Native SDK reuses the same call engine as the web SDKs on top of react-native-webrtc, adding the mobile-specific pieces: permissions, camera switching, and background/foreground lifecycle handling.
Install the package
npm install @purplecallio/react-native @purplecallio/sdk react-native-webrtc, then call registerGlobals() from react-native-webrtc once at app startup, before joining a call.
Configure native permissions
Add NSCameraUsageDescription and NSMicrophoneUsageDescription to Info.plist on iOS. On Android, camera and microphone runtime permissions are requested automatically before join() — no extra setup required.
Wrap your call screen
Wrap your call screen in a PurpleCallioProvider with a participant token from your backend, then use useMeeting(), useParticipants(), and PurpleCallioVideoView to build the call UI.
Handle mobile specifics
Camera and microphone permissions are requested automatically before joining, the camera pauses while the app is backgrounded and restores on foreground, and switchCamera() toggles between front and back cameras. Speaker/earpiece routing is available via the optional react-native-incall-manager package.
Known limitation: screen sharing
Screen sharing is not yet supported on React Native — it requires native platform integration (an iOS Broadcast Upload Extension and Android MediaProjection) not yet implemented in this package.
Join a call from a React Native screen
import { PurpleCallioProvider, useMeeting, PurpleCallioVideoView } from "@purplecallio/react-native";
function CallScreen() {
const { join, leave, remoteStream, localStream, toggleCamera } = useMeeting();
return (
<PurpleCallioVideoView stream={remoteStream} objectFit="cover" />
);
}
export default function App() {
return (
<PurpleCallioProvider token={participantToken} callId={callId} signalUrl={signalUrl}>
<CallScreen />
</PurpleCallioProvider>
);
}Related documentation
Build with PurpleCallio
Explore the documentation to choose hosted UI, React components, or the headless SDK for your integration.