zerorate-react-native-voip-sdk

[BEFORE YOU INSTALL: IMPORTANT NOTICE]: This SDK is customly built to be use by merchants on the freepass.africa platform.

ZeroRate 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.

Features

- 📞 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.

Installation

$3

``bash
npm install zerorate-react-native-voip-sdk


or


yarn add zerorate-react-native-voip-sdk
`

$3

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-permissions


or


yarn add @livekit/react-native react-native-webrtc react-native-incall-manager react-native-permissions
`

$3

#### 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
NSCameraUsageDescription
We need access to your camera for video calls
NSMicrophoneUsageDescription
We need access to your microphone for audio calls
`

#### Android (AndroidManifest.xml) - Bare Workflow Only

Add the following permissions to your android/app/src/main/AndroidManifest.xml:

`xml







`

Usage

$3

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 (



);
}
`

$3

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 (

Status: {isConnected ? "Connected" : "Disconnected"}
Call State: {callState}

{callState === "idle" ? (
<>
placeholder="Enter User ID"
value={calleeId}
onChangeText={setCalleeId}
style={{
borderWidth: 1,
padding: 10,
width: 200,
marginBottom: 10,
}}
/>
title="Start Video Call"
onPress={handleCall}
disabled={!isConnected}
/>

) : (

)}

);
}
`

API Reference

$3

| 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. |

$3

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.

Troubleshooting

$3

Ensure you have installed all peer dependencies listed in the Installation section.

$3

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.
2. Run npx expo prebuild --clean to regenerate native directories.
3. Run npx expo run:ios 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.
2. Rebuild the app with npx react-native run-ios or npx react-native run-android.

$3

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).

$3

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.

License

MIT