ZeroRate VoIP SDK for React Native
npm install zerorate-react-native-voip-sdkZeroRate VoIP SDK for React Native. A comprehensive library for adding Voice and Video over IP capabilities to your React Native applications, built on top of LiveKit and WebRTC.
- 📞 Voice & Video Calls: Full support for 1-on-1 audio and video calls.
- 📱 Native Performance: Built with react-native-webrtc for optimal mobile performance.
- 🔔 Call Management: Built-in handling for incoming calls, outgoing calls, acceptance, and rejection.
- 🎨 UI Components: Includes customizable modals for Incoming and Active calls.
- 🔊 Audio Management: Automatic handling of speakerphone, earpiece, and proximity sensors via react-native-incall-manager.
- 🔌 Event-Driven: Robust event system for connection and call state management.
``bash`
npm install zerorate-react-native-voip-sdkor
yarn add zerorate-react-native-voip-sdk
This SDK relies on several peer dependencies that you must install in your project:
`bash`
npm install @livekit/react-native react-native-webrtc react-native-incall-manager react-native-permissionsor
yarn add @livekit/react-native react-native-webrtc react-native-incall-manager react-native-permissions
#### Expo (Managed Workflow with Prebuild)
Add the plugin to your app.json:
`json`
{
"expo": {
"plugins": ["@zerorate/react-native-voip-sdk"]
}
}
Then run prebuild to generate the native code:
`bash`
npx expo prebuild
#### iOS (Info.plist) - Bare Workflow Only
Add the following keys to your ios/Runner/Info.plist to request camera and microphone permissions:
`xml`
#### Android (AndroidManifest.xml) - Bare Workflow Only
Add the following permissions to your android/app/src/main/AndroidManifest.xml:
`xml`
Wrap your application (or the part that needs VoIP functionality) with the VoIPProvider.
`tsx
import React from "react";
import { VoIPProvider, VoIPConfig } from "zerorate-react-native-voip-sdk";
import AppContent from "./AppContent";
const config: VoIPConfig = {
userId: "user-123",
userName: "John Doe",
wsUrl: "wss://your-backend.com", // Your WebSocket Signaling URL
backendUrl: "https://your-backend.com", // Your API Backend URL
authToken: "your-auth-token", // Optional: if your backend requires it
enableUI: true, // Enable built-in UI modals
debug: true,
};
export default function App() {
return (
);
}
`
Use the useVoIPContext hook to access call state and methods within your components.
`tsx
import React, { useState } from "react";
import { View, Button, Text, TextInput } from "react-native";
import { useVoIPContext } from "zerorate-react-native-voip-sdk";
export default function AppContent() {
const { isConnected, callState, initiateCall, endCall } = useVoIPContext();
const [calleeId, setCalleeId] = useState("");
const handleCall = async () => {
try {
await initiateCall(calleeId, "Unknown User", { isVideo: true });
} catch (e) {
console.error("Call failed", e);
}
};
return (
{callState === "idle" ? (
<>
value={calleeId}
onChangeText={setCalleeId}
style={{
borderWidth: 1,
padding: 10,
width: 200,
marginBottom: 10,
}}
/>
title="Start Video Call"
onPress={handleCall}
disabled={!isConnected}
/>
>
) : (
)}
);
}
`
| Property | Type | Required | Description |
| --------------- | ----------------------------- | -------- | -------------------------------------------------------------------------- |
| userId | string | Yes | Unique identifier for the local user. |userName
| | string | Yes | Display name for the local user. |wsUrl
| | string | Yes | WebSocket URL for the signaling server. |backendUrl
| | string | Yes | HTTP URL for the backend API. |authToken
| | string | No | Authentication token for the connection. |enableUI
| | boolean | No | If true, enables built-in Incoming/Active call modals. Default: false. |theme
| | 'light' \| 'dark' \| 'auto' | No | UI Theme preference. |autoReconnect
| | boolean | No | Automatically reconnect on disconnect. |debug
| | boolean | No | Enable debug logging. |
Returns an object with the following properties and methods:
#### State
- isConnected: boolean - Connection status to the signaling server.callState
- : CallState - Current state of the call (idle, calling, ringing, connected, etc.).activeCall
- : CallData | null - Data for the currently active call.incomingCall
- : CallData | null - Data for a pending incoming call.localTracks
- : any[] - Array of local media tracks (audio/video).remoteTracks
- : any[] - Array of remote media tracks.
#### Methods
- initiateCall(userId: string, userName: string, options?: CallOptions): Start a new call.acceptCall()
- : Accept an incoming call.declineCall()
- : Decline an incoming call.endCall()
- : End the current active call.toggleMicrophone()
- : Toggle local microphone mute state.toggleVideo()
- : Toggle local camera video state.
Ensure you have installed all peer dependencies listed in the Installation section.
This usually means the native code hasn't been compiled into your app.
If using Expo:
1. Ensure you added "@zerorate/react-native-voip-sdk" to the plugins section of app.json.npx expo prebuild --clean
2. Run to regenerate native directories.npx expo run:ios
3. Run or npx expo run:android to build the native app. Do not use Expo Go.
If using Bare React Native:
1. Run pod install in the ios directory.npx react-native run-ios
2. Rebuild the app with or npx react-native run-android.
Make sure you have added the correct keys to Info.plist (iOS) and permissions to AndroidManifest.xml (Android) and rebuilt your app (npx react-native run-android or npx react-native run-ios).
If you are using Expo, you must use the Development Build workflow (npx expo run:android / npx expo run:ios) because this SDK relies on native modules (react-native-webrtc`). It will not work in Expo Go.
MIT