Vonage Video React Native SDK new architecture support

The 2.31.0 beta version of the Vonage Video React Native SDK supports the React Native new architecture.

The 2.31 beta version supports the same API as previous versions of the Vonage Video Native SDK. 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 Vonage Video 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 Vonage Video Native SDK (such as version 2.30).

Installation

You can install this beta version from npmjs:

... or ...

Android and iOS installation steps are basically the same as they were for previous versions. However, for this version, you need to register the Vonage Video 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:

   Copy

   npx pod-install
   

2. For React Native versions prior to 0.60:

   • Add this to your Podfile:

     Copy

     target '<YourProjectName>' do
         # Pods for <YourProject>
         pod 'OTXCFramework', '2.30.1'
     end
     

   • Run react-native link @vonage/client-sdk-video-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:

   Copy

   <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 Vonage Video React Native SDK.

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

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

   Copy

   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 @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 Vonage Video 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 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

   Copy

   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:

   Copy

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

Known issues

The following are known issues in this beta version:

• Subscriber video freezes frequently when using VP9 or H264.
• otrnError events are missing.