agora-appbuilder-core 4.0.0 → 4.0.2

package/template/_prettierrc.js

@@ -10,9 +10,9 @@
 *********************************************
 */
 module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
   bracketSpacing: false,
-  jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
-  endOfLine:"auto"
 };

package/template/agora-rn-uikit/.eslintrc.js

@@ -3,4 +3,9 @@ module.exports = {
   extends: '@react-native-community',
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
+  "rules": {
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["error"]
+  },
+
 };

package/template/agora-rn-uikit/package.json

@@ -22,24 +22,24 @@
     "url": "https://github.com/AgoraIO-Community/ReactNative-UIKit/issues"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
-    "react-native": "^0.61.5",
-    "react-native-agora": "^3.0.1-rc.4"
+    "react": "18.2.0",
+    "react-native": "0.72.4",
+    "react-native-agora": "4.2.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@babel/runtime": "^7.6.2",
+    "@babel/core": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
     "@react-native-community/eslint-config": "^1.0.0",
     "@types/jest": "^24.0.24",
-    "@types/react-native": "^0.62.0",
-    "@types/react-test-renderer": "16.9.2",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
-    "babel-jest": "^24.9.0",
-    "eslint": "^6.5.1",
-    "jest": "^24.9.0",
-    "metro-react-native-babel-preset": "^0.58.0",
-    "react-test-renderer": "16.11.0",
+    "@types/react-native": "0.67.6",
+    "@types/react-test-renderer": "18.0.0",
+    "@typescript-eslint/eslint-plugin": "6.4.0",
+    "@typescript-eslint/parser": "6.4.0",
+    "babel-jest": "^29.2.1",
+    "eslint": "^8.19.0",
+    "jest": "^29.2.1",
+    "metro-react-native-babel-preset": "0.76.8",
+    "react-test-renderer": "18.2.0",
     "prettier": "^2.0.4",
     "typescript": "^3.8.3"
   },

package/template/agora-rn-uikit/src/AgoraUIKit.tsx

@@ -3,7 +3,7 @@ import {ScrollView, View} from 'react-native';
 import RtcConfigure from './RtcConfigure';
 import MaxVideoView from './Views/MaxVideoView';
 import MinVideoView from './Views/MinVideoView';
-import {RenderConsumer} from './Contexts/RenderContext';
+import {ContentConsumer} from './Contexts/ContentContext';
 import {PropsProvider, PropsInterface} from './Contexts/PropsContext';
 
 import styles from './Style';
@@ -16,12 +16,12 @@ const AgoraUIKit: React.FC<PropsInterface> = (props) => {
     <PropsProvider value={props}>
       <View style={{backgroundColor: '#000', flex: 1}}>
         <RtcConfigure>
-          <RenderConsumer>
-            {({renderList, activeUids}) => {
+          <ContentConsumer>
+            {({defaultContent, activeUids}) => {
               const [maxUid, ...minUids] = activeUids;
               return (
                 <>
-                  <MaxVideoView user={renderList[maxUid]} key={maxUid} />
+                  <MaxVideoView user={defaultContent[maxUid]} key={maxUid} />
                   <ScrollView
                     showsHorizontalScrollIndicator={false}
                     horizontal={true}
@@ -29,7 +29,7 @@ const AgoraUIKit: React.FC<PropsInterface> = (props) => {
                     {minUids.map((minUid) => (
                       <MinVideoView
                         showOverlay
-                        user={renderList[minUid]}
+                        user={defaultContent[minUid]}
                         key={minUid}
                       />
                     ))}
@@ -37,7 +37,7 @@ const AgoraUIKit: React.FC<PropsInterface> = (props) => {
                 </>
               );
             }}
-          </RenderConsumer>
+          </ContentConsumer>
           <LocalControls />
         </RtcConfigure>
       </View>

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import {ContentStateInterface} from './RtcContext';
+
+const ContentContext = React.createContext<ContentStateInterface>(
+  {} as ContentStateInterface,
+);
+
+export const ContentProvider = ContentContext.Provider;
+export const ContentConsumer = ContentContext.Consumer;
+export default ContentContext;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import {CallbacksInterface} from './PropsContext';
+
+export type DispatchType = <
+  T extends keyof CallbacksInterface,
+  V extends Parameters<CallbacksInterface[T]>,
+>(action: {
+  type: T;
+  value: V;
+}) => void;
+
+export interface DispatchContextInterface {
+  dispatch: DispatchType;
+}
+
+const DispatchContext = React.createContext<DispatchContextInterface>(
+  {} as DispatchContextInterface,
+);
+
+export const DispatchProvider = DispatchContext.Provider;
+export const DispatchConsumer = DispatchContext.Consumer;
+export default DispatchContext;

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

@@ -1,10 +1,10 @@
 import React, {useContext, createContext} from 'react';
-import RenderContext from './RenderContext';
-import {RenderInterface} from './PropsContext';
+import ContentContext from './ContentContext';
+import {ContentInterface} from './PropsContext';
 import {UidType} from './RtcContext';
 
-export const LocalContext = createContext<RenderInterface>(
-  {} as RenderInterface,
+export const LocalContext = createContext<ContentInterface>(
+  {} as ContentInterface,
 );
 export const LocalProvider = LocalContext.Provider;
 export const LocalConsumer = LocalContext.Consumer;
@@ -15,12 +15,12 @@ interface LocalUserContextInterface {
 }
 
 const LocalUserContext: React.FC<LocalUserContextInterface> = (props) => {
-  const {renderList} = useContext(RenderContext);
+  const {defaultContent} = useContext(ContentContext);
   if (!props?.localUid) {
     console.error('Error: local user id is empty');
     return null;
   }
-  let localUser: RenderInterface = renderList[props?.localUid];
+  let localUser: ContentInterface = defaultContent[props?.localUid];
   if (!localUser) {
     console.error("Error: we couldn't find the local user data");
     return null;

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

@@ -1,26 +1,44 @@
 import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
-import {RtcEngineEvents} from 'react-native-agora/lib/typescript/src/common/RtcEvents';
+import {IRtcEngineEventHandler} from 'react-native-agora';
 import {EncryptionMode} from 'react-native-agora';
 import {VideoProfile} from '../Utils/quality';
 import {UidType} from './RtcContext';
 
 /* User role for live streaming mode */
-export enum ClientRole {
-  /* 1: A host can both send and receive streams. */
-  Broadcaster = 1,
-  /* 2: The default role. An audience can only receive streams. */
-  Audience = 2,
+export enum ClientRoleType {
+  /**
+   * 1: Host. A host can both send and receive streams.
+   */
+  ClientRoleBroadcaster = 1,
+  /**
+   * 2: (Default) Audience. An audience member can only receive streams.
+   */
+  ClientRoleAudience = 2,
 }
 
 /* Mode for RTC (Live or Broadcast) */
-export enum ChannelProfile {
-  /** 0: (Default) The Communication profile.
-   *  Use this profile in one-on-one calls or group calls, where all users can talk freely. */
-  Communication = 0,
-  /**  1: The Live-Broadcast profile.
-   *   Users in a live-broadcast channel have a role as either host or audience. A host can both send and receive streams; an audience can only receive streams. */
-  LiveBroadcasting = 1,
+export enum ChannelProfileType {
+  /**
+   * 0: Communication. Use this profile when there are only two users in the channel.
+   */
+  ChannelProfileCommunication = 0,
+  /**
+   * 1: Live streaming. Live streaming. Use this profile when there are more than two users in the channel.
+   */
+  ChannelProfileLiveBroadcasting = 1,
+  /**
+   * 2: Gaming. This profile is deprecated.
+   */
+  ChannelProfileGame = 2,
+  /**
+   * Cloud gaming. The scenario is optimized for latency. Use this profile if the use case requires frequent interactions between users.
+   */
+  ChannelProfileCloudGaming = 3,
+  /**
+   * @ignore
+   */
+  ChannelProfileCommunication1v1 = 4,
 }
 
 // disabled is intentionally kept as the 1st item in the enum.
@@ -45,23 +63,37 @@ export enum PermissionState {
 export const toggleHelper = (state: ToggleState) =>
   state === ToggleState.enabled ? ToggleState.disabled : ToggleState.enabled;
 
-export interface DefaultRenderInterface {
+export interface DefaultContentInterface {
+  //uikit and core
   uid: UidType;
   audio: ToggleState;
   video: ToggleState;
   streamType: 'high' | 'low';
   type: 'rtc';
   permissionStatus?: PermissionState;
+  audioForceDisabled?: boolean;
+  videoForceDisabled?: boolean;
   //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 CustomRenderInterface<T> {
-  type: T extends DefaultRenderInterface['type'] ? never : T;
+export interface CustomContentInterface<T> {
+  type: T extends DefaultContentInterface['type'] ? never : T;
 }
-interface ExtenedRenderInterface extends CustomRenderInterface<string> {
+interface ExtenedContentInterface extends CustomContentInterface<string> {
   [key: string]: any;
 }
-export type RenderInterface = DefaultRenderInterface | ExtenedRenderInterface;
+export type ContentInterface =
+  | DefaultContentInterface
+  | ExtenedContentInterface;
 
 interface remoteBtnStylesInterface {
   muteRemoteAudio?: StyleProp<ViewStyle>;
@@ -104,14 +136,12 @@ export interface RtcPropsInterface {
   dual?: boolean | null;
   profile?: VideoProfile;
   initialDualStreamMode?: DualStreamMode;
-  role?: ClientRole /* Set local user's role between audience and host. Use with mode set to livestreaming. (default: host) */;
+  role?: ClientRoleType /* Set local user's role between audience and host. Use with mode set to livestreaming. (default: host) */;
   callActive?: boolean;
   encryption?: {
     key: string;
-    mode:
-      | EncryptionMode.AES128XTS
-      | EncryptionMode.AES256XTS
-      | EncryptionMode.AES128ECB;
+    mode: EncryptionMode.Aes128Gcm2 | EncryptionMode.Aes256Gcm2;
+    salt: number[];
   };
   // commented for v1 release
   // lifecycle?: {
@@ -120,6 +150,14 @@ export interface RtcPropsInterface {
   // };
   geoFencing?: boolean;
   audioRoom?: boolean;
+  activeSpeaker?: boolean;
+  preventJoin?: boolean;
+
+  //core only
+  screenShareUid?: number;
+  screenShareToken?: string;
+  recordingBot?: false;
+  //core only
 }
 
 export interface CallbacksInterface {
@@ -127,24 +165,26 @@ export interface CallbacksInterface {
   FullScreen(): void; //?
   SwitchCamera(): void; //Not in reducer
   UpdateDualStreamMode(mode: DualStreamMode): void;
-  UserJoined: RtcEngineEvents['UserJoined'];
-  UserOffline: RtcEngineEvents['UserOffline'];
+  UserJoined: IRtcEngineEventHandler['onUserJoined'];
+  UserOffline: IRtcEngineEventHandler['onUserOffline'];
   SwapVideo(uid: UidType): void;
   DequeVideo(uid: UidType): void;
-  UserMuteRemoteAudio(uid: UidType, muted: RenderInterface['audio']): void;
-  UserMuteRemoteVideo(uid: UidType, muted: RenderInterface['video']): void;
-  LocalMuteAudio(muted: ToggleState): void;
-  LocalMuteVideo(muted: ToggleState): void;
+  UserMuteRemoteAudio(uid: UidType, muted: ContentInterface['audio']): void;
+  UserMuteRemoteVideo(uid: UidType, muted: ContentInterface['video']): void;
+  LocalMuteAudio(muted: ToggleState, forceDisabled?: boolean): void;
+  LocalMuteVideo(muted: ToggleState, forceDisabled?: boolean): void;
   LocalPermissionState(
-    permissionState: RenderInterface['permissionStatus'],
+    permissionState: ContentInterface['permissionStatus'],
   ): void;
-  RemoteAudioStateChanged: RtcEngineEvents['RemoteAudioStateChanged'];
-  RemoteVideoStateChanged: RtcEngineEvents['RemoteVideoStateChanged'];
-  ActiveSpeakerDetected: RtcEngineEvents['ActiveSpeaker'];
-  JoinChannelSuccess: RtcEngineEvents['JoinChannelSuccess'];
-  UpdateRenderList(uid: UidType, user: Partial<RenderInterface>): void;
+  RemoteAudioStateChanged: IRtcEngineEventHandler['onRemoteAudioStateChanged'];
+  RemoteVideoStateChanged: IRtcEngineEventHandler['onRemoteVideoStateChanged'];
+  JoinChannelSuccess: IRtcEngineEventHandler['onJoinChannelSuccess'];
+  UpdateRenderList(uid: UidType, user: Partial<ContentInterface>): void;
   AddCustomContent(uid: UidType, data: any): void;
+  RemoveCustomContent(uid: UidType): void;
   UserPin(Uid: UidType): void;
+  UserSecondaryPin(Uid: UidType): void;
+  ActiveSpeaker(Uid: UidType): void;
 }
 
 export type CustomCallbacksInterface = CallbacksInterface;
@@ -153,19 +193,20 @@ export interface PropsInterface {
   rtcProps: RtcPropsInterface;
   styleProps?: Partial<StylePropInterface>;
   callbacks?: Partial<CallbacksInterface>;
-  mode?: ChannelProfile;
+  mode?: ChannelProfileType;
 }
 
-const initialValue: PropsInterface = {
+const initialValue: Partial<PropsInterface> = {
   rtcProps: {
     appId: '',
     channel: '',
     geoFencing: true,
     audioRoom: false,
+    preventJoin: true,
   },
 };
 
-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/Contexts/RtcContext.tsx

@@ -1,19 +1,37 @@
 import React from 'react';
 import {CallbacksInterface} from './PropsContext';
-import RtcEngine from 'react-native-agora';
-import type {DualStreamMode, RenderInterface} from './PropsContext';
+import {IRtcEngine} from 'react-native-agora';
+import type {DualStreamMode, ContentInterface} from './PropsContext';
 
 export type UidType = number;
 
-export interface RenderObjects {
-  [key: number]: RenderInterface;
+export interface ContentObjects {
+  [key: number]: ContentInterface;
 }
 
-export interface RenderStateInterface {
-  renderList: RenderObjects;
+type JSXElement = () => JSX.Element;
+export interface CustomContentInferface {
+  uid: UidType;
+  component: boolean | React.ComponentType | JSXElement;
+  props: any;
+  onStage?: boolean; //true by default
+}
+
+export interface CustomContentObjects {
+  [key: number]: CustomContentInferface;
+}
+export interface ContentStateInterface {
+  customContent?: CustomContentObjects;
+  setCustomContent: (
+    uid: CustomContentInferface['uid'],
+    component: CustomContentInferface['component'],
+    props?: CustomContentInferface['props'],
+    onStage?: CustomContentInferface['onStage'],
+  ) => void;
+  defaultContent: ContentObjects;
   activeUids: Array<UidType>;
-  activeSpeaker?: UidType;
   pinnedUid?: UidType;
+  secondaryPinnedUid?: UidType;
   lastJoinedUid?: UidType;
 }
 
@@ -22,19 +40,10 @@ export interface ActionInterface<T extends keyof CallbacksInterface> {
   value: Parameters<CallbacksInterface[T]>;
 }
 
-export type DispatchType = <
-  T extends keyof CallbacksInterface,
-  V extends Parameters<CallbacksInterface[T]>,
->(action: {
-  type: T;
-  value: V;
-}) => void;
-
 export type ActionType<T extends keyof CallbacksInterface> = ActionInterface<T>;
 
 export interface RtcContextInterface {
-  RtcEngine: RtcEngine;
-  dispatch: DispatchType;
+  RtcEngineUnsafe: IRtcEngine;
   setDualStreamMode: React.Dispatch<React.SetStateAction<DualStreamMode>>;
 }
 

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

@@ -9,9 +9,41 @@ export interface IconsInterface {
   'demote-outlined': string;
   'lower-hand': string;
   'raise-hand': string;
+  'white-board': string;
+  ains: string;
+  'vb-blur': string;
+  'vb-color': string;
+  'vb-image': string;
+  vb: string;
+  'turn-off-stt': string;
+  'live-caption-mode': string;
+  done: string;
+  warning: string;
+  'noise-cancellation': string;
+  'whiteboard-new': string;
+  chat_attachment_pdf: string;
+  chat_attachment_image: string;
+  chat_attachment_doc: string;
+  chat_attachment_unknown: string;
 }
 
 const icons: IconsInterface = {
+  'whiteboard-new':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANWSURBVHgB7ZuBcdswDEWhXgdIN1C6QNNO4HSCbBB3gmYDuxPEncC+LuJs4GwgbxBvgAIVXcs2KQKU5MgS3h3PdzIBif8gUIQoAMMwjDQQMad2A8YxJModtQIPLFksMP5HTVUcNKEqkAAzjPMMY8RFj5Q5jA0a9Eoh0BuMCWX0iAX6AMNBm1d+w1igaHhAHQWOaTbD8LQe4hHGAg12ijoKGBNdR08W60AOJ/TDTvk3h+tmm2XZrcbgY+gPLJPYEkphhsIPUOIViMS5o581tSGthFcUPS+g5OwWc5GzgWGJw9ySQFtQ4ntQHFrkMKsUcZgjgVxCzmF4/JJ2dOkl+GdosfdG7Ql7UJ1LmNbnCt8zasu6Dhts4dmhKzDhoRCFSwo8FNqKuk4hepGTsMOHQqzcPXWdvEAPwA6XFHhSKqnr2EuBsL7OHCIpeq5VoGfUsVH4zsXj7aNAqK8UMncK/+vOBaIuN24grb+oQ12dmVkqfHvzWp2BWCA6PKG2QH9u4MeFn9iwaodp0ZMr/Bc+B3UGUYGwjBZNTphBIugJ/wji6JGOV22A+oTJFJgQTaij0J4j5KiRATZDFU2oYw5KQo4aGWC5LmsCR6AokSt8JtWZQ86qfVLei714ju3c8VeI80SNk3gO7TGHSyBRFMskvZ96OZoW1YjAcuaRTM0FRp52UUbyW4qQw/YM6k8+RdnyYImVaMLDLCm5ldk2+bkr5LQ9g/gFaNZQfNutFcLk0JCQ8/YMZBfBEbHA5uxv5xxaInSi9gx0FzPHBkAHqM+lNtBfUErZgllAB6jHqzZIvzBNNB3Nki1fRz8FcufiaOIXAb46eOGEmUCHSMabnRr4HNE7peg7/Ca4CNlHyY5Ot4MLIBlvLwR6LyTjHdIWvE4wgSKYQBFMoAgmUAQTKIIJFMEEijBagaQrKJFAOMzPGkVjOhVoG+g3hYHAkeOi5yHQ5bXOOFRs52re4zVFEl1rFmifXBUhVNo9ejt7ulidQLnLdczcV/dT+/ZJs0ATGCcFifO5esCXpHm7/kXqMT2Dv0D8fnrwTCC34foexiXSP3F8m8290zx15Ez+FcKz2lDg6YxTyjc35jOkn0NNqX2hJt7adkFSauZbKPcS/En5wMUwDMMwDMMw4C9ycj0K0Sb6NAAAAABJRU5ErkJggg==',
+  '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,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==',
+  'vb-color':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAvVBMVEUAAAAAAAAAAAAAAABAQEAgICAcHBwaGhogICAeHh4mGiYhISEfHx8eGB4aGh8eGR4cHCAeHiIdHSEbGx8fGx8eGiIeHiEdHSAdGiAdGh8cGh8cGh8cHB4bGyAcHCAdGx8cHB4eGx4dGx0dGx8bGx8cGh8bGh8bGyAdHB8dGx4cGx8cHB8cHB8cHB8cHB4bGx4bGx8cGiAbGx8cGyAcGh8cGh8cGx8cGyAcGyAcGyAcGx8dGx8cGx8cGx////9owITRAAAAPnRSTlMAAQIDBAgJChARFBcZKzIzNzw9QkJERUdhYmNkZWhvcnd5enuCioyer7K0tba3ubq8wcXJy8zOz9DR09bY2WCHnYUAAAABYktHRD5JZADjAAAAuklEQVQoz52R2RKCMAxFiyLu+4KCiiuKAm6oqOT/f0sMbaEwvnAfMpNzm9xpS0heSb3N0XtfduOayDt7oHotSgk+/UAsq8H5DATZFcq7QdhNFI0WgG3Ei/avUUiZFoCgicYI5zVFpyXUGg0TMjqg4fLdwLLuaDz4bp7lo/GMd7MsB41TNmP1J9yro6Gm+bUVXVB2k9S35lX2VIOA0bMkPrrBz7dFo2CwGT39gX2aM8x8rayajn9bSiS/vu5rPfA8hChsAAAAAElFTkSuQmCC',
+  'vb-blur':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABWUlEQVRIieWUP0oDYRDF36gRxMZOUQRbIZBIPICYxsZKm1SxtMoBvIBN0qRJrpDaY6iQwt5CCGiUFGLjv5+Fm2SyZDdfFATJg4VvmDdvZmeGkWYCwB6w7uxd4CAkdiEwx6KkeWd3JD2Hl/jXAOpA3dlVoOHsBlBN4nvMBea06EuyZwFAFshF7xpQc74SUI5x/QwGfCAHZPs+v6YZDVdxOZa/JddzM7sBzpzf8zOadj6AARWgDVwCpakEAhKcMIpPYD8kdrCmwA5QiN5NoOl4R7E4k3TsYgd8oADk+z4/gzcNZ/ASE3waU9yje3v+u6SPsb+TBGAb6LkW3QGrIbHB0wY29N2qV0ktM+v9OEH/rphZBShKOpW0EqN1JdXM7Nrz41qp5zqq+kLSUgKlCGylaaQCOGQy8mkak67praS0XnckPUxb+AiAzejWtIEucA9cAefA2q/E/wW+AK4bGrj694GPAAAAAElFTkSuQmCC',
+  ains: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAACVBMVEUAAAD///////9zeKVjAAAAA3RSTlMAZr+SD6biAAAAAWJLR0QB/wIt3gAAADVJREFUCNdjYEADjA5giqkBk2J0agRJMjU1NaBTjE5NTUBJIAfEhVJQQawaYIZhtQjmCCQAAMpYF99YsyCnAAAAAElFTkSuQmCC',
+  'white-board':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABeElEQVRIie3Uz4tNcRjH8c/XlRgjkiKzUNyr/EjK1n/g/5C/wI8F+ROklNjMjZKysrDT2GuahcjCxqCIJMKUppfFPeo6fWfuGZrdfDbn9Dzf8/48z3POeZINTVBpB7Avybkkp5IsJ3me5GYp5c1/u+EQPuMXnuEplvAVJ1d4poddXQ0OYojjY7EZvMewcn6AV1jG5X/t6gA+4E4ld8vfurQW8F5cw098xNGxXK+5bsHDMYMvXcC7G/D35l0MsX8sP8BLnK6YPJgEP4x3DXgW/VZ+gLcN7FvL5CqmJhncbcZxpJIbh2ubrKRNlVhJMt2GJ5lLMtM6O53kwqpVt0B9vMYL7Fil8j+amziWisl27FkXeMuoExw71xN+Ap9wD1u7wvtdx4JtuGi0Kq50Nbi+1pkbLcZHtVztM+1VYk+SnCml/GiBp3A+ybEkC107uDGpcpzFvNGPxmhVVLvbXInNJlls7peS3G5X3mgxyeMk90sp852q31BNvwGhl1TXx/9xfQAAAABJRU5ErkJggg==',
   profile:
     'data:image/png;base64,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',
   'no-mic':
@@ -32,6 +64,19 @@ const icons: IconsInterface = {
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADvSURBVHgB5ZRREcIwDIZbB5MQCZOABBxQCUMBSJgEHCBhczAJlTAJITmyo1dW2vTKC/x3ubVZky9JbzPmr4SInmySdcemCR7I7nFQmAhFAcxrAE7ilyBhJ75pBxCu+VxfC3FbpR8Ai2zzI5OEq4wAxAcZgJctmBJxuzFE/GsTQAqy+ZoAJPAggblxVQMAX/LRuHxrwFsnQWIsBtChkcwlACj30icgkEveR9VecV8pCJR0cMMyMeQYQfIAJYR1khj1z08NUUsJGUyNlJCLqVEhZNqDWAXE0QMSr2dr7cyF0Jrv40z70XxD+Px2nPkZPQCoHCglmaLpAgAAAABJRU5ErkJggg==',
   'raise-hand':
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADxSURBVHgB5ZTtEYIwDIYD5391gzqBjIAbOIojsIFuoBs4AmyAG+AIblATDSdW+pFSf3g+d+81V0jeNrQA/BVa644EKcGCNapFFfqFQi1IvvxZgEfJ43wwR3HN8cqVnI9N8uoKRx6tXLGc2HbQUjKaLGEiuWVe8ejtcaxBMpIYYCvPqP1XDOjI4rBF7SRJPeUgri2x6oOxWpnNAMKhe/C43RliPpzaosb3QqzBFbVhgyNI0X6o7xdzEgQ7uIGdBp7/p7Ug52MHJ8fqO5ZJeKv0+/EMRYEETKgExSuIIdAk/AZbTOjE0DdpB0U71EHclp/kDilNkhWhg0nUAAAAAElFTkSuQmCC',
+  'turn-off-stt':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAECSURBVHgBzVQLEcIwDE25CZgDhoNJQMJQADiYA4YCcDAsoIA6GChYHQAKSnJLj1LaXvncwbt710/SlyzpCvAP0FrnxBTHFbIPcMs+JfLMLF2NzI6KQ4OskVdPPMVjhTTZkeDRK2g57YUQCt7ECL6MJEFuQhGxF6ZJqRlS3TqeS2vf1K+HoZ5PUbQvE86Qulrzemo6bN2MPFmQ7TXbWxaskBveq3wHooLss0B2+o4DiYecHwSdS906vjt3zyCDMNbW/AKJiAkW9oKbIPHSSxj+ppcF5549ylRGzoQFMZMJhEEPhUYuY4KmTtRJBXGMkSefQdgLFGrA/6kuKPjsk0fkd7gBEy7vamLyRFEAAAAASUVORK5CYII=',
+  'live-caption-mode':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADUSURBVHgB5VPtDYIwEL0S/ssIHYERGEE3qBPoBuIGMgFsAk6iI7hBfadHUpsirZFfvOSlxx333RKtDmoUrLUax4nS8QDPSik+KXMMBqwoHUb4Qu4Z78i0pwRIZ8X4ndGfkVM4q8GhHdWFZwT90amGu+l836kKW0c+gCWCVfS5tJa+AQ412ItsA/YKvAX0PfvOVfgz8ikDso4tbcEdve9b4egNZqhiA/LV0SI38BsQiJfReP/EVRjanryEmmaw6Ay5gtKZUSw0eA0F7MS4oTQM4rtWPAFxAE4MEjNhpQAAAABJRU5ErkJggg==',
+  done: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABDSURBVHgB1c3BDQAgCAPAjuIIbKQjuJmjOIKjICS+TBPCkyZ99QhAvahqs64M3lZhoxB8KH7Ax/7hgeC9oxlidoQ6ue+PS8aRUCPDAAAAAElFTkSuQmCC',
+  chat_attachment_pdf:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFfSURBVHgB7ZU9S8NQGIVPShBsHRSKCpKY6qKLf0A7CCri4ioOOvozjH9A7Ci4uDjrqAgOFetSByenRImK3xZBB4fEN7lYzYfJzbVLS8+Qm/vm3PPkfpAAzS4pWDCvb004jpY00DQMSBnok8XiWpwvE6pwhNetNvSjcnkVqQAplQT5NyAJ0hBAHEQYIMtyJCTkg6AUVeXyNWyJ2gBh+T4VztKsSY2GFHqZW8Db+HS9X1AGfJnBU6R5V3UYmJkHnu+B6im7vzgHzirA4grw8Q7sbHrWjjsLcYo+ptkc8EThg0PA4wMLHxljwbku4GAPvPp7D0YpsFphIFfuxLMU3knwfC94FT0DN3R/ly1Jvg+YmAKuDOqf0EOH1YUAEi5pvOYBvt/cbbfWfzzHh74hn/0K4hT+4Vg3r9R0Q0w1OkU9vwtRe1CCoGzY28GaFGU0LWuD2Mvgn0mN4ksFRdHRcvoCpYdrkbRsJT8AAAAASUVORK5CYII=',
+  chat_attachment_doc:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE4SURBVHgB7ZWxS8NAFMZ/KRHcrE6CJKR7B8eAFHRzdNXFUQc3cRMaoe4WHXT0P3B0cyhCdzeHRoiKi9gOglPihbPFJjG5nHVQ/CB5uceX93v3DhL47TKSCf/+0SeKnKIX/V4Po4K30mgc5PkqqYxC8ZE1xLvqdJqUApRUEeTbgCLIRAB5EG2AaZqZkJQPTVm2reSb2Ij+Adoa+1TMNSNfBIcS2nUHbNRfR+uatTBWM7kDJ76tL8LhKthVeZ2swbYrDXGM1zPTcn37PEWeMke05MBZF45FoS1XPltVCa7Pw84FDN5Q0pdnkCwQdzzsehi1Add30BIj2r+U3e8tw80TnHZlbH2MT0U/fsjpH07w8CKCYn8p9QVg9nMia0RtNBUSnidzRpbRD4Ijwd5EfSd9Ub5dsyyPP6d3/d5cbIF9MEYAAAAASUVORK5CYII=',
+  chat_attachment_image:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFoSURBVHgB3ZSxSsNQFIb/pEFqLCrtIBQSdPUNHDq4+AaOpYtPYJcOQuIDKHZ0rE/gGzh0E5yk0CmhJkoVWksgaDBNTFssaXKT3MSC2B8Scs8953y5/00u8N/FBAOq/qLCdXeTClVFAcNCPqxUzuPy2FCEovk81YF8125LSAVIqSTIrwFJkKUA4iCZARzHESGhPGSUIIpUeUuz6M8AkRa1BjswxjnQaDM3Rq30SpyLXAFt86RcKosc21gY1/NV1NerNKXxANvS0Xs4gHK/j6F26ZthQDjGiIrcA8vsoN89wZelTcc/gKJwiovPmxnGMeGyG8gEeO4ch6zxQ3K2An7UgMsU8LF15kXz6QDB5n4I45oQ+cfpChiY4N8bQPmKmJ/pPxjo13jqd+fjCTBKJMBocivyZcRCjCF6b7P9KayVFmr9IlnU9C5JOrpFWjlwWsEY8VtTNc0zlK15j9ugk/fmTnNPEGSsnL4BS3qBidiHD9wAAAAASUVORK5CYII=',
+  chat_attachment_unknown:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADXSURBVHgB7ZU9DoIwGIZfCBMuuhgSU4SDMHgSjyLeQI7g5mTiCRy4BzVBXWWREawLEWj6J4uGZyF8ffmetDQt8OtY3QK93inqOpB9SLMMlo14FUVbUc7uVRSaN9EK8TlNN9ASaCKTfC2QSQYRiCTGAsdxuJJeDoYQ31fKDbZEo8CY1lFxOJ4oKwXQYEkIPG/evIdk0erZmYFe8zfPshSOjz9ZV1BfoMnEdYXj/Qsnvz3YYwozCraLZp8F3hIlMKRCte/WLF6Q5vmOuddQn0nB2ichITH+jhcl6jxZhl+rzAAAAABJRU5ErkJggg==',
 };
 
 export default icons;

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

@@ -4,6 +4,7 @@ import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 import {LocalContext} from '../../Contexts/LocalUserContext';
+import DispatchContext from '../../Contexts/DispatchContext';
 
 interface LocalAudioMuteProps {
   btnText?: string;
@@ -15,11 +16,13 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
   const {localBtnStyles, remoteBtnStyles} = styleProps || {};
   const {muteLocalAudio} = localBtnStyles || {};
   const {muteRemoteAudio} = remoteBtnStyles || {};
-  const {RtcEngine, dispatch} = useContext(RtcContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   const local = useContext(LocalContext);
 
   return (
     <BtnTemplate
+      //@ts-ignore
       name={local.audio === ToggleState.enabled ? 'mic' : 'micOff'}
       btnText={btnText}
       style={{
@@ -46,7 +49,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
           });
 
           try {
-            await RtcEngine.muteLocalAudioStream(
+            await RtcEngineUnsafe.muteLocalAudioStream(
               localState === ToggleState.enabled,
             );
             // Enable UI