agora-appbuilder-core 2.2.0 → 2.3.0-beta.0

package/template/agora-rn-uikit/.git/HEAD

@@ -1 +1 @@
-ref: refs/heads/ab-dev-auto
+ref: refs/heads/release/fpe-1.0.0

package/template/agora-rn-uikit/.git/config

@@ -6,11 +6,11 @@
 	ignorecase = true
 	precomposeunicode = true
 [remote "origin"]
-	url = https://github.com/AgoraIO-Community/ReactNative-UIKit
+	url = https://github.com/AgoraIO-Community/ReactNative-UIKit.git
 	fetch = +refs/heads/*:refs/remotes/origin/*
 [branch "master"]
 	remote = origin
 	merge = refs/heads/master
-[branch "ab-dev-auto"]
+[branch "release/fpe-1.0.0"]
 	remote = origin
-	merge = refs/heads/ab-dev-auto
+	merge = refs/heads/release/fpe-1.0.0

package/template/agora-rn-uikit/.git/logs/HEAD

@@ -1,2 +1,2 @@
-0000000000000000000000000000000000000000 d3828abad4998b3ae014de717a63d8a20b15762a nitte93 <nitte.tiwari1993@gmail.com> 1657173940 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit
-d3828abad4998b3ae014de717a63d8a20b15762a f27948778f3d89af8ae9f1e8d881682f6103c9be nitte93 <nitte.tiwari1993@gmail.com> 1657173941 +0530	checkout: moving from master to ab-dev-auto
+0000000000000000000000000000000000000000 d3828abad4998b3ae014de717a63d8a20b15762a nitte93 <nitte.tiwari1993@gmail.com> 1659067879 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit.git
+d3828abad4998b3ae014de717a63d8a20b15762a 514391c2e272917783a71042cd1e561f665cef27 nitte93 <nitte.tiwari1993@gmail.com> 1659067879 +0530	checkout: moving from master to release/fpe-1.0.0

package/template/agora-rn-uikit/.git/logs/refs/heads/master

@@ -1 +1 @@
-0000000000000000000000000000000000000000 d3828abad4998b3ae014de717a63d8a20b15762a nitte93 <nitte.tiwari1993@gmail.com> 1657173940 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit
+0000000000000000000000000000000000000000 d3828abad4998b3ae014de717a63d8a20b15762a nitte93 <nitte.tiwari1993@gmail.com> 1659067879 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit.git

package/template/agora-rn-uikit/.git/logs/refs/heads/release/fpe-1.0.0

@@ -0,0 +1 @@
+0000000000000000000000000000000000000000 514391c2e272917783a71042cd1e561f665cef27 nitte93 <nitte.tiwari1993@gmail.com> 1659067879 +0530	branch: Created from refs/remotes/origin/release/fpe-1.0.0

package/template/agora-rn-uikit/.git/logs/refs/remotes/origin/HEAD

@@ -1 +1 @@
-0000000000000000000000000000000000000000 d3828abad4998b3ae014de717a63d8a20b15762a nitte93 <nitte.tiwari1993@gmail.com> 1657173940 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit
+0000000000000000000000000000000000000000 d3828abad4998b3ae014de717a63d8a20b15762a nitte93 <nitte.tiwari1993@gmail.com> 1659067879 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit.git

package/template/agora-rn-uikit/.git/packed-refs

@@ -8,16 +8,20 @@ b2020fb3e8c0b39d1d39dfcf019849914bca467f refs/remotes/origin/bugfix/togglerole-s
 5d4f38ae0a89b20275e2497a4e8f43b0ca2830e4 refs/remotes/origin/dev
 4ec093e51924049e37d247d867a5482a9376a8cf refs/remotes/origin/docs
 002960cf34f06ffd3e905e6de9865460f02bd910 refs/remotes/origin/feat/icon-tint
+a714e26150caf0ecc30661c59bfa70df1c014981 refs/remotes/origin/feature/audio_room
 82207f40106655312beafed4cfa790ac7c0f5471 refs/remotes/origin/feature/custom_layout
 ce7c971ae62c8fd92d180fa2fb7e5600b4a0a300 refs/remotes/origin/feature/fpe-internationlization
-55b1e6f710a1fc38b49480a8cc6cd374264486cf refs/remotes/origin/feature/fpe_changes
+dd04b6f873dae0d1290ccfd8bde9fe79bcaaaaa9 refs/remotes/origin/feature/fpe_changes
 ce7c971ae62c8fd92d180fa2fb7e5600b4a0a300 refs/remotes/origin/feature/life_cycle_events
 7c60e844f617d9c0faf6aa968fdf16b16d0e59ce refs/remotes/origin/feature/ui-kit/raise-hand
+d51519724e4c8ee234aaf1f0cf97fae72eafc5fa refs/remotes/origin/fpe_userlist_migration
+fd321c3fb732a0644dac707cf3f7866656e78b99 refs/remotes/origin/fpe_v1
 2a6955df4af514b6a8d83ce9423a97594ac3789b refs/remotes/origin/geo_fencing_config
 d3828abad4998b3ae014de717a63d8a20b15762a refs/remotes/origin/master
 b8c591fa4ece61d69d49d2d40120664803bff25b refs/remotes/origin/merge-refactor
 2295420e38a5ab0fe094a36855ad8d360bd4f7fd refs/remotes/origin/merge-refactor-master
 01ad019ae514b6502b64a30b357a20af49b8c8a5 refs/remotes/origin/refactor
+514391c2e272917783a71042cd1e561f665cef27 refs/remotes/origin/release/fpe-1.0.0
 612364439bef5545d47070e9fc33c1fd14c30a76 refs/remotes/origin/release/uikit/blocker-fixes
 ac8929fda04db3663a7c1eb9c71ca6a97728f0eb refs/remotes/origin/v2-legacy
 d772da16c7f1299a7fc8427098aa1a63b9a79081 refs/remotes/origin/video-placeholder

package/template/agora-rn-uikit/.git/refs/heads/release/fpe-1.0.0

@@ -0,0 +1 @@
+514391c2e272917783a71042cd1e561f665cef27

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

@@ -3,8 +3,7 @@ import {ScrollView, View} from 'react-native';
 import RtcConfigure from './RtcConfigure';
 import MaxVideoView from './Views/MaxVideoView';
 import MinVideoView from './Views/MinVideoView';
-import {MinUidConsumer} from './Contexts/MinUidContext';
-import {MaxUidConsumer} from './Contexts/MaxUidContext';
+import {RenderConsumer} from './Contexts/RenderContext';
 import {PropsProvider, PropsInterface} from './Contexts/PropsContext';
 
 import styles from './Style';
@@ -17,24 +16,28 @@ const AgoraUIKit: React.FC<PropsInterface> = (props) => {
     <PropsProvider value={props}>
       <View style={{backgroundColor: '#000', flex: 1}}>
         <RtcConfigure>
-          <MaxUidConsumer>
-            {(maxUsers) => (
-              <MaxVideoView user={maxUsers[0]} key={maxUsers[0].uid} />
-            )}
-          </MaxUidConsumer>
-
-          <ScrollView
-            showsHorizontalScrollIndicator={false}
-            horizontal={true}
-            style={styles.minContainer}>
-            <MinUidConsumer>
-              {(minUsers) =>
-                minUsers.map((user) => (
-                  <MinVideoView showOverlay user={user} key={user.uid} />
-                ))
-              }
-            </MinUidConsumer>
-          </ScrollView>
+          <RenderConsumer>
+            {({renderList, renderPosition}) => {
+              const [maxUid, ...minUids] = renderPosition;
+              return (
+                <>
+                  <MaxVideoView user={renderList[maxUid]} key={maxUid} />
+                  <ScrollView
+                    showsHorizontalScrollIndicator={false}
+                    horizontal={true}
+                    style={styles.minContainer}>
+                    {minUids.map((minUid) => (
+                      <MinVideoView
+                        showOverlay
+                        user={renderList[minUid]}
+                        key={minUid}
+                      />
+                    ))}
+                  </ScrollView>
+                </>
+              );
+            }}
+          </RenderConsumer>
           <LocalControls />
         </RtcConfigure>
       </View>

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

@@ -1,21 +1,26 @@
 import React, {useContext, createContext} from 'react';
-import MaxUidContext from './MaxUidContext';
-import MinUidContext from './MinUidContext';
-import {UidInterface} from './PropsContext';
+import RenderContext from './RenderContext';
+import {RenderInterface} from './PropsContext';
+import {UidType} from './RtcContext';
 
-export const LocalContext = createContext<UidInterface>({} as UidInterface);
+export const LocalContext = createContext<RenderInterface>(
+  {} as RenderInterface,
+);
 export const LocalProvider = LocalContext.Provider;
 export const LocalConsumer = LocalContext.Consumer;
 
 interface LocalUserContextInterface {
   children: React.ReactNode;
+  localUid: UidType;
 }
 
 const LocalUserContext: React.FC<LocalUserContextInterface> = (props) => {
-  const max = useContext(MaxUidContext);
-  const min = useContext(MinUidContext);
-  // if(min && min[0] && max )
-  let localUser: UidInterface = max[0].uid === 'local' ? max[0] : min[0];
+  const {renderList} = useContext(RenderContext);
+  let localUser: RenderInterface = renderList[props?.localUid];
+  if (!localUser) {
+    console.error("Error: we couldn't find the local user data");
+    return null;
+  }
   return (
     <LocalContext.Provider value={localUser}>
       {props.children}

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

@@ -3,6 +3,7 @@ import {StyleProp, ViewStyle} from 'react-native';
 import {RtcEngineEvents} from 'react-native-agora/lib/typescript/src/common/RtcEvents';
 import {EncryptionMode} from 'react-native-agora';
 import {VideoProfile} from '../Utils/quality';
+import {UidType} from './RtcContext';
 
 /* User role for live streaming mode */
 export enum ClientRole {
@@ -34,13 +35,20 @@ export enum ToggleState {
 export const toggleHelper = (state: ToggleState) =>
   state === ToggleState.enabled ? ToggleState.disabled : ToggleState.enabled;
 
-export interface UidInterface {
-  // TODO: refactor local to 0 and remove string.
-  uid: number | string;
+export interface DefaultRenderInterface {
+  uid: UidType;
   audio: ToggleState;
   video: ToggleState;
   streamType: 'high' | 'low';
+  type: 'rtc';
 }
+export interface CustomRenderInterface<T> {
+  type: T extends DefaultRenderInterface['type'] ? never : T;
+}
+interface ExtenedRenderInterface extends CustomRenderInterface<string> {
+  [key: string]: any;
+}
+export type RenderInterface = DefaultRenderInterface | ExtenedRenderInterface;
 
 interface remoteBtnStylesInterface {
   muteRemoteAudio?: StyleProp<ViewStyle>;
@@ -78,7 +86,7 @@ export enum DualStreamMode {
 export interface RtcPropsInterface {
   appId: string;
   channel: string;
-  uid?: number;
+  uid?: UidType;
   token?: string | null;
   dual?: boolean | null;
   profile?: VideoProfile;
@@ -92,7 +100,12 @@ export interface RtcPropsInterface {
       | EncryptionMode.AES256XTS
       | EncryptionMode.AES128ECB;
   };
-  geoFencing?: boolean
+  // commented for v1 release
+  // lifecycle?: {
+  //   useBeforeJoin?: () => () => Promise<void>;
+  //   useBeforeCreate?: () => () => Promise<void>;
+  // };
+  geoFencing?: boolean;
 }
 
 export interface CallbacksInterface {
@@ -102,14 +115,17 @@ export interface CallbacksInterface {
   UpdateDualStreamMode(mode: DualStreamMode): void;
   UserJoined: RtcEngineEvents['UserJoined'];
   UserOffline: RtcEngineEvents['UserOffline'];
-  SwapVideo(user: UidInterface): void;
-  UserMuteRemoteAudio(user: UidInterface, muted: UidInterface['audio']): void;
-  UserMuteRemoteVideo(user: UidInterface, muted: UidInterface['video']): void;
+  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;
   RemoteAudioStateChanged: RtcEngineEvents['RemoteAudioStateChanged'];
   RemoteVideoStateChanged: RtcEngineEvents['RemoteVideoStateChanged'];
   JoinChannelSuccess: RtcEngineEvents['JoinChannelSuccess'];
+  UpdateRenderList(uid: UidType, user: Partial<RenderInterface>): void;
+  AddCustomContent(uid: UidType, data: any): void;
 }
 
 export type CustomCallbacksInterface = CallbacksInterface;
@@ -125,7 +141,7 @@ const initialValue: PropsInterface = {
   rtcProps: {
     appId: '',
     channel: '',
-    geoFencing: true
+    geoFencing: true,
   },
 };
 

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import {RenderStateInterface} from './RtcContext';
+
+const RenderContext = React.createContext<RenderStateInterface>(
+  {} as RenderStateInterface,
+);
+
+export const RenderProvider = RenderContext.Provider;
+export const RenderConsumer = RenderContext.Consumer;
+export default RenderContext;

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

@@ -1,11 +1,17 @@
-import React, {Dispatch} from 'react';
+import React from 'react';
 import {CallbacksInterface} from './PropsContext';
 import RtcEngine from 'react-native-agora';
-import type {DualStreamMode, UidInterface} from './PropsContext';
+import type {DualStreamMode, RenderInterface} from './PropsContext';
 
-export interface UidStateInterface {
-  min: Array<UidInterface>;
-  max: Array<UidInterface>;
+export type UidType = number;
+
+export interface RenderObjectInterface {
+  [key: number]: RenderInterface;
+}
+
+export interface RenderStateInterface {
+  renderList: RenderObjectInterface;
+  renderPosition: Array<UidType>;
 }
 
 export interface ActionInterface<T extends keyof CallbacksInterface> {

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

@@ -28,7 +28,7 @@ interface BtnTemplateInterfaceWithName extends BtnTemplateBasicInterface {
 interface BtnTemplateInterfaceWithIcon extends BtnTemplateBasicInterface {
   icon?: any;
 }
-type BtnTemplateInterface = Either<
+export type BtnTemplateInterface = Either<
   BtnTemplateInterfaceWithIcon,
   BtnTemplateInterfaceWithName
 >;
@@ -62,7 +62,11 @@ const BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
             tintColor: disabled ? 'grey' : props.color || theme || '#fff',
           }}
           resizeMode={'contain'}
-          source={{uri: props.name ? icons[props.name] : props.icon}}
+          source={
+            props.name && icons[props.name]
+              ? {uri: icons[props.name]}
+              : props.icon
+          }
         />
       </View>
       <Text

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

@@ -49,7 +49,7 @@ const ImageIcon: React.FC<ImageIconInterface> = (props) => {
         props.style as object,
       ]}
       resizeMode={'contain'}
-      source={{uri: props.name ? icons[props.name] : props.icon}}
+      source={props.name && icons[props.name] ? {uri: icons[props.name] } : props.icon}
     />
   );
 };

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

@@ -4,7 +4,11 @@ import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 
-function EndCall() {
+interface EndCallProps{
+  btnText?: string
+}
+
+function EndCall(props?: EndCallProps) {
   const {styleProps} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {endCall} = localBtnStyles || {};
@@ -13,7 +17,7 @@ function EndCall() {
   return (
     <BtnTemplate
       name={'callEnd'}
-      btnText={'Hang Up'}
+      btnText={props?.btnText || 'Hang Up'}
       color='#FD0845'
       style={{...styles.endCall, ...(endCall as object)}}
       onPress={() =>

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

@@ -5,11 +5,11 @@ import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 import {LocalContext} from '../../Contexts/LocalUserContext';
 
-interface Props {
+interface LocalAudioMuteProps {
   btnText?: string;
   variant?: 'outlined' | 'text';
 }
-function LocalAudioMute(props: Props) {
+function LocalAudioMute(props: LocalAudioMuteProps) {
   const {btnText = 'Audio', variant = 'Outlined'} = props;
   const {styleProps} = useContext(PropsContext);
   const {localBtnStyles, remoteBtnStyles} = styleProps || {};

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

@@ -5,12 +5,12 @@ import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 import {LocalContext} from '../../Contexts/LocalUserContext';
 
-interface Props {
+interface LocalVideoMuteProps {
   btnText?: string;
   variant?: 'outlined' | 'text';
 }
 
-function LocalVideoMute(props: Props) {
+function LocalVideoMute(props: LocalVideoMuteProps) {
   const {btnText = 'Video', variant = 'Outlined'} = props;
   const {styleProps} = useContext(PropsContext);
   const {localBtnStyles, remoteBtnStyles} = styleProps || {};

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

@@ -5,7 +5,11 @@ import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 
-function SwitchCamera() {
+interface Props{
+  btnText?: string
+}
+
+function SwitchCamera(props?: Props) {
   const {styleProps, callbacks} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {switchCamera} = localBtnStyles || {};
@@ -15,7 +19,7 @@ function SwitchCamera() {
     <BtnTemplate
       name={'switchCamera'}
       style={{...styles.localBtn, ...(switchCamera as object)}}
-      btnText={'Switch'}
+      btnText={props?.btnText ||'Switch'}
       disabled={local.video === ToggleState.enabled ? false : true}
       onPress={() => {
         RtcEngine.switchCamera();

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

@@ -6,9 +6,10 @@ import LocalAudioMute from './Local/LocalAudioMute';
 import LocalVideoMute from './Local/LocalVideoMute';
 import SwitchCamera from './Local/SwitchCamera';
 import RemoteControls from './RemoteControls';
-import {MaxUidConsumer} from '../Contexts/MaxUidContext';
+import {RenderConsumer} from '../Contexts/RenderContext';
 import PropsContext from '../Contexts/PropsContext';
 import LocalUserContextComponent from '../Contexts/LocalUserContext';
+import useLocalUid from '../Utils/useLocalUid';
 
 interface ControlsPropsInterface {
   showButton?: boolean;
@@ -16,10 +17,11 @@ interface ControlsPropsInterface {
 
 function Controls(props: ControlsPropsInterface) {
   const {styleProps} = useContext(PropsContext);
+  const localUid = useLocalUid();
   const {localBtnContainer} = styleProps || {};
   const showButton = props.showButton !== undefined ? props.showButton : true;
   return (
-    <LocalUserContextComponent>
+    <LocalUserContextComponent localUid={localUid}>
       <View style={{...styles.Controls, ...(localBtnContainer as object)}}>
         <LocalAudioMute />
         <LocalVideoMute />
@@ -27,13 +29,16 @@ function Controls(props: ControlsPropsInterface) {
         <EndCall />
       </View>
       {showButton ? (
-        <MaxUidConsumer>
-          {(users) => (
+        <RenderConsumer>
+          {({renderList, renderPosition}) => (
             <View style={{...styles.Controls, top: styles.Controls.top - 100}}>
-              <RemoteControls user={users[0]} showRemoteSwap={false} />
+              <RemoteControls
+                user={renderList[renderPosition[0]]}
+                showRemoteSwap={false}
+              />
             </View>
           )}
-        </MaxUidConsumer>
+        </RenderConsumer>
       ) : (
         <></>
       )}

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

@@ -1,20 +1,24 @@
 import React, {useContext} from 'react';
-import RtcContext from '../../Contexts/RtcContext';
+import RtcContext, {UidType} from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
-import PropsContext, {ToggleState, UidInterface} from '../../Contexts/PropsContext';
+import PropsContext, {
+  ToggleState,
+  RenderInterface,
+} from '../../Contexts/PropsContext';
+import useLocalUid from '../../Utils/useLocalUid';
 
 interface RemoteAudioMuteInterface {
-  user: UidInterface;
+  user: RenderInterface;
 }
 
 const RemoteAudioMute: React.FC<RemoteAudioMuteInterface> = (props) => {
-  const {RtcEngine, dispatch} = useContext(RtcContext);
+  const {RtcEngine} = useContext(RtcContext);
   const {styleProps} = useContext(PropsContext);
   const {remoteBtnStyles} = styleProps || {};
   const {muteRemoteAudio} = remoteBtnStyles || {};
-
-  return props.user.uid !== 'local' ? (
+  const localUid = useLocalUid();
+  return props.user.uid !== localUid ? (
     <BtnTemplate
       name={props.user.audio === ToggleState.enabled ? 'mic' : 'micOff'}
       style={{...styles.leftRemoteBtn, ...(muteRemoteAudio as object)}}

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

@@ -1,11 +1,12 @@
 import React, {useContext} from 'react';
-import RtcContext from '../../Contexts/RtcContext';
+import RtcContext, {UidType} from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
-import PropsContext, {UidInterface} from '../../Contexts/PropsContext';
+import PropsContext from '../../Contexts/PropsContext';
+import useLocalUid from '../../Utils/useLocalUid';
 
 interface RemoteSwapInterface {
-  user: UidInterface;
+  uid: UidType;
 }
 
 const RemoteSwap: React.FC<RemoteSwapInterface> = (props) => {
@@ -13,19 +14,19 @@ const RemoteSwap: React.FC<RemoteSwapInterface> = (props) => {
   const {styleProps} = useContext(PropsContext);
   const {remoteBtnStyles} = styleProps || {};
   const {remoteSwap} = remoteBtnStyles || {};
-
+  const localUid = useLocalUid();
   return (
     <BtnTemplate
       name={'remoteSwap'}
       style={
-        props.user.uid !== 'local'
+        props.uid !== localUid
           ? {...styles.rightRemoteBtn, ...(remoteSwap as object)}
           : {}
       }
       onPress={() => {
         dispatch({
           type: 'SwapVideo',
-          value: [props.user],
+          value: [props.uid],
         });
       }}
     />

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

@@ -1,24 +1,25 @@
 import React, {useContext} from 'react';
+import useLocalUid from '../../Utils/useLocalUid';
 import PropsContext, {
   ToggleState,
-  UidInterface,
+  RenderInterface,
 } from '../../Contexts/PropsContext';
 import RtcContext from '../../Contexts/RtcContext';
 import styles from '../../Style';
 import BtnTemplate from '../BtnTemplate';
 
 interface RemoteVideoMuteInterface {
-  user: UidInterface;
+  user: RenderInterface;
   rightButton: boolean;
 }
 
 const RemoteVideoMute: React.FC<RemoteVideoMuteInterface> = (props) => {
-  const {RtcEngine, dispatch} = useContext(RtcContext);
+  const {RtcEngine} = useContext(RtcContext);
   const {styleProps} = useContext(PropsContext);
   const {remoteBtnStyles} = styleProps || {};
   const {muteRemoteVideo} = remoteBtnStyles || {};
-
-  return props.user.uid !== 'local' ? (
+  const localUid = useLocalUid();
+  return props.user.uid !== localUid ? (
     <BtnTemplate
       name={
         props.user.video === ToggleState.enabled ? 'videocam' : 'videocamOff'

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

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import PropsContext, {UidInterface} from '../Contexts/PropsContext';
+import PropsContext, {RenderInterface} from '../Contexts/PropsContext';
 import styles from '../Style';
 import RemoteAudioMute from './Remote/RemoteAudioMute';
 import RemoteSwap from './Remote/RemoteSwap';
@@ -10,7 +10,7 @@ interface RemoteControlsInterface {
   showMuteRemoteVideo?: boolean;
   showMuteRemoteAudio?: boolean;
   showRemoteSwap?: boolean;
-  user: UidInterface;
+  user: RenderInterface;
 }
 
 const RemoteControls: React.FC<RemoteControlsInterface> = (props) => {
@@ -34,7 +34,7 @@ const RemoteControls: React.FC<RemoteControlsInterface> = (props) => {
         <></>
       )}
       {props.showRemoteSwap !== false ? (
-        <RemoteSwap user={props.user} />
+        <RemoteSwap uid={props.user.uid} />
       ) : (
         <></>
       )}

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

@@ -1,20 +1,23 @@
-import {UidInterface} from '../Contexts/PropsContext';
-import {ActionType, UidStateInterface} from '../Contexts/RtcContext';
+import {
+  ActionType,
+  RenderStateInterface,
+  UidType,
+} from '../Contexts/RtcContext';
 
 export default function LocalMuteAudio(
-  state: UidStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'LocalMuteAudio'>,
+  localUid: UidType,
 ) {
-  let stateUpdate = {};
-  const LocalAudioMute = (user: UidInterface) => {
-    if (user.uid === 'local') {
-      user.audio = action.value[0];
-    }
-    return user;
-  };
-  stateUpdate = {
-    min: state.min.map(LocalAudioMute),
-    max: state.max.map(LocalAudioMute),
+  let stateUpdate: RenderStateInterface = {
+    renderList: {
+      ...state.renderList,
+      [localUid]: {
+        ...state.renderList[localUid],
+        audio: action.value[0],
+      },
+    },
+    renderPosition: [...state.renderPosition],
   };
   return stateUpdate;
 }

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

@@ -1,20 +1,23 @@
-import {UidInterface} from '../Contexts/PropsContext';
-import {ActionType, UidStateInterface} from '../Contexts/RtcContext';
+import {
+  ActionType,
+  RenderStateInterface,
+  UidType,
+} from '../Contexts/RtcContext';
 
 export default function LocalMuteVideo(
-  state: UidStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'LocalMuteVideo'>,
+  localUid: UidType,
 ) {
-  let stateUpdate = {};
-  const LocalVideoMute = (user: UidInterface) => {
-    if (user.uid === 'local') {
-      user.video = action.value[0];
-    }
-    return user;
-  };
-  stateUpdate = {
-    min: state.min.map(LocalVideoMute),
-    max: state.max.map(LocalVideoMute),
+  let stateUpdate: RenderStateInterface = {
+    renderList: {
+      ...state.renderList,
+      [localUid]: {
+        ...state.renderList[localUid],
+        video: action.value[0],
+      },
+    },
+    renderPosition: [...state.renderPosition],
   };
   return stateUpdate;
 }