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

package/package.json

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

package/template/customization-api/sub-components.ts

@@ -53,6 +53,7 @@ export {
 export {default as Toolbar} from '../src/atoms/Toolbar';
 export {default as ToolbarItem} from '../src/atoms/ToolbarItem';
 export {default as ToolbarPreset} from '../src/atoms/ToolbarPreset';
+export {default as ToolbarMenu} from '../src/atoms/ToolbarMenu';
 export type {
   ToolbarCustomItem,
   ToolbarPresetProps,

package/template/customization-api/typeDefinition.ts

@@ -22,6 +22,7 @@ import {IconsInterface} from '../src/atoms/CustomIcon';
 export type {ContentInterface, ContentStateInterface, UidType};
 export type {ChatTextInputProps} from '../src/subComponents/ChatInput';
 import {ChatTextInputProps} from '../src/subComponents/ChatInput';
+import {ToolbarCustomItem} from './sub-components';
 
 export const CUSTOM_ROUTES_PREFIX = '/r/';
 
@@ -59,12 +60,13 @@ export interface layoutItem {
   component: layoutComponent;
 }
 
+export type ToolbarType = React.ComponentType | Array<ToolbarCustomItem>;
 export interface VideoCallInterface extends BeforeAndAfterInterface {
   // commented for v1 release
-  topToolBar?: React.ComponentType;
-  bottomToolBar?: React.ComponentType;
-  leftToolBar?: React.ComponentType;
-  rightToolBar?: React.ComponentType;
+  topToolBar?: ToolbarType;
+  bottomToolBar?: ToolbarType;
+  leftToolBar?: ToolbarType;
+  rightToolBar?: ToolbarType;
   //settingsPanel?: React.ComponentType;
   participantsPanel?: React.ComponentType;
   chat?: ChatCmpInterface;

package/template/src/atoms/ToolbarMenu.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {View, StyleSheet, ViewStyle} from 'react-native';
+import {ToolbarMenuProvider} from '../utils/useMenu';
+
+export interface ToolbarMenuProps {
+  children: React.ReactNode;
+  containerStyle?: ViewStyle;
+}
+const ToolbarMenu = (props: ToolbarMenuProps) => {
+  const {children, containerStyle} = props;
+  if (!children) {
+    return null;
+  }
+  return (
+    <ToolbarMenuProvider>
+      <View style={[ToolbarMenuStyle.containerStyle, containerStyle]}>
+        {children}
+      </View>
+    </ToolbarMenuProvider>
+  );
+};
+export default ToolbarMenu;
+
+const ToolbarMenuStyle = StyleSheet.create({
+  containerStyle: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+});

package/template/src/atoms/ToolbarMenuItem.tsx

@@ -0,0 +1,104 @@
+import React, {useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacityProps,
+  TouchableOpacity,
+  Text,
+} from 'react-native';
+import ThemeConfig from '../theme';
+import ImageIcon from './ImageIcon';
+import {IconButtonProps} from './IconButton';
+import {isWebInternal} from '../utils/common';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+export interface ToolbarMenuItemProps extends IconButtonProps {
+  // disabled?: boolean;
+  // onPress: TouchableOpacityProps['onPress'];
+  // isHovered?: boolean;
+  // menuIcon?: string;
+  // menuText?: string;
+  // menuIconColor?: string;
+}
+const ToolbarMenuItem = (props: ToolbarMenuItemProps) => {
+  return (
+    <PlatformWrapper>
+      {(isHovered: boolean) => (
+        <>
+          <TouchableOpacity
+            disabled={props.disabled}
+            style={[
+              props.disabled ? {opacity: 0.4} : {},
+              isHovered
+                ? {
+                    backgroundColor:
+                      $config.CARD_LAYER_5_COLOR +
+                      hexadecimalTransparency['15%'],
+                  }
+                : {},
+              ToolbarMenuItemStyles.container,
+            ]}
+            onPress={props.onPress}>
+            <View style={ToolbarMenuItemStyles.iconContainer}>
+              <ImageIcon
+                base64={false}
+                iconType="plain"
+                iconSize={20}
+                name={props?.iconProps?.name}
+                tintColor={props?.iconProps?.tintColor}
+              />
+            </View>
+            <Text
+              style={[
+                ToolbarMenuItemStyles.textStyle,
+                props?.btnTextProps?.textStyle,
+                props?.btnTextProps?.textColor
+                  ? {color: props?.btnTextProps?.textColor}
+                  : {},
+              ]}>
+              {props?.btnTextProps?.text}
+            </Text>
+          </TouchableOpacity>
+        </>
+      )}
+    </PlatformWrapper>
+  );
+};
+export default ToolbarMenuItem;
+const PlatformWrapper = ({children}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return isWebInternal() ? (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children(isHovered)}
+    </div>
+  ) : (
+    <>{children(false)}</>
+  );
+};
+const ToolbarMenuItemStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: $config.CARD_LAYER_3_COLOR,
+  },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+    marginVertical: 12,
+    marginLeft: 12,
+  },
+  textStyle: {
+    paddingVertical: 14,
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontSize: ThemeConfig.FontSize.normal,
+    fontWeight: '400',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+  },
+});

package/template/src/components/Controls.tsx

@@ -41,7 +41,7 @@ import {useScreenshare} from '../subComponents/screenshare/useScreenshare';
 import LayoutIconDropdown from '../subComponents/LayoutIconDropdown';
 import Toolbar from '../atoms/Toolbar';
 import ToolbarItem from '../atoms/ToolbarItem';
-import {ToolbarCustomItem} from 'src/atoms/ToolbarPreset';
+import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
 
 const MoreButton = () => {
   const {rtcProps} = useContext(PropsContext);

package/template/src/components/Navbar.tsx

@@ -61,6 +61,8 @@ import RecordingInfo from '../atoms/RecordingInfo';
 import Toolbar from '../atoms/Toolbar';
 import ToolbarItem from '../atoms/ToolbarItem';
 import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 
 export const ParticipantsCountView = ({
   isMobileView = false,
@@ -100,6 +102,7 @@ export interface ParticipantsIconButtonProps {
   render?: (onPress: () => void, isPanelActive: boolean) => JSX.Element;
 }
 export const ParticipantsIconButton = (props: ParticipantsIconButtonProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {
     liveStreamingRequestAlertIconPosition = {
       top: 0,
@@ -148,22 +151,30 @@ export const ParticipantsIconButton = (props: ParticipantsIconButtonProps) => {
     props.render(onPress, isPanelActive)
   ) : (
     <>
-      <View>
-        <IconButton {...iconButtonProps} />
-      </View>
-      {$config.EVENT_MODE && $config.RAISE_HAND && isPendingRequestToReview && (
-        <View
-          style={{
-            position: 'absolute',
-            top: liveStreamingRequestAlertIconPosition.top,
-            bottom: liveStreamingRequestAlertIconPosition.bottom,
-            right: liveStreamingRequestAlertIconPosition.right,
-            left: liveStreamingRequestAlertIconPosition.left,
-            backgroundColor: $config.SEMANTIC_ERROR,
-            width: 12,
-            height: 12,
-            borderRadius: 10,
-          }}></View>
+      {isToolbarMenuItem ? (
+        <ToolbarMenuItem {...iconButtonProps} />
+      ) : (
+        <>
+          <View>
+            <IconButton {...iconButtonProps} />
+          </View>
+          {$config.EVENT_MODE &&
+            $config.RAISE_HAND &&
+            isPendingRequestToReview && (
+              <View
+                style={{
+                  position: 'absolute',
+                  top: liveStreamingRequestAlertIconPosition.top,
+                  bottom: liveStreamingRequestAlertIconPosition.bottom,
+                  right: liveStreamingRequestAlertIconPosition.right,
+                  left: liveStreamingRequestAlertIconPosition.left,
+                  backgroundColor: $config.SEMANTIC_ERROR,
+                  width: 12,
+                  height: 12,
+                  borderRadius: 10,
+                }}></View>
+            )}
+        </>
       )}
     </>
   );
@@ -188,6 +199,7 @@ export interface ChatIconButtonProps {
 
 export const ChatIconButton = (props: ChatIconButtonProps) => {
   const {sidePanel, setSidePanel} = useSidePanel();
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {
     badgeContainerPosition = {
       top: 0,
@@ -288,8 +300,14 @@ export const ChatIconButton = (props: ChatIconButtonProps) => {
   ) : (
     <>
       <View>
-        <IconButton {...iconButtonProps} />
-        {totalUnreadCount !== 0 && renderUnreadMessageIndicator()}
+        {isToolbarMenuItem ? (
+          <ToolbarMenuItem {...iconButtonProps} />
+        ) : (
+          <>
+            <IconButton {...iconButtonProps} />
+            {totalUnreadCount !== 0 && renderUnreadMessageIndicator()}
+          </>
+        )}
       </View>
     </>
   );

package/template/src/components/Settings.tsx

@@ -16,6 +16,8 @@ import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {useSidePanel} from '../utils/useSidePanel';
 import {useString} from '../utils/useString';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 
 export interface SettingsIconButtonProps {
   render?: (onPress: () => void, isPanelActive: boolean) => JSX.Element;
@@ -23,6 +25,7 @@ export interface SettingsIconButtonProps {
 
 const Settings = (props: SettingsIconButtonProps) => {
   const {sidePanel, setSidePanel} = useSidePanel();
+  const {isToolbarMenuItem} = useToolbarMenu();
   //commented for v1 release
   //const settingsLabel = useString('settingsLabel')();
   const settingsLabel = 'Settings';
@@ -55,7 +58,11 @@ const Settings = (props: SettingsIconButtonProps) => {
   ) : (
     <>
       <View>
-        <IconButton {...iconButtonProps} />
+        {isToolbarMenuItem ? (
+          <ToolbarMenuItem {...iconButtonProps} />
+        ) : (
+          <IconButton {...iconButtonProps} />
+        )}
       </View>
     </>
   );

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

@@ -25,7 +25,11 @@ import {videoView} from '../../../theme.json';
 import {ToolbarProvider, ToolbarPosition} from '../../utils/useToolbar';
 import SDKEvents from '../../utils/SdkEvents';
 import {useRoomInfo} from '../../components/room-info/useRoomInfo';
-import {controlMessageEnum, useUserName} from 'customization-api';
+import {
+  ToolbarCustomItem,
+  controlMessageEnum,
+  useUserName,
+} from 'customization-api';
 import events, {PersistanceLevel} from '../../rtm-events-api';
 import VideoCallMobileView from './VideoCallMobileView';
 import Leftbar, {LeftbarProps} from '../../components/Leftbar';
@@ -48,6 +52,10 @@ const VideoCallScreen = () => {
     VideocallAfterView,
     LeftbarComponent,
     RightbarComponent,
+    BottombarProps,
+    TopbarProps,
+    LeftbarProps,
+    RightbarProps,
   } = useCustomization((data) => {
     let components: {
       VideocallComponent?: React.ComponentType;
@@ -60,6 +68,10 @@ const VideoCallScreen = () => {
       VideocallAfterView: React.ComponentType;
       LeftbarComponent: React.ComponentType<LeftbarProps>;
       RightbarComponent: React.ComponentType<RightbarProps>;
+      BottombarProps?: ToolbarCustomItem[];
+      TopbarProps?: ToolbarCustomItem[];
+      LeftbarProps?: ToolbarCustomItem[];
+      RightbarProps?: ToolbarCustomItem[];
     } = {
       BottombarComponent: Controls,
       TopbarComponent: Navbar,
@@ -70,6 +82,10 @@ const VideoCallScreen = () => {
       VideocallBeforeView: React.Fragment,
       LeftbarComponent: Leftbar,
       RightbarComponent: Rightbar,
+      BottombarProps: [],
+      TopbarProps: [],
+      LeftbarProps: [],
+      RightbarProps: [],
     };
     if (
       data?.components?.videoCall &&
@@ -140,6 +156,35 @@ const VideoCallScreen = () => {
         components.RightbarComponent = data?.components?.videoCall.rightToolBar;
       }
 
+      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' &&
+        data?.components?.videoCall.topToolBar.length
+      ) {
+        components.TopbarProps = data?.components?.videoCall.topToolBar;
+      }
+      if (
+        data?.components?.videoCall.rightToolBar &&
+        typeof data?.components?.videoCall.rightToolBar === 'object' &&
+        data?.components?.videoCall.rightToolBar.length
+      ) {
+        components.RightbarProps = data?.components?.videoCall.rightToolBar;
+      }
+      if (
+        data?.components?.videoCall.leftToolBar &&
+        typeof data?.components?.videoCall.leftToolBar === 'object' &&
+        data?.components?.videoCall.leftToolBar.length
+      ) {
+        components.LeftbarProps = data?.components?.videoCall.leftToolBar;
+      }
+
       if (
         data?.components?.videoCall.participantsPanel &&
         typeof data?.components?.videoCall.participantsPanel !== 'object' &&
@@ -177,11 +222,11 @@ const VideoCallScreen = () => {
       <VideocallBeforeView />
       <View style={style.fullRow}>
         <ToolbarProvider value={{position: ToolbarPosition.left}}>
-          <LeftbarComponent />
+          <LeftbarComponent customItems={LeftbarProps} />
         </ToolbarProvider>
         <View style={style.full}>
           <ToolbarProvider value={{position: ToolbarPosition.top}}>
-            <TopbarComponent />
+            <TopbarComponent customItems={TopbarProps} />
           </ToolbarProvider>
           <View
             style={[
@@ -213,12 +258,12 @@ const VideoCallScreen = () => {
             <></>
           ) : (
             <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
-              <BottombarComponent />
+              <BottombarComponent customItems={BottombarProps} />
             </ToolbarProvider>
           )}
         </View>
         <ToolbarProvider value={{position: ToolbarPosition.right}}>
-          <RightbarComponent />
+          <RightbarComponent customItems={RightbarProps} />
         </ToolbarProvider>
       </View>
       <VideocallAfterView />

package/template/src/subComponents/CopyJoinInfo.tsx

@@ -15,6 +15,8 @@ import useGetMeetingPhrase from '../utils/useGetMeetingPhrase';
 import TertiaryButton from '../atoms/TertiaryButton';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import {useVideoCall} from '../components/useVideoCall';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 
 export interface CopyJoinInfoProps {
   showLabel?: boolean;
@@ -24,6 +26,7 @@ export interface CopyJoinInfoProps {
 }
 
 const CopyJoinInfo = (props: CopyJoinInfoProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {
     showLabel = $config.ICON_TEXT || false,
     showTeritaryButton = false,
@@ -57,6 +60,8 @@ const CopyJoinInfo = (props: CopyJoinInfoProps) => {
     <>
       {showTeritaryButton ? (
         <TertiaryButton text="Invite" onPress={onPress} />
+      ) : isToolbarMenuItem ? (
+        <ToolbarMenuItem {...iconButtonProps} />
       ) : (
         <IconButton {...iconButtonProps} />
       )}

package/template/src/subComponents/LocalAudioMute.tsx

@@ -26,6 +26,9 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import ThemeConfig from '../theme';
 import {ImageIconProps} from '../atoms/ImageIcon';
 import useIsHandRaised from '../utils/useIsHandRaised';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+
 /**
  * A component to mute / unmute the local audio
  */
@@ -45,6 +48,7 @@ export interface LocalAudioMuteProps {
 }
 
 function LocalAudioMute(props: LocalAudioMuteProps) {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {rtcProps} = useContext(PropsContext);
   const {
     data: {isHost},
@@ -156,6 +160,8 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
 
   return props?.render ? (
     props.render(onPress, isAudioEnabled)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
     <IconButton {...iconButtonProps} />
   );

package/template/src/subComponents/LocalEndCall.tsx

@@ -6,6 +6,9 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import ReactNativeForegroundService from '@supersami/rn-foreground-service';
 import {Platform} from 'react-native';
 import {DispatchContext} from '../../agora-rn-uikit';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+
 export interface LocalEndcallProps {
   showLabel?: boolean;
   isOnActionSheet?: boolean;
@@ -21,6 +24,7 @@ const stopForegroundService = () => {
 };
 
 const LocalEndcall = (props: LocalEndcallProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {dispatch} = useContext(DispatchContext);
   const {showLabel = $config.ICON_TEXT, isOnActionSheet = false} = props;
   //commented for v1 release
@@ -80,7 +84,11 @@ const LocalEndcall = (props: LocalEndcallProps) => {
         setModalVisible={setEndcallVisible}
         modalVisible={endcallVisible}
       />
-      <IconButton {...iconButtonProps} />
+      {isToolbarMenuItem ? (
+        <ToolbarMenuItem {...iconButtonProps} />
+      ) : (
+        <IconButton {...iconButtonProps} />
+      )}
     </>
   );
 };

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -4,6 +4,8 @@ import {PropsContext, ToggleState} from '../../agora-rn-uikit';
 import Styles from '../components/styles';
 import {useLocalUserInfo, useRtc} from 'customization-api';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 
 export interface LocalSwitchCameraProps {
   showLabel?: boolean;
@@ -12,6 +14,7 @@ export interface LocalSwitchCameraProps {
 }
 
 function LocalSwitchCamera(props: LocalSwitchCameraProps) {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {callbacks} = useContext(PropsContext);
   const {RtcEngineUnsafe} = useRtc();
   const local = useLocalUserInfo();
@@ -39,6 +42,8 @@ function LocalSwitchCamera(props: LocalSwitchCameraProps) {
 
   return props?.render ? (
     props.render(onPress, isVideoEnabled)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
     <IconButton {...iconButtonProps} />
   );

package/template/src/subComponents/LocalVideoMute.tsx

@@ -25,6 +25,9 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import ThemeConfig from '../theme';
 import {ImageIconProps} from '../atoms/ImageIcon';
 import useIsHandRaised from '../utils/useIsHandRaised';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+
 /**
  * A component to mute / unmute the local video
  */
@@ -45,6 +48,7 @@ export interface LocalVideoMuteProps {
 
 function LocalVideoMute(props: LocalVideoMuteProps) {
   const {rtcProps} = useContext(PropsContext);
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {
     data: {isHost},
   } = useRoomInfo();
@@ -152,6 +156,8 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   }
   return props?.render ? (
     props.render(onPress, isVideoEnabled)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
     <IconButton {...iconButtonProps} />
   );

package/template/src/subComponents/Recording.tsx

@@ -13,6 +13,8 @@ import React from 'react';
 import {useRecording} from './recording/useRecording';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import {useVideoCall} from '../components/useVideoCall';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 
 export interface RecordingButtonProps {
   showLabel?: boolean;
@@ -21,6 +23,7 @@ export interface RecordingButtonProps {
 }
 
 const Recording = (props: RecordingButtonProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {startRecording, inProgress, isRecordingActive} = useRecording();
   //commented for v1 release
   //const recordingButton = useString<boolean>('recordingButton');
@@ -55,10 +58,10 @@ const Recording = (props: RecordingButtonProps) => {
 
   return props?.render ? (
     props.render(onPress, isRecordingActive)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
-    <>
-      <IconButton {...iconButtonProps} />
-    </>
+    <IconButton {...iconButtonProps} />
   );
 };
 

package/template/src/subComponents/livestream/controls/LocalRaiseHand.tsx

@@ -21,11 +21,15 @@ import ThemeConfig from '../../../theme';
 import {ClientRole, PropsContext} from '../../../../agora-rn-uikit';
 import {useContent} from 'customization-api';
 import {isMobileUA} from '../../../utils/common';
+import {IconButtonProps} from '../../../atoms/IconButton';
+import {useToolbarMenu} from '../../../utils/useMenu';
+import ToolbarMenuItem from '../../../atoms/ToolbarMenuItem';
 
 interface LocalRaiseHandProps {
   showLabel?: boolean;
 }
 const LocalRaiseHand = (props: LocalRaiseHandProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {audienceSendsRequest, audienceRecallsRequest, raiseHandList} =
     useContext(LiveStreamContext);
   const {rtcProps} = useContext(PropsContext);
@@ -37,30 +41,33 @@ const LocalRaiseHand = (props: LocalRaiseHandProps) => {
   const handStatusText = (toggle: boolean) =>
     toggle ? 'Lower hand' : 'Raise Hand';
   const isHandRasied = raiseHandList[localUid]?.raised === RaiseHandValue.TRUE;
-  return (
-    <IconButton
-      iconProps={{
-        name: isHandRasied ? 'lower-hand' : 'raise-hand',
-        tintColor: isHandRasied
-          ? $config.PRIMARY_ACTION_TEXT_COLOR
-          : $config.SECONDARY_ACTION_COLOR,
-        iconBackgroundColor: isHandRasied
-          ? $config.PRIMARY_ACTION_BRAND_COLOR
-          : '',
-        base64: isMobileUA() ? true : false,
-      }}
-      btnTextProps={{
-        text: showLabel ? handStatusText(isHandRasied) : '',
-        textColor: $config.FONT_COLOR,
-      }}
-      onPress={() => {
-        if (isHandRasied) {
-          audienceRecallsRequest();
-        } else {
-          audienceSendsRequest();
-        }
-      }}
-    />
+  const iconButtonProps: IconButtonProps = {
+    iconProps: {
+      name: isHandRasied ? 'lower-hand' : 'raise-hand',
+      tintColor: isHandRasied
+        ? $config.PRIMARY_ACTION_TEXT_COLOR
+        : $config.SECONDARY_ACTION_COLOR,
+      iconBackgroundColor: isHandRasied
+        ? $config.PRIMARY_ACTION_BRAND_COLOR
+        : '',
+      base64: isMobileUA() ? true : false,
+    },
+    btnTextProps: {
+      text: showLabel ? handStatusText(isHandRasied) : '',
+      textColor: $config.FONT_COLOR,
+    },
+    onPress: () => {
+      if (isHandRasied) {
+        audienceRecallsRequest();
+      } else {
+        audienceSendsRequest();
+      }
+    },
+  };
+  return isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
+  ) : (
+    <IconButton {...iconButtonProps} />
   );
 };
 

package/template/src/subComponents/screenshare/ScreenshareButton.tsx

@@ -19,6 +19,8 @@ import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import {PropsContext, ClientRole} from '../../../agora-rn-uikit';
 import {useLocalUserInfo, useRoomInfo} from 'customization-api';
 import useIsHandRaised from '../../utils/useIsHandRaised';
+import {useToolbarMenu} from '../../utils/useMenu';
+import ToolbarMenuItem from '../../atoms/ToolbarMenuItem';
 /**
  * A component to start and stop screen sharing on web clients.
  * Screen sharing is not yet implemented on mobile platforms.
@@ -30,6 +32,7 @@ export interface ScreenshareButtonProps {
 }
 
 const ScreenshareButton = (props: ScreenshareButtonProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {rtcProps} = useContext(PropsContext);
   const {
     data: {isHost},
@@ -84,6 +87,8 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
 
   return props?.render ? (
     props.render(onPress, isScreenshareActive)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
     <IconButton {...iconButtonProps} />
   );

package/template/src/utils/useMenu.tsx

@@ -0,0 +1,31 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React from 'react';
+import {createHook} from 'customization-implementation';
+
+const ToolbarMenuContext = React.createContext({isToolbarMenuItem: false});
+
+export interface ToolbarMenuProviderProps {
+  children: React.ReactNode;
+}
+const ToolbarMenuProvider = (props: ToolbarMenuProviderProps) => {
+  return (
+    <ToolbarMenuContext.Provider value={{isToolbarMenuItem: true}}>
+      {props.children}
+    </ToolbarMenuContext.Provider>
+  );
+};
+
+const useToolbarMenu = createHook(ToolbarMenuContext);
+
+export {ToolbarMenuProvider, useToolbarMenu};