Azure Communication UI Mobile Library for React Native

This project demonstrates the integration of Azure Communication UI library into a React Native that utilizes the native Azure Communication UI library and Azure Communication Services to build a calling experience that features both voice and video calling.

Features

Please refer to our native UI Library overview

Prerequisites

An Azure account with an active subscription. Create an account for free. A deployed Communication Services resource. Create a Communication Services resource. An Authentication Endpoint that will return the Azure Communication Services Token. See example or clone the code.

Node, Watchman, and React Native CLI: please refer to React Native environment setup guide.

Yarn: refer to installation guide

iOS: Xcode, CocoaPods: refer to iOS requirements for UI library

Android: Android Studio, JDK: refer to Android prerequisites

Link to Authentication Endpoint Sample: link

Run Sample App

Navigate to AzureCommunicationUIDemoApp/:

1. Run yarn install

Install iOS app dependencies:

1. In Terminal, navigate to AzureCommunicationUIDemoApp/ios/:
2. Run pod install --repo-update

Build android app dependencies:

1. In Terminal, navigate to AzureCommunicationUIDemoApp/android/:
2. Run ./gradlew build

Navigate back to AzureCommunicationUIDemoApp/

1. Run yarn react-native start
2. Open another Terminal, navigate to AzureCommunicationUIDemoApp/ folder, and run yarn react-native run-ios or yarn react-native run-android

Alternatively, you can also run the iOS app by launching Xcode from the .xcworkspace file, and run the app with scheme AzureCommunicationUIDemoApp on your simulator or iOS device. To run Android app, you can also launch Android Studio and run on Android emulator or Android device after sycning up grade project.

Key Sample Highlights

To integrate the native UI Library with React Native in this sample, a few key steps were taken as described below:

iOS

After installing the package and dependencies with CocoaPods from the step above, modify the Podfile in the /ios filder as such:

platform :ios, '14.0' 
target 'AzureCommunicationUIDemoApp' do 
  use_frameworks! 
  pod 'AzureCommunicationUICalling', '1.0.0' 
  ... 

  # Note: disable the line below since we've enabled use_frameworks! 
  # use_flipper!() 
  ... 
end 

Navigate to the ios/ folder and open the .xcworkspace file with Xcode.

Set iOS Deployment Target in Build Settings for the main project to minimum iOS 14.0:

Request access to the microphone, camera, etc. To access the device's hardware, update your app's Information Property List (Info.plist). Set the associated value to a string that will be included in the dialog the system uses to request access from the user.

Right-click the Info.plist entry of the project tree and select Open As > Source Code. Add the following lines the top level <dict> section, and then save the file.

<key>NSCameraUsageDescription</key> 
<string></string> 
<key>NSMicrophoneUsageDescription</key> 
<string></string> 

To verify requesting the permission is added correctly, view the Info.plist as Open As > Property List and should expect to see the following:

Turn off Bitcode Set Enable Bitcode option to No in the project Build Settings. To find the setting, you have to change the filter from Basic to All, you can also use the search bar on the right.

Android

In your app level (app folder) build.gradle, add the following lines to the dependencies and android sections.

android {
    ...
    packagingOptions {
        pickFirst  'META-INF/*'
    }
    ...
}

dependencies {
    ...
    implementation 'com.azure.android:azure-communication-ui-calling:+'
    ...
}

In your project gradle scripts add following lines to repositories. For Android Studio (2020.*) the repositories are in settings.gradle dependencyResolutionManagement(Gradle version 6.8 or greater). If you are using old versions of Android Studio (4.*) then the repositories will be in project level build.gradle allprojects{}.

repositories {
    ...
    mavenCentral()
    maven {
        url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
    }
    ...
}

Sync project with gradle files. Either run ./gradlew build or open the project in Android Studio (Android Studio -> File -> Sync Project With Gradle Files)

Launching Composite

The React native library supports all the same features as the native UI composite. Call startCallComposite on the RNAzureCommunicationUICalling module from your React Native Javascript code, wrapping with try-catch statement to handle any errors.

try {
    await RNAzureCommunicationUICalling.startCallComposite(
        displayName,
        tokenInput,
        meetingInput,
        localAvatarImageResource,
        selectedLanguage,
        isRightToLeft,
        remoteAvatarImageResource
    );
} catch (e) {
   console.log(`startCallComposite error: ${e.message}`)
} };

Setup group call or Teams meeting options

Depending on what type of Call/Meeting you would like to setup, use the appropriate meeting input. Replace meetingInput with either your group call ID or Teams meeting url.

React native - native app bridging

In order to support the communication between React Native and native Azure Communication UI library, bridging is needed for both iOS and Android. Please refer to the following bridging file guide for iOS and Android.

iOS bridging file guide

Android bridging file guide

FAQ

Seeing build error Xcode with M1 Macbooks

If you are seeing this error when running the iOS app in Xcode, you'd need to switch to Resetta mode:

The following build commands failed:
    CompileSwiftSources normal x86_64 com.apple.xcode.tools.swift.compiler (in target 'AzureCommunicationUICalling' from project 'Pods')

To switch terminal to Rosetta mode:

• Close terminal completely
• Open Applications/Utilities in finder
• GetInfo on Terminal
• make sure that "Open using Rosetta" is checked