Get started

The React Native SDK is a wrapper for the Video SDK for Android and the Video SDK for iOS. Your React Native application communicates with the native Zoom Video SDK over the React Native bridge primarily through the Zoom Video SDK instance.

Prerequisites:

• Environment setup for React Native
• Node (LTS) & Yarn
• A Zoom Video SDK Account

Add Video SDK into your project

For an easy setup, we recommend using Expo. You can also use the React Native CLI. We also recommend that you use yarn rather than npm for the installation.

Add Video SDK into your Expo project

Follow these steps to integrate Video SDK for React Native into your Expo project.

1. Create an Expo project. You can use the following command:

   yarn create expo zoom-video-sdk --template # select Blank (Typescript)
   

   You can skip this step if you have an existing project.

2. Install the Zoom Video SDK with yarn add @zoom/react-native-videosdk. For iOS run npx pod-install to install the pods.

3. Add the camera and microphone permissions to your app.json.

   {
       "expo": {
           "ios": {
               "infoPlist": {
                   "NSCameraUsageDescription": "This app uses the camera to share your video.",
                   "NSMicrophoneUsageDescription": "This app uses the microphone to share your audio.",
                   "NSBluetoothPeripheralUsageDescription": "Required for Bluetooth audio devices",
                   "NSPhotoLibraryUsageDescription": "Required to use screen share feature"
               }
           },
           "android": {
               "permissions": ["CAMERA", "RECORD_AUDIO"]
           }
       }
   }
   

   See the list of required and optional permissions for iOS apps in the Video SDK for iOS: permissions documentation.

   For Android, add the camera and microphone permissions at a minimum, and bluetooth and photo library permissions to support other features. See the full list of required permissions for Android apps in the Video SDK for Android: permissions documentation.

4. Execute npx expo prebuild to populate the ios and android directories.

5. Execute npx expo run:android or npx expo run:ios to create and install a development build on your device. Please make sure you have a physical device connected to your computer for testing.

Add Video SDK into your project using the React Native CLI

1. Create a new project using the React Native CLI. You can use the following command:

   npx react-native@latest init zoomRNCli --template react-native-template-typescript
   

   You can skip this step if you have an existing project.

2. Install the Zoom Video SDK with yarn add @zoom/react-native-videosdk.

   For iOS run npx pod-install to install the pods.

   Android

   The SDK requires camera and microphone permissions at a minimum, and bluetooth and photo library permissions to support other features. See the full list of required permissions for Android apps in the Video SDK for Android: permissions documentation.

   iOS

   If you are building on iOS arm64 simulators, add this section into the ios/Podfile.

   post_install do |installer|
       # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
       react_native_post_install(
           installer,
           config[:reactNativePath],
           :mac_catalyst_enabled => false
       )
       installer.pods_project.targets.each do |target|
           target.build_configurations.each do |config|
               config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'NO'
               config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
               config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)', '_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION']
           end
       end
   end
   

   The SDK requires at least the camera and microphone permissions. See the list of required and optional permissions for iOS apps in the Video SDK for iOS: permissions documentation. See the Apple developer documentation, Provide a purpose string, for guidance on handling iOS permissions with React Native. You must add NSCameraUsageDescription and NSMicrophoneUsageDescription. You can also set Validate Workspace in the project > build settings to "Yes" to help debug any potential errors.

3. To create and install a development build on your device you can run execute:

   • For Android run npm run android.
   • For iOS run npm run ios.

   Make sure you have a physical device connected to your computer for testing.

   The iOS simulator will not be able to access the camera, you'll see an empty video view. Use a physical device to test the video functionality.

Import SDK

Import the ZoomVideoSdkProvider from the SDK. This context wrapper is required for the components within the application that make use of the React Native Zoom Video SDK. Wrap your app with this provider and pass in configuration properties as shown in the following example.

import { ZoomVideoSdkProvider } from "@zoom/react-native-videosdk";
<ZoomVideoSdkProvider
    config={{
        appGroupId: "{Your Apple Group ID here}",
        domain: "zoom.us",
        enableLog: true,
    }}
>
    <MyApp />
</ZoomVideoSdkProvider>;

Your application requires the values passed into the config property to initialize the native SDK wrapped by this React Native SDK. The SDK will use these values throughout your application.

Table of ZoomVideoSdkProvider config properties

The table below lists the available config properties.

You can access the SDK instance using the useZoom hook in the components wrapped within the provider.

import { useZoom } from '@zoom/react-native-videosdk';
const MyApp = () => {
    const zoom = useZoom();
    // ...

Create the following pieces of react state.

1. users to keep track of all the users in the call.
2. isInSession to track if the user is in an active session.
3. A listeners ref to store event subscriptions.

const Call = () => {
  const zoom = useZoom();
  const [users, setUsersInSession] = useState<ZoomVideoSdkUser[]>([]);
  const [isInSession, setIsInSession] = useState(false);
  const listeners = useRef<EmitterSubscription[]>([]);
}

Join a session

To join a session, you'll authenticate, then use event listeners to keep track of users and states.

Authenticate

You'll need a Video SDK key and secret to generate a JSON Web Token (JWT) for your application to authenticate a session with the Video SDK. You should not store these credentials in the application itself. See Video SDK Authentication for details.

const join = async () => {
    const token = "<YourTokenHere>";
};

Event Listeners

The Video SDK triggers events for various actions such as when a user joins or leaves a session and when their status changes, such as their video status. Listen to these events using the addListener method. Use these listeners to keep track of all the users in the session as they join and leave.

onSessionJoin

The onSessionJoin event is fired when the user joins a session. Use this to update the users state and set the isInSession state to true. Append the returned subscription sessionJoin to the listeners ref to have a reference for cleaning it up later.

const sessionJoin = zoom.addListener(EventType.onSessionJoin, async () => {
    const mySelf = new ZoomVideoSdkUser(await zoom.session.getMySelf());
    const remoteUsers = await zoom.session.getRemoteUsers();
    setUsersInSession([mySelf, ...remoteUsers]);
    setIsInSession(true);
});
listeners.current.push(sessionJoin);

onUserJoin and onUserLeave

The onUserJoin and onUserLeave event is fired when a new remote user joins or leaves the session. Use this to update the users state when people join or leave the session.

const userJoin = zoom.addListener(EventType.onUserJoin, async (event) => {
    const { remoteUsers } = event;
    const mySelf = await zoom.session.getMySelf();
    const remote = remoteUsers.map((user) => new ZoomVideoSdkUser(user));
    setUsersInSession([mySelf, ...remote]);
});
listeners.current.push(userJoin);
const userLeave = zoom.addListener(EventType.onUserLeave, async (event) => {
    const { remoteUsers } = event;
    const mySelf = await zoom.session.getMySelf();
    const remote = remoteUsers.map((user) => new ZoomVideoSdkUser(user));
    setUsersInSession([mySelf, ...remote]);
});
listeners.current.push(userLeave);

onSessionLeave

The onSessionLeave event is fired when the local user leaves a session. The callback provides the reason why the session ended.

const sessionLeave = zoom.addListener(
    EventType.onSessionLeave,
    (reason: any) => {
        console.log("Leave reason: " + JSON.stringify(reason));
    },
);

Join the session

The joinSession method on the zoom object creates or joins a Video SDK session. You must pass in the session details along with audioOptions and videoOptions. Make sure the generated JWT matches these values.

await zoom
    .joinSession({
        sessionName: "DemoSession",
        sessionPassword: "",
        userName: "DemoUser",
        sessionIdleTimeoutMins: 10,
        token: token,
        audioOptions: {
            connect: true,
            mute: true,
            autoAdjustSpeakerVolume: false,
        },
        videoOptions: { localVideoOn: true },
    })
    .catch((e) => {
        console.log(e);
    });

isInSession

To leave a session, call the leaveSession method on the zoom object. You can optionally pass in true as the function parameter to end the session for all users. On leaving the session update the isInSession state and remove all the listener subscriptions.

const leaveSession = () => {
    zoom.leaveSession(false);
    setIsInSession(false);
    listeners.current.forEach((listener) => listener.remove());
    listeners.current = [];
};

Render the videos

The component renders conditionally based on the isInSession state. If the user is in an active session, render the videos for each user by mapping over the users state and passing in their userId to the ZoomView component. Render a Button to leave the session.

  return isInSession ? (
    <View>
      {users.map((user) => (
          <ZoomView
            key={user.userId}
            userId={user.userId}
            fullScreen
            videoAspect={VideoAspect.PanAndScan}
          />
      ))}
    </View>
  ) : (
    // If the user is not in an active session, render a button to join the session.
    <View>
    </View>
  );
};

Once you refresh the application bundle, you should see a button to join the session on your screen. You can click this button to join the demo session and view your video on screen. You can join this session from a different device to see and hear the other users.

Sign developer cert (iOS only)

For iOS integrations, sign your developer certificate to your project. Follow these steps in Xcode:

1. In Xcode, go to the project configuration page.
2. In the Signing & Capabilities pane in the project editor, select Automatically managed signing. Xcode creates the development signing assets for you.
3. Set up a unique bundle identifier and use your own team to sign your developer certificate.

See the Apple developer documentation: Code Signing Tasks guide for details.

You must also follow Apple's requirement to provide a privacy manifest and signatures when creating an iOS app.

Learn more and add features

For more examples, see the blog post: Build a React Native video conferencing app with the Zoom Video SDK & Expo and the Zoom Video SDK React Native Demo app on GitHub.

• Zoom Video SDK React Native Demo

See the documentation in the Add features section to add more features such as screen sharing, chat, cloud recording, and live transcription and translation.