Integrate the SDK into your app

Your React Native application communicates with the Meeting SDK over the React Native bridge primarily through the Meeting SDK instance.

The React Native SDK is a wrapper for the Meeting SDK for Android and the Meeting SDK for iOS.

The Meeting SDK for React Native is based on the same version of the native Video SDK. For example, Meeting SDK for React Native 6.2.10 is based on the Meeting SDK for Android or iOS version 6.2.10.

The Meeting SDK for React Native is based on the same version of the native Video SDK.

For example, Meeting SDK for React Native 6.2.10 is based on the Meeting SDK for Android or iOS version 6.2.10.

We currently support React Native up to version 0.75.4. Expo is currently not supported.

Add the Meeting SDK to your project

Create a new project using the React Native CLI. If you have an existing project, skip this step. npx react-native@latest init zoom-meeting-sdk

1. Install the Meeting SDK for React Native.

   npm i @zoom/meetingsdk-react-native
   

2. Add implementation 'us.zoom.meetingsdk:zoomsdk:<SDK_VERSION>' to the dependencies in the android/app/build.gradle file.

   Use the version number matching the NPM package, such as implementation 'us.zoom.meetingsdk:zoomsdk:6.4.10'.

3. To add permissions for the camera and microphone, add the required permissions from the list to your android/app/src/main/AndroidManifest.xml file.

   <!-- In Meeting Share/Annotation/VirtualBackground will need the following Permissions -->
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
   <!-- "Connect to the network" will need the following Permissions -->
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
   <!-- In Meeting "Audio With VOIP" will need the following Permissions -->
   <uses-permission android:name="android.permission.READ_PHONE_STATE" />
   <!-- In Meeting "Device/Audio with bluetooth" will need the following Permissions -->
   <uses-permission android:name="android.permission.BLUETOOTH" />
   <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
   <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
   <uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
   <uses-permission android:name="android.permission.BROADCAST_STICKY" />
   <!-- In Meeting "Audio With VOIP/Share Screen Audio" will need the following Permissions -->
   <uses-permission android:name="android.permission.RECORD_AUDIO" />
   <!-- "Preview/In Meeting Video/VirtualBackground/Share Camera" will need the following Permissions -->
   <uses-permission android:name="android.permission.CAMERA" />
   <!-- "Keep the CPU on in meeting when screen off" will need the following Permissions -->
   <uses-permission android:name="android.permission.WAKE_LOCK" />
   <!-- In Meeting "audio with Dial in" will need the following Permissions -->
   <uses-permission android:name="android.permission.CALL_PHONE" />
   <!-- In Meeting "share screen/MiniMeeting" will need the following Permissions -->
   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
   <!-- "Foreground services and notifications"  will need the following Permissions -->
   <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
   <!-- In Meeting PIP Mode will need the following Permissions -->
   <uses-permission android:name="android.permission.REORDER_TASKS" />
   

4. Make sure to use at least minSdkVersion = 26 & targetSdkVersion = 35 in your android/build.gradle file.

   buildscript {
       ext {
   +       minSdkVersion = 26
   +       targetSdkVersion = 35
           ...
       }
   }
   

5. For security reasons, the Meeting SDK doesn't support cleartext traffic. To disable it, edit the android/app/src/debug/AndroidManifest.xml file.

   <application
           android:usesCleartextTraffic="true"
   +       tools:replace="android:usesCleartextTraffic"
           ...
   

6. Create a new project using the React Native CLI. If you have an existing project, skip this step.

   npx react-native@latest init zoom-meeting-sdk
   

7. Install the Zoom Meeting SDK for React Native.

   npm i @zoom/meetingsdk-react-native
   

8. Install the pods.

   npx pod install
   

9. To add permissions for the camera and microphone, add NSCameraUsageDescription and NSMicrophoneUsageDescription to your Info.plist file.

   <key>NSBluetoothPeripheralUsageDescription</key>
   <string>We will use your Bluetooth to access your Bluetooth headphones.</string>
   <key>NSCameraUsageDescription</key>
   <string>For people to see you during meetings, we need access to your camera.</string>
   <key>NSMicrophoneUsageDescription</key>
   <string>For people to hear you during meetings, we need access to your microphone.</string>
   <key>NSPhotoLibraryUsageDescription</key>
   <string>For people to share, we need access to your photos</string>
   

Import the SDK

After installing the Meeting SDK for React Native in your project, import ZoomSDKProvider.

import { ZoomSDKProvider } from "@zoom/meetingsdk-react-native";

Wrap your app in ZoomSDKProvider and set the ZoomSDKProvider configuration properties.

<ZoomSDKProvider
    config={{
        jwtToken: ZOOM_JWT_TOKEN,
        domain: "zoom.us",
        enableLog: true,
        logSize: 5,
    }}
>
    ...
</ZoomSDKProvider>

Get the SDK instance with the useZoom hook.

import { useZoom } from "@zoom/meetingsdk-react-native";
const zoom = useZoom();

This context wrapper is required for the screens and components within the application that make use of the Meeting SDK for React Native. The values passed into the config property are used throughout your application, and are required to initialize the native SDK that is wrapped by this React Native SDK. Use useZoomhook from components that are wrapped by the ZoomSDKProvider.

To join a Zoom meeting, call the joinMeeting function.

function YourApp() {
  const zoom = useZoom();
  const handleJoin = async () => {
     await zoom.joinMeeting({
          userName: "your-name",
          meetingNumber: "123456789",
          password: "password",
          userType: 1,
        });
  }
  ...

Run the app

Bundle the JavaScript code before you run the app.

npm run react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
npm run android

Run the app.

npm run ios

Table of ZoomSDKProvider config properties

This table lists the available config properties.