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

❤️ Feedback

We appreciate your feedback and energy helping us improve our services. If you've tried the service, please give us feedback through this survey.

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 syncing up gradle. There are two ways to sync gradle either with a command in the android folder./gradlew build or via android studio.

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.2.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:1.2.0'
    ...
}

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(
       // local options
       {"displayName": displayName, "title": title, "subtitle": subtitle},
       localAvatarImageResource,
       // remote options
       {"token": tokenInput, "meeting": meetingInput},
       remoteAvatarImageResource,
       // localization options
       {"locale": selectedLanguage, "layout": isRightToLeft} 
     );
   } 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