agora-appbuilder-core 4.0.0-beta.45 → 4.0.0-beta.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.45",
+  "version": "4.0.0-beta.46",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "vercel-build": "npm run dev-setup && cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout active-speaker-layout-change",
+    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout v3-release-ui-kit",
     "deps": "cd template && npm i",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",

package/template/Gulpfile.js

@@ -251,12 +251,12 @@ const reactSdk = {
     const cli = debugFlag ? runCli : runCliNoOutput;
     cli(
       //'npx -p typescript tsc index.rsdk.tsx --declaration --emitDeclarationOnly --noResolve --outFile ../Builds/temp.d.ts',
-      'npx -p typescript tsc --project tsconfig_rsdk_index.json --noResolve --outFile ../Builds/reactSdk.d.ts',
+      'npx -p typescript tsc --project tsconfig_rsdk_index.json --outFile ../Builds/reactSdk.d.ts',
       () => cb(),
     );
   },
   bundleSdkTypedefs: () => {
-    return src(['../Builds/customization-api.d.ts', './static.d.ts'])
+    return src(['../Builds/customization-api.d.ts', '../Builds/reactSdk.d.ts'])
       .pipe(concat('index.d.ts'))
       .pipe(
         replace(
@@ -358,7 +358,7 @@ module.exports.reactSdk = series(
   reactSdk.webpack,
   general.generateApiTypedefs,
   general.bundleApiTypedefs,
-  // reactSdk.generateSdkTypedefs,
+  reactSdk.generateSdkTypedefs,
   reactSdk.bundleSdkTypedefs,
   general.cleanTempFiles,
   general.generateNpmPackage,

package/template/_package-lock.json

@@ -40,7 +40,9 @@
         "react-is": "18.0.0",
         "react-native": "0.72.4",
         "react-native-agora": "3.7.2-rc.3",
+        "react-native-document-picker": "^9.1.0",
         "react-native-exit-app": "1.1.0",
+        "react-native-fs": "^2.20.0",
         "react-native-gesture-handler": "2.8.0",
         "react-native-hyperlink": "0.0.19",
         "react-native-inappbrowser-reborn": "3.5.1",
@@ -25734,11 +25736,47 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/react-native-document-picker": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-document-picker/-/react-native-document-picker-9.1.0.tgz",
+      "integrity": "sha512-SRKPIAzUtcPDUstLRhQeebVVM+x+1I24iSvoy5mFp1KAD+6+UyDEle0SoD96k7MxVH5o46wPifWCYOA3FuQOyw==",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-windows": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-windows": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-exit-app": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/react-native-exit-app/-/react-native-exit-app-1.1.0.tgz",
       "integrity": "sha512-Spne19zfMfJvnUTX909EHUqWMk69rATtLJq9XMBGpNSHhx0M7v5yetx2Z87egBhLOqQm+CWfD/oxWzDG8rbIQA=="
     },
+    "node_modules/react-native-fs": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/react-native-fs/-/react-native-fs-2.20.0.tgz",
+      "integrity": "sha512-VkTBzs7fIDUiy/XajOSNk0XazFE9l+QlMAce7lGuebZcag5CnjszB+u4BdqzwaQOdcYb5wsJIsqq4kxInIRpJQ==",
+      "dependencies": {
+        "base-64": "^0.1.0",
+        "utf8": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react-native": "*",
+        "react-native-windows": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-windows": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.8.0.tgz",
@@ -30201,6 +30239,11 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/utf8": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz",
+      "integrity": "sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ=="
+    },
     "node_modules/utf8-byte-length": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",
@@ -50711,11 +50754,28 @@
         }
       }
     },
+    "react-native-document-picker": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-document-picker/-/react-native-document-picker-9.1.0.tgz",
+      "integrity": "sha512-SRKPIAzUtcPDUstLRhQeebVVM+x+1I24iSvoy5mFp1KAD+6+UyDEle0SoD96k7MxVH5o46wPifWCYOA3FuQOyw==",
+      "requires": {
+        "invariant": "^2.2.4"
+      }
+    },
     "react-native-exit-app": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/react-native-exit-app/-/react-native-exit-app-1.1.0.tgz",
       "integrity": "sha512-Spne19zfMfJvnUTX909EHUqWMk69rATtLJq9XMBGpNSHhx0M7v5yetx2Z87egBhLOqQm+CWfD/oxWzDG8rbIQA=="
     },
+    "react-native-fs": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/react-native-fs/-/react-native-fs-2.20.0.tgz",
+      "integrity": "sha512-VkTBzs7fIDUiy/XajOSNk0XazFE9l+QlMAce7lGuebZcag5CnjszB+u4BdqzwaQOdcYb5wsJIsqq4kxInIRpJQ==",
+      "requires": {
+        "base-64": "^0.1.0",
+        "utf8": "^3.0.0"
+      }
+    },
     "react-native-gesture-handler": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.8.0.tgz",
@@ -54060,6 +54120,11 @@
       "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
       "requires": {}
     },
+    "utf8": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz",
+      "integrity": "sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ=="
+    },
     "utf8-byte-length": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",

package/template/agora-rn-uikit/src/Contexts/PropsContext.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
-import {RtcEngineEvents} from 'react-native-agora/lib/typescript/src/common/RtcEvents';
+import {RtcEngineEvents} from 'react-native-agora/lib/typescript/common/RtcEvents';
 import {EncryptionMode} from 'react-native-agora';
 import {VideoProfile} from '../Utils/quality';
 import {UidType} from './RtcContext';
@@ -46,6 +46,7 @@ export const toggleHelper = (state: ToggleState) =>
   state === ToggleState.enabled ? ToggleState.disabled : ToggleState.enabled;
 
 export interface DefaultContentInterface {
+  //uikit and core
   uid: UidType;
   audio: ToggleState;
   video: ToggleState;
@@ -54,6 +55,15 @@ export interface DefaultContentInterface {
   permissionStatus?: PermissionState;
   //applicable only to the screenshare
   parentUid?: UidType;
+  //uikit and core
+
+  //core only
+  name: string;
+  screenUid: number;
+  offline: boolean;
+  lastMessageTimeStamp: number;
+  isInWaitingRoom?: boolean;
+  //core only
 }
 export interface CustomContentInterface<T> {
   type: T extends DefaultContentInterface['type'] ? never : T;
@@ -123,6 +133,11 @@ export interface RtcPropsInterface {
   geoFencing?: boolean;
   audioRoom?: boolean;
   activeSpeaker?: boolean;
+
+  //core only
+  screenShareUid?: number;
+  screenShareToken?: string;
+  //core only
 }
 
 export interface CallbacksInterface {
@@ -161,7 +176,7 @@ export interface PropsInterface {
   mode?: ChannelProfile;
 }
 
-const initialValue: PropsInterface = {
+const initialValue: Partial<PropsInterface> = {
   rtcProps: {
     appId: '',
     channel: '',
@@ -170,7 +185,7 @@ const initialValue: PropsInterface = {
   },
 };
 
-const PropsContext = React.createContext<PropsInterface>(initialValue);
+const PropsContext = React.createContext<Partial<PropsInterface>>(initialValue);
 
 export const PropsProvider = PropsContext.Provider;
 export const PropsConsumer = PropsContext.Consumer;

package/template/agora-rn-uikit/src/Controls/BtnTemplate.tsx

@@ -26,6 +26,7 @@ interface BtnTemplateBasicInterface {
   disabled?: boolean;
 }
 interface BtnTemplateInterfaceWithName extends BtnTemplateBasicInterface {
+  //@ts-ignore
   name?: keyof IconsInterface;
 }
 interface BtnTemplateInterfaceWithIcon extends BtnTemplateBasicInterface {

package/template/agora-rn-uikit/src/Controls/Icons.ts

@@ -29,7 +29,7 @@ const icons: IconsInterface = {
   'noise-cancellation':
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANxSURBVHgB7ZvxddowEMaPvv5fRlA2yAjuBMkGYYPSCeJMAJ0AMkGyAWzQdAKzAXSCr6dafjjGtiRbxgLu9949g5Fk+8vJOukUIkEQBEEQBEEQ/JlQBACY8uGRTZlTH9omk8mObhkWRrFt0MxKl/Fsc8G2N6JfLvwA92wZ7Ogy945tqlKbKV0qlQdxIbN5kmlzXaqjveiJxoRvYGZu5sGz3hr+bFrae0YPcQcDRy/YeNRR6M60oc15S539KALxRZPKjSSO9R7RnVlLu1r4t1LZDGN2MZyOPk5exOVSdCe1tD1F7jGaBQXgC3libuKZPyaVn7RHaVdXNBIcNx348IutOJ6PQpjSX6iJDC3xy5AeNAROHoS872dsKZstAFNs/8tj7GE2AD5dzDcyPdAV4CQQ9+01H+7YXtl2luJamBddnuu90oXj7EF64sg244/f2X42FCuESc0LMwqQT2vQpct7j2JGqCV/3FZ+2sYmTIm5Oc7IE2+BSrxYvo9OKSQpPCcxI7Gic4BjsJh51DnLMI88Ym8LSeYu7fTxIE0RjKUUJ4eW8zuKEZwxUEQ+P6tOZJfwWEzr60FRUzOg6O9zn4HkqgUqUQwgKXnylW4A9pgtdUxQ3IoHdUYEsiACWRCBLAQRCMeFtAyOOawhQD4pLaLnZ4oBnC7Ct2Y1cUwVdeHBci9ZpXxCPQnhQdOa76ql/Dt150/TD0YMVTn9jXoSQqCPmnNJU2ETxW7Jn7VlM4OqOfeXxgafUy0FK0udIVLPb9VKFAs4zZFZd1cg4OYF1GdrnbO9g4P61G/qUK+64eDkIeGwuIX6F3+QjEqQDVTGW/SiWdlr9LvmzmXmbES4N6bZsb171NXeoio/3UW1AavBE4Kkfztcd0WxYbpL3RKn09Jmx2v+QD2KYgTNq4XBM6y6zYZrpRQzfIO/G248mCe1eI5z8mA00B7jrPq4P/KYa9EkDmLtWlXwedJY9yBP8Fg4h31nyTi7yPoAe7S8Nx71ZASdlupOzbmZKdOW38ow4gpCL+A/pfBFv+8UXTrolwurQ3tUStcE7NMKV2FWuAavacIIpd8tGw9RdFk9tF/2vxd0AfnLuK4L6nOX+fINDU73XGsSigDJalgQgSyIQBZEIAsikAURyEIsAl3FrvxBQb53sGBJwikmqpboWRAEQRCC8A+7wtIN3wzWKgAAAABJRU5ErkJggg==',
   warning:
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAM1SURBVHgB7Zo9TBNhGMefUoUiPT+iEXAgDshGtAEXbWKiJCVxAxZd2sWpLrrIYuLA4Ohg4qiTUxlNWNy6oQnRTZ1Y0EGl9IDWD/B9Ds9ctPd+Pu+LXO+XvM2lfZvev89zz9dd5srE8C50ET3QZaSCk04qOOmkgpNOKtgF+b7dYO0Hh8AxlWKTLT84flbPs+WBS5xaeHp8649YBI8vjHwDlzgVHBUbcu/6ulP3diYYXXno2M9/3h9m781d9MEVTgSj0LnJzdjPZye2nFnZiWC0bj4XL8jr34HqVANcYF0wWnd6fFu4D/e4CGDWBT+6+VlqX4atMvME21gVjGmoU6CKo8AsjN+xiTXBKLRTGhJRvdq0GsCsCVa1bggGMJtpyopgXeuGzE7q/VkyWBFcMQw+Xm4nqMBsQC4YXVkmDYnAFGUjTZELNnHlKJimbFiZVDCWjzLXXv1dLlgi9ursTaCErB8ekjy5xy+PQm15IDhGlxUVJuVLPiy9OQJ+OwMUkFk4rhv6Gzz5kJXVXuF+TFOUFRiJYNl6GdGxFHoOVQAjEbww8wVsQllnGwvGNDQ6+ANsgxYunmuBKcaCqdKQCLRydWrDuM42EiwbqKigGAdpCzatl3UxrbO1BVccNOudwDr79rUN0EVL8Ojgd5J6WZfLYy3tNKUleGHmK+gSPVFd18QAputhyoJ1G/uQedYQFEbawTL943Tq7IzKUzwoFGtfl5GZR7PVAzeenFaq3pQsLNsNyUAxtcIAppqmpAXLdkMi1hpZePjiONxfPBEcm1JmqVHFCNKCqdLQnecnYeltP9Tf5+DW01Pgt8zaPvz2vMKgQEow1dgG+Rixqs+uQb9t3r+cVxgHSf0aZUVViJwYlooUMUFlHJQ9e8Z7wNuArlwcawMV6CkoEi1yt9SAXqKZi/f7Zt3Kah93H/fnVBp7FWxVaVhn15bz3DTFdWnX3ZApQZ0tuO0aK9iWdW1TEtx2jRXMu2P/P4POXOLcgYwVTDUW3Q/87fgrNfaT2quBoBLC2HdgFntZW8/C4uu9uXcnhM2D6+eoTECv/PDpMHePMAvKDMsPEunDpUknFZx0UsFJp+sE/wKxVEJyoyLawQAAAABJRU5ErkJggg==',
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAADNUlEQVR4Ae2c0W0TQRCG/zXxe0pwOoAOLh0kEkQ8kgpIKoioAKggvAEJUkwFuAPoADrABcQssxs7SqSsvXu3Mztx5pMsnew7Rxn/s9/tns+AYRiGYRiGYRiGYRjGtuCvMKHHLhTjoJBYtGtc0WZ38wSmGOPYHWIOZYygkWu8xap4AYcDeu4EClGXwNC2VKzfD7w0xw5eUAr/QBH6ErjA+8Qroa3PoQxVBfQXeEPj3cGaXTp/eae1FaCmhWPrLvCDCjhZu6OjFn4WW1mFUPQkMIhjU/ECPo6RaoSiIoFrxJFCjVB0JPDmnK8ENUJpXsAoDuA5ylEhlKYtnC2OFAqE0jaBueJIoUAozRLYQxxpdrDXSijtElgujnXv1UwoTQo4QBwpOv917QyGDfEWHiyOFI2EIp/AoeJI0UgoogmsKo4UwkKRTWC5OGb0EU+LjhAWilgBe4hj372ix0schu2C40SFItLCxeIgIVDh9u69xwW1vss/XkooMglc4IxFHCkEhcJewJg+H9tXmrP4t5nhT2Bo3VYICIW1gMtrHBO0g10obAWM7TOisa81I5xzfruBL4HS4kgTVq/ZPkiWAjYUR4oTGk5qLl7cwpPAluJI4ZIX7AdRvYAKxJGiW86GqlK1gGrEkYJSWFsodROoRxwpqgulWgEViiNFVaHUS2BNcXjs3p2GxW1XMdkVhVJlNSYOzq7ytCmsqHh8XG7XX8X2OHZH+ISBDC4g2zUOfubL1etBS17DW1i/OFJUEcqgBIpc4+DG08LrEX6hJ8MSyD/jKL8mUspAofQuIPuMIyRjdU2EtsFH57/0X73u1cLs4vD4Tm11bx3PX8a0d+Cht1D6JZBbHCP8hSy9hVKcQCFxzOkD2l8N7nHm4PAT/IRLqbOSA8oL+I2KJ3XaEm7xcnHy30GGWRh3Sw4oKiDLjEMbC5y61/iQu3t2AR/xjKOUIqHkS+TxzjhKKRJKVgIFB3FNZAklL4HbPu49TFYKNyZwefOz9HmZCiiBG+uTm0B1d4qz4/O+pLmxgNFGHu/wtAj/82nOjvmnMZ/JwGOSyT/dPwJRhTGmGn+fwTAMwzAMwzAMwzCMLeA/aQAlpfLwqQYAAAAASUVORK5CYII=',
   vb: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEfSURBVHgB7VNbEcIwELwwCCgOkIADggMcgAQcVAI4KBJAARLAQeugdXBc6KVzpE2a5Ls7szNtsrebywNgQSoQsSWe+XtLrIlvYsFjJ+xhNQXPD5q5gJD5kfgKmZsFxISMzD26cqq7LHNe7YVYmQ6Mzo5Lc9tdKGDK3IZK1CIkzpzFsmVrUOE0Xjx/k+cyF2DNS1HkQ+vU/A4dIroo2UDzfxsKkOazAcL8LMbunoDKNY/ZosGcCwth8Lf/YmuyHpo1vYg5jf0V1W4NJj40e+c1JAAnHpqaKTCrOhL3xB1xSzRjHbEhfohPpdSD9dpo6P8OER2UgdvjojZ6SGi1wjxcXS/lCUDIQ0fbs5EDK58Q8jC6pmuP8AD9oaaigQWp+AKsAoDF7uWeIAAAAABJRU5ErkJggg==',
   'vb-image':
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAB20lEQVRIie2UPWsUURSGn2siwcRsdgU/EkjnT5BgsZVgxCaNCiqIIi4WRrD1F6RQxMKAgTRWahkIikktRtzSD1IpCIIEsfAjCQQei5zRyZDdmVjnheHcc+5733fuzLkXdrFTqJ/UEzE+pLbVp+reqF1Rv6rjkTfUl+ozdV8Vg4mIh9W36kK2UG2qi+qZnHhbfaXWona5iskR9V1evANvqiiurlcRf18UV/vVlno3Yr/aow7kxdULZQYfthEfVpfdxK+Iy+pwzF+qJB7k/DcfjPhE/aE2I29G/jjyO5m42igzyMSvqedjvKJOF3jT6kr2+SLW1Td53p6iQUppVW0BD4CPUV4DagVqDViNNb/VOrAAWLaDlrqWtWvU7qsb6g31aMQN9V7MD6mv46mXGfwVjz4/qA6o827FfNR74qAtqUNdxUM0L95WJ3NzY9ExY4U1FzNx9VwVk/3qLePKqAr1bPGgpQ7ElFIyOuo0cAo4BowAfcA68AVoAy+A59EcJ4GRlNKjMoM+4DZwEzgAfAeWgM8xbgCjwPEYf2Oz66ZSSt2vijCYiR85p06ovR14vTE/F/yHRU6nHfwEFoGrpW/zD7PAeEppsIpB98PSBSmlLZrbbh24/r8Gu9gx/gBohhCCgI16xQAAAABJRU5ErkJggg==',

package/template/agora-rn-uikit/src/Controls/Local/EndCall.tsx

@@ -3,22 +3,24 @@ import PropsContext from '../../Contexts/PropsContext';
 import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
+import DispatchContext from '../../Contexts/DispatchContext';
 
-interface EndCallProps{
-  btnText?: string
+interface EndCallProps {
+  btnText?: string;
 }
 
 function EndCall(props?: EndCallProps) {
   const {styleProps} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {endCall} = localBtnStyles || {};
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
 
   return (
     <BtnTemplate
+      //@ts-ignore
       name={'callEnd'}
       btnText={props?.btnText || 'Hang Up'}
-      color='#FD0845'
+      color="#FD0845"
       style={{...styles.endCall, ...(endCall as object)}}
       onPress={() =>
         dispatch({

package/template/agora-rn-uikit/src/Controls/Local/FullScreen.tsx

@@ -3,14 +3,16 @@ import PropsContext from '../../Contexts/PropsContext';
 import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
+import DispatchContext from '../../Contexts/DispatchContext';
 
 function FullScreen() {
   const {styleProps} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {fullScreen} = localBtnStyles || {};
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   return (
     <BtnTemplate
+      //@ts-ignore
       name={'fullscreen'}
       style={{...styles.localBtn, ...(fullScreen as object)}}
       onPress={() => {

package/template/agora-rn-uikit/src/Controls/Local/LocalAudioMute.tsx

@@ -22,6 +22,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
 
   return (
     <BtnTemplate
+      //@ts-ignore
       name={local.audio === ToggleState.enabled ? 'mic' : 'micOff'}
       btnText={btnText}
       style={{

package/template/agora-rn-uikit/src/Controls/Local/LocalVideoMute.tsx

@@ -23,6 +23,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
 
   return (
     <BtnTemplate
+      //@ts-ignore
       name={local.video === ToggleState.enabled ? 'videocam' : 'videocamOff'}
       btnText={btnText}
       style={{

package/template/agora-rn-uikit/src/Controls/Local/SwitchCamera.tsx

@@ -17,6 +17,7 @@ function SwitchCamera(props?: Props) {
   const local = useContext(LocalContext);
   return (
     <BtnTemplate
+      //@ts-ignore
       name={'switchCamera'}
       style={{...styles.localBtn, ...(switchCamera as object)}}
       btnText={props?.btnText || 'Switch'}

package/template/agora-rn-uikit/src/Controls/Remote/RemoteAudioMute.tsx

@@ -20,6 +20,7 @@ const RemoteAudioMute: React.FC<RemoteAudioMuteInterface> = (props) => {
   const localUid = useLocalUid();
   return props.user.uid !== localUid ? (
     <BtnTemplate
+      //@ts-ignore
       name={props.user.audio === ToggleState.enabled ? 'mic' : 'micOff'}
       style={{...styles.leftRemoteBtn, ...(muteRemoteAudio as object)}}
       onPress={() => {

package/template/agora-rn-uikit/src/Controls/Remote/RemoteSwap.tsx

@@ -4,19 +4,21 @@ import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 import PropsContext from '../../Contexts/PropsContext';
 import useLocalUid from '../../Utils/useLocalUid';
+import DispatchContext from '../../Contexts/DispatchContext';
 
 interface RemoteSwapInterface {
   uid: UidType;
 }
 
 const RemoteSwap: React.FC<RemoteSwapInterface> = (props) => {
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   const {styleProps} = useContext(PropsContext);
   const {remoteBtnStyles} = styleProps || {};
   const {remoteSwap} = remoteBtnStyles || {};
   const localUid = useLocalUid();
   return (
     <BtnTemplate
+      //@ts-ignore
       name={'remoteSwap'}
       style={
         props.uid !== localUid

package/template/agora-rn-uikit/src/Controls/Remote/RemoteVideoMute.tsx

@@ -21,6 +21,7 @@ const RemoteVideoMute: React.FC<RemoteVideoMuteInterface> = (props) => {
   const localUid = useLocalUid();
   return props.user.uid !== localUid ? (
     <BtnTemplate
+      //@ts-ignore
       name={
         props.user.video === ToggleState.enabled ? 'videocam' : 'videocamOff'
       }

package/template/agora-rn-uikit/src/Reducer/LocalMuteAudio.ts

@@ -9,7 +9,7 @@ export default function LocalMuteAudio(
   action: ActionType<'LocalMuteAudio'>,
   localUid: UidType,
 ) {
-  let stateUpdate: ContentStateInterface = {
+  let stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
       [localUid]: {

package/template/agora-rn-uikit/src/Reducer/LocalMuteVideo.ts

@@ -9,7 +9,7 @@ export default function LocalMuteVideo(
   action: ActionType<'LocalMuteVideo'>,
   localUid: UidType,
 ) {
-  let stateUpdate: ContentStateInterface = {
+  let stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
       [localUid]: {

package/template/agora-rn-uikit/src/Reducer/LocalPermissionState.ts

@@ -9,7 +9,7 @@ export default function LocalPermissionState(
   action: ActionType<'LocalPermissionState'>,
   localUid: UidType,
 ) {
-  let stateUpdate: ContentStateInterface = {
+  let stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
       [localUid]: {

package/template/agora-rn-uikit/src/Reducer/RemoteAudioStateChanged.ts

@@ -12,11 +12,11 @@ export default function RemoteAudioStateChanged(
     audioState = ToggleState.disabled;
   }
 
-  const stateUpdate: ContentStateInterface = {
+  const stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
-      [action.value[0]]: {
-        ...state.defaultContent[action.value[0]],
+      [action.value[0] as unknown as number]: {
+        ...state.defaultContent[action.value[0] as unknown as number],
         audio: audioState,
       },
     },

package/template/agora-rn-uikit/src/Reducer/RemoteVideoStateChanged.ts

@@ -12,15 +12,16 @@ export default function RemoteVideoStateChanged(
     videoState = ToggleState.enabled;
   }
 
-  const stateUpdate: ContentStateInterface = {
+  const stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
-      [action.value[0]]: {
-        ...state.defaultContent[action.value[0]],
+      [action.value[0] as unknown as number]: {
+        ...state.defaultContent[action.value[0] as unknown as number],
         video:
+          //@ts-ignore
           videoState !== undefined
             ? videoState
-            : state.defaultContent[action.value[0]].video,
+            : state.defaultContent[action.value[0] as unknown as number].video,
       },
     },
     activeUids: [...state.activeUids],

package/template/agora-rn-uikit/src/Reducer/UpdateDualStreamMode.ts

@@ -11,7 +11,7 @@ export default function UpdateDualStreamMode(
 ) {
   const newMode = action.value[0];
   let defaultContent = {...state.defaultContent};
-  let stateUpdate: ContentStateInterface;
+  let stateUpdate: Partial<ContentStateInterface>;
   const setHighStreamType = (uid: UidType) => {
     defaultContent[uid].streamType = 'high';
   };

package/template/agora-rn-uikit/src/Reducer/UserJoined.ts

@@ -17,14 +17,17 @@ export default function UserJoined(
   let typeData = {
     type: 'rtc',
   };
-  if (state.defaultContent[newUid] && 'type' in state.defaultContent[newUid]) {
-    typeData.type = state.defaultContent[newUid].type;
+  if (
+    state.defaultContent[newUid as unknown as number] &&
+    'type' in state.defaultContent[newUid as unknown as number]
+  ) {
+    typeData.type = state.defaultContent[newUid as unknown as number].type;
   }
 
   let defaultContent: ContentStateInterface['defaultContent'] = {
     ...state.defaultContent,
-    [newUid]: {
-      ...state.defaultContent[newUid],
+    [newUid as unknown as number]: {
+      ...state.defaultContent[newUid as unknown as number],
       uid: newUid,
       audio: ToggleState.disabled,
       video: ToggleState.disabled,
@@ -40,7 +43,7 @@ export default function UserJoined(
     //Only one remote and local is maximized
     //Change stream type to high if dualStreaMode is DYNAMIC
     if (dualStreamMode === DualStreamMode.DYNAMIC) {
-      defaultContent[newUid].streamType = 'high';
+      defaultContent[newUid as unknown as number].streamType = 'high';
     }
     //Swap render positions
     stateUpdate = {

package/template/agora-rn-uikit/src/Reducer/UserMuteRemoteAudio.ts

@@ -4,7 +4,7 @@ export default function UserMuteRemoteAudio(
   state: ContentStateInterface,
   action: ActionType<'UserMuteRemoteAudio'>,
 ) {
-  let stateUpdate: ContentStateInterface = {
+  let stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
       [action.value[0]]: {

package/template/agora-rn-uikit/src/Reducer/UserMuteRemoteVideo.ts

@@ -4,7 +4,7 @@ export default function UserMuteRemoteVideo(
   state: ContentStateInterface,
   action: ActionType<'UserMuteRemoteVideo'>,
 ) {
-  let stateUpdate: ContentStateInterface = {
+  let stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
       [action.value[0]]: {

package/template/agora-rn-uikit/src/Reducer/UserOffline.ts

@@ -15,7 +15,7 @@ export default function UserOffline(
   const updatedActiveUids = [...state.activeUids].filter(
     (uid) => uid !== action.value[0],
   );
-  const stateUpdate: ContentStateInterface = {
+  const stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: state.defaultContent,
     activeUids: updatedActiveUids,
   };

package/template/agora-rn-uikit/src/Rtc/Create.tsx

@@ -217,13 +217,19 @@ const Create = ({
           geoFencing === true &&
           (Platform.OS === 'android' || Platform.OS === 'ios')
         ) {
-          engine.current = await RtcEngine.createWithAreaCode(
-            rtcProps.appId,
-            // eslint-disable-next-line no-bitwise
-            AreaCode.GLOB ^ AreaCode.CN,
-          );
+          if (rtcProps?.appId) {
+            //@ts-ignore
+            engine.current = await RtcEngine.createWithAreaCode(
+              rtcProps?.appId,
+              // eslint-disable-next-line no-bitwise
+              //@ts-ignore
+              AreaCode.GLOB ^ AreaCode.CN,
+            );
+          }
         } else {
-          engine.current = await RtcEngine.create(rtcProps.appId);
+          if (rtcProps?.appId) {
+            engine.current = await RtcEngine.create(rtcProps.appId);
+          }
         }
         /* Live Streaming */
         if (mode == ChannelProfile.LiveBroadcasting) {
@@ -242,24 +248,28 @@ const Create = ({
           await engine.current.enableAudioVolumeIndication(100, 3, true);
         }
         if (!audioRoom) {
-          if (rtcProps.profile) {
+          if (rtcProps && rtcProps.profile) {
             if (Platform.OS === 'web') {
               // move this to bridge?
               // @ts-ignore
               await engine.current.setVideoProfile(rtcProps.profile);
             } else {
-              const config: VideoEncoderConfiguration =
-                quality[rtcProps.profile];
-              await engine.current.setVideoEncoderConfiguration({
-                ...config,
-                bitrate: 0,
-              });
+              if (rtcProps && rtcProps?.profile) {
+                const config: VideoEncoderConfiguration =
+                  quality[rtcProps.profile];
+                //@ts-ignore
+                await engine.current.setVideoEncoderConfiguration({
+                  ...config,
+                  bitrate: 0,
+                });
+              }
             }
           }
         } else {
           //web will work even without audio profile
           //but native need to set audio profile otherwise user will experience low audio issue
           if (Platform.OS === 'android' || Platform.OS === 'ios') {
+            //@ts-ignore
             await engine.current.setAudioProfile(
               AudioProfile.Default,
               AudioScenario.Default,
@@ -269,6 +279,7 @@ const Create = ({
             //ref - https://docs.agora.io/en/help/integration-issues/profile_difference/#audio-route
             //so setting into phone speaker manually as requested
             if (mode == ChannelProfile.Communication) {
+              //@ts-ignore
               await engine.current.setEnableSpeakerphone(true);
             }
           }
@@ -299,8 +310,8 @@ const Create = ({
           'JoinChannelSuccess',
           async (channel, uid, elapsed) => {
             //Invoke the callback
-            console.log('UIkit enabling dual stream', rtcProps.dual);
-            if (rtcProps.dual) {
+            console.log('UIkit enabling dual stream', rtcProps?.dual);
+            if (rtcProps?.dual) {
               console.log('UIkit enabled dual stream');
               await engine.current!.enableDualStreamMode(rtcProps.dual);
               // await engine.current.setRemoteSubscribeFallbackOption(1);
@@ -312,12 +323,14 @@ const Create = ({
 
         engine.current.addListener('UserJoined', async (...args) => {
           // preventing STT pusher bot in renderlist
+          //@ts-ignore
           if (args[0] === 111111) {
             return;
           }
           //Get current peer IDs
           dispatch({
             type: 'UserJoined',
+            //@ts-ignore
             value: args,
           });
         });
@@ -326,6 +339,7 @@ const Create = ({
           //If user leaves
           dispatch({
             type: 'UserOffline',
+            //@ts-ignore
             value: args,
           });
         });
@@ -333,6 +347,7 @@ const Create = ({
         engine.current.addListener('RemoteAudioStateChanged', (...args) => {
           dispatch({
             type: 'RemoteAudioStateChanged',
+            //@ts-ignore
             value: args,
           });
         });
@@ -344,6 +359,7 @@ const Create = ({
         engine.current.addListener('RemoteVideoStateChanged', (...args) => {
           dispatch({
             type: 'RemoteVideoStateChanged',
+            //@ts-ignore
             value: args,
           });
         });

package/template/agora-rn-uikit/src/Rtc/Join.tsx

@@ -48,6 +48,7 @@ const Join: React.FC<{
         rtcProps.encryption.key &&
         rtcProps.encryption.mode
       ) {
+        console.log('using channel encryption', rtcProps.encryption);
         await engine.enableEncryption(true, {
           encryptionKey: rtcProps.encryption.key,
           encryptionMode: rtcProps.encryption.mode,
@@ -108,6 +109,7 @@ const Join: React.FC<{
           await leave();
           await join();
         }
+        console.log('Attempted join: ', rtcProps.channel);
       } else {
         console.log('In precall - waiting to join');
       }