ZoomVideoSDKError_Wrong_Usages

[ranveerching]

Getting ZoomVideoSDKError_Wrong_Usages after wrapping my newly created app with ZoomVideoSdkProvider.

Using following library version(s):

• react: 18.2.0
• react-native: 0.73.4
• @zoom/react-native-videosdk: 1.11.0

Expected behavior Zoom video SDK should be initialised successfully.

Target Platform (please complete the following information):

• Device: Android simulator
• OS: Android 13

Describe the bug Getting ZoomVideoSDKError_Wrong_Usages error after wrapping the app with ZoomVideoSdkProvider.

[EkaanshArora]

Did you wrap it at the top-level of your app? Can you share the code snippet?

[ranveerching]

Yes @EkaanshArora I wrapped the App component(App.tsx) with ZoomVideoSdkProvider. Here is the code snippet:

`import React, {useEffect} from 'react'; import {SafeAreaView, PermissionsAndroid, StyleSheet} from 'react-native'; import {ZoomVideoSdkProvider} from '@zoom/react-native-videosdk';

function App(): React.JSX.Element { useEffect(() => { async function requestPermissions() { try { const granted = await PermissionsAndroid.requestMultiple([ PermissionsAndroid.PERMISSIONS.CAMERA, PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, ]); if ( granted['android.permission.CAMERA'] === PermissionsAndroid.RESULTS.GRANTED && granted['android.permission.RECORD_AUDIO'] === PermissionsAndroid.RESULTS.GRANTED ) { console.log('You can use the camera and microphone'); } else { console.log('Permission denied'); } } catch (err) { console.warn(err); } }

requestPermissions();

}, []);

return ( <ZoomVideoSdkProvider config={{enableLog: true, domain: 'zoom.us'}}>

</ZoomVideoSdkProvider>

); } const styles = StyleSheet.create({ container: { flex: 1, }, });

export default App;`

[ranveerching]

@EkaanshArora Any update on this??

[EkaanshArora]

Are you able to run the sample app as is? Can you try creating a new component AppContainer that render the App wrapped with the provider like so:

const AppContainer = () => {
  return (
    <ZoomVideoSdkProvider config={{ appGroupId: "test", domain: "zoom.us", enableLog: true }}>
      <App />
    </ZoomVideoSdkProvider>
  )
}
export default AppContainer;

[ranveerching]

Hey @EkaanshArora,

• I am able to run the sample app.
• I tried to create a new component and wrap the App component but still getting the same issue.

[singhroshan18]

hi @ranveerching , is your sdk being initiliazed?

[syedm121]

i am stuck on this sdk issue from 3 days . nothing works , Documentation sucks .

[syedm121]

@ranveerching any fix?

[ombogdan]

new updates?

[EkaanshArora]

@singhroshan18 @syedm121 @ombogdan can you please describe the issue you're facing? Are you getting the ZoomVideoSDKError_Wrong_Usages error? In most cases this happens if the ZoomVideoSdkProvider is not added, or is being re-rendered.

If you're facing issues with the sample as-is different from this error, feel free to create a new issue to better track the problem. If you're getting this error in your own app, please open an issue on the DevForum.

[ombogdan]

I added this

[EkaanshArora]

@ombogdan can you try to move it higher up the component tree?

[ombogdan]

i tried that too. but getting the same error. and then just don't join the call. I use an example from the repository

[EkaanshArora]

Can you try wrapping the component that is rendering the videocall / where you the useZoom hook?

[ombogdan]

ok i will try

[ombogdan]

[EkaanshArora]

@ombogdan which navigation library are you using? I can try and spin up an example with it.

[ombogdan]

@EkaanshArora react-navigation

[syedm121]

sorry i fixed it simply by following the documentation , imported the template code in my project and thats it its working now

[ombogdan]

I just copied the template code instead of my file

• added ZoomVideoSdkProvider container above navigation. and it doesn't work for me

[syedm121]

@ombogdan did u installed it correctly from their official documentation? can u share the snippet with me

[syedm121]

[syedm121]

@ombogdan check this.

[ombogdan]

I installed "@zoom/react-native-videosdk": "^1.9.5", and imported it loke this import {ZoomVideoSdkProvider} from "@zoom/react-native-videosdk";

[syedm121]

it should never re render and use the updated version it may cause you problems brother. check my snippet . if sdk is not initialized i dont render it . @ombogdan { "name": "rehnuma", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-async-storage/async-storage": "^1.23.1", "@react-native-picker/picker": "^2.7.7", "@react-navigation/bottom-tabs": "^6.5.20", "@react-navigation/native": "^6.1.17", "@zoom/react-native-videosdk": "^1.11.0", "axios": "^1.7.2", "react": "18.2.0", "react-native": "0.72.3", "react-native-date-picker": "^5.0.4", "react-native-dropdown-picker": "^5.4.6", "react-native-image-picker": "^7.1.2", "react-native-modal": "^13.0.1", "react-native-multiple-select": "^0.5.12", "react-native-pure-jwt": "^3.0.2", "react-native-safe-area-context": "^4.10.1", "react-native-screens": "^3.31.1", "twrnc": "^4.2.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.9", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.7", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" } }

[syedm121]

follow it like this it will work the zoom provider must be above all

[sana-ishaque]

Hello. with react native Cli i installed the package yarn add @zoom/react-native-videosdk and added required permissions. as soon as i wrap the App.js with ZoomVideoSdkProvider it crashes teh app.

Also, with npm package, do i really need to install the sdk files and place inside my project ? If yes if you can pls specify the what folder to copied exaclty and placed for android and ios ?

[sana-ishaque]

Hello. with react native Cli i installed the package yarn add @zoom/react-native-videosdk and added required permissions. as soon as i wrap the App.js with ZoomVideoSdkProvider it crashes teh app. Also, with npm package, do i really need to install the sdk files and place inside my project ? If yes if you can pls specify the what folder to copied exaclty and placed for android and ios ?

as of i now i have just installed the package with yarn and permissions in manifest.

[sana-ishaque]

Hello. with react native Cli i installed the package yarn add @zoom/react-native-videosdk and added required permissions. as soon as i wrap the App.js with ZoomVideoSdkProvider it crashes teh app. Also, with npm package, do i really need to install the sdk files and place inside my project ? If yes if you can pls specify the what folder to copied exaclty and placed for android and ios ?

[EkaanshArora]

@sana-ishaque if you're on v1.12.10 you don't need to install anything manually. Just running yarn add @zoom/react-native-videosdk is sufficient. Make sure you run npx pod-install if you're running on iOS.

[sanaishaque]

@EkaanshArora Thanks it worked :)