Zoom VideoSDK React Native Demo

Use of this sample app is subject to our Terms of Use.

This is a sample application that demonstrates how to use the Zoom Video SDK in a React Native application. Built with Expo.

Prerequisites

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

Getting Started

1. Clone the Repo

git clone https://github.com/zoom/VideoSDK-React-Native.git

2. Install the dependencies

yarn

3. Install cocoapods (iOS only)

npx pod-install ## (or) cd ios && pod install

4. Add your Zoom Video SDK credentials

• Open config.ts and replace ZOOM_APP_KEY and ZOOM_APP_SECRET with your Zoom Video SDK credentials.

Disclaimer: It's not recommended to store your credentials in the source code. This is only for demonstration purposes for sake of simplicity. You should use a secure backend to generate the token and pass it to the client.

5. Run the app

yarn ios
# or
yarn android

How to setup in a fresh project

1. Create a new project, we recommend using Expo to simplify the setup

yarn create expo zoom-video-sdk --template # select Blank (Typescript)
# or
npx react-native@latest init zoomRNCli --template react-native-template-typescript

2. Install the Zoom Video SDK

yarn add @zoom/react-native-videosdk

• For iOS run: npx pod-install to install the pods

3. Add permissions for the camera and microphone

• Add the following to your app.json.

{
  "expo": {
    "android": {
      "permissions": ["CAMERA", "RECORD_AUDIO"]
    },
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "Text",
        "NSMicrophoneUsageDescription": "Text"
      }
    }
  }
}

If you're not using Expo:

• For iOS you'll have to add these to your info.plist manually.
• For Android, you can request permissions at runtime using the Permissions module as done in usePermission in utils/lib.tsx or add these to your AndroidManifest file.

4. Wrap your app in the ZoomVideoSdkProvider

function App() {
  ...
  return (
    <ZoomVideoSdkProvider config={{....}}>
      <YourApp>
    </ZoomVideoSdkProvider>
  );

5. Use the Zoom Video SDK

function YourApp() {
  const zoom = useZoom();
  const handleJoin = async () => {
     await zoom.joinSession({....});
  }
  ...

6. Scaffold the native code (Skip if not using Expo)

npx expo prebuild

7. Run the app

• Expo

npx expo run:ios
# or
npx expo run:android

• React Native

npm run android
# or
npm run ios

Need help?

If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.