ReadMe

This document serves as a guide on how to build the React Native Video Conference sample app for mobile from the source.

Pre-requisites

This setup guide is validated on both Intel/M1-based MacBook Pro running macOS Monterey 12.6.

iOS

• XCode Version 14.0.1 (14A400)
• iOS Simulator running iOS 15.5
• Ruby Gems version 3.0.3.1

Android

• Android studio chipmunk (2021.2.1)
• JDK version 11
• Android physical device running Android S
• Android emulator running API 29 or greater
• CMake 3.18.1

Other

• Yarn version 1.22.19
• Node version 16.17.1
• Npm version 8.19.2
• A Dolby.io account
• A Dolby.io client access token

Cloning the repo and installing the dependencies

The React Native example app is hosted in a yarn-based mono-repo. There are shared components and libraries at the root of the project and then there are React Native-specific ones under the example/mobile/ directory.

Get the code by cloning this repo using git.

git clone git@github.com:dolbyio-samples/comms-app-react-native-videocall.git

Once cloned, open a terminal in the project directory, and install dependencies with yarn.

cd comms-app-react-native-videocall
yarn install

Building the iOS App

To build the iOS app, we install the additional iOS dependencies with Cocoapod. Perform the following steps

cd examples/mobile/ios
pod install
cd ../../../

If you get this error - xcrun: error: SDK "iphoneos" cannot be located, follow the steps in the selected answer here

Running the app

To build and run the app, you'll need two terminal windows, both open in the same root directory.

The first terminal window is required to run the Metro JS bundler.

In that window, run the following command

yarn workspace comms-app-react-native-videoconference start 

In the other window, run this command for the iOS simulator

yarn workspace comms-app-react-native-videoconference ios

Or run this command for the iOS device

yarn workspace comms-app-react-native-videoconference ios --device

You will see the following screen after the app compiles. This process should take a few minutes. If you see a blank screen, please wait before reloading the app through the metro interface (by pressing r on the first terminal window you opened).

Building the Android App

The path to the Android SDK shall be defined either as an ENV variable or in the local.properties file.

The local.properties file needs to be located at examples/mobile/android/local.properties

The file must contain the following contents

sdk.dir=/path/to/Android/sdk

The android SDK can usually be found in the /users/<USER>/Library/Android/sdk directory.

To build the app, you'll need two terminal windows, both open in the same root directory.

The first terminal window is required to run the Metro JS bundler.

In that window, run the following command - This is optional since it is auto-run on Android.

yarn workspace comms-app-react-native-videoconference start 

In the other window, run this command - This can automatically trigger the step above if it hasn't run.

yarn workspace comms-app-react-native-videoconference android

License

The Dolby.io Communications Sample for React Native and its repository are licensed under the MIT License.

Third-party licenses can be found here.

© Dolby, 2022