Run sample app

The Video SDK for React Native sample app demonstrates many of the features you can integrate into your app.

Prerequisites:

See Video SDK Plans & Pricing for Developer for pricing.

1. Create account and download SDK

2. Install platform SDK files

The React Native SDK is a wrapper for the Video SDK for Android and the Video SDK for iOS. The platform SDK files are not included in the wrapper, but you can install these as dependencies from remote repositories. We recommend that you use yarn rather than npm for the installation process as it installs dependency packages in parallel, resulting in better speed and performance.

3. Configure and run the sample app

  • Fill in the SDK Key & Secret in config.ts. For example, react-native-zoom-video-sdk-1.13.10/example/config.ts
  • Verify that the configuration is correct in react-native-zoom-video-sdk-1.13.10/src/hooks/useSdkHandler.ts:
const DEFAULT_CONFIG: InitConfig = {
  domain: 'zoom.us',
  enableLog: true,
};
  • Verify that the example configuration is correct in react-native-zoom-video-sdk-1.13.10/example/app.tsx:
export default function App() {
    return (
        <NavigationContainer>
            <ZoomVideoSdkProvider
                config={{
                    appGroupId: "group.test.sdk",
                    domain: "zoom.us",
                    enableLog: true,
                }}
            >
                <Navigation />
            </ZoomVideoSdkProvider>
        </NavigationContainer>
    );
}

Follow these steps to run the sample app.

  1. From the root of the working directory, run yarn install
  2. Navigate to the example directory in the working directory and run yarn install
    • If you're building for iOS, navigate to example/ios in the working directory and run pod install. You must do this once to run the iOS app. If you are using a Apple Silicon or experience an issue running the above, try this instead: arch -x86_64 pod install
  3. To run the sample app, enter the command for Android or iOS from the example directory:
    • Android: yarn run android
    • iOS: yarn run ios

To see more details about the sample app as it's running, run the Android sample app in Android Studio and the iOS sample app on Xcode. Be sure to run the React Native Metro Server (using yarn start) before you run the sample apps in these IDEs. See the Sample app walkthrough for more details about the sample.

Troubleshoot the sample app

For help setting up the development environment, see Setting up the development environment in the React Native documentation. To install an iOS Simulator in Xcode, open Xcode > Windows > Devices & Simulators. Choose a simulator with the corresponding version of iOS you wish to use.

Sample app walkthrough

The sample app provides code that shows how to use the Video SDK in a basic React Native application. You can download the React Native sample app from your Video SDK app.

Folder Structure

The sample app's folder structure is set up like this:

example
|-- android
|-- ios
|-- src
|   |-- components
|   |   |-- icon
|   |   |-- menu-drawer
|   |   |-- text-input-row
|   |   |-- video-view
|   |-- screens
|   |-- utils
|   |-- app.tsx
|   |-- navigation.tsx
|-- app.json
|-- babel.config.js
|-- config.ts
|-- index.js
|-- metro.config.js
|-- package.json
|-- yarn.lock

The sections below go into more detail.

android and ios

This application began as a vanilla React Native project using the TypeScript template (npx react-native init example --template react-native-template-typescript) which includes the android and ios folders. The native Zoom SDK was installed for both platforms in these folders. For example, the native SDK for Android was installed under android/mobilertc.

src/components

This folder contains four components that handle UI throughout the application. The icon, menu-drawer, and text-input-row components have no dependencies on the React Native SDK. The video-view component demonstrates how to interact with the react native SDK and set up event listeners. The video-view component is exported as VideoView.

src/screens

There are three screens used for this application:

  • call-screen- UI for video conferencing, chat and screen sharing.
  • intro-screen- Sets permissions for video/audio and provides UI to start or join a video session.
  • join-screen- Form for values used to start or join a video session.

src/utils

Shared hooks live in hooks.ts. A handy JWT generation function is provided in jws.ts, but in a real-world production application, JWTs should be consumed from a secure, server-side source as outlined in the Zoom Marketplace Video SDK Authentication.

src/app.tsx

This is the entry point for the example application. The context wrapper for the entire application, named ZoomVideoSdkProvider, is imported from the React Native SDK on line 2:

import { ZoomVideoSdkProvider } from "@zoom/react-native-videosdk";

See Import SDK for details.

src/navigation.tsx

This simple navigation file creates a stack navigator with 3 screens and a drawer navigator implemented as a component.

package.json

This file lists package dependencies as well as command line scripts that you can run.

  • Start an iOS emulator session with this command: yarn ios
  • Start an Android emulator session with this command: yarn android
  • Or start the Metro packager without starting an emulator session with this command: yarn start

Remaining root level files

The remaining files such as app.json, babel.config.js and so on are used for configuration of a vanilla React Native project.