agora-appbuilder-core 4.0.0-api.3 → 4.0.0-api.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-api.3",
+  "version": "4.0.0-api.5",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/customization-api/typeDefinition.ts

@@ -55,8 +55,7 @@ export type layoutComponent = React.ComponentType<{
 export interface layoutItem {
   name: string;
   label: string;
-  //todo: hari change iconName into icon and refactor icon lib
-  iconName: keyof IconsInterface;
+  icon: string;
   component: layoutComponent;
 }
 

package/template/src/atoms/ImageIcon.tsx

@@ -17,7 +17,8 @@ import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
 export interface ImageIconProps {
   tintColor?: string;
-  name: keyof IconsInterface;
+  name?: keyof IconsInterface;
+  icon?: string;
   iconSize?: number;
   iconContainerStyle?: ViewStyle;
   iconBackgroundColor?: string;
@@ -33,6 +34,7 @@ export interface ImageIconProps {
 const ImageIcon = (props: ImageIconProps) => {
   const {
     name,
+    icon = undefined,
     iconSize = 26,
     tintColor,
     base64 = false,
@@ -80,8 +82,16 @@ const ImageIcon = (props: ImageIconProps) => {
             name={name}
             style={{width: iconSize, height: iconSize}}
           />
-        ) : (
+        ) : icon ? (
+          <UIKitImageIcon
+            tintColor={tintColor}
+            icon={icon}
+            style={{width: iconSize, height: iconSize}}
+          />
+        ) : name ? (
           <CustomIcon name={name} color={tintColor} size={iconSize} />
+        ) : (
+          <></>
         )}
       </View>
     </View>

package/template/src/atoms/RecordingInfo.tsx

@@ -21,7 +21,7 @@ export default RecordingInfo;
 const styles = StyleSheet.create({
   recordingView: {
     padding: 12,
-    paddingVertical: isMobileUA() ? 5 : 12,
+    paddingVertical: isMobileUA() ? 10 : 12,
     flexDirection: 'row',
     alignItems: 'center',
     alignContent: 'center',

package/template/src/atoms/ToolbarItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View, ViewProps, ViewStyle, StyleSheet} from 'react-native';
 import {ToolbarPosition, useToolbar} from '../utils/useToolbar';
-import {isWebInternal} from '../utils/common';
+import {isMobileUA, isWebInternal} from '../utils/common';
 
 export interface ToolbarItemProps extends ViewProps {
   style?: ViewStyle;
@@ -13,31 +13,47 @@ const ToolbarItem = (props: ToolbarItemProps) => {
   //isHorizontal false -> left/right bar
   // todo hari - first item shouldnot contain the margin right
   // todo hari - last item shouldnot contain the margin right
-  return (
-    <View
-      {...props}
-      style={[
-        props?.style,
-        // isHorizontal ? {flexDirection: 'column'} : {flexDirection: 'row'},
-        position === ToolbarPosition.left
-          ? toolbarItemStyles.leftBarItemStyle
-          : position === ToolbarPosition.right
-          ? toolbarItemStyles.rightBarItemStyle
-          : position === ToolbarPosition.bottom
-          ? toolbarItemStyles.bottomBarItemStyle
-          : isWebInternal() && position === ToolbarPosition.top
-          ? toolbarItemStyles.topBarItemNonNativeStyle
-          : !isWebInternal() && position === ToolbarPosition.top
-          ? toolbarItemStyles.topBarItemNativeStyle
-          : {},
-      ]}>
-      {props?.children}
-    </View>
-  );
+
+  //action sheet
+  if (isMobileUA() && position === ToolbarPosition.bottom) {
+    return (
+      <View {...props} style={toolbarItemStyles.iconWithText}>
+        {props?.children}
+      </View>
+    );
+  } else {
+    return (
+      <View
+        {...props}
+        style={[
+          props?.style,
+          // isHorizontal ? {flexDirection: 'column'} : {flexDirection: 'row'},
+          position === ToolbarPosition.left
+            ? toolbarItemStyles.leftBarItemStyle
+            : position === ToolbarPosition.right
+            ? toolbarItemStyles.rightBarItemStyle
+            : position === ToolbarPosition.bottom
+            ? toolbarItemStyles.bottomBarItemStyle
+            : isWebInternal() && position === ToolbarPosition.top
+            ? toolbarItemStyles.topBarItemNonNativeStyle
+            : !isWebInternal() && position === ToolbarPosition.top
+            ? toolbarItemStyles.topBarItemNativeStyle
+            : {},
+        ]}>
+        {props?.children}
+      </View>
+    );
+  }
 };
 export default ToolbarItem;
 
 const toolbarItemStyles = StyleSheet.create({
+  iconWithText: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexBasis: '25%',
+    paddingBottom: 24,
+  },
   topBarItemNativeStyle: {},
   topBarItemNonNativeStyle: {
     marginTop: 8,

package/template/src/atoms/ToolbarPreset.tsx

@@ -3,6 +3,9 @@ import Navbar from '../components/Navbar';
 import Controls from '../components/Controls';
 import Leftbar from '../components/Leftbar';
 import Rightbar from '../components/Rightbar';
+import {isMobileUA} from '../utils/common';
+import NavbarMobile from '../components/NavbarMobile';
+import ActionSheet from '../pages/video-call/ActionSheet';
 
 export interface ToolbarCustomItem {
   component: () => JSX.Element;
@@ -25,13 +28,31 @@ const ToolbarPreset = (props: ToolbarPresetProps) => {
     return null;
   }
   if (align === 'left') {
-    return <Leftbar customItems={props?.customItems} />;
+    return (
+      <Leftbar customItems={props?.customItems} includeDefaultItems={true} />
+    );
   } else if (align === 'right') {
-    return <Rightbar customItems={props?.customItems} />;
+    return (
+      <Rightbar customItems={props?.customItems} includeDefaultItems={true} />
+    );
   } else if (align === 'top') {
-    return <Navbar customItems={props?.customItems} />;
+    return isMobileUA() ? (
+      <NavbarMobile
+        customItems={props?.customItems}
+        includeDefaultItems={true}
+      />
+    ) : (
+      <Navbar customItems={props?.customItems} includeDefaultItems={true} />
+    );
   } else if (align === 'bottom') {
-    return <Controls customItems={props?.customItems} />;
+    return isMobileUA() ? (
+      <ActionSheet
+        customItems={props?.customItems}
+        includeDefaultItems={true}
+      />
+    ) : (
+      <Controls customItems={props?.customItems} includeDefaultItems={true} />
+    );
   } else {
     return null;
   }

package/template/src/components/Controls.tsx

@@ -453,9 +453,10 @@ const defaultEndItems: ToolbarCustomItem[] = [];
 
 export interface ControlsProps {
   customItems?: ToolbarCustomItem[];
+  includeDefaultItems?: boolean;
 }
 const Controls = (props: ControlsProps) => {
-  const {customItems = []} = props;
+  const {customItems = [], includeDefaultItems = true} = props;
   const {width} = useWindowDimensions();
 
   const isHidden = (i) => {
@@ -463,17 +464,17 @@ const Controls = (props: ControlsProps) => {
   };
   const customStartItems = customItems
     ?.filter((i) => i?.align === 'start' && !isHidden(i))
-    ?.concat(defaultStartItems)
+    ?.concat(includeDefaultItems ? defaultStartItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const customCenterItems = customItems
     ?.filter((i) => i?.align === 'center' && !isHidden(i))
-    ?.concat(defaultCenterItems)
+    ?.concat(includeDefaultItems ? defaultCenterItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const customEndItems = customItems
     ?.filter((i) => i?.align === 'end' && !isHidden(i))
-    ?.concat(defaultEndItems)
+    ?.concat(includeDefaultItems ? defaultEndItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const renderContent = (

package/template/src/components/Leftbar.tsx

@@ -20,25 +20,26 @@ const defaultEndItems: ToolbarCustomItem[] = [];
 
 export interface LeftbarProps {
   customItems?: ToolbarCustomItem[];
+  includeDefaultItems?: boolean;
 }
 const Leftbar = (props: LeftbarProps) => {
-  const {customItems = []} = props;
+  const {customItems = [], includeDefaultItems = true} = props;
   const isHidden = (i) => {
     return i?.hide === 'yes';
   };
   const customStartItems = customItems
     ?.filter((i) => i?.align === 'start' && !isHidden(i))
-    ?.concat(defaultStartItems)
+    ?.concat(includeDefaultItems ? defaultStartItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const customCenterItems = customItems
     ?.filter((i) => i?.align === 'center' && !isHidden(i))
-    ?.concat(defaultCenterItems)
+    ?.concat(includeDefaultItems ? defaultCenterItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const customEndItems = customItems
     ?.filter((i) => i?.align === 'end' && !isHidden(i))
-    ?.concat(defaultEndItems)
+    ?.concat(includeDefaultItems ? defaultEndItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const renderContent = (

package/template/src/components/Navbar.tsx

@@ -437,11 +437,12 @@ const defaultEndItems: ToolbarCustomItem[] = [
 
 export interface NavbarProps {
   customItems?: ToolbarCustomItem[];
+  includeDefaultItems?: boolean;
 }
 const Navbar = (props: NavbarProps) => {
   //commented for v1 release
   //const recordingLabel = useString('recordingLabel')();
-  const {customItems = []} = props;
+  const {customItems = [], includeDefaultItems = true} = props;
   const {width} = useWindowDimensions();
 
   const isHidden = (i) => {
@@ -450,17 +451,17 @@ const Navbar = (props: NavbarProps) => {
 
   const customStartItems = customItems
     ?.filter((i) => i.align === 'start' && !isHidden(i))
-    ?.concat(defaultStartItems)
+    ?.concat(includeDefaultItems ? defaultStartItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const customCenterItems = customItems
     ?.filter((i) => i.align === 'center' && !isHidden(i))
-    ?.concat(defaultCenterItems)
+    ?.concat(includeDefaultItems ? defaultCenterItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const customEndItems = customItems
     ?.filter((i) => i.align === 'end' && !isHidden(i))
-    ?.concat(defaultEndItems)
+    ?.concat(includeDefaultItems ? defaultEndItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const renderContent = (

package/template/src/components/NavbarMobile.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+import Toolbar from '../atoms/Toolbar';
+import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
+import {
+  MeetingTitleToolbarItem,
+  ParticipantCountToolbarItem,
+  RecordingStatusToolbarItem,
+} from './Navbar';
+
+export interface NavbarProps {
+  customItems?: ToolbarCustomItem[];
+  includeDefaultItems?: boolean;
+}
+
+const defaultStartItems: ToolbarCustomItem[] = [
+  {
+    align: 'start',
+    component: MeetingTitleToolbarItem,
+    order: 0,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: ParticipantCountToolbarItem,
+    order: 1,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: RecordingStatusToolbarItem,
+    order: 2,
+    hide: 'no',
+  },
+];
+const defaultCenterItems: ToolbarCustomItem[] = [];
+const defaultEndItems: ToolbarCustomItem[] = [];
+const NavbarMobile = (props: NavbarProps) => {
+  const {customItems = [], includeDefaultItems = true} = props;
+  const isHidden = (i) => {
+    return i?.hide === 'yes';
+  };
+
+  const customStartItems = customItems
+    ?.filter((i) => i.align === 'start' && !isHidden(i))
+    ?.concat(includeDefaultItems ? defaultStartItems : [])
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customCenterItems = customItems
+    ?.filter((i) => i.align === 'center' && !isHidden(i))
+    ?.concat(includeDefaultItems ? defaultCenterItems : [])
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customEndItems = customItems
+    ?.filter((i) => i.align === 'end' && !isHidden(i))
+    ?.concat(includeDefaultItems ? defaultEndItems : [])
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const renderContent = (
+    items: ToolbarCustomItem[],
+    type: 'start' | 'center' | 'end',
+  ) => {
+    return items?.map((item, index) => {
+      const ToolbarItem = item?.component;
+      if (ToolbarItem) {
+        return <ToolbarItem key={`top-toolbar-${type}` + index} />;
+      } else {
+        return null;
+      }
+    });
+  };
+  return (
+    <Toolbar>
+      <View style={style.startContent}>
+        {renderContent(customStartItems, 'start')}
+      </View>
+      <View style={style.centerContent}>
+        {renderContent(customCenterItems, 'center')}
+      </View>
+      <View style={style.endContent}>
+        {renderContent(customEndItems, 'end')}
+      </View>
+    </Toolbar>
+  );
+};
+export default NavbarMobile;
+const style = StyleSheet.create({
+  startContent: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  centerContent: {
+    zIndex: 2,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  endContent: {
+    flex: 1,
+    zIndex: 9,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+});

package/template/src/components/Rightbar.tsx

@@ -20,9 +20,10 @@ const defaultEndItems: ToolbarCustomItem[] = [];
 
 export interface RightbarProps {
   customItems?: ToolbarCustomItem[];
+  includeDefaultItems?: boolean;
 }
 const Rightbar = (props: RightbarProps) => {
-  const {customItems = []} = props;
+  const {customItems = [], includeDefaultItems = true} = props;
 
   const isHidden = (i) => {
     return i?.hide === 'yes';
@@ -30,17 +31,17 @@ const Rightbar = (props: RightbarProps) => {
 
   const customStartItems = customItems
     ?.filter((i) => i?.align === 'start' && !isHidden(i))
-    ?.concat(defaultStartItems)
+    ?.concat(includeDefaultItems ? defaultStartItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const customCenterItems = customItems
     ?.filter((i) => i?.align === 'center' && !isHidden(i))
-    ?.concat(defaultCenterItems)
+    ?.concat(includeDefaultItems ? defaultCenterItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const customEndItems = customItems
     ?.filter((i) => i?.align === 'end' && !isHidden(i))
-    ?.concat(defaultEndItems)
+    ?.concat(includeDefaultItems ? defaultEndItems : [])
     ?.sort((a, b) => a?.order - b?.order);
 
   const renderContent = (

package/template/src/pages/video-call/ActionSheet.native.tsx

@@ -26,7 +26,7 @@ import Spacer from '../../atoms/Spacer';
 
 //topbar btn template is used to show icons without label text (as in desktop : bottomBar)
 
-const ActionSheet = () => {
+const ActionSheet = (props) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const {sidePanel, setSidePanel} = useSidePanel();
   const bottomSheetRef = useRef<BottomSheetModal>(null);
@@ -106,6 +106,7 @@ const ActionSheet = () => {
         handleIndicatorStyle={styles.handleIndicatorStyle}>
         <BottomSheetView>
           <ActionSheetContent
+            {...props}
             handleSheetChanges={handleSheetChanges}
             isExpanded={isExpanded}
           />

package/template/src/pages/video-call/ActionSheet.tsx

@@ -16,7 +16,7 @@ import {useToast} from '../../components/useToast';
 import ActionSheetHandle from './ActionSheetHandle';
 import Spacer from '../../atoms/Spacer';
 
-const ActionSheet = () => {
+const ActionSheet = (props) => {
   const {setActionSheetVisible} = useToast();
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [isChatOpen, setIsChatOpen] = React.useState(false);
@@ -152,6 +152,7 @@ const ActionSheet = () => {
           }
           blocking={false}>
           <ActionSheetContent
+            {...props}
             handleSheetChanges={handleSheetChanges}
             isExpanded={isExpanded}
           />

package/template/src/pages/video-call/ActionSheetContent.tsx

@@ -33,7 +33,11 @@ import {useChatNotification} from '../../components/chat-notification/useChatNot
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 import {useSidePanel} from '../../utils/useSidePanel';
 import Settings from '../../components/Settings';
-import {useLocalUserInfo} from 'customization-api';
+import {
+  ToolbarCustomItem,
+  ToolbarItem,
+  useLocalUserInfo,
+} from 'customization-api';
 import LayoutIconButton from '../../subComponents/LayoutIconButton';
 
 //Icon for expanding Action Sheet
@@ -45,7 +49,7 @@ interface ShowMoreIconProps {
 const ShowMoreIcon = (props: ShowMoreIconProps) => {
   const {isExpanded, onPress, showNotification} = props;
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View style={styles.iconContainer}>
         <TouchableOpacity onPress={onPress}>
           <ImageIcon
@@ -55,7 +59,7 @@ const ShowMoreIcon = (props: ShowMoreIconProps) => {
         </TouchableOpacity>
         {showNotification && <View style={styles.notification} />}
       </View>
-    </View>
+    </ToolbarItem>
   );
 };
 
@@ -67,7 +71,7 @@ interface LiveStreamIconProps {
 const LiveStreamIcon = (props: LiveStreamIconProps) => {
   const {isHandRaised, showLabel = $config.ICON_TEXT} = props;
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View style={styles.iconContainer}>
         <LiveStreamControls
           showControls={true}
@@ -80,7 +84,7 @@ const LiveStreamIcon = (props: LiveStreamIconProps) => {
           {isHandRaised ? 'Lower\nHand' : 'Raise\nHand'}
         </Text>
       )}
-    </View>
+    </ToolbarItem>
   );
 };
 
@@ -91,12 +95,12 @@ interface ChatIconProps {
 const ChatIcon = (props: ChatIconProps) => {
   const {showLabel = $config.ICON_TEXT} = props;
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View style={styles.iconContainer}>
         <ChatIconButton isOnActionSheet={true} />
       </View>
       {showLabel && <Text style={styles.iconText}>Chat</Text>}
-    </View>
+    </ToolbarItem>
   );
 };
 
@@ -107,13 +111,12 @@ interface ParticipantsIconProps {
 const ParticipantsIcon = (props: ParticipantsIconProps) => {
   const {showNotification} = props;
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View style={styles.iconContainer}>
         <ParticipantsIconButton isOnActionSheet={true} />
       </View>
       {$config.ICON_TEXT && <Text style={styles.iconText}>People</Text>}
-      {/* {showNotification && <View style={styles.notification} />} */}
-    </View>
+    </ToolbarItem>
   );
 };
 
@@ -124,12 +127,12 @@ interface RecordingIconProps {
 const RecordingIcon = (props: RecordingIconProps) => {
   const {showLabel = $config.ICON_TEXT} = props;
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View style={styles.iconContainer}>
         <Recording showLabel={false} isOnActionSheet={true} />
       </View>
       {showLabel && <Text style={styles.iconText}>Record</Text>}
-    </View>
+    </ToolbarItem>
   );
 };
 
@@ -139,7 +142,7 @@ interface SwitchCameraIconProps {
 const SwitchCameraIcon = (props: SwitchCameraIconProps) => {
   const {disabled} = props;
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View style={styles.iconContainer}>
         <LocalSwitchCamera showLabel={false} disabled={disabled} />
       </View>
@@ -166,7 +169,7 @@ const SwitchCameraIcon = (props: SwitchCameraIconProps) => {
           </Text>
         </View>
       )}
-    </View>
+    </ToolbarItem>
   );
 };
 
@@ -176,7 +179,7 @@ interface SettingsIconProps {
 const SettingsIcon = (props: SettingsIconProps) => {
   const {onPress} = props;
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <TouchableOpacity style={styles.iconContainer} onPress={onPress}>
         <ImageIcon
           name={'settings'}
@@ -184,18 +187,18 @@ const SettingsIcon = (props: SettingsIconProps) => {
         />
       </TouchableOpacity>
       {$config.ICON_TEXT && <Text style={styles.iconText}>Settings</Text>}
-    </View>
+    </ToolbarItem>
   );
 };
 
 const ShareIcon = () => {
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View style={styles.iconContainer}>
         <CopyJoinInfo showLabel={false} isOnActionSheet={true} />
       </View>
       {$config.ICON_TEXT && <Text style={styles.iconText}>Invite</Text>}
-    </View>
+    </ToolbarItem>
   );
 };
 
@@ -207,11 +210,11 @@ interface AudioIconProps {
 }
 const AudioIcon = (props: AudioIconProps) => {
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View style={styles.iconContainer}>
         <LocalAudioMute {...props} />
       </View>
-    </View>
+    </ToolbarItem>
   );
 };
 
@@ -223,11 +226,11 @@ interface CamIconProps {
 }
 const CamIcon = (props: CamIconProps) => {
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View style={styles.iconContainer}>
         <LocalVideoMute {...props} />
       </View>
-    </View>
+    </ToolbarItem>
   );
 };
 
@@ -237,7 +240,7 @@ interface EndCallIconProps {
 }
 const EndCallIcon = (props: EndCallIconProps) => {
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View
         style={[
           styles.iconContainer,
@@ -245,7 +248,7 @@ const EndCallIcon = (props: EndCallIconProps) => {
         ]}>
         <LocalEndcall {...props} />
       </View>
-    </View>
+    </ToolbarItem>
   );
 };
 
@@ -255,12 +258,12 @@ interface LayoutIconProps {
 const LayoutIcon = (props: LayoutIconProps) => {
   const {showLabel = $config.ICON_TEXT} = props;
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View style={styles.iconContainer}>
         <LayoutIconButton showLabel={false} />
       </View>
       {showLabel && <Text style={styles.iconText}>Layout</Text>}
-    </View>
+    </ToolbarItem>
   );
 };
 
@@ -293,7 +296,12 @@ export const ActionSheetComponentsArray: ActionSheetComponentsProps = [
 ];
 
 const ActionSheetContent = (props) => {
-  const {handleSheetChanges, isExpanded} = props;
+  const {
+    handleSheetChanges,
+    isExpanded,
+    customItems = [],
+    includeDefaultItems = true,
+  } = props;
   const {onlineUsersCount, localUid} = useContext(ChatContext);
   const layouts = useLayoutsData();
   const {currentLayout} = useLayout();
@@ -327,106 +335,212 @@ const ActionSheetContent = (props) => {
   const isAudioVideoControlsDisabled =
     isAudience && $config.EVENT_MODE && !$config.RAISE_HAND;
   const isVideoDisabled = useLocalUserInfo().video === ToggleState.disabled;
-  return (
-    <View>
-      {/* Row Always Visible */}
-      <View
-        style={[
-          styles.row,
-          {borderBottomWidth: 1, paddingTop: 4, justifyContent: 'center'},
-        ]}>
-        {isAudioVideoControlsDisabled ? null : (
-          <AudioIcon
-            isMobileView={true}
-            isOnActionSheet={true}
-            showLabel={false}
-            disabled={isLiveStream && isAudience && !isBroadCasting}
-          />
-        )}
 
-        {/*For AudioCast Host:Chat ,Attendee:Raise Hand 
+  const defaultItems = [
+    {
+      default: true,
+      order: 0,
+      hide: 'no',
+      align: 'start',
+      component: isAudioVideoControlsDisabled ? null : (
+        <AudioIcon
+          isMobileView={true}
+          isOnActionSheet={true}
+          showLabel={false}
+          disabled={isLiveStream && isAudience && !isBroadCasting}
+        />
+      ),
+    },
+    {
+      default: true,
+      order: 0,
+      hide: 'no',
+      align: 'start',
+      /*For AudioCast Host:Chat ,Attendee:Raise Hand 
           For VoiceChat Host:Chat, Attendee:Chat
-         */}
-
-        {(isAudioCastHost || isVoiceChatHost || isVoiceChatAudience) && (
-          <ChatIcon showLabel={false} />
-        )}
-        {(isAudioCastAudience && isLiveStream && isAudience) ||
+         */
+      component: (isAudioCastHost ||
+        isVoiceChatHost ||
+        isVoiceChatAudience) && <ChatIcon showLabel={false} />,
+    },
+
+    {
+      default: true,
+      order: 0,
+      hide: 'no',
+      align: 'start',
+      component:
+        (isAudioCastAudience && isLiveStream && isAudience) ||
         (isBroadCasting && !isHost) ? (
           $config.RAISE_HAND && isAudioRoom ? (
             <LiveStreamIcon isHandRaised={isHandRaised} showLabel={false} />
           ) : null
-        ) : null}
-
-        {!isAudioRoom &&
-          (isAudioVideoControlsDisabled ? null : (
-            <CamIcon
-              isOnActionSheet={true}
-              isMobileView={true}
-              showLabel={false}
-              disabled={isLiveStream && isAudience && !isBroadCasting}
-            />
-          ))}
-
-        <EndCallIcon showLabel={false} isOnActionSheet={true} />
-
-        <ShowMoreIcon
-          isExpanded={isExpanded}
-          showNotification={
-            (!isExpanded && totalUnreadCount !== 0) ||
-            ($config.EVENT_MODE && isPendingRequestToReview)
-          }
-          onPress={() => handleSheetChanges(isExpanded ? 0 : 1)}
-        />
-      </View>
-
-      {/* Rest Of Controls */}
-      <View style={styles.row}>
-        {/**
-         * In event mode when raise hand feature is active
-         * and audience is promoted to host, the audience can also
-         * demote himself
-         */}
-        {(isLiveStream && isAudience) || (isBroadCasting && !isHost) ? (
+        ) : null,
+    },
+    {
+      default: true,
+      order: 1,
+      hide: 'no',
+      align: 'start',
+      component:
+        !isAudioRoom &&
+        (isAudioVideoControlsDisabled ? null : (
+          <CamIcon
+            isOnActionSheet={true}
+            isMobileView={true}
+            showLabel={false}
+            disabled={isLiveStream && isAudience && !isBroadCasting}
+          />
+        )),
+    },
+    {
+      default: true,
+      order: 2,
+      hide: 'no',
+      align: 'start',
+      component: <EndCallIcon showLabel={false} isOnActionSheet={true} />,
+    },
+    //reset of the controls
+    {
+      default: true,
+      order: 4,
+      hide: 'no',
+      align: 'start',
+      component:
+        (isLiveStream && isAudience) || (isBroadCasting && !isHost) ? (
           $config.RAISE_HAND && !isAudioRoom ? (
             <LiveStreamIcon isHandRaised={isHandRaised} />
           ) : null
-        ) : null}
-
-        {/* Layout view */}
-        <LayoutIcon />
-
-        {/* chat */}
-        {!(isAudioCastHost || isVoiceChatHost || isVoiceChatAudience) && (
-          <ChatIcon />
-        )}
-        {/* participants */}
+        ) : null,
+    },
+    {
+      default: true,
+      order: 5,
+      hide: 'no',
+      align: 'start',
+      component: <LayoutIcon />,
+    },
+    {
+      default: true,
+      order: 6,
+      hide: 'no',
+      align: 'start',
+      component: !(
+        isAudioCastHost ||
+        isVoiceChatHost ||
+        isVoiceChatAudience
+      ) && <ChatIcon />,
+    },
+    {
+      default: true,
+      order: 7,
+      hide: 'no',
+      align: 'start',
+      component: (
         <ParticipantsIcon
           showNotification={$config.EVENT_MODE && isPendingRequestToReview}
         />
-        {/* record */}
-        {isHost && $config.CLOUD_RECORDING ? <RecordingIcon /> : null}
-
-        {/* switch camera */}
-        {!isAudioRoom &&
-          (isAudioVideoControlsDisabled ? null : (
-            <SwitchCameraIcon
-              disabled={
-                (isLiveStream && isAudience && !isBroadCasting) ||
-                isVideoDisabled
-              }
-            />
-          ))}
-
-        {/* settings */}
+      ),
+    },
+    {
+      default: true,
+      order: 8,
+      hide: 'no',
+      align: 'start',
+      component: isHost && $config.CLOUD_RECORDING ? <RecordingIcon /> : null,
+    },
+    {
+      default: true,
+      order: 9,
+      hide: 'no',
+      align: 'start',
+      component:
+        !isAudioRoom &&
+        (isAudioVideoControlsDisabled ? null : (
+          <SwitchCameraIcon
+            disabled={
+              (isLiveStream && isAudience && !isBroadCasting) || isVideoDisabled
+            }
+          />
+        )),
+    },
+    {
+      default: true,
+      order: 10,
+      hide: 'no',
+      align: 'start',
+      component: (
         <SettingsIcon
           onPress={() => {
             setSidePanel(SidePanelType.Settings);
           }}
         />
+      ),
+    },
+    {
+      default: true,
+      order: 11,
+      hide: 'no',
+      align: 'start',
+      component: <ShareIcon />,
+    },
+  ];
+
+  const isHidden = (i) => {
+    return i?.hide === 'yes';
+  };
+  const combinedItems = customItems
+    ?.filter((i) => !isHidden(i))
+    ?.concat(includeDefaultItems ? defaultItems : [])
+    //to filter empty component because of some condition array will have empty component
+    ?.filter((i) => i?.component)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  return (
+    <View>
+      {/* Row Always Visible */}
+      <View
+        style={[
+          styles.row,
+          {borderBottomWidth: 1, paddingTop: 4, justifyContent: 'center'},
+        ]}>
+        {/**If no items more than 4 then render firstrender first 3 items and render show more icon  */}
+        {/**If no items more less or equal to 4 then render n items and don't show more icon  */}
+        {combinedItems
+          ?.slice(0, combinedItems?.length >= 4 ? 3 : 4)
+          ?.map((i) => {
+            const Component = i?.component;
+            if (Component) {
+              return i?.default ? Component : <Component />;
+            } else {
+              return null;
+            }
+          })}
+        {combinedItems && combinedItems?.length >= 4 ? (
+          <ShowMoreIcon
+            isExpanded={isExpanded}
+            showNotification={
+              (!isExpanded && totalUnreadCount !== 0) ||
+              ($config.EVENT_MODE && isPendingRequestToReview)
+            }
+            onPress={() => handleSheetChanges(isExpanded ? 0 : 1)}
+          />
+        ) : (
+          <></>
+        )}
+      </View>
 
-        {/* invite */}
-        <ShareIcon />
+      {/* Rest Of Controls */}
+      <View style={styles.row}>
+        {combinedItems?.length > 3 &&
+          combinedItems?.slice(3, combinedItems?.length)?.map((i) => {
+            const Component = i?.component;
+            if (Component) {
+              return i?.default ? Component : <Component />;
+            } else {
+              return null;
+            }
+          })}
       </View>
     </View>
   );

package/template/src/pages/video-call/DefaultLayouts.ts

@@ -3,18 +3,24 @@ import GridVideo from '../../components/GridVideo';
 import PinnedVideo from '../../components/PinnedVideo';
 import useLayoutsData from './useLayoutsData';
 import {useLayout} from '../../utils/useLayout';
-
+import {isMobileUA} from '../../utils/common';
+const isMobileView = isMobileUA();
 export const DefaultLayouts: layoutItem[] = [
   {
     name: 'grid',
     label: 'Grid',
-    iconName: 'grid',
+    //iconName: 'grid',
+    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFOSURBVHgB7drBTcNAEIXhWVeQEkwJVIDohA6gA2iBigIVhA6cEuhgGGNfd1+kZK1x9H/SyidbT0/ry+6YAQBwt9z9EOs91tFv4xTrZW8ZasHGWJP3Mc3fz56hiHBTPEbr5xzrsZTya0kzDLW3fNmCo/U1xnqzxBmG+nv2att4ssQZqr/Y/IPaRmJ7l6wZBkMTBQkUJFCQQEECBQkUJFCQQEECBQkUJFCQQEECBQkUJFCQ0Croy7bxY4kztAr6tm18WuIMrSPXQzxO1vlGIU46HyxxhuoOWq9Bnm25FunhvH7fMme4yHz94stt5C0cY32su2NXGQAAuDPOAFUzGANUIhwDVLW3nAGqfwxQiQwMUIkMnCgKFCRQkEBBAgUJFCRQkEBBAgUJFCRQkEBBAgUJFCRQkEBBAgNUIgMDVCIDA1QMUF2X4SLOABUAADv0Bxz9l6sMoGOZAAAAAElFTkSuQmCC',
     component: GridVideo,
   },
   {
     name: 'pinned',
     label: 'Pinned',
-    iconName: 'pinned',
+    //iconName: 'pinned',
+    //for mobile view top pinned icon and desktop left pinned icon
+    icon: isMobileView
+      ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFFSURBVHgB7dzhTcJQFEDhWybQDeoIjuAoTqKO4ASOAk6gG9gNZIN6TTUhhvdOAo9Iy/mSF3689JKeFH40lAhJkhZpHMc+1zrX53igP/OaaDjzJVdfa9DV4uTLOlcfR+jSzswxGmg8c8h1myO3+zZXlQMf4sg4M9Hneixt1q6gj2gQaAZX0Ldtjrze+16lI874ZE4+c9cqVGUgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIEn/6eQ3zObCG2YHMhAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEKgF2sTleC9t1AK9xuV4Lm3UfqN4lS9vsfxHw4eu625Km8Ur6OdB+7uYHrxfqiGmcyyqfklnpN+691H5nM7QJtdTTP+4MIQkSYv0BZfkCSDYSwACAAAAAElFTkSuQmCC'
+      : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGCSURBVHgB7drdTYRAFIbhM1SwJWAJVmC2E61AO1BLsCKwgrUDKMEOxkPAS+a7YeCweZ9ksle7OXn3jzBjBgDA3co5X3y9++ryNm6+ns82w9pgra8h1zFMrx99hiSGG/yhtXpGX48ppV8LOkOz9qw8fwRbq6v19WaBZ2jWn2evto8nCzzD6lds+oLaTvzjnaLO0BiKCCQQSCCQQCCBQAKBBAIJBBIIJBBIIJBAIIFAAoEEAgmlQL3t48cCKwX6tn18WWClW64Xf7hZ5R0Fv9P5YOszxL3lumyDXG3eFqlhXF4/tOKPtEf6f4dfbLvfit7Xp817UaMFlywwdjVOgEACgQQCCQQSZKAc9fDSTtT5oNYfOqtzNT36upauhSL8zYc+QBX6OijC4aUIoh+gOhwHqMQM/M0LBBIIJBBIIJBAIIFAAoEEAgkEEggkEEggkEAggUACgYToB6h6O3iG6AeoDp8h+gGqw2cIfYDqNIe4pi2gZUd0C52vj+XTcaoZAAA4lz9x+tmcZ0GmbAAAAABJRU5ErkJggg==',
     component: PinnedVideo,
   },
 ];

package/template/src/pages/video-call/VideoCallMobileView.tsx

@@ -10,9 +10,22 @@ import {useRecording} from '../../subComponents/recording/useRecording';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import ParticipantsCount from '../../atoms/ParticipantsCount';
 import RecordingInfo from '../../atoms/RecordingInfo';
-import {isAndroid, isWebInternal, trimText} from '../../utils/common';
+import {
+  isAndroid,
+  isValidReactComponent,
+  isWebInternal,
+  trimText,
+} from '../../utils/common';
 import {ToggleState, useLocalUid} from '../../../agora-rn-uikit';
-import {useLocalUserInfo, useContent} from 'customization-api';
+import {
+  useLocalUserInfo,
+  useContent,
+  ToolbarCustomItem,
+} from 'customization-api';
+import NavbarMobile, {NavbarProps} from '../../components/NavbarMobile';
+import {useCustomization} from 'customization-implementation';
+import {ToolbarPosition, ToolbarProvider} from '../../utils/useToolbar';
+import {ControlsProps} from 'src/components/Controls';
 
 const VideoCallMobileView = () => {
   const {
@@ -72,9 +85,72 @@ const VideoCallMobileView = () => {
   //   };
   // }, []);
 
+  const {BottombarComponent, BottombarProps, TopbarComponent, TopbarProps} =
+    useCustomization((data) => {
+      let components: {
+        BottombarComponent: React.ComponentType<ControlsProps>;
+        BottombarProps?: ToolbarCustomItem[];
+        TopbarComponent: React.ComponentType<NavbarProps>;
+        TopbarProps?: ToolbarCustomItem[];
+      } = {
+        BottombarComponent: ActionSheet,
+        BottombarProps: [],
+        TopbarComponent: NavbarMobile,
+        TopbarProps: [],
+      };
+      if (
+        data?.components?.videoCall &&
+        typeof data?.components?.videoCall === 'object'
+      ) {
+        if (
+          data?.components?.videoCall.bottomToolBar &&
+          typeof data?.components?.videoCall.bottomToolBar !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall.bottomToolBar)
+        ) {
+          components.BottombarComponent =
+            data?.components?.videoCall.bottomToolBar;
+        }
+        if (
+          data?.components?.videoCall.bottomToolBar &&
+          typeof data?.components?.videoCall.bottomToolBar === 'object' &&
+          data?.components?.videoCall.bottomToolBar.length
+        ) {
+          components.BottombarProps = data?.components?.videoCall.bottomToolBar;
+        }
+
+        if (
+          data?.components?.videoCall.topToolBar &&
+          typeof data?.components?.videoCall.topToolBar !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall.topToolBar)
+        ) {
+          components.TopbarComponent = data?.components?.videoCall.topToolBar;
+        }
+
+        if (
+          data?.components?.videoCall.topToolBar &&
+          typeof data?.components?.videoCall.topToolBar === 'object' &&
+          data?.components?.videoCall.topToolBar.length
+        ) {
+          components.TopbarProps = data?.components?.videoCall.topToolBar;
+        }
+      }
+
+      return components;
+    });
+
   return (
     <View style={styles.container}>
-      <View style={styles.titleBar}>
+      <ToolbarProvider value={{position: ToolbarPosition.top}}>
+        {TopbarProps?.length ? (
+          <TopbarComponent
+            customItems={TopbarProps}
+            includeDefaultItems={false}
+          />
+        ) : (
+          <TopbarComponent />
+        )}
+      </ToolbarProvider>
+      {/* <View style={styles.titleBar}>
         <Text style={styles.title}>{trimText(meetingTitle)}</Text>
         <Spacer size={8} horizontal={false} />
         <View style={styles.countView}>
@@ -97,12 +173,21 @@ const VideoCallMobileView = () => {
             <></>
           )}
         </View>
-      </View>
-      <Spacer size={16} />
+      </View> */}
+      {/* <Spacer size={16} /> */}
       <View style={styles.videoView}>
         <VideoComponent />
       </View>
-      <ActionSheet />
+      <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
+        {BottombarProps?.length ? (
+          <BottombarComponent
+            customItems={BottombarProps}
+            includeDefaultItems={false}
+          />
+        ) : (
+          <BottombarComponent />
+        )}
+      </ToolbarProvider>
     </View>
   );
 };

package/template/src/pages/video-call/VideoCallScreen.tsx

@@ -222,11 +222,25 @@ const VideoCallScreen = () => {
       <VideocallBeforeView />
       <View style={style.fullRow}>
         <ToolbarProvider value={{position: ToolbarPosition.left}}>
-          <LeftbarComponent customItems={LeftbarProps} />
+          {LeftbarProps?.length ? (
+            <LeftbarComponent
+              customItems={LeftbarProps}
+              includeDefaultItems={false}
+            />
+          ) : (
+            <LeftbarComponent />
+          )}
         </ToolbarProvider>
         <View style={style.full}>
           <ToolbarProvider value={{position: ToolbarPosition.top}}>
-            <TopbarComponent customItems={TopbarProps} />
+            {TopbarProps?.length ? (
+              <TopbarComponent
+                customItems={TopbarProps}
+                includeDefaultItems={false}
+              />
+            ) : (
+              <TopbarComponent />
+            )}
           </ToolbarProvider>
           <View
             style={[
@@ -258,12 +272,26 @@ const VideoCallScreen = () => {
             <></>
           ) : (
             <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
-              <BottombarComponent customItems={BottombarProps} />
+              {BottombarProps?.length ? (
+                <BottombarComponent
+                  customItems={BottombarProps}
+                  includeDefaultItems={false}
+                />
+              ) : (
+                <BottombarComponent />
+              )}
             </ToolbarProvider>
           )}
         </View>
         <ToolbarProvider value={{position: ToolbarPosition.right}}>
-          <RightbarComponent customItems={RightbarProps} />
+          {RightbarProps?.length ? (
+            <RightbarComponent
+              customItems={RightbarProps}
+              includeDefaultItems={false}
+            />
+          ) : (
+            <RightbarComponent />
+          )}
         </ToolbarProvider>
       </View>
       <VideocallAfterView />

package/template/src/subComponents/LayoutIconButton.tsx

@@ -67,12 +67,7 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
         textColor: $config.FONT_COLOR,
       },
     };
-    const iconName =
-      layouts[layout]?.iconName === 'pinned' && isMobileView
-        ? 'list-view'
-        : layouts[layout]?.iconName;
-
-    renderContent.push(
+    const iconName = renderContent.push(
       props?.render ? (
         props.render(onPress)
       ) : (
@@ -105,7 +100,7 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
             }}
             key={'defaultLayoutIconWithName'}
             iconProps={{
-              name: iconName,
+              icon: layouts[layout]?.icon,
               tintColor: $config.SECONDARY_ACTION_COLOR,
             }}
             {...iconButtonProps}

package/template/src/subComponents/LayoutIconDropdown.tsx

@@ -80,10 +80,7 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
             padding: 10,
           },
           iconType: 'plain',
-          name:
-            item.iconName === 'pinned' && isMobileView
-              ? 'list-view'
-              : item.iconName,
+          icon: item.icon,
           tintColor: $config.SECONDARY_ACTION_COLOR,
         },
         btnTextProps: {