How to use ZoomVideoSdkProvider?

Video SDK
1

we are using react-native-paper and UserContext structure

import React, { useEffect, useReducer, useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { DefaultTheme, Provider, configureFonts } from 'react-native-paper';
import { UserContext } from './src/utils/UserContext';
import { reducer, initialState, actionTypes } from './src/utils/Reducer';
import Splash from './src/pages/Splash';
import Login from './src/pages/Login';
import { ZoomVideoSdkProvider } from '@zoom/react-native-videosdk';

const theme = {
  ...DefaultTheme
};

const App = () => {
  const navigationRef = useRef(null);
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
  
    <Provider theme={theme}>
      <UserContext.Provider value={{ state, dispatch }}>
        <NavigationContainer ref={navigationRef}>
          <RootStack />
        </NavigationContainer>
      </UserContext.Provider>
    </Provider>
  );
};

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator
      initialRouteName="Splash"
      screenOptions={{ headerShown: false }}>
      <Stack.Group>
        <Stack.Screen name="Splash" component={Splash} />
        <Stack.Screen name="Login" component={Login} />
        …rest of the screens
      </Stack.Group>
    </Stack.Navigator>
  );
}
export default App;

Without ZoomVideoSdkProvider Error: Cannot access the Zoom Video SDK without a ZoomVideoSdkProvider component wrapping your entire application.

If i add ZoomVideoSdkProvider

return (
  
    <Provider theme={theme}>
      <UserContext.Provider value={{ state, dispatch }}>
        <NavigationContainer ref={navigationRef}>
        <ZoomVideoSdkProvider
        config={{
          appGroupId: 'group.test.sdk',
          domain: 'zoom.us',
          enableLog: true,
        }}>
          <RootStack />
          </ZoomVideoSdkProvider>
        </NavigationContainer>
      </UserContext.Provider>
    </Provider>
  );
};

Error: ZoomVideoSDKError_Wrong_Usage

2

I think you’d want to use it as close to the usage of the SDK methods as you can - which in the example app happens to be the root element - VideoSDK-ReactNative-Quickstart/App.tsx at main · zoom/VideoSDK-ReactNative-Quickstart · GitHub.

Make sure that the rendering component is stateless - and wrap the video call component directly. The provider will maintain the state and should not rerender during the session.

Hope this helps!

3

Hey @prasanth, I’d try the following:

return (
  <ZoomVideoSdkProvider
        config={{
          appGroupId: 'group.test.sdk',
          domain: 'zoom.us',
          enableLog: true,
        }}>
    <Provider theme={theme}>
      <UserContext.Provider value={{ state, dispatch }}>
        <NavigationContainer ref={navigationRef}>
          <RootStack />
        </NavigationContainer>
      </UserContext.Provider>
    </Provider>
  </ZoomVideoSdkProvider>
  );
};