React Native SDK

New architecture support: The Vonage Video API React Native 2.31.0-beta.2 version supports the React Native new architecture. For more information, see these docs.

The Vonage Video API React Native SDK reference can be found here.

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:

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.30.0 can interoperate with apps written with version 2.28+ of the Video client SDKs:

Installing the SDK

  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.

  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:

     npx pod-install

  2. For React Native versions prior to 0.60:

    • Add this to your Podfile:
    target '<YourProjectName>' do
    # Pods for <YourProject>
    pod 'OTXCFramework', '2.28.2{*}'
end
    • Run react-native link @vonage/client-sdk-video-react-native.

These steps are not necessary in React Native version 0.60 and later.

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

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. For React Native versions prior to 0.60: - Run react-native link @vonage/client-sdk-video-react-native This step is not necessary in React Native version 0.60 and later.
  3. Run bundle install.
  4. 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.
  5. 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.
  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.30.1"

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.

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.