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.33+ can interoperate with apps written with version 2.31+ 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

Installation via GitHub Packages

In addition to installing from the npm registry, the Vonage Video API Client SDK packages are also available through GitHub Packages' NPM registry. This provides an alternative distribution channel for enterprise environments that require GitHub-based package management.

Available Packages

The following package is published to GitHub Packages:

• @vonage/client-sdk-video-react-native - Available at GitHub Packages (Vonage org)

Setup Instructions

To install packages from GitHub Packages' NPM registry, you need to configure npm to authenticate with GitHub:

1. Create a GitHub Personal Access Token (PAT)

Generate a personal access token with read:packages scope from your GitHub account settings.

2. Configure your .npmrc file

Add the following configuration to your project's .npmrc file or your user-level ~/.npmrc file:

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@vonage:registry= https://npm.pkg.github.com

Replace YOUR_GITHUB_TOKEN with your GitHub personal access token.

3. Install the package

Once configured, you can install the package using the standard npm install command as explained below.

Note on Package Availability

Both the traditional npm registry and GitHub Packages registry are kept in sync. You can choose either distribution method based on your organization's package management preferences. The traditional npm installation method (via npm install @vonage/client-sdk-video-react-native from the default registry) remains fully supported and requires no additional configuration.

For more information about working with GitHub Packages' NPM registry, see the GitHub Packages documentation.

For Expo projects

If you're using Expo, the setup is simplified with the config plugin:

1. Install the package:

2. Add the plugin to your app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "@vonage/client-sdk-video-react-native",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to use your camera for video calls",
          "microphonePermission": "Allow $(PRODUCT_NAME) to use your microphone for audio calls"
        }
      ]
    ]
  }
}

Plugin iOS Configuration Options:

3. Rebuild your app:

What the config plugin does automatically:

Adds iOS camera and microphone permissions to Info.plist
Adds all required Android permissions to AndroidManifest.xml:

• BLUETOOTH
• REQUEST_IGNORE_BATTERY_OPTIMIZATIONS
• BLUETOOTH_CONNECT
• BROADCAST_STICKY
• CAMERA
• INTERNET
• MODIFY_AUDIO_SETTINGS
• READ_PHONE_STATE
• RECORD_AUDIO
• ACCESS_NETWORK_STATE

Configures hardware features for Android

No manual native configuration needed! When using Expo with the config plugin, you can skip the iOS Installation and Android Installation sections below.

For React Native CLI projects

In your terminal, change into your React Native project's directory.

Add the library using npm:

Note: Replace <VERSION> with the target version to use.

After installing the package, continue with the iOS Installation and Android Installation sections below.

iOS Installation

1. Install the iOS pods:
   Copy

    npx pod-install
   

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

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

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. You will also need to add the bridging header path in the project's build settings in Xcode, under Objective-C Bridging Header.

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

   Copy

   pod 'VonageClientSDKVideoTransformers', '= 2.33.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, import and register the OpentokReactNativePackage, OTRNPublisherPackage, and OTRNSubscriberPackage packages. Do this by modifying the MainApplication file by adding these to the list of packages returned by the getPackages() function

   Copy

//... import com.opentokreactnative.OTRNPublisherPackage import com.opentokreactnative.OTRNSubscriberPackage import com.opentokreactnative.OpentokReactNativePackage; //...

override fun getPackages(): List<ReactPackage> =
    PackageList(this).packages.apply {
      add(OTRNPublisherPackage())
      add(OTRNSubscriberPackage())
      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:

implementation "com.vonage:client-sdk-video-transformers:2.33.0"

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:

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ...
    repositories {
        google()
        mavenCentral()
    }
    ...
}

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions over there.
            content {
                excludeGroup "com.facebook.react"
            }
        }
        google()
        maven { url 'https://www.jitpack.io' }
    }
}

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.