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.

To get started, run yarn in the root directory to install the required dependencies for each package:

$ yarn

To start the packager:

$ yarn example start

To run the sample app on Android:

$ yarn example android

To run the sample app on iOS:

$ yarn example ios

Follow the code walkthrough below to learn about the basic features.

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 best practices.

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 'react-native-zoom-video-sdk';

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.