Suggestions

close search

Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs

Visit the Vonage API Developer Portal

OpenTok React Native new architecture support

The 2.31.0-beta.2 version of the OpenTok React Native SDK supports the React Native new architecture. For more information, this documentation.

The 2.31.0-beta.2 version supports Client SDK updates for 2.31.0. See the list of known issues.

This beta version is not intended for use in final production apps.

The 2.31 version will only be supported in the React Native new architecture. It will not be supported in apps that use the old architecture.

System requirements

Version 2.31 of the OpenTok React Native SDK is only supported in the React Native new architecture. If your app needs to run in a version of React Native that does not use the new architecture, you will need to use a previous version of the OpenTok React Native SDK (such as version 2.30).

Installation

You can install this beta version from npmjs:

npm install opentok-react-native@2.31.0-beta.2

... or ...

yarn add opentok-react-native@2.31.0-beta.2

Android and iOS installation steps are basically the same as they were for previous versions. However, for this version, you need to register the OpenTok packages in your application.

For Android, register the OpentokReactNativePackage, OTPublisherViewNativePackage, and OTSubscriberViewNativePackage packages in the MainActivity file for your app. See step 6 of the "Android Installation" section below.

For iOS, register the OpentokReactNativePackage, OTPublisherViewNativePackage, and OTSubscriberViewNativePackage packages in the MainActivity file for your app. See step 4 of the "iOS Installation" section below.

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.30.1'
end

    • Run react-native link opentok-react-native.

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

  3. 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 OpenTok React Native SDK.

  1. Register the OpenTok 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> *)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.

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

    pod 'VonageClientSDKVideoTransformers'

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 opentok-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 OpenTok 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. In the MainActivity.kt file for you app, register the OpenTok 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

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

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

Known issues

The following are known issues in this beta version: