2 |
3 | #import "AppDelegate.h"
4 |
5 | int main(int argc, char *argv[])
6 | {
7 | @autoreleasepool {
8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/demo/android/settings.gradle:
--------------------------------------------------------------------------------
1 | rootProject.name = 'demo'
2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
3 | include ':app'
4 | includeBuild('../node_modules/@react-native/gradle-plugin')
5 |
--------------------------------------------------------------------------------
/demo/android/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | distributionBase=GRADLE_USER_HOME
2 | distributionPath=wrapper/dists
3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
4 | networkTimeout=10000
5 | zipStoreBase=GRADLE_USER_HOME
6 | zipStorePath=wrapper/dists
7 |
--------------------------------------------------------------------------------
/demo/ios/demo.xcworkspace/contents.xcworkspacedata:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/demo/ios/demo.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | IDEDidComputeMac32BitWarning
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/demo/android/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/demo/metro.config.js:
--------------------------------------------------------------------------------
1 | const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
2 |
3 | /**
4 | * Metro configuration
5 | * https://facebook.github.io/metro/docs/configuration
6 | *
7 | * @type {import('metro-config').MetroConfig}
8 | */
9 | const config = {};
10 |
11 | module.exports = mergeConfig(getDefaultConfig(__dirname), config);
12 |
--------------------------------------------------------------------------------
/demo/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 |
3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
4 | ruby ">= 2.6.10"
5 |
6 | # Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
7 | # bound in the template on Cocoapods with next React Native release.
8 | gem 'cocoapods', '>= 1.13', '< 1.15'
9 | gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'
10 |
--------------------------------------------------------------------------------
/demo/android/app/src/main/java/com/demo/MainActivity.java:
--------------------------------------------------------------------------------
1 | package com.demo;
2 |
3 | import com.facebook.react.ReactActivity;
4 |
5 | public class MainActivity extends ReactActivity {
6 |
7 | /**
8 | * Returns the name of the main component registered from JavaScript. This is used to schedule
9 | * rendering of the component.
10 | */
11 | @Override
12 | protected String getMainComponentName() {
13 | return "demo";
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/demo/__tests__/App.test.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @format
3 | */
4 |
5 | import 'react-native';
6 | import React from 'react';
7 | import App from '../App';
8 |
9 | // Note: import explicitly to use the types shiped with jest.
10 | import {it} from '@jest/globals';
11 |
12 | // Note: test renderer must be required after react-native.
13 | import renderer from 'react-test-renderer';
14 |
15 | it('renders correctly', () => {
16 | renderer.create();
17 | });
18 |
--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Microsoft Open Source Code of Conduct
2 |
3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
4 |
5 | Resources:
6 |
7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
10 |
--------------------------------------------------------------------------------
/demo/android/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # Add any project specific keep options here:
11 |
--------------------------------------------------------------------------------
/demo/ios/demo/Images.xcassets/Avatars/cat.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "filename" : "cat4x-2.png",
5 | "idiom" : "universal",
6 | "scale" : "1x"
7 | },
8 | {
9 | "filename" : "cat4x-1.png",
10 | "idiom" : "universal",
11 | "scale" : "2x"
12 | },
13 | {
14 | "filename" : "cat4x.png",
15 | "idiom" : "universal",
16 | "scale" : "3x"
17 | }
18 | ],
19 | "info" : {
20 | "author" : "xcode",
21 | "version" : 1
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/demo/ios/demo/Images.xcassets/Avatars/fox.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "filename" : "fox4x-2.png",
5 | "idiom" : "universal",
6 | "scale" : "1x"
7 | },
8 | {
9 | "filename" : "fox4x-1.png",
10 | "idiom" : "universal",
11 | "scale" : "2x"
12 | },
13 | {
14 | "filename" : "fox4x.png",
15 | "idiom" : "universal",
16 | "scale" : "3x"
17 | }
18 | ],
19 | "info" : {
20 | "author" : "xcode",
21 | "version" : 1
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/demo/ios/.xcode.env:
--------------------------------------------------------------------------------
1 | # This `.xcode.env` file is versioned and is used to source the environment
2 | # used when running script phases inside Xcode.
3 | # To customize your local environment, you can create an `.xcode.env.local`
4 | # file that is not versioned.
5 |
6 | # NODE_BINARY variable contains the PATH to the node executable.
7 | #
8 | # Customize the NODE_BINARY variable here.
9 | # For example, to use nvm with brew, add the following line
10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use
11 | export NODE_BINARY=$(command -v node)
12 |
--------------------------------------------------------------------------------
/demo/ios/demo/Images.xcassets/Avatars/koala.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "filename" : "koala4x-2.png",
5 | "idiom" : "universal",
6 | "scale" : "1x"
7 | },
8 | {
9 | "filename" : "koala4x-1.png",
10 | "idiom" : "universal",
11 | "scale" : "2x"
12 | },
13 | {
14 | "filename" : "koala4x.png",
15 | "idiom" : "universal",
16 | "scale" : "3x"
17 | }
18 | ],
19 | "info" : {
20 | "author" : "xcode",
21 | "version" : 1
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/demo/ios/demo/Images.xcassets/Avatars/monkey.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "filename" : "monkey4x-2.png",
5 | "idiom" : "universal",
6 | "scale" : "1x"
7 | },
8 | {
9 | "filename" : "monkey4x-1.png",
10 | "idiom" : "universal",
11 | "scale" : "2x"
12 | },
13 | {
14 | "filename" : "monkey4x.png",
15 | "idiom" : "universal",
16 | "scale" : "3x"
17 | }
18 | ],
19 | "info" : {
20 | "author" : "xcode",
21 | "version" : 1
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/demo/ios/demo/Images.xcassets/Avatars/mouse.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "filename" : "mouse4x-2.png",
5 | "idiom" : "universal",
6 | "scale" : "1x"
7 | },
8 | {
9 | "filename" : "mouse4x-1.png",
10 | "idiom" : "universal",
11 | "scale" : "2x"
12 | },
13 | {
14 | "filename" : "mouse4x.png",
15 | "idiom" : "universal",
16 | "scale" : "3x"
17 | }
18 | ],
19 | "info" : {
20 | "author" : "xcode",
21 | "version" : 1
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/demo/ios/demo/Images.xcassets/Avatars/octopus.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "filename" : "octopus4x-2.png",
5 | "idiom" : "universal",
6 | "scale" : "1x"
7 | },
8 | {
9 | "filename" : "octopus4x-1.png",
10 | "idiom" : "universal",
11 | "scale" : "2x"
12 | },
13 | {
14 | "filename" : "octopus4x.png",
15 | "idiom" : "universal",
16 | "scale" : "3x"
17 | }
18 | ],
19 | "info" : {
20 | "author" : "xcode",
21 | "version" : 1
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/demo/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/react-native/tsconfig.json",
3 | "compilerOptions": {
4 | "module": "commonjs",
5 | "target": "es5",
6 | "allowJs": true,
7 | "checkJs": false,
8 | "jsx": "react",
9 | "outDir": "./build",
10 | "rootDir": "./lib",
11 | "removeComments": true,
12 | "noEmit": true,
13 | "pretty": true,
14 | "skipLibCheck": true,
15 | "strict": true,
16 | "moduleResolution": "node",
17 | "esModuleInterop": true
18 | },
19 | "include": ["./lib/**/*"],
20 | "exclude": ["node_modules"]
21 | }
22 |
--------------------------------------------------------------------------------
/demo/android/app/src/debug/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/demo/android/build.gradle:
--------------------------------------------------------------------------------
1 | // Top-level build file where you can add configuration options common to all sub-projects/modules.
2 |
3 | buildscript {
4 | ext {
5 | buildToolsVersion = "33.0.0"
6 | minSdkVersion = 26
7 | compileSdkVersion = 33
8 | targetSdkVersion = 33
9 |
10 | // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
11 | ndkVersion = "23.1.7779620"
12 | }
13 | repositories {
14 | google()
15 | mavenCentral()
16 | }
17 | dependencies {
18 | classpath("com.android.tools.build:gradle")
19 | classpath("com.facebook.react:react-native-gradle-plugin")
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/demo/android/app/src/release/java/com/demo/ReactNativeFlipper.java:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the LICENSE file in the root
5 | * directory of this source tree.
6 | */
7 | package com.demo;
8 |
9 | import android.content.Context;
10 | import com.facebook.react.ReactInstanceManager;
11 |
12 | /**
13 | * Class responsible of loading Flipper inside your React Native application. This is the release
14 | * flavor of it so it's empty as we don't want to load Flipper.
15 | */
16 | public class ReactNativeFlipper {
17 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
18 | // Do nothing as we don't want to initialize Flipper on Release.
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/demo/ios/demoTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | $(PRODUCT_BUNDLE_IDENTIFIER)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | BNDL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 |
24 |
25 |
--------------------------------------------------------------------------------
/demo/native/RNAzureCommunicationUI.js:
--------------------------------------------------------------------------------
1 | //
2 | // Copyright (c) Microsoft Corporation. All rights reserved.
3 | // Licensed under the MIT License.
4 | //
5 |
6 | import {
7 | NativeModules,
8 | NativeEventEmitter,
9 | } from 'react-native';
10 |
11 | const { RNAzureCommunicationUICalling } = NativeModules;
12 | const RNAzureCommunicationUICallingEvents = new NativeEventEmitter(RNAzureCommunicationUICalling)
13 |
14 | RNAzureCommunicationUICallingEvents.addListener(
15 | "getToken",
16 | async (res) => {
17 | let response = await fetch(res.url);
18 |
19 | if (response.ok) {
20 | let json = await response.json();
21 | RNAzureCommunicationUICalling.tokenRefresher(json.token);
22 | } else {
23 | console.log(`HTTP-Error: ${response.status}`);
24 | }
25 | }
26 | );
27 |
28 | export default RNAzureCommunicationUICalling;
29 |
--------------------------------------------------------------------------------
/demo/native/RNAzureCommunicationUICalling.js:
--------------------------------------------------------------------------------
1 | //
2 | // Copyright (c) Microsoft Corporation. All rights reserved.
3 | // Licensed under the MIT License.
4 | //
5 |
6 | import {
7 | NativeModules,
8 | NativeEventEmitter,
9 | } from 'react-native';
10 |
11 | const { RNAzureCommunicationUICalling } = NativeModules;
12 | const RNAzureCommunicationUICallingEvents = new NativeEventEmitter(RNAzureCommunicationUICalling)
13 |
14 | RNAzureCommunicationUICallingEvents.addListener(
15 | "getToken",
16 | async (res) => {
17 | let response = await fetch(res.url);
18 |
19 | if (response.ok) {
20 | let json = await response.json();
21 | RNAzureCommunicationUICalling.tokenRefresher(json.token);
22 | } else {
23 | console.log(`HTTP-Error: ${response.status}`);
24 | }
25 | }
26 | );
27 |
28 | export default RNAzureCommunicationUICalling;
29 |
--------------------------------------------------------------------------------
/demo/android/app/src/main/java/com/demo/RNAzureCommunicationUICallingPackage.java:
--------------------------------------------------------------------------------
1 | package com.demo;
2 | import com.facebook.react.ReactPackage;
3 | import com.facebook.react.bridge.NativeModule;
4 | import com.facebook.react.bridge.ReactApplicationContext;
5 | import com.facebook.react.uimanager.ViewManager;
6 |
7 | import java.util.ArrayList;
8 | import java.util.Collections;
9 | import java.util.List;
10 |
11 | public class RNAzureCommunicationUICallingPackage implements ReactPackage {
12 |
13 | @Override
14 | public List createViewManagers(ReactApplicationContext reactContext) {
15 | return Collections.emptyList();
16 | }
17 |
18 | @Override
19 | public List createNativeModules(
20 | ReactApplicationContext reactContext) {
21 | List modules = new ArrayList<>();
22 |
23 | modules.add(new RNAzureCommunicationUICalling(reactContext));
24 |
25 | return modules;
26 | }
27 |
28 | }
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
4 | > Please provide us with the following information:
5 | > ---------------------------------------------------------------
6 |
7 | ### This issue is for a: (mark with an `x`)
8 | ```
9 | - [ ] bug report -> please search issues before submitting
10 | - [ ] feature request
11 | - [ ] documentation issue or request
12 | - [ ] regression (a behavior that used to work and stopped in a new release)
13 | ```
14 |
15 | ### Minimal steps to reproduce
16 | >
17 |
18 | ### Any log messages given by the failure
19 | >
20 |
21 | ### Expected/desired behavior
22 | >
23 |
24 | ### OS and Version?
25 | > Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?)
26 |
27 | ### Versions
28 | >
29 |
30 | ### Mention any other details that might be useful
31 |
32 | > ---------------------------------------------------------------
33 | > Thanks! We'll be in touch soon.
34 |
--------------------------------------------------------------------------------
/demo/ios/demo/Images.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "idiom" : "iphone",
5 | "scale" : "2x",
6 | "size" : "20x20"
7 | },
8 | {
9 | "idiom" : "iphone",
10 | "scale" : "3x",
11 | "size" : "20x20"
12 | },
13 | {
14 | "idiom" : "iphone",
15 | "scale" : "2x",
16 | "size" : "29x29"
17 | },
18 | {
19 | "idiom" : "iphone",
20 | "scale" : "3x",
21 | "size" : "29x29"
22 | },
23 | {
24 | "idiom" : "iphone",
25 | "scale" : "2x",
26 | "size" : "40x40"
27 | },
28 | {
29 | "idiom" : "iphone",
30 | "scale" : "3x",
31 | "size" : "40x40"
32 | },
33 | {
34 | "idiom" : "iphone",
35 | "scale" : "2x",
36 | "size" : "60x60"
37 | },
38 | {
39 | "idiom" : "iphone",
40 | "scale" : "3x",
41 | "size" : "60x60"
42 | },
43 | {
44 | "idiom" : "ios-marketing",
45 | "scale" : "1x",
46 | "size" : "1024x1024"
47 | }
48 | ],
49 | "info" : {
50 | "author" : "xcode",
51 | "version" : 1
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Azure Samples
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | ## Purpose
2 |
3 | * ...
4 |
5 | ## Does this introduce a breaking change?
6 |
7 | ```
8 | [ ] Yes
9 | [ ] No
10 | ```
11 |
12 | ## Pull Request Type
13 | What kind of change does this Pull Request introduce?
14 |
15 |
16 | ```
17 | [ ] Bugfix
18 | [ ] Feature
19 | [ ] Code style update (formatting, local variables)
20 | [ ] Refactoring (no functional changes, no api changes)
21 | [ ] Documentation content changes
22 | [ ] Other... Please describe:
23 | ```
24 |
25 | ## How to Test
26 | * Get the code
27 |
28 | ```
29 | git clone [repo-address]
30 | cd [repo-name]
31 | git checkout [branch-name]
32 | npm install
33 | ```
34 |
35 | * Test the code
36 |
37 | ```
38 | ```
39 |
40 | ## What to Check
41 | Verify that the following are valid
42 | * ...
43 |
44 | ## Other Information
45 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Microsoft Corporation.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE
--------------------------------------------------------------------------------
/demo/ios/RNAzureCommunicationUICalling.m:
--------------------------------------------------------------------------------
1 | //
2 | // Copyright (c) Microsoft Corporation. All rights reserved.
3 | // Licensed under the MIT License.
4 | //
5 |
6 | #import
7 | #import
8 |
9 | @interface RCT_EXTERN_MODULE(RNAzureCommunicationUICalling, RCTEventEmitter)
10 |
11 | RCT_EXTERN_METHOD(tokenRefresher:(nullable NSString *)token)
12 |
13 | RCT_EXTERN_METHOD(startCallComposite:(NSDictionary *)localOptions
14 | localAvatar:(nullable NSDictionary *)localAvatar
15 | remoteOptions:(NSDictionary *)remoteOptions
16 | remoteAvatar:(nullable NSDictionary *)remoteAvatar
17 | localizationOptions:(NSDictionary *)localizationOptions
18 | orientationOptions: (nullable NSDictionary *)orientationOptions
19 | resolver:(RCTPromiseResolveBlock)resolve
20 | rejecter:(RCTPromiseRejectBlock)reject)
21 |
22 | RCT_EXTERN_METHOD(getSupportedLocales:(RCTPromiseResolveBlock)resolve
23 | rejecter:(RCTPromiseRejectBlock)reject)
24 |
25 | RCT_EXTERN_METHOD(getDebugInfo:(RCTPromiseResolveBlock)resolve
26 | rejecter:(RCTPromiseRejectBlock)reject)
27 | @end
28 |
--------------------------------------------------------------------------------
/demo/ios/demo/PrivacyInfo.xcprivacy:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | NSPrivacyCollectedDataTypes
6 |
7 |
8 | NSPrivacyAccessedAPITypes
9 |
10 |
11 | NSPrivacyAccessedAPIType
12 | NSPrivacyAccessedAPICategoryFileTimestamp
13 | NSPrivacyAccessedAPITypeReasons
14 |
15 | C617.1
16 |
17 |
18 |
19 | NSPrivacyAccessedAPIType
20 | NSPrivacyAccessedAPICategoryUserDefaults
21 | NSPrivacyAccessedAPITypeReasons
22 |
23 | CA92.1
24 |
25 |
26 |
27 | NSPrivacyAccessedAPIType
28 | NSPrivacyAccessedAPICategorySystemBootTime
29 | NSPrivacyAccessedAPITypeReasons
30 |
31 | 35F9.1
32 |
33 |
34 |
35 | NSPrivacyTracking
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # Xcode
6 | #
7 | build/
8 | *.pbxuser
9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | ios/.xcode.env.local
24 |
25 | # Android/IntelliJ
26 | #
27 | build/
28 | .idea
29 | .gradle
30 | local.properties
31 | *.iml
32 | *.hprof
33 | .cxx/
34 | *.keystore
35 | !debug.keystore
36 |
37 | # node.js
38 | #
39 | node_modules/
40 | npm-debug.log
41 | yarn-error.log
42 |
43 | # fastlane
44 | #
45 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
46 | # screenshots whenever they are needed.
47 | # For more information about the recommended setup visit:
48 | # https://docs.fastlane.tools/best-practices/source-control/
49 |
50 | **/fastlane/report.xml
51 | **/fastlane/Preview.html
52 | **/fastlane/screenshots
53 | **/fastlane/test_output
54 |
55 | # Bundle artifact
56 | *.jsbundle
57 |
58 | # Ruby / CocoaPods
59 | /ios/Pods/
60 | /vendor/bundle/
61 |
62 | # Temporary files created by Metro to check the health of the file watcher
63 | .metro-health-check*
64 |
65 | # testing
66 | /coverage
67 |
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "android": "react-native run-android",
7 | "ios": "react-native run-ios",
8 | "lint": "eslint .",
9 | "start": "react-native start",
10 | "test": "jest"
11 | },
12 | "dependencies": {
13 | "react": "18.2.0",
14 | "react-native": "0.72.14",
15 | "@react-native-picker/picker": "^2.6.1",
16 | "@react-navigation/native": "^6.1.9",
17 | "@react-navigation/native-stack": "^6.9.15",
18 | "react-native-picker-select": "^9.1.3",
19 | "react-native-safe-area-context": "^4.7.3",
20 | "react-native-screens": "^3.26.0"
21 | },
22 | "devDependencies": {
23 | "@babel/core": "^7.20.0",
24 | "@babel/preset-env": "^7.20.0",
25 | "@babel/runtime": "^7.20.0",
26 | "@react-native/eslint-config": "^0.72.2",
27 | "@react-native/metro-config": "^0.72.12",
28 | "@tsconfig/react-native": "^3.0.0",
29 | "@types/react": "^18.0.24",
30 | "@types/react-test-renderer": "^18.0.0",
31 | "babel-jest": "^29.2.1",
32 | "eslint": "^8.19.0",
33 | "jest": "^29.2.1",
34 | "metro-react-native-babel-preset": "^0.76.9",
35 | "prettier": "^2.4.1",
36 | "react-test-renderer": "18.2.0",
37 | "typescript": "4.8.4"
38 | },
39 | "engines": {
40 | "node": ">=16"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/demo/ios/demo/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleDisplayName
8 | demo
9 | CFBundleExecutable
10 | $(EXECUTABLE_NAME)
11 | CFBundleIdentifier
12 | $(PRODUCT_BUNDLE_IDENTIFIER)
13 | CFBundleInfoDictionaryVersion
14 | 6.0
15 | CFBundleName
16 | $(PRODUCT_NAME)
17 | CFBundlePackageType
18 | APPL
19 | CFBundleShortVersionString
20 | $(MARKETING_VERSION)
21 | CFBundleSignature
22 | ????
23 | CFBundleVersion
24 | $(CURRENT_PROJECT_VERSION)
25 | LSRequiresIPhoneOS
26 |
27 | NSAppTransportSecurity
28 |
29 | NSExceptionDomains
30 |
31 | localhost
32 |
33 | NSExceptionAllowsInsecureHTTPLoads
34 |
35 |
36 |
37 |
38 | NSLocationWhenInUseUsageDescription
39 |
40 | UILaunchStoryboardName
41 | LaunchScreen
42 | UIRequiredDeviceCapabilities
43 |
44 | armv7
45 |
46 | UISupportedInterfaceOrientations
47 |
48 | UIInterfaceOrientationPortrait
49 | UIInterfaceOrientationLandscapeLeft
50 | UIInterfaceOrientationLandscapeRight
51 |
52 | UIViewControllerBasedStatusBarAppearance
53 |
54 | NSCameraUsageDescription
55 |
56 | NSMicrophoneUsageDescription
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/demo/android/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 |
3 | # IDE (e.g. Android Studio) users:
4 | # Gradle settings configured through the IDE *will override*
5 | # any settings specified in this file.
6 |
7 | # For more details on how to configure your build environment visit
8 | # http://www.gradle.org/docs/current/userguide/build_environment.html
9 |
10 | # Specifies the JVM arguments used for the daemon process.
11 | # The setting is particularly useful for tweaking memory settings.
12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
14 |
15 | # When configured, Gradle will run in incubating parallel mode.
16 | # This option should only be used with decoupled projects. More details, visit
17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
18 | # org.gradle.parallel=true
19 |
20 | # AndroidX package structure to make it clearer which packages are bundled with the
21 | # Android operating system, and which are packaged with your app's APK
22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn
23 | android.useAndroidX=true
24 | # Automatically convert third-party libraries to use AndroidX
25 | android.enableJetifier=true
26 |
27 | # Version of flipper SDK to use with React Native
28 | FLIPPER_VERSION=0.182.0
29 |
30 | # Use this property to specify which architecture you want to build.
31 | # You can also override it from the CLI using
32 | # ./gradlew -PreactNativeArchitectures=x86_64
33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
34 |
35 | # Use this property to enable support to the new architecture.
36 | # This will allow you to use TurboModules and the Fabric render in
37 | # your application. You should enable this flag either if you want
38 | # to write custom TurboModules/Fabric components OR use libraries that
39 | # are providing them.
40 | newArchEnabled=false
41 |
42 | # Use this property to enable or disable the Hermes JS engine.
43 | # If set to false, you will be using JSC instead.
44 | hermesEnabled=true
45 |
--------------------------------------------------------------------------------
/demo/android/app/src/main/res/drawable/rn_edit_text_material.xml:
--------------------------------------------------------------------------------
1 |
2 |
16 |
21 |
22 |
23 |
32 | This source code is licensed under the MIT license found in the LICENSE file in the root
5 | * directory of this source tree.
6 | */
7 | package com.demo;
8 |
9 | import android.content.Context;
10 | import com.facebook.flipper.android.AndroidFlipperClient;
11 | import com.facebook.flipper.android.utils.FlipperUtils;
12 | import com.facebook.flipper.core.FlipperClient;
13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping;
17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
20 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
21 | import com.facebook.react.ReactInstanceEventListener;
22 | import com.facebook.react.ReactInstanceManager;
23 | import com.facebook.react.bridge.ReactContext;
24 | import com.facebook.react.modules.network.NetworkingModule;
25 | import okhttp3.OkHttpClient;
26 |
27 | /**
28 | * Class responsible of loading Flipper inside your React Native application. This is the debug
29 | * flavor of it. Here you can add your own plugins and customize the Flipper setup.
30 | */
31 | public class ReactNativeFlipper {
32 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
33 | if (FlipperUtils.shouldEnableFlipper(context)) {
34 | final FlipperClient client = AndroidFlipperClient.getInstance(context);
35 |
36 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
37 | client.addPlugin(new DatabasesFlipperPlugin(context));
38 | client.addPlugin(new SharedPreferencesFlipperPlugin(context));
39 | client.addPlugin(CrashReporterPlugin.getInstance());
40 |
41 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
42 | NetworkingModule.setCustomClientBuilder(
43 | new NetworkingModule.CustomClientBuilder() {
44 | @Override
45 | public void apply(OkHttpClient.Builder builder) {
46 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
47 | }
48 | });
49 | client.addPlugin(networkFlipperPlugin);
50 | client.start();
51 |
52 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
53 | // Hence we run if after all native modules have been initialized
54 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
55 | if (reactContext == null) {
56 | reactInstanceManager.addReactInstanceEventListener(
57 | new ReactInstanceEventListener() {
58 | @Override
59 | public void onReactContextInitialized(ReactContext reactContext) {
60 | reactInstanceManager.removeReactInstanceEventListener(this);
61 | reactContext.runOnNativeModulesQueueThread(
62 | new Runnable() {
63 | @Override
64 | public void run() {
65 | client.addPlugin(new FrescoFlipperPlugin());
66 | }
67 | });
68 | }
69 | });
70 | } else {
71 | client.addPlugin(new FrescoFlipperPlugin());
72 | }
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to [project-title]
2 |
3 | This project welcomes contributions and suggestions. Most contributions require you to agree to a
4 | Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
5 | the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
6 |
7 | When you submit a pull request, a CLA bot will automatically determine whether you need to provide
8 | a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
9 | provided by the bot. You will only need to do this once across all repos using our CLA.
10 |
11 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
12 | For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
13 | contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
14 |
15 | - [Code of Conduct](#coc)
16 | - [Issues and Bugs](#issue)
17 | - [Feature Requests](#feature)
18 | - [Submission Guidelines](#submit)
19 |
20 | ## Code of Conduct
21 | Help us keep this project open and inclusive. Please read and follow our [Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
22 |
23 | ## Found an Issue?
24 | If you find a bug in the source code or a mistake in the documentation, you can help us by
25 | [submitting an issue](#submit-issue) to the GitHub Repository. Even better, you can
26 | [submit a Pull Request](#submit-pr) with a fix.
27 |
28 | ## Want a Feature?
29 | You can *request* a new feature by [submitting an issue](#submit-issue) to the GitHub
30 | Repository. If you would like to *implement* a new feature, please submit an issue with
31 | a proposal for your work first, to be sure that we can use it.
32 |
33 | * **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
34 |
35 | ## Submission Guidelines
36 |
37 | ### Submitting an Issue
38 | Before you submit an issue, search the archive, maybe your question was already answered.
39 |
40 | If your issue appears to be a bug, and hasn't been reported, open a new issue.
41 | Help us to maximize the effort we can spend fixing issues and adding new
42 | features, by not reporting duplicate issues. Providing the following information will increase the
43 | chances of your issue being dealt with quickly:
44 |
45 | * **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
46 | * **Version** - what version is affected (e.g. 0.1.2)
47 | * **Motivation for or Use Case** - explain what are you trying to do and why the current behavior is a bug for you
48 | * **Browsers and Operating System** - is this a problem with all browsers?
49 | * **Reproduce the Error** - provide a live example or a unambiguous set of steps
50 | * **Related Issues** - has a similar issue been reported before?
51 | * **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
52 | causing the problem (line of code or commit)
53 |
54 | You can file new issues by providing the above information at the corresponding repository's issues link: https://github.com/[organization-name]/[repository-name]/issues/new].
55 |
56 | ### Submitting a Pull Request (PR)
57 | Before you submit your Pull Request (PR) consider the following guidelines:
58 |
59 | * Search the repository (https://github.com/[organization-name]/[repository-name]/pulls) for an open or closed PR
60 | that relates to your submission. You don't want to duplicate effort.
61 |
62 | * Make your changes in a new git fork:
63 |
64 | * Commit your changes using a descriptive commit message
65 | * Push your fork to GitHub:
66 | * In GitHub, create a pull request
67 | * If we suggest changes then:
68 | * Make the required updates.
69 | * Rebase your fork and force push to your GitHub repository (this will update your Pull Request):
70 |
71 | ```shell
72 | git rebase master -i
73 | git push -f
74 | ```
75 |
76 | That's it! Thank you for your contribution!
77 |
--------------------------------------------------------------------------------
/demo/ios/demo/LaunchScreen.storyboard:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
25 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/demo/android/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: "com.android.application"
2 | apply plugin: "com.facebook.react"
3 |
4 | /**
5 | * This is the configuration block to customize your React Native Android app.
6 | * By default you don't need to apply any configuration, just uncomment the lines you need.
7 | */
8 | react {
9 | /* Folders */
10 | // The root of your project, i.e. where "package.json" lives. Default is '..'
11 | // root = file("../")
12 | // The folder where the react-native NPM package is. Default is ../node_modules/react-native
13 | // reactNativeDir = file("../node_modules/react-native")
14 | // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
15 | // codegenDir = file("../node_modules/@react-native/codegen")
16 | // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
17 | // cliFile = file("../node_modules/react-native/cli.js")
18 |
19 | /* Variants */
20 | // The list of variants to that are debuggable. For those we're going to
21 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'.
22 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
23 | // debuggableVariants = ["liteDebug", "prodDebug"]
24 |
25 | /* Bundling */
26 | // A list containing the node command and its flags. Default is just 'node'.
27 | // nodeExecutableAndArgs = ["node"]
28 | //
29 | // The command to run when bundling. By default is 'bundle'
30 | // bundleCommand = "ram-bundle"
31 | //
32 | // The path to the CLI configuration file. Default is empty.
33 | // bundleConfig = file(../rn-cli.config.js)
34 | //
35 | // The name of the generated asset file containing your JS bundle
36 | // bundleAssetName = "MyApplication.android.bundle"
37 | //
38 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
39 | // entryFile = file("../js/MyApplication.android.js")
40 | //
41 | // A list of extra flags to pass to the 'bundle' commands.
42 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
43 | // extraPackagerArgs = []
44 |
45 | /* Hermes Commands */
46 | // The hermes compiler command to run. By default it is 'hermesc'
47 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
48 | //
49 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
50 | // hermesFlags = ["-O", "-output-source-map"]
51 | }
52 |
53 | /**
54 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
55 | */
56 | def enableProguardInReleaseBuilds = false
57 |
58 | /**
59 | * The preferred build flavor of JavaScriptCore (JSC)
60 | *
61 | * For example, to use the international variant, you can use:
62 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
63 | *
64 | * The international variant includes ICU i18n library and necessary data
65 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
66 | * give correct results when using with locales other than en-US. Note that
67 | * this variant is about 6MiB larger per architecture than default.
68 | */
69 | def jscFlavor = 'org.webkit:android-jsc:+'
70 |
71 | android {
72 | ndkVersion rootProject.ext.ndkVersion
73 |
74 | compileSdkVersion rootProject.ext.compileSdkVersion
75 |
76 | namespace "com.demo"
77 | defaultConfig {
78 | applicationId "com.demo"
79 | minSdkVersion rootProject.ext.minSdkVersion
80 | targetSdkVersion rootProject.ext.targetSdkVersion
81 | versionCode 1
82 | versionName "1.0"
83 | }
84 | signingConfigs {
85 | debug {
86 | storeFile file('debug.keystore')
87 | storePassword 'android'
88 | keyAlias 'androiddebugkey'
89 | keyPassword 'android'
90 | }
91 | }
92 | buildTypes {
93 | debug {
94 | signingConfig signingConfigs.debug
95 | }
96 | release {
97 | // Caution! In production, you need to generate your own keystore file.
98 | // see https://reactnative.dev/docs/signed-apk-android.
99 | signingConfig signingConfigs.debug
100 | minifyEnabled enableProguardInReleaseBuilds
101 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
102 | }
103 | }
104 | }
105 |
106 | repositories {
107 | mavenCentral()
108 | // maven {
109 | // // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
110 | // url("$rootDir/../node_modules/react-native/android")
111 | // }
112 | // maven {
113 | // // Android JSC is installed from npm
114 | // url("$rootDir/../node_modules/jsc-android/dist")
115 | // }
116 | maven { url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1" }
117 | google()
118 | maven { url 'https://www.jitpack.io' }
119 | }
120 |
121 | dependencies {
122 | implementation 'com.azure.android:azure-communication-ui-calling:1.13.0'
123 | // The version of react-native is set by the React Native Gradle Plugin
124 | implementation("com.facebook.react:react-android")
125 |
126 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
127 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
128 | exclude group:'com.squareup.okhttp3', module:'okhttp'
129 | }
130 |
131 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
132 | if (hermesEnabled.toBoolean()) {
133 | implementation("com.facebook.react:hermes-android")
134 | } else {
135 | implementation jscFlavor
136 | }
137 | }
138 |
139 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
140 |
--------------------------------------------------------------------------------
/demo/android/README.md:
--------------------------------------------------------------------------------
1 | # Android Bridging
2 | Create a new Java file `RNAzureCommunicationUICalling` in the `AzureCommunicationUIDemoApp` folder. This file will contain all of the methods that will call the native Android UI Library.
3 | See [RNAzureCommunicationUICalling.java](app/src/main/java/com/demo/RNAzureCommunicationUICalling.java)
4 |
5 | To allow the React Native javascript end to access a funciton, wrap it with `@ReactMethod`. This will allow the javascript end to call the function which will be used to launch the native UI Library.
6 |
7 | Here we create a method `startCallComposite` and launch the calling compsite within it. We then wrap the method with `@ReactMethod` to allow the JavaScript end to be able to call this function which will then launch our calling composite.
8 |
9 | ```java
10 | @ReactMethod
11 | public void startCallComposite(String displayName, String tokenInput, String meetingInput, ReadableMap localAvatarImageResource, String selectedLanguage, boolean isRightToLeft, ReadableMap remoteAvatarImageResource, Promise promise) {
12 |
13 | CallComposite callComposite = new CallCompositeBuilder().build();
14 |
15 | ...
16 |
17 | //lauching native calling composite
18 | callComposite.launch(context, remoteOptions);
19 | }
20 | ```
21 |
22 | For the the full `startCallComposite` function, see [RNAzureCommunicationUICalling.java](app/src/main/java/com/demo/RNAzureCommunicationUICalling.java#L80)
23 |
24 | After creating `RNAzureCommunicationUICalling`, create another Java file called `RNAzureCommunicationUICallingPackage` in the `AzureCommunicationUIDemoApp` folder.
25 | See [RNAzureCommunicationUICallingPackage.java](app/src/main/java/com/demo/RNAzureCommunicationUICallingPackage.java)
26 |
27 | `RNAzureCommunicationUICallingPackage` implements `ReactPackage` which provides us with an interface to register our `RNAzureCommunicationUICalling` module in React Native. This will allow us to reference the module from the javascript end.
28 |
29 | ```java
30 | public class RNAzureCommunicationUICallingPackage implements ReactPackage {
31 |
32 | @Override
33 | public List createViewManagers(ReactApplicationContext reactContext) {
34 | return Collections.emptyList();
35 | }
36 |
37 | @Override
38 | public List createNativeModules(
39 | ReactApplicationContext reactContext) {
40 | List modules = new ArrayList<>();
41 |
42 | modules.add(new RNAzureCommunicationUICalling(reactContext));
43 | return modules;
44 | }
45 | }
46 | ```
47 |
48 | # Running the Code
49 | You can either run your app on an Android emulator with opening the project in Android Studio or run the app through CLI.
50 |
51 |
52 | # Environment Variables
53 | The React Native tools require some environment variables to be set up in order to build apps with native code.
54 |
55 | ### Mac
56 |
57 | Add the following lines to your $HOME/.bash_profile or $HOME/.bashrc (if you are using zsh then ~/.zprofile or ~/.zshrc) config file:
58 | ```bash
59 | export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
60 | export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
61 | export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
62 | ```
63 |
64 | ### Windows
65 | - Open the Windows Control Panel.
66 | - Click on User Accounts, then click User Accounts again
67 | - Click on Change my environment variables
68 |
69 | Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK.
70 |
71 | #### Example
72 | ```groovy
73 | %LOCALAPPDATA%\Android\Sdk
74 |
75 | ```
76 |
77 | Click on New... to create a new JAVE_HOME user variable that points to the path to your JDK:
78 |
79 | #### Example
80 | ```groovy
81 | org.gradle.java.home=C:\\Program Files\\OpenJDK\\openjdk-11.0.16_8
82 |
83 | ```
84 |
85 |
86 | ## Android Studio
87 | You can build and run your app on an Android emulator by creating a new Android Virtual Device (AVD) > Click Run.
88 |
89 | For more information: [Run Your App](https://developer.android.com/training/basics/firstapp/running-app)
90 |
91 | Tap Start Experience.
92 |
93 | Accept audio permissions and select device, mic, and video settings.
94 |
95 | Tap Start Call.
96 | Alternatively, you could also run the React Native application through CLI. First, you need to start Metro, the JavaScript bundler that ships with React Native.
97 |
98 | To start the Metro Bundler, go to the root folder of the React Native project (root folder) and run the following:
99 |
100 | ```ruby
101 | npx react-native start
102 | ```
103 |
104 | Start your Android Virtual Device (AVD) or connect your own. Check if the device is running:
105 | ```ruby
106 | adb devices
107 | ```
108 |
109 | Let Metro Bundler run in its own terminal. Open a new terminal in the same directory and run the following:
110 | ```ruby
111 | npx react-native run-android
112 | ```
113 |
114 |
115 | # UI Library functionality
116 |
117 |
118 | ## Launching Composite
119 | The React native library supports all the same features as the native [UI composite](https://github.com/Azure/communication-ui-library-android). Call `startCallComposite` on the `RNAzureCommunicationUICalling` module from your React Native Javascript code, wrapping with `try-catch` statement to handle any errors.
120 |
121 | ```cs
122 | try {
123 | await RNAzureCommunicationUICalling.startCallComposite(
124 | // local options
125 | {"displayName": displayName, "title": title, "subtitle": subtitle},
126 | localAvatarImageResource,
127 | // remote options
128 | {"token": tokenInput, "meeting": meetingInput},
129 | remoteAvatarImageResource,
130 | // localization options
131 | {"locale": selectedLanguage, "layout": isRightToLeft}
132 | );
133 | } catch (e) {
134 | console.log(`startCallComposite error: ${e.message}`)
135 | }
136 | };
137 | ```
138 |
139 | ### Setup group call or Teams meeting options
140 | 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.
141 |
142 | ### Apply theme configuration
143 |
144 | To change the primary color of composite, create a new theme style in `src/main/res/values/styles.xml` and `src/main/res/values-night/styles.xml` by considering AzureCommunicationUICalling.Theme as parent theme. To apply theme, inject the theme ID in CallCompositeBuilder.
145 |
146 |
147 | ```xml
148 |
154 | ```
155 | To apply theme, inject the theme ID in CallCompositeBuilder.
156 | ```java
157 | CallComposite callComposite =
158 | new CallCompositeBuilder()
159 | .theme(R.style.MyCompany_CallComposite)
160 | .build();
161 | ```
162 |
163 |
164 | # Limitations
165 |
166 | Communication between JavaScript and Swift/Kotlin is limited by the available methods (Callbacks/Promises/Events) provided by the React Native framework. Implementing TokenRefresher in JavaScript is not possible due to this limitation.
167 | Only one of the callback events (resolver / rejector) can be called. If one is called the other one will not be called.
168 |
169 | The React Native team is currently working on the re-architecture of the Native Module system, replacing it with TurboModules. It helps facilitate more efficient type-safe communication between JavaScript and native without relying on the React Native bridge. We could revisit our bridging module and update our wrapper API in the future once they have released TurboModules. More info in the highlighted section here: [Android Native Modules · React Native](https://reactnative.dev/docs/new-architecture-app-modules-android)
170 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Azure Communication UI Mobile Library for React Native
4 |
5 | 
6 |
7 | 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.
8 |
9 | ## Features
10 |
11 | Please refer to our native [UI Library overview](https://docs.microsoft.com/en-us/azure/communication-services/concepts/ui-library/ui-library-overview?pivots=platform-mobile)
12 |
13 | ## ❤️ Feedback
14 |
15 | We appreciate your feedback and energy helping us improve our services. [If you've tried the service, please give us feedback through this survey](https://microsoft.qualtrics.com/jfe/form/SV_9WTOR2ItSo0oFee).
16 |
17 | ## Prerequisites
18 |
19 | An Azure account with an active subscription. Create an account for free.
20 | A deployed Communication Services resource. Create a Communication Services resource.
21 | An Authentication Endpoint that will return the Azure Communication Services Token. See example or clone the code.
22 |
23 | Node, Watchman, and React Native CLI: please refer to [React Native environment setup guide](https://reactnative.dev/docs/environment-setup).
24 |
25 | Yarn: refer to [installation guide](https://classic.yarnpkg.com/lang/en/docs/install)
26 |
27 | iOS: Xcode, CocoaPods: refer to [iOS requirements for UI library](https://github.com/Azure/communication-ui-library-ios#requirements)
28 |
29 | Android: Android Studio, JDK: refer to [Android prerequisites](https://github.com/Azure/communication-ui-library-android#prerequisites)
30 |
31 | Link to Authentication Endpoint Sample: [link](https://docs.microsoft.com/en-us/azure/communication-services/quickstarts/identity/quick-create-identity)
32 |
33 | ## Run Sample App
34 |
35 | Navigate to `demo/`:
36 |
37 | 1. Run `yarn install`
38 |
39 | Install iOS app dependencies:
40 |
41 | 1. In Terminal, navigate to `demo/ios/`:
42 | 2. Run `pod install --repo-update`
43 |
44 | Build android app dependencies:
45 |
46 | 1. In Terminal, navigate to `demo/android/`:
47 | 2. Run `./gradlew build`
48 |
49 | Navigate back to `demo/`
50 |
51 | 1. Run `yarn react-native start`
52 | 2. Open another Terminal, navigate to `demo/` folder, and run `yarn react-native run-ios` or `yarn react-native run-android`
53 |
54 | Alternatively, you can also run the iOS app by launching Xcode from the `.xcworkspace` file, and run the app with scheme `demo` on your simulator or iOS device.
55 |
56 | 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.
57 |
58 | ## Key Sample Highlights
59 |
60 | To integrate the native UI Library with React Native in this sample, a few key steps were taken as described below:
61 |
62 | ### iOS
63 |
64 | After installing the package and dependencies with CocoaPods from the step above, modify the Podfile in the `/ios` filder as such:
65 |
66 | ```ruby
67 | platform :ios, '16.0'
68 | target 'demo' do
69 | use_frameworks!
70 | pod 'AzureCommunicationUICalling', '1.12.0'
71 | ...
72 |
73 | # Note: disable the line below since we've enabled use_frameworks!
74 | # use_flipper!()
75 | ...
76 | end
77 | ```
78 |
79 | Navigate to the `ios/` folder and open the `.xcworkspace` file with Xcode.
80 |
81 | Set iOS Deployment Target in Build Settings for the main project to minimum iOS 16.0:
82 |
83 | 
84 |
85 | Request access to the microphone, camera, etc.
86 | 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.
87 |
88 | Right-click the `Info.plist` entry of the project tree and select **Open As** > **Source Code**. Add the following lines the top level `` section, and then save the file.
89 |
90 | ```xml
91 | NSCameraUsageDescription
92 |
93 | NSMicrophoneUsageDescription
94 |
95 | ```
96 |
97 | To verify requesting the permission is added correctly, view the `Info.plist` as **Open As** > **Property List** and should expect to see the following:
98 |
99 | 
100 |
101 | Turn off Bitcode
102 | 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.
103 |
104 | 
105 |
106 | ### Android
107 |
108 | In your app level (**app folder**) `build.gradle`, add the following lines to the dependencies and android sections.
109 |
110 | ```groovy
111 | android {
112 | ...
113 | packagingOptions {
114 | pickFirst 'META-INF/*'
115 | }
116 | ...
117 | }
118 | ```
119 |
120 | ```groovy
121 | dependencies {
122 | ...
123 | implementation 'com.azure.android:azure-communication-ui-calling:1.2.0'
124 | ...
125 | }
126 | ```
127 |
128 | 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{}`.
129 |
130 | ```groovy
131 | repositories {
132 | ...
133 | mavenCentral()
134 | maven {
135 | url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
136 | }
137 | ...
138 | }
139 | ```
140 |
141 | Sync project with gradle files. Either run `./gradlew build` or open the project in Android Studio (Android Studio -> File -> Sync Project With Gradle Files)
142 |
143 | ## Launching Composite
144 |
145 | The React native library supports all the same features as the native [UI composite](https://github.com/Azure/communication-ui-library-android). Call `startCallComposite` on the `RNAzureCommunicationUICalling` module from your React Native Javascript code, wrapping with `try-catch` statement to handle any errors.
146 |
147 | ```cs
148 | try {
149 | await RNAzureCommunicationUICalling.startCallComposite(
150 | // local options
151 | {"displayName": displayName, "title": title, "subtitle": subtitle},
152 | localAvatarImageResource,
153 | // remote options
154 | {"token": tokenInput, "meeting": meetingInput},
155 | remoteAvatarImageResource,
156 | // localization options
157 | {"locale": selectedLanguage, "layout": isRightToLeft}
158 | );
159 | } catch (e) {
160 | console.log(`startCallComposite error: ${e.message}`)
161 | }
162 | };
163 | ```
164 |
165 | ### Setup group call or Teams meeting options
166 |
167 | 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.
168 |
169 | ## React native - native app bridging
170 |
171 | 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.
172 |
173 | [iOS bridging file guide](demo/ios/README.md)
174 |
175 | [Android bridging file guide](demo/android/README.md)
176 |
177 | ## Data Collection
178 |
179 | The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. This sample collect information about users and their use of the software that cannot be opted out of. Do not use this sample if you wish to avoid telemetry. You can learn more about data collection and use in the help documentation and Microsoft’s [privacy statement](https://go.microsoft.com/fwlink/?LinkID=824704). For more information on the data collected by the Azure SDK, please visit the [Telemetry Policy](https://learn.microsoft.com/azure/communication-services/concepts/privacy) page.
180 |
--------------------------------------------------------------------------------
/demo/android/gradlew:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | #
4 | # Copyright © 2015-2021 the original authors.
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # https://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 | #
18 |
19 | ##############################################################################
20 | #
21 | # Gradle start up script for POSIX generated by Gradle.
22 | #
23 | # Important for running:
24 | #
25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
26 | # noncompliant, but you have some other compliant shell such as ksh or
27 | # bash, then to run this script, type that shell name before the whole
28 | # command line, like:
29 | #
30 | # ksh Gradle
31 | #
32 | # Busybox and similar reduced shells will NOT work, because this script
33 | # requires all of these POSIX shell features:
34 | # * functions;
35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»;
37 | # * compound commands having a testable exit status, especially «case»;
38 | # * various built-in commands including «command», «set», and «ulimit».
39 | #
40 | # Important for patching:
41 | #
42 | # (2) This script targets any POSIX shell, so it avoids extensions provided
43 | # by Bash, Ksh, etc; in particular arrays are avoided.
44 | #
45 | # The "traditional" practice of packing multiple parameters into a
46 | # space-separated string is a well documented source of bugs and security
47 | # problems, so this is (mostly) avoided, by progressively accumulating
48 | # options in "$@", and eventually passing that to Java.
49 | #
50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
52 | # see the in-line comments for details.
53 | #
54 | # There are tweaks for specific operating systems such as AIX, CygWin,
55 | # Darwin, MinGW, and NonStop.
56 | #
57 | # (3) This script is generated from the Groovy template
58 | # https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
59 | # within the Gradle project.
60 | #
61 | # You can find Gradle at https://github.com/gradle/gradle/.
62 | #
63 | ##############################################################################
64 |
65 | # Attempt to set APP_HOME
66 |
67 | # Resolve links: $0 may be a link
68 | app_path=$0
69 |
70 | # Need this for daisy-chained symlinks.
71 | while
72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
73 | [ -h "$app_path" ]
74 | do
75 | ls=$( ls -ld "$app_path" )
76 | link=${ls#*' -> '}
77 | case $link in #(
78 | /*) app_path=$link ;; #(
79 | *) app_path=$APP_HOME$link ;;
80 | esac
81 | done
82 |
83 | # This is normally unused
84 | # shellcheck disable=SC2034
85 | APP_BASE_NAME=${0##*/}
86 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
87 |
88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
90 |
91 | # Use the maximum available, or set MAX_FD != -1 to use that value.
92 | MAX_FD=maximum
93 |
94 | warn () {
95 | echo "$*"
96 | } >&2
97 |
98 | die () {
99 | echo
100 | echo "$*"
101 | echo
102 | exit 1
103 | } >&2
104 |
105 | # OS specific support (must be 'true' or 'false').
106 | cygwin=false
107 | msys=false
108 | darwin=false
109 | nonstop=false
110 | case "$( uname )" in #(
111 | CYGWIN* ) cygwin=true ;; #(
112 | Darwin* ) darwin=true ;; #(
113 | MSYS* | MINGW* ) msys=true ;; #(
114 | NONSTOP* ) nonstop=true ;;
115 | esac
116 |
117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
118 |
119 |
120 | # Determine the Java command to use to start the JVM.
121 | if [ -n "$JAVA_HOME" ] ; then
122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
123 | # IBM's JDK on AIX uses strange locations for the executables
124 | JAVACMD=$JAVA_HOME/jre/sh/java
125 | else
126 | JAVACMD=$JAVA_HOME/bin/java
127 | fi
128 | if [ ! -x "$JAVACMD" ] ; then
129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
130 |
131 | Please set the JAVA_HOME variable in your environment to match the
132 | location of your Java installation."
133 | fi
134 | else
135 | JAVACMD=java
136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
137 |
138 | Please set the JAVA_HOME variable in your environment to match the
139 | location of your Java installation."
140 | fi
141 |
142 | # Increase the maximum file descriptors if we can.
143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
144 | case $MAX_FD in #(
145 | max*)
146 | # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
147 | # shellcheck disable=SC3045
148 | MAX_FD=$( ulimit -H -n ) ||
149 | warn "Could not query maximum file descriptor limit"
150 | esac
151 | case $MAX_FD in #(
152 | '' | soft) :;; #(
153 | *)
154 | # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
155 | # shellcheck disable=SC3045
156 | ulimit -n "$MAX_FD" ||
157 | warn "Could not set maximum file descriptor limit to $MAX_FD"
158 | esac
159 | fi
160 |
161 | # Collect all arguments for the java command, stacking in reverse order:
162 | # * args from the command line
163 | # * the main class name
164 | # * -classpath
165 | # * -D...appname settings
166 | # * --module-path (only if needed)
167 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
168 |
169 | # For Cygwin or MSYS, switch paths to Windows format before running java
170 | if "$cygwin" || "$msys" ; then
171 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
172 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
173 |
174 | JAVACMD=$( cygpath --unix "$JAVACMD" )
175 |
176 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
177 | for arg do
178 | if
179 | case $arg in #(
180 | -*) false ;; # don't mess with options #(
181 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
182 | [ -e "$t" ] ;; #(
183 | *) false ;;
184 | esac
185 | then
186 | arg=$( cygpath --path --ignore --mixed "$arg" )
187 | fi
188 | # Roll the args list around exactly as many times as the number of
189 | # args, so each arg winds up back in the position where it started, but
190 | # possibly modified.
191 | #
192 | # NB: a `for` loop captures its iteration list before it begins, so
193 | # changing the positional parameters here affects neither the number of
194 | # iterations, nor the values presented in `arg`.
195 | shift # remove old arg
196 | set -- "$@" "$arg" # push replacement arg
197 | done
198 | fi
199 |
200 | # Collect all arguments for the java command;
201 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
202 | # shell script including quotes and variable substitutions, so put them in
203 | # double quotes to make sure that they get re-expanded; and
204 | # * put everything else in single quotes, so that it's not re-expanded.
205 |
206 | set -- \
207 | "-Dorg.gradle.appname=$APP_BASE_NAME" \
208 | -classpath "$CLASSPATH" \
209 | org.gradle.wrapper.GradleWrapperMain \
210 | "$@"
211 |
212 | # Stop when "xargs" is not available.
213 | if ! command -v xargs >/dev/null 2>&1
214 | then
215 | die "xargs is not available"
216 | fi
217 |
218 | # Use "xargs" to parse quoted args.
219 | #
220 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed.
221 | #
222 | # In Bash we could simply go:
223 | #
224 | # readarray ARGS < <( xargs -n1 <<<"$var" ) &&
225 | # set -- "${ARGS[@]}" "$@"
226 | #
227 | # but POSIX shell has neither arrays nor command substitution, so instead we
228 | # post-process each arg (as a line of input to sed) to backslash-escape any
229 | # character that might be a shell metacharacter, then use eval to reverse
230 | # that process (while maintaining the separation between arguments), and wrap
231 | # the whole thing up as a single "set" statement.
232 | #
233 | # This will of course break if any of these variables contains a newline or
234 | # an unmatched quote.
235 | #
236 |
237 | eval "set -- $(
238 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
239 | xargs -n1 |
240 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
241 | tr '\n' ' '
242 | )" '"$@"'
243 |
244 | exec "$JAVACMD" "$@"
245 |
--------------------------------------------------------------------------------
/demo/ios/RNAzureCommunicationUICalling.swift:
--------------------------------------------------------------------------------
1 | //
2 | // Copyright (c) Microsoft Corporation. All rights reserved.
3 | // Licensed under the MIT License.
4 | //
5 |
6 | import AzureCommunicationUICalling
7 | import AzureCommunicationCalling
8 | import AzureCommunicationCommon
9 | import UIKit
10 | import SwiftUI
11 |
12 | @objc(RNAzureCommunicationUICalling)
13 | class RNAzureCommunicationUICalling: RCTEventEmitter {
14 | enum RNEvents: String, CaseIterable {
15 | case getToken
16 | }
17 |
18 | private var tokenRefresherHandler: TokenRefreshHandler?
19 | private var callComposite: CallComposite?
20 | private var headerViewData: CallScreenHeaderViewData?
21 |
22 | override static func requiresMainQueueSetup() -> Bool {
23 | return false
24 | }
25 |
26 | override func supportedEvents() -> [String]! {
27 | return RNEvents.allCases.map({ $0.rawValue })
28 | }
29 |
30 | @objc func tokenRefresher(_ token: String) {
31 | self.tokenRefresherHandler?(token, nil)
32 | }
33 |
34 | @objc func getSupportedLocales(_ resolve: @escaping RCTPromiseResolveBlock,
35 | rejecter reject: @escaping RCTPromiseRejectBlock) {
36 | let localeStrings = SupportedLocale.values.map { $0.identifier }
37 | resolve(localeStrings)
38 | }
39 |
40 | @objc func getDebugInfo(_ resolve: @escaping RCTPromiseResolveBlock,
41 | rejecter reject: @escaping RCTPromiseRejectBlock) {
42 | let callHistoryRecords = NSMutableArray()
43 | let dateFormatter = DateFormatter()
44 | dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss Z"
45 |
46 | if callComposite == nil {
47 | callComposite = CallComposite()
48 | }
49 | callComposite?.debugInfo.callHistoryRecords.forEach {
50 | let callIDs = NSMutableArray()
51 | $0.callIds.forEach { callIDs.add($0) }
52 | let record = NSMutableDictionary()
53 | record.setValue(dateFormatter.string(from: $0.callStartedOn), forKey: "callStartedOn")
54 | record.setValue(callIDs, forKey: "callIds")
55 | callHistoryRecords.add(record)
56 | }
57 |
58 | let result: NSDictionary = NSMutableDictionary()
59 | result.setValue(callHistoryRecords, forKey: "callHistoryRecords")
60 |
61 | resolve(result)
62 | }
63 |
64 | @objc func dismiss() {
65 | guard let callComposite = callComposite else {
66 | return
67 | }
68 | callComposite.dismiss()
69 | }
70 |
71 | @objc func startCallComposite(_ localOptions: NSDictionary,
72 | localAvatar: AnyObject?,
73 | remoteOptions: NSDictionary,
74 | remoteAvatar: AnyObject?,
75 | localizationOptions: NSDictionary,
76 | orientationOptions: NSDictionary?,
77 | resolver resolve: @escaping RCTPromiseResolveBlock,
78 | rejecter reject: @escaping RCTPromiseRejectBlock) {
79 |
80 | guard let localOptionsDict = localOptions as? [String: Any],
81 | let remoteOptionsDict = remoteOptions as? [String: Any],
82 | let localizationOptionsDict = localizationOptions as? [String: Any],
83 | let orientationOptionDict = orientationOptions as? [String: Any] else {
84 | return
85 | }
86 |
87 | // required options
88 | guard let tokenInput = remoteOptionsDict["token"] as? String,
89 | let meetingInput = remoteOptionsDict["meeting"] as? String else {
90 | reject(RNCallCompositeConnectionError.invalidInput.getErrorCode(),
91 | "Token and Meeting info cannot be empty",
92 | RNCallCompositeConnectionError.invalidInput)
93 | return
94 | }
95 |
96 | DispatchQueue.main.async {
97 | self._startCallComposite(displayName: localOptionsDict["displayName"] as? String,
98 | tokenInput: tokenInput,
99 | meetingInput: meetingInput,
100 | localAvatar: localAvatar,
101 | title: localOptionsDict["title"] as? String,
102 | subtitle: localOptionsDict["subtitle"] as? String,
103 | languageCode: localizationOptionsDict["locale"] as? String ?? "en",
104 | isRightToLeft: localizationOptionsDict["locale"] as? Bool ?? false,
105 | disableLeaveCallConfirmation: localOptionsDict["disableLeaveCallConfirmation"] as? Bool ?? false,
106 | remoteAvatar: remoteAvatar,
107 | setupOrientation: orientationOptionDict["setupOrientation"] as? String,
108 | callOrientation: orientationOptionDict["callOrientation"] as? String,
109 | resolver: resolve,
110 | rejecter: reject)
111 | }
112 | }
113 |
114 | private func _startCallComposite(displayName: String?,
115 | tokenInput: String,
116 | meetingInput: String,
117 | localAvatar: AnyObject?,
118 | title: String?,
119 | subtitle: String?,
120 | languageCode: String,
121 | isRightToLeft: Bool,
122 | disableLeaveCallConfirmation: Bool,
123 | remoteAvatar: AnyObject?,
124 | setupOrientation: String?,
125 | callOrientation: String?,
126 | resolver resolve: @escaping RCTPromiseResolveBlock,
127 | rejecter reject: @escaping RCTPromiseRejectBlock) {
128 |
129 | var localizationConfig: LocalizationOptions?
130 | let layoutDirection: LayoutDirection = isRightToLeft ? .rightToLeft : .leftToRight
131 | let locale = Locale(identifier: languageCode.isEmpty ? "en" : languageCode)
132 | localizationConfig = LocalizationOptions(locale: locale,
133 | layoutDirection: layoutDirection)
134 |
135 | var callScreenControlBarOptions: CallScreenControlBarOptions?
136 | var callScreenOptions: CallScreenOptions?
137 | var mode: LeaveCallConfirmationMode = disableLeaveCallConfirmation ? LeaveCallConfirmationMode.alwaysDisabled : LeaveCallConfirmationMode.alwaysEnabled
138 |
139 | callScreenControlBarOptions = CallScreenControlBarOptions(leaveCallConfirmationMode: mode)
140 | headerViewData = CallScreenHeaderViewData(title: "Custom title",
141 | subtitle: "Custom subtitle")
142 | callScreenOptions = CallScreenOptions(controlBarOptions: callScreenControlBarOptions,
143 | headerViewData: headerViewData)
144 |
145 | let callCompositeOptions: CallCompositeOptions
146 | callCompositeOptions = CallCompositeOptions(localization: localizationConfig,
147 | setupScreenOrientation: OrientationOptions.portrait,
148 | callingScreenOrientation: OrientationOptions.allButUpsideDown,
149 | callScreenOptions: callScreenOptions,
150 | displayName: displayName)
151 |
152 | if let communicationTokenCredential = try? getTokenCredential(tokenInput: tokenInput) {
153 | callComposite = CallComposite(credential: communicationTokenCredential, withOptions: callCompositeOptions)
154 | } else {
155 | reject(RNCallCompositeConnectionError.invalidToken.getErrorCode(),
156 | "Token is invalid",
157 | RNCallCompositeConnectionError.invalidToken)
158 | }
159 |
160 | guard let callComposite = callComposite else {
161 | return
162 | }
163 | callComposite.events.onError = onError(resolve, reject)
164 |
165 | let onRemoteParticipantJoinedHandler: ([CommunicationIdentifier]) -> Void = { [weak callComposite] communicationIds in
166 | guard let callComposite = callComposite else {
167 | return
168 | }
169 | self.onRemoteParticipantJoined(resolve, reject)(callComposite, communicationIds, remoteAvatar)
170 | }
171 | let onRemoteParticipantLeftHandler: ([CommunicationIdentifier]) -> Void = { [weak callComposite] communicationIds in
172 | guard let callComposite = callComposite else {
173 | return
174 | }
175 | self.onRemoteParticipantLeft(resolve, reject)(callComposite, communicationIds)
176 | }
177 |
178 | callComposite.events.onRemoteParticipantJoined = onRemoteParticipantJoinedHandler
179 | callComposite.events.onRemoteParticipantLeft = onRemoteParticipantLeftHandler
180 | callComposite.events.onDismissed = { dismissedEvent in
181 | print("ReactNativeDemoView::getEventsHandler::onDismissed \(dismissedEvent)")
182 | }
183 | callComposite.events.onCallStateChanged = { [weak callComposite] callState in
184 | print("ReactNativeDemoView::getEventsHandler::onCallStateChanged \(callState)")
185 | guard let callComposite = callComposite else {
186 | return
187 | }
188 | print("ReactNativeDemoView::getEventsHandler::onCallStateChanged \(callComposite.callState)")
189 | }
190 |
191 | var localOptions: LocalOptions? = nil
192 | var participantViewData: ParticipantViewData? = nil
193 | var setupViewData: SetupScreenViewData? = nil
194 |
195 | if let localAvatar = localAvatar {
196 | let avatar = RCTConvert.uiImage(localAvatar)
197 | participantViewData = ParticipantViewData(avatar: avatar, displayName: displayName)
198 | }
199 |
200 | if let title = title {
201 | setupViewData = SetupScreenViewData(title: title, subtitle: subtitle)
202 | }
203 |
204 | localOptions = LocalOptions(participantViewData: participantViewData, setupScreenViewData: setupViewData)
205 |
206 | if isRoomsCall(meetingInput: meetingInput) {
207 | callComposite.launch(locator: .roomCall(roomId: meetingInput), localOptions: localOptions)
208 | } else if let url = URL(string: meetingInput),
209 | UIApplication.shared.canOpenURL(url as URL) {
210 | callComposite.launch(locator: .teamsMeeting(teamsLink: meetingInput), localOptions: localOptions)
211 | } else if let uuid = UUID(uuidString: meetingInput) {
212 | // If the input is a valid UUID
213 | callComposite.launch(locator: .groupCall(groupId: uuid), localOptions: localOptions)
214 | } else {
215 | let ids: [String] = meetingInput.split(separator: ",").map {
216 | String($0).trimmingCharacters(in: .whitespacesAndNewlines)
217 | }
218 | let communicationIdentifiers: [CommunicationIdentifier] =
219 | ids.map { createCommunicationIdentifier(fromRawId: $0) }
220 | callComposite.launch(participants: communicationIdentifiers, localOptions: localOptions)
221 | }
222 | resolve(nil)
223 | }
224 |
225 |
226 |
227 | private func getTokenCredential(tokenInput: String) throws -> CommunicationTokenCredential {
228 | if let url = URL(string: tokenInput),
229 | UIApplication.shared.canOpenURL(url as URL) {
230 | let communicationTokenRefreshOptions = CommunicationTokenRefreshOptions(initialToken: nil,
231 | refreshProactively: true,
232 | tokenRefresher: getCommunicationToken(tokenUrl: url))
233 | if let communicationTokenCredential = try? CommunicationTokenCredential(withOptions: communicationTokenRefreshOptions) {
234 | return communicationTokenCredential
235 | } else {
236 | throw RNCallCompositeConnectionError.invalidToken
237 | }
238 | } else {
239 | if let communicationTokenCredential = try? CommunicationTokenCredential(token: tokenInput) {
240 | return communicationTokenCredential
241 | } else {
242 | throw RNCallCompositeConnectionError.invalidToken
243 | }
244 | }
245 | }
246 |
247 | private func isRoomsCall(meetingInput: String) -> Bool {
248 | for ch in meetingInput {
249 | if !(ch >= "0" && ch <= "9") {
250 | return false
251 | }
252 | }
253 | return true
254 | }
255 |
256 | private func getCommunicationToken(tokenUrl: URL) -> TokenRefresher {
257 | return { [weak self] completionHandler in
258 | self?.tokenRefresherHandler = completionHandler
259 | self?.sendEvent(withName: RNEvents.getToken.rawValue,
260 | body: ["url": tokenUrl.absoluteString])
261 | }
262 | }
263 |
264 | func onError(_ resolve: @escaping RCTPromiseResolveBlock,
265 | _ reject: @escaping RCTPromiseRejectBlock) -> ((CallCompositeError) -> Void) {
266 | return { (error: CallCompositeError) -> Void in
267 | print("ReactNativeDemoView::getEventsHandler::onError \(error)")
268 | print("ReactNativeDemoView error.code \(error.code)")
269 | resolve(error.error?.localizedDescription ?? "Unknown error")
270 | }
271 | }
272 |
273 | func onRemoteParticipantJoined(_ resolve: @escaping RCTPromiseResolveBlock,
274 | _ reject: @escaping RCTPromiseRejectBlock) -> ((CallComposite, [CommunicationIdentifier], AnyObject?) -> Void) {
275 | return { (callComposite: CallComposite, identifiers: [CommunicationIdentifier], remoteAvatar: AnyObject?) -> Void in
276 | print("ReactNativeDemoView::getEventsHandler::onRemoteParticipantJoined \(identifiers)")
277 | if self.headerViewData != nil && identifiers.count >= 1 {
278 | self.headerViewData?.title = "Custom title updated with participant \(identifiers.count)"
279 | self.headerViewData?.subtitle = "Custom subtitle updated with participant \(identifiers.count)"
280 | }
281 | guard let remoteAvatar = remoteAvatar, let remoteAvatarImage = RCTConvert.uiImage(remoteAvatar) else {
282 | return
283 | }
284 | RNCallCompositeRemoteParticipantAvatarHelper.onRemoteParticipantJoined(to: callComposite,
285 | identifiers: identifiers,
286 | remoteAvatar: remoteAvatarImage)
287 | }
288 | }
289 |
290 | func onRemoteParticipantLeft(_ resolve: @escaping RCTPromiseResolveBlock,
291 | _ reject: @escaping RCTPromiseRejectBlock) -> ((CallComposite, [CommunicationIdentifier]) -> Void) {
292 | return { (callComposite: CallComposite, identifiers: [CommunicationIdentifier]) -> Void in
293 | print("ReactNativeDemoView::getEventsHandler::onRemoteParticipantLeft \(identifiers)")
294 |
295 | if self.headerViewData != nil && identifiers.count == 0 {
296 | self.headerViewData?.title = "Custom title updated"
297 | self.headerViewData?.subtitle = "Custom subtitle updated"
298 | }
299 |
300 | }
301 | }
302 | }
303 |
304 | enum RNCallCompositeConnectionError: Error {
305 | case invalidToken
306 | case invalidInput
307 |
308 | func getErrorCode() -> String {
309 | switch self {
310 | case .invalidToken:
311 | return CallCompositeErrorCode.tokenExpired
312 | case .invalidInput:
313 | return CallCompositeErrorCode.callJoin
314 | }
315 | }
316 | }
317 |
318 | struct RNCallCompositeRemoteParticipantAvatarHelper {
319 | private static func getRemoteParticipantId(_ identifier: CommunicationIdentifier) -> String? {
320 | switch identifier {
321 | case is CommunicationUserIdentifier:
322 | return (identifier as? CommunicationUserIdentifier)?.identifier
323 | case is UnknownIdentifier:
324 | return (identifier as? UnknownIdentifier)?.identifier
325 | case is PhoneNumberIdentifier:
326 | return (identifier as? PhoneNumberIdentifier)?.phoneNumber
327 | case is MicrosoftTeamsUserIdentifier:
328 | return (identifier as? MicrosoftTeamsUserIdentifier)?.userId
329 | default:
330 | return nil
331 | }
332 | }
333 |
334 | static func onRemoteParticipantJoined(to callComposite: CallComposite,
335 | identifiers: [CommunicationIdentifier],
336 | remoteAvatar: UIImage? = nil) {
337 | let avatars = ["cat", "fox", "koala", "monkey", "mouse", "octopus"]
338 | for identifier in identifiers {
339 | let id = getRemoteParticipantId(identifier)
340 | let nameIdValue = id != nil ? "\(id?.suffix(4) ?? "")" : ""
341 | var avatarImage: UIImage?
342 | var selectedAvatarName = ""
343 | if let lastSymbol = id?.last {
344 | let index = Int((lastSymbol.asciiValue ?? 0 ) % 6)
345 | selectedAvatarName = avatars[index]
346 | avatarImage = UIImage(named: selectedAvatarName)
347 | }
348 | let displayName = selectedAvatarName.isEmpty ? nameIdValue : "\(selectedAvatarName) \(nameIdValue)"
349 | let participantViewData = ParticipantViewData(avatar: remoteAvatar ?? avatarImage,
350 | displayName: displayName)
351 | callComposite.set(remoteParticipantViewData: participantViewData,
352 | for: identifier) { result in
353 | switch result {
354 | case .success:
355 | print("::::RNCallCompositeRemoteParticipantAvatarHelper::onRemoteParticipantJoined::success")
356 | break
357 | case .failure(let error):
358 | print("::::RNCallCompositeRemoteParticipantAvatarHelper::onRemoteParticipantJoined::failure \(error)")
359 | }
360 | }
361 | }
362 | }
363 | }
364 |
--------------------------------------------------------------------------------
/demo/App.tsx:
--------------------------------------------------------------------------------
1 | //
2 | // Copyright (c) Microsoft Corporation. All rights reserved.
3 | // Licensed under the MIT License.
4 | //
5 |
6 | import React, { useState } from 'react';
7 |
8 | import {
9 | Alert,
10 | SafeAreaView,
11 | ScrollView,
12 | StyleSheet,
13 | Button,
14 | Text,
15 | Image,
16 | TextInput,
17 | View,
18 | Switch,
19 | Modal,
20 | Pressable,
21 | Platform,
22 | PlatformColor
23 | } from 'react-native';
24 | import { AvatarsView } from './AvatarsView';
25 | import RNAzureCommunicationUICalling from './native/RNAzureCommunicationUICalling';
26 | import { NavigationContainer } from '@react-navigation/native';
27 | import { createNativeStackNavigator } from '@react-navigation/native-stack';
28 | import RNPickerSelect from 'react-native-picker-select';
29 |
30 | const Stack = createNativeStackNavigator();
31 |
32 | const App = () => {
33 |
34 | function HomeScreen({ navigation }) {
35 | const [tokenInput, onChangeTokenInput] = useState('');
36 | const [displayName, onChangeDisplayName] = useState('');
37 | const [title, onChangeTitle] = useState('');
38 | const [subtitle, onChangeSubtitle] = useState('');
39 | const [meetingInput, onChangeMeetingInput] = useState('');
40 | const [isRightToLeft, onChangeIsRightToLeft] = useState(false);
41 | const [disableLeaveCallConfirmation, onChangeDisableLeaveCallConfirmation] = useState(false);
42 | const [localAvatar, onLocalAvatarSet] = useState('');
43 | const [remoteAvatar, onRemoteAvatarSet] = useState('');
44 | const [modalVisible, setModalVisible] = useState(false);
45 | const [selectedLanguage, setSelectedLanguage] = useState('en');
46 | const [isGroupCall, setIsGroupCall] = useState(true);
47 | const [isTeamsCall, setIsTeamsCall] = useState(false);
48 | const [isOneToNCall, setIsOneToNCall] = useState(false);
49 | const [isRoomsCall, setIsRoomsCall] = useState(false);
50 | const [localesArray, setLocalesArray] = useState([]);
51 | const toggleIsRightToLeftSwitch = () => onChangeIsRightToLeft(!isRightToLeft);
52 | const disableLeaveCallConfirmationSwitch = () => onChangeDisableLeaveCallConfirmation(!disableLeaveCallConfirmation);
53 |
54 | React.useLayoutEffect(() => {
55 | navigation.setOptions({
56 | headerRight: () => (
57 |