ZoomVideoSDKError_Wrong_Usage because SDK is not compatible with wix/react-native-navigation

[alexstroukov]

Issue Summary:

This SDK requires the app to be wrapped by ZoomVideoSdkProvider, but when using wix/react-native-navigation as your navigation library each component is registered with its own providers as described here https://wix.github.io/react-native-navigation/api/component/#registering-a-component-wrapped-with-providers

As a result the SDK calls initSdk in the file ZoomVideoSdk each time a screen is rendered and this causes the SDK to crash (android) and throw warning on iOS with the error ZoomVideoSDKError_Wrong_Usage

As a hack I managed to prevent it from crashing by caching the sdk initialisation in JS with patch-package

patches/@zoom+react-native-videosdk+1.10.10.patch

--- a/node_modules/@zoom/react-native-videosdk/src/native/ZoomVideoSdk.ts
+++ b/node_modules/@zoom/react-native-videosdk/src/native/ZoomVideoSdk.ts
@@ -301,12 +301,15 @@ export enum ZoomVideoSdkCRCProtocolType {
   ZoomVideoSDKCRCProtocol_H323 = 'ZoomVideoSDKCRCProtocol_H323',
   ZoomVideoSDKCRCProtocol_SIP = 'ZoomVideoSDKCRCProtocol_SIP',
 }
-
+let sdk = undefined
 export class ZoomVideoSdk implements ZoomVideoSdkType {
   initSdk(config: InitConfig) {
     validateNonEmptyStringProp(config, 'initConfig', 'domain');
     validateBooleanProp(config, 'initConfig', 'enableLog');
-    return RNZoomVideoSdk.initSdk(config);
+    if (!sdk) {
+      sdk = RNZoomVideoSdk.initSdk(config);
+    }
+    return sdk
   }

   joinSession(config: JoinSessionConfig) {

npx react-native info

System:
  OS: macOS 14.3
  CPU: (11) arm64 Apple M3 Pro
  Memory: 148.95 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.1
    path: ~/.nvm/versions/node/v18.19.1/bin/node
  Yarn:
    version: 1.22.21
    path: ~/Documents/code/VideoSDK-ReactNative-Quickstart/node_modules/.bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v18.19.1/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/alexstroukov/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10227.8.2321.11479570
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /Users/alexstroukov/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.4
    wanted: 0.73.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

[EkaanshArora]

Hey @alexstroukov sorry to hear you're facing issues with your app. Looks like the issue comes from the provider being re-rendered by the navigation library. Why is the screen being re-rendered? Can you try wrapping the immediate parent of the component using the VideoSDK?

The provider maintains the state of the videocall, re-rendering the provider will reset the call. You'll have to make sure the component isn't re-rendered while the call is active.

[alexstroukov]

@EkaanshArora its to do with how the https://github.com/wix/react-native-navigation library works. you register each screen wrapped with all of the providers and they get re rendered each time the screen is navigated to