Quickstart sample app
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 sharingintro-screen
: Sets permissions for video/audio and provides UI to start or join a video sessionjoin-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.
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.