Build Video Calling in React Native with Vonage API - React Native Expert
banner shap banner shap

Building Real-Time Video Calling in React Native with Vonage Video API

Learn how to build high-quality, real-time video calling apps in React Native using the Vonage Video API. Step-by-step guide with setup, code, chat, and recording features.

May 26, 2025

Save for later

Video Calling in React Native

Introduction:

In today’s digital world, video calling is an essential feature for many mobile apps. Whether doctors consult patients online, teachers hold virtual classes, or support teams help customers, real-time communication is key. If you’re planning to build a video-enabled mobile app, consider using React Native development services to ensure a fast and reliable experience.

In this guide, we’ll show you how to build a real-time video calling app using React Native and the Vonage Video API (previously known as TokBox/OpenTok). We’ll walk you through the setup, implementation and give you a working code example.

Why Choose Vonage Video API for React Native?

Vonage Video API is a great tool for video calls. Here’s why developers like it:

  • Cross-platform compatibility: Works across iOS, Android, and Web.
  • HD video and audio quality: Adaptive bitrate streaming ensures consistent quality.
  • Scalability: Supports 1-to-1 and group video calls.
  • Security: Offers encryption and secure connection protocols.
  • Advanced features: Includes screen sharing, archiving, and signaling.

React Native, combined with Vonage, offers a powerful solution for building real-time video communication apps with native performance and a shared codebase.

Use Cases of Vonage Video API in React Native

  • Telemedicine apps for virtual doctor consultations.
  • Online classrooms for interactive learning.
  • Remote inspections and walkthroughs.
  • Customer support with face-to-face engagement.
  • Team collaboration apps.

Setup Requirements

1. Vonage Account

Sign up at https://www.vonage.com and create a new project to get:

  • API Key

  • API Secret

  • Session ID

  • Token

2. React Native Environment

Make sure you have:

  • React Native CLI or Expo (not recommended here as native modules are required)

  • Xcode for iOS, Android Studio for Android

  • Node.js and npm/yarn

Installing Vonage Video SDK for React Native

Vonage provides a community-maintained native module: react-native-opentok

Step 1: Install Dependencies

				
					npm install react-native-opentok --save
				
			

Step 2: Link Native Modules

  • For React Native < 0.60:

				
					react-native link react-native-opentok

				
			

Vonage Credentials (Backend or Manual)

You’ll need to either:

  • Manually create API Key, Session ID, and Token on the Vonage dashboard.

  • Or set up a server (Node.js or Python) using the Vonage Server SDK to generate session ID and token dynamically.

Implementation Example in React Native

1. Basic Video Call UI

VideoCallScreen.js

				
					import React from 'react';
import { View, StyleSheet } from 'react-native';
import { OTSession, OTPublisher, OTSubscriber } from 'opentok-react-native';

const API_KEY = 'YOUR_API_KEY';
const SESSION_ID = 'YOUR_SESSION_ID';
const TOKEN = 'YOUR_TOKEN';

const VideoCallScreen = () => {
  return (
    <View style={styles.container}>
      <OTSession
        apiKey={API_KEY}
        sessionId={SESSION_ID}
        token={TOKEN}
        eventHandlers={{
          sessionConnected: () => console.log('Connected to session'),
        }}
      >
        <OTPublisher
          style={styles.publisher}
          properties={{ cameraPosition: 'front' }}
        />
        <OTSubscriber
          style={styles.subscriber}
          eventHandlers={{
            error: (err) => console.log('Subscriber error:', err),
          }}
        />
      </OTSession>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  publisher: {
    width: 100,
    height: 150,
    position: 'absolute',
    bottom: 10,
    right: 10,
    zIndex: 2,
  },
  subscriber: {
    flex: 1,
  },
});

export default VideoCallScreen;

				
			

2. Audio-Only Mode

You can initiate calls in audio-only mode, useful for low bandwidth or voice-only apps.
Set video options when initializing the publisher:

				
					<OTPublisher
  properties={{ video: false, audio: true }}
/>

				
			

3. Screen Sharing

Screen sharing is supported on desktop and Android (limited on iOS). This is useful for:

  • Remote presentations

  • Debugging support sessions

React Native support is limited but can be handled via native module bridge (Android only for now).

4. Text Messaging via Signaling

Vonage supports in-session signaling, letting users send messages or events without needing an external service.

				
					session.signal(
  {
    type: 'chat',
    data: 'Hello from User A'
  },
  (error) => {
    if (error) console.error('Signal error:', error);
  }
);

				
			

Use this to implement:

  • In-call chat

  • Reaction emojis

  • Event triggers (e.g., mute notification)

5. Session Recording (Archiving)

Vonage supports cloud-based video archiving, allowing you to:

  • Record full sessions

  • Store them in the cloud

  • Retrieve them using REST API

Use your backend server to:

  • Start/stop recordings

  • Get archive list

  • Download or delete archives

Note: Archiving is not controlled directly from the client. It’s triggered via Vonage REST API.

6. Network Quality & Stats Monitoring

Vonage provides real-time quality stats like:

  • Latency

  • Packet loss

  • Audio/video bitrate

React Native SDK exposes events and stats you can listen to and display to users or log for diagnostics.

7. Audio & Video Controls

Let users:

  • Mute/unmute microphone

  • Enable/disable camera

  • Switch camera (front/back)

				
					publisher.current?.publishAudio(false);  // mute
publisher.current?.publishVideo(false);  // turn off camera

				
			

You can update this value on every onRouteProgressChange callback to reflect real-time traffic and movement.

8. Session Events

React Native SDK emits events such as:

  • streamCreated

  • streamDestroyed

  • sessionDisconnected

  • signal

You can use these to manage UI dynamically as users join/leave.

				
					if (distanceFromRoute(userLocation, routeGeometry) > threshold) {
  fetchNewRoute(userLocation, destination);
}

				
			

9. Multi-Party Conferences

Supports many-to-many video conferences using the same logic as 1:1 but subscribing to multiple streams dynamically.
Each streamCreated event corresponds to a new user joining:

				
					onStreamCreated={(event) => {
  const newStream = event.nativeEvent.stream;
  // Create new OTSubscriber for the stream
}}

				
			

This makes your navigation usable even without internet!

Explanation of Core Components

  • OTSession: Connects to the Vonage session using your API credentials.

  • OTPublisher: Represents the local user’s video/audio stream.

  • OTSubscriber: Represents a remote user’s video/audio stream.

Additional Features You Can Add

Mute/Unmute Audio or Video

				
					<OTPublisher
  publishAudio={true}
  publishVideo={true}
/>

				
			

End Call or Leave Session

You can use session.disconnect() or conditional rendering to end a session.

Troubleshooting and Tips

  • Ensure you grant camera and microphone permissions on both Android and iOS.

On Android, update your AndroidManifest.xml

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

				
			

On iOS, add the following in Info.plist:

				
					<key>NSCameraUsageDescription</key>
<string>We need access to your camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need access to your microphone</string>

				
			

Best Practices

  • Use a backend service to dynamically generate tokens for better security.

  • Handle network disconnections and reconnect logic.

  • Add loading indicators while session connects.

  • Show meaningful error messages to users.

Benefits of Vonage Video API in React Native

  • Full Customization of UI

  • Global Infrastructure for low latency

  • Security: end-to-end encryption & compliance support

  • Scalability: 1-to-1 or 1-to-many calls

  • Flexible Monetization via usage-based pricing

Conclusion

Vonage Video API empowers developers to deliver feature-rich video calling apps in React Native. Whether you’re building a healthcare consultation platform or a virtual classroom, Vonage gives you the tools to handle real-time video, messaging, and recording with reliability and quality.
With proper integration and UX, you can deliver seamless communication experiences tailored to your business needs.

Comparing Gluestack UI with Other React Native UI Libraries

Feature Gluestack UI NativeBase React Native Paper Material UI
Performance Optimized
Customization
Prebuilt Components
Theming Support
Atomic Styling
Re-Renders Optimized
Mobile App Development Company USA

Searching for the Best Mobile App Development Services for Your Business?

Hire our React Native Developers to analyze your business requirements and develop a tailored mobile app that drives results. Discover top-tier mobile app development services designed to elevate your business.

Schedule Meeting Schedule a Consultation
Rate this post