React Native SDK

The Vonage Video API React Native SDK lets you use Vonage Video API-powered video sessions in apps you build for Android and iOS devices. The React Native SDK provides the following functionalities:

• Connecting to session
• Publishing streams to a session
• Subscribing to streams in a session

The React Native SDK is built on top of the Android SDK and iOS SDK. For details, see the following:

• Android SDK Overview
• iOS SDK Overview

Client SDKs are also available for web, Android, iOS, Windows, macOS, and Linux. All Client SDKs can interact with one another. You can learn more about the basics of Vonage Video clients, servers, sessions, and more on the Video API Basics page.

Apps written with the React Native SDK 2.31+ can interoperate with apps written with version 2.29+ of the Video client SDKs:

• OpenTok.js
• Android SDK
• iOS SDK
• Windows SDK
• Linux SDK
• macOs SDK

Prerequisites

1. Install node.js.
2. Prepare your React Native development environment.
3. Install and update Xcode (you will need a Mac).
4. Install and update Android Studio.

System Requirements

Since the React Native SDK is built on top of the Android and iOS SDKs, the Android SDK and iOS SDK documentation have the relevant requirements.

Installation

1. In your terminal, change into your React Native project's directory.
2. Add the library using npm or yarn:
   • npm install @vonage/client-sdk-video-react-native
   • yarn add @vonage/client-sdk-video-react-native

iOS Installation

1. Install the iOS pods:
   widgets.copy

    npx pod-install
   

2. Ensure you have enabled both camera and microphone usage by adding the following entries to the Info.plist file:

3. Register the OTPublisherViewNative and OTSubscriberViewNative classes. Do this by modifying the AppDelegate implementation.

   • If you app has an Objective-C++ AppDelegate file (AppDelegate.mm), add these classes to the list of packages in the NSMutableDictionary returned by the thirdPartyFabricComponents() function:

        #import "OTPublisherViewNativeComponentView.h"
        #import "OTSubscriberViewNativeComponentView.h"

        @implementation AppDelegate
            // ...
            - (NSDictionary<NSString *,Class<RCTComponentViewProtocol>> *)thirdPartyFabricComponents
        {
        NSMutableDictionary * dictionary = [super thirdPartyFabricComponents].mutableCopy;
        dictionary[@"OTPublisherViewNative"] = [OTPublisherViewNativeComponentView class];
        dictionary[@"OTSubscriberViewNative"] = [OTSubscriberViewNativeComponentView class];
        return dictionary;
        }

        @end

• If your app uses a Swift AppDelegate file (AppDelegate.swift), you will need to have its implementation of the RCTAppDelegate.application(_, didFinishLaunchingWithOptions) method use a bridging header to call a method in an Objective-C++ file that calls the [RCTComponentViewFactory registerComponentViewClass:] method, passing in the OTPublisherViewNativeComponentView and OTSubscriberViewNativeComponentView classes.

4. If your app will use the OTPublisher.setVideoTransformers() or OTPublisher.setAudioTransformers() method, you need to include the following in your Podfile:

   widgets.copy

   pod 'VonageClientSDKVideoTransformers', '= 2.31.0'
   

When you create an archive of your app, the privacy manifest settings required by Apple's App store are added automatically with this version of the React Native SDK.

If you try to archive the app and it fails, please do the following:

1. Go to Target.
2. Click Build Phases.
3. Under the Link Binary With Libraries section, remove libOpenTokReactNative.a and add it again.

Android Installation

1. In your terminal, change into your project directory.

2. Run bundle install.

3. Make sure the following in your app's gradle compileSdkVersion, buildToolsVersion, minSdkVersion, and targetSdkVersion are greater than or equal to versions specified in the React Native library.

4. The SDK automatically adds Android permissions it requires. You do not need to add these to your app manifest. However, certain permissions require you to prompt the user. See the full list of required permissions in the Vonage Video API Android SDK documentation.

5. In the MainActivity.kt file for your app, register the OpentokReactNativePackage, OTPublisherViewNativePackage, and OTSubscriberViewNativePackage packages. Do this by modifying the MainApplication file by adding these to the list of packages returned by the getPackages() function

   widgets.copy

   override fun getPackages(): List<ReactPackage> =
       PackageList(this).packages.apply {
           add(OTPublisherViewNativePackage())
           add(OTSubscriberViewNativePackage())
           add(OpentokReactNativePackage())
       }
       // ...
   

6. If your app will use the OTPublisher.setVideoTransformers() or OTPublisher.setAudioTransformers() method, you need to include the following in your app/build.gradle file:

Bintray sunset

Bintray support has ended (official announcement: https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/). In your app build.gradle file you need to remove reference to jcenter and replace it with mavenCentral. Example:

Unsupported features

The React Native library provides a React interface for using the Android and iOS client SDKs. The following advanced features of the Android and iOS client SDKs are unsupported in the React Native library:

• Custom audio drivers -- An application using React Native use the device microphone to capture audio to transmit to a published stream. And it uses the device speakers (or headphones) to play back audio from subscribed streams. However, you can set the enableStereoOutput property of the OTSession object to enable stereo output.

• Custom video capturers -- (BaseVideoCapturer) -- The React Native OTPublisher uses the standard video capturer that uses video directly from the device's camera. However, you can set the videoSource property of an OTPublisher component to "screen" to publish a screen-sharing stream.

• Custom video renderers -- The OTSubscriber and OTPublisher components implement a standard video renderer that renders streams and provides user interface controls for displaying the stream name and muting the microphone or camera. Publishers and subscribers use mPublisher.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL)

• iOS delegate callback queue -- For iOS, you cannot assign the delegate callback queue (the GCD queue). See the docs for the OTSession.apiQueue property in the iOS SDK.

• CallKit API -- Version 2.31.0 of the OpenTok iOS SDK added API enhancements to use iOS CallKit without implementing a custom audio driver. This is not implemented in the React Native SDK.

• Android ConnectionService API -- Version 2.31.0 of the OpenTok Android SDK added support for integrating Android ConnectionService without implementing a custom audio driver. This is not implemented in the React Native SDK.

To build Android and iOS apps that use these features, use the Android SDK and the iOS SDK.

Sample Apps

To see this library in action, check out the Vonage-react-native-samples repo.

More information

For a list of new features and known issues, see the release notes.