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

package/template/src/subComponents/ChatContainer.tsx

@@ -48,6 +48,11 @@ import ThemeConfig from '../theme';
 import UserAvatar from '../atoms/UserAvatar';
 import Spacer from '../atoms/Spacer';
 import {useChatNotification} from '../components/chat-notification/useChatNotification';
+import {
+  chatPanelUnreadMessageText,
+  chatPanelUserOfflineText,
+  groupChatWelcomeContent,
+} from '../language/default-labels/videoCallScreenLabels';
 
 /**
  * Chat container is the component which renders all the chat messages
@@ -57,6 +62,7 @@ import {useChatNotification} from '../components/chat-notification/useChatNotifi
 const ChatContainer = (props?: {
   chatBubble?: React.ComponentType<ChatBubbleProps>;
 }) => {
+  const info1 = useString<boolean>(groupChatWelcomeContent);
   const [scrollToEnd, setScrollToEnd] = useState(false);
   const {dispatch} = useContext(DispatchContext);
   const [grpUnreadCount, setGrpUnreadCount] = useState(0);
@@ -77,9 +83,6 @@ const ChatContainer = (props?: {
     setUnreadIndividualMessageCount,
   } = useChatNotification();
   const localUid = useLocalUid();
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
   const scrollViewRef = useRef<ScrollView>(null);
 
   useEffect(() => {
@@ -92,7 +95,7 @@ const ChatContainer = (props?: {
   useEffect(() => {
     if (privateChatUser) {
       setPrivateUnreadCount(unreadIndividualMessageCount[privateChatUser]);
-      setUnreadIndividualMessageCount((prevState) => {
+      setUnreadIndividualMessageCount(prevState => {
         return {
           ...prevState,
           [privateChatUser]: 0,
@@ -111,7 +114,7 @@ const ChatContainer = (props?: {
     dispatch({type: 'UpdateRenderList', value: [uid, data]});
   };
 
-  const {ChatBubbleComponent} = useCustomization((data) => {
+  const {ChatBubbleComponent} = useCustomization(data => {
     let components: {
       ChatBubbleComponent: React.ComponentType<ChatBubbleProps>;
     } = {
@@ -142,9 +145,9 @@ const ChatContainer = (props?: {
     }
     return components;
   });
-  //commented for v1 release
-  //const userOfflineLabel = useString('userOfflineLabel')();
-  const userOfflineLabel = 'User is offline';
+
+  const userOfflineLabel = useString(chatPanelUserOfflineText)();
+  const unreadMessageLabel = useString(chatPanelUnreadMessageText)();
 
   //if we don't have unread count then enable scroll to end
   useEffect(() => {
@@ -202,9 +205,7 @@ const ChatContainer = (props?: {
           <>
             <View style={style.defaultMessageContainer}>
               <Text style={style.defaultMessageText}>
-                {!messageStore?.length
-                  ? `Welcome to Chat! \nAll messages are deleted when call ends.`
-                  : 'All messages are deleted when call ends.'}
+                {info1(messageStore?.length ? false : true)}
               </Text>
             </View>
             {messageStore.map((message: any, index) => (
@@ -216,7 +217,7 @@ const ChatContainer = (props?: {
                     style={style.unreadMessageContainer}
                     onLayout={unreadViewOnLayout}>
                     <Text style={style.unreadMessageText}>
-                      {grpUnreadCount} Unread Message
+                      {grpUnreadCount} {unreadMessageLabel}
                     </Text>
                   </View>
                 ) : (
@@ -229,6 +230,12 @@ const ChatContainer = (props?: {
                       ? true
                       : false
                   }
+                  previousMessageCreatedTimestamp={
+                    index !== 0
+                      ? (messageStore[index - 1]
+                          .createdTimestamp as unknown as string)
+                      : ''
+                  }
                   message={message.msg}
                   createdTimestamp={message.createdTimestamp}
                   updatedTimestamp={message.updatedTimestamp}
@@ -264,7 +271,7 @@ const ChatContainer = (props?: {
                     style={style.unreadMessageContainer}
                     onLayout={unreadViewOnLayout}>
                     <Text style={style.unreadMessageText}>
-                      {privateUnreadCount} Unread Message
+                      {privateUnreadCount} {unreadMessageLabel}
                     </Text>
                   </View>
                 ) : (

package/template/src/subComponents/ChatInput.ios.tsx

@@ -25,6 +25,10 @@ import {useContent, useUserName} from 'customization-api';
 import ImageIcon from '../atoms/ImageIcon';
 import ThemeConfig from '../theme';
 import {BottomSheetTextInput} from '@gorhom/bottom-sheet';
+import {
+  groupChatInputPlaceHolderText,
+  privateChatInputPlaceHolderText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export interface ChatSendButtonProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -78,10 +82,15 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
   //   'chatMessageInputPlaceholder',
   // )();
   const [name] = useUserName();
+  const groupChatInputPlaceHolder = useString(groupChatInputPlaceHolderText);
+  const privateChatInputPlaceHolder = useString(
+    privateChatInputPlaceHolderText,
+  );
+
   const chatMessageInputPlaceholder =
     chatType === ChatType.Private
-      ? `Private Message to ${defaultContent[privateChatUser].name}`
-      : `Chat publicly as ${name}...`;
+      ? privateChatInputPlaceHolder(defaultContent[privateChatUser]?.name)
+      : groupChatInputPlaceHolder(name);
   const onChangeText = (text: string) => setMessage(text);
   const onSubmitEditing = () => {
     if (!privateChatUser) {

package/template/src/subComponents/ChatInput.tsx

@@ -24,6 +24,10 @@ import {
 import {useContent, useUserName} from 'customization-api';
 import ImageIcon from '../atoms/ImageIcon';
 import ThemeConfig from '../theme';
+import {
+  groupChatInputPlaceHolderText,
+  privateChatInputPlaceHolderText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export interface ChatSendButtonProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -81,10 +85,15 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
   //   'chatMessageInputPlaceholder',
   // )();
   const [name] = useUserName();
+  const groupChatInputPlaceHolder = useString(groupChatInputPlaceHolderText);
+  const privateChatInputPlaceHolder = useString(
+    privateChatInputPlaceHolderText,
+  );
+
   const chatMessageInputPlaceholder =
     chatType === ChatType.Private
-      ? `Private Message to ${defaultContent[privateChatUser].name}`
-      : `Chat publicly as ${name}...`;
+      ? privateChatInputPlaceHolder(defaultContent[privateChatUser]?.name)
+      : groupChatInputPlaceHolder(name);
   const onChangeText = (text: string) => setMessage(text);
   const onSubmitEditing = () => {
     if (!privateChatUser) {
@@ -114,7 +123,7 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     )
   ) : (
     <TextInput
-      setRef={(ref) => (chatInputRef.current = ref)}
+      setRef={ref => (chatInputRef.current = ref)}
       onFocus={() => setInputActive(true)}
       onBlur={() => setInputActive(false)}
       value={message}

package/template/src/subComponents/Checkbox.native.tsx

@@ -1,47 +1,47 @@
-/*
-********************************************
- 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, {useContext} from 'react';
-import CheckBox from '@react-native-community/checkbox';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+// /*
+// ********************************************
+//  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, {useContext} from 'react';
+// import CheckBox from '@react-native-community/checkbox';
+// import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
-/**
- * A checkbox component for mobile
- */
-const Checkbox = (props: any) => {
-  const urlCheckbox = props.value;
-  const setUrlCheckbox = props.onValueChange;
-  return (
-    <CheckBox
-      value={urlCheckbox}
-      onValueChange={setUrlCheckbox}
-      disabled={props?.disabled}
-      tintColors={{
-        true: props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR,
-        false: props?.disabled
-          ? 'grey'
-          : $config.FONT_COLOR + hexadecimalTransparency['80%'],
-      }}
-      tintColor={
-        props?.disabled
-          ? 'grey'
-          : $config.FONT_COLOR + hexadecimalTransparency['80%']
-      }
-      onCheckColor={
-        props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
-      }
-      onTintColor={
-        props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
-      }
-    />
-  );
-};
-export default Checkbox;
+// /**
+//  * A checkbox component for mobile
+//  */
+// const Checkbox = (props: any) => {
+//   const urlCheckbox = props.value;
+//   const setUrlCheckbox = props.onValueChange;
+//   return (
+//     <CheckBox
+//       value={urlCheckbox}
+//       onValueChange={setUrlCheckbox}
+//       disabled={props?.disabled}
+//       tintColors={{
+//         true: props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR,
+//         false: props?.disabled
+//           ? 'grey'
+//           : $config.FONT_COLOR + hexadecimalTransparency['80%'],
+//       }}
+//       tintColor={
+//         props?.disabled
+//           ? 'grey'
+//           : $config.FONT_COLOR + hexadecimalTransparency['80%']
+//       }
+//       onCheckColor={
+//         props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
+//       }
+//       onTintColor={
+//         props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
+//       }
+//     />
+//   );
+// };
+// export default Checkbox;

package/template/src/subComponents/Checkbox.tsx

@@ -1,15 +1,16 @@
 /*
 ********************************************
  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. 
+ 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, {useContext} from 'react';
+//@ts-ignore
 import {CheckBox, StyleSheet} from 'react-native';
 import ColorContext from '../components/ColorContext';
 

package/template/src/subComponents/CopyJoinInfo.tsx

@@ -17,24 +17,21 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import {useVideoCall} from '../components/useVideoCall';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {useString} from '../utils/useString';
+import {toolbarItemInviteText} from '../language/default-labels/videoCallScreenLabels';
 
 export interface CopyJoinInfoProps {
-  showLabel?: boolean;
   showTeritaryButton?: boolean;
   render?: (onPress: () => void) => JSX.Element;
-  isOnActionSheet?: boolean;
 }
 
 const CopyJoinInfo = (props: CopyJoinInfoProps) => {
+  const {isOnActionSheet, showLabel} = useActionSheet();
   const {isToolbarMenuItem} = useToolbarMenu();
-  const {
-    showLabel = $config.ICON_TEXT || false,
-    showTeritaryButton = false,
-    isOnActionSheet = false,
-  } = props;
-  //commented for v1 release
-  //const copyMeetingInviteButton = useString('copyMeetingInviteButton')();
-  const copyMeetingInviteButton = 'Invite';
+
+  const {showTeritaryButton = false} = props;
+  const copyMeetingInviteButton = useString(toolbarItemInviteText)();
   const {setShowInvitePopup} = useVideoCall();
 
   const onPress = () => {
@@ -52,6 +49,24 @@ const CopyJoinInfo = (props: CopyJoinInfoProps) => {
     },
   };
 
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
   iconButtonProps.isOnActionSheet = isOnActionSheet;
 
   return props?.render ? (
@@ -59,7 +74,7 @@ const CopyJoinInfo = (props: CopyJoinInfoProps) => {
   ) : (
     <>
       {showTeritaryButton ? (
-        <TertiaryButton text="Invite" onPress={onPress} />
+        <TertiaryButton text={copyMeetingInviteButton} onPress={onPress} />
       ) : isToolbarMenuItem ? (
         <ToolbarMenuItem {...iconButtonProps} />
       ) : (

package/template/src/subComponents/EndcallPopup.tsx

@@ -1,4 +1,4 @@
-import React, {SetStateAction, useContext} from 'react';
+import React, {SetStateAction, useContext, useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import Spacer from '../atoms/Spacer';
 import Popup from '../atoms/Popup';
@@ -6,20 +6,61 @@ import TertiaryButton from '../atoms/TertiaryButton';
 import PrimaryButton from '../atoms/PrimaryButton';
 import ThemeConfig from '../theme';
 import {useIsDesktop} from '../utils/common';
+import DownloadTranscriptBtn from './caption/DownloadTranscriptBtn';
+import ImageIcon from '../atoms/ImageIcon';
+import {useCaption} from './caption/useCaption';
+import {useString} from '../utils/useString';
+import {
+  leavePopupHeading,
+  leavePopupPrimaryBtnText,
+  leavePopupSubHeading,
+  sttDownloadBtnText,
+  sttTranscriptPanelHeaderText,
+} from '../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../language/default-labels/commonLabels';
 
 interface EndcallPopupProps {
   modalVisible: boolean;
   setModalVisible: React.Dispatch<SetStateAction<boolean>>;
   endCall: () => void;
 }
+
+const DownloadTranscript = () => {
+  const label = useString(sttTranscriptPanelHeaderText)();
+  const downloadLabel = useString(sttDownloadBtnText)();
+  return (
+    <View style={[styles.btnDownloadContainer, styles.row]}>
+      <View style={styles.row}>
+        <ImageIcon
+          iconType="plain"
+          name={'transcript-mode'}
+          tintColor={$config.FONT_COLOR}
+          iconSize={20}
+        />
+        <Spacer size={4} horizontal />
+        <Text style={styles.label}>{label}</Text>
+      </View>
+      <DownloadTranscriptBtn
+        textStyle={[styles.label, styles.downloadBtnText] as Object}
+        containerStyle={styles.downloadBtn}
+        iconName=""
+        text={downloadLabel}
+      />
+    </View>
+  );
+};
+
 const EndcallPopup = (props: EndcallPopupProps) => {
   const isDesktop = useIsDesktop()('popup');
-  const leaveMeetingLabelHeading = 'Leave Room?';
-  const leaveMeetingLabelSubHeading =
-    'Are you sure you want to leave this room?';
+  const leaveMeetingLabelHeading = useString(leavePopupHeading)();
+  const leaveMeetingLabelSubHeading = useString<boolean>(leavePopupSubHeading);
+  const leaveMeetingPopupActionButton = useString(leavePopupPrimaryBtnText)();
+  const cancelLabel = useString(cancelText)();
+  const {isSTTActive} = useCaption();
+  const isTranscriptAvailable = $config.ENABLE_STT && isSTTActive;
 
-  const stayBtnLabel = 'CANCEL';
-  const leaveBtnLabel = 'LEAVE';
+  const stayBtnLabel = cancelLabel;
+  const leaveBtnLabel = leaveMeetingPopupActionButton;
   return (
     <Popup
       modalVisible={props.modalVisible}
@@ -28,16 +69,19 @@ const EndcallPopup = (props: EndcallPopupProps) => {
       contentContainerStyle={styles.contentContainer}>
       <Text style={styles.heading}>{leaveMeetingLabelHeading}</Text>
       <Spacer size={8} />
-      <Text style={styles.subHeading}>{leaveMeetingLabelSubHeading}</Text>
-      <Spacer size={32} />
+      <Text style={styles.subHeading}>
+        {leaveMeetingLabelSubHeading(isTranscriptAvailable)}
+      </Text>
+      {isTranscriptAvailable ? <DownloadTranscript /> : <></>}
+      <Spacer size={40} />
       <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
         <View style={isDesktop && {flex: 1}}>
           <TertiaryButton
             containerStyle={{
               width: '100%',
               height: 48,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
+              paddingVertical: 8,
+              paddingHorizontal: 40,
               borderRadius: ThemeConfig.BorderRadius.medium,
             }}
             text={stayBtnLabel}
@@ -57,8 +101,8 @@ const EndcallPopup = (props: EndcallPopupProps) => {
               borderRadius: ThemeConfig.BorderRadius.medium,
               height: 48,
               backgroundColor: $config.SEMANTIC_ERROR,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
+              paddingVertical: 8,
+              paddingHorizontal: 36,
             }}
             text={leaveBtnLabel}
             textStyle={styles.btnText}
@@ -103,5 +147,32 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.small,
     color: $config.FONT_COLOR,
+    maxWidth: 336,
+  },
+  downloadBtn: {
+    minWidth: 'auto',
+  },
+  btnDownloadContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: 6,
+    marginTop: 20,
+  },
+  downloadBtnText: {
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  label: {
+    color: $config.FONT_COLOR,
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: 20,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+  },
+  row: {
+    flexDirection: 'row',
   },
 });

package/template/src/subComponents/LanguageSelector.tsx

@@ -10,20 +10,20 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {Picker, StyleSheet, Text} from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
 import ColorContext from '../components/ColorContext';
 import {useLanguage} from '../language/useLanguage';
 import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
 import {DEFAULT_I18_DATA} from '../language';
+import ThemeConfig from '../theme';
+import Dropdown from '../atoms/Dropdown';
+import {settingsPanelLanguageLabel} from '../language/default-labels/precallScreenLabels';
 
 const LanguageSelector = () => {
-  const {primaryColor} = useContext(ColorContext);
   const {languageCode, setLanguageCode} = useLanguage();
-  const languageData = useCustomization((data) => data?.i18n);
-  //commented for v1 release
-  //const languageText = useString('language')();
-  const languageText = 'Language';
+  const languageData = useCustomization(data => data?.i18n);
+  const languageText = useString(settingsPanelLanguageLabel)();
   if (!languageData || !languageData.length) {
     return <></>;
   }
@@ -35,36 +35,40 @@ const LanguageSelector = () => {
     return <></>;
   }
 
+  const data = [];
+
+  languageData.forEach(element => {
+    data.push({
+      label: element.label || element.locale,
+      value: element.locale,
+    });
+  });
+
   return (
-    <>
-      <Text style={style.heading}>{languageText}</Text>
-      <Picker
+    <View>
+      <Text style={style.label}>{languageText}</Text>
+      <Dropdown
+        icon={'lang-select'}
+        enabled={true}
         selectedValue={languageCode}
-        style={[{borderColor: primaryColor}, style.popupPicker]}
-        onValueChange={(itemValue) => setLanguageCode(itemValue)}>
-        {languageData.map((item) => {
-          return (
-            <Picker.Item
-              label={item.label || item.locale}
-              value={item.locale}
-              key={item.locale}
-            />
-          );
-        })}
-        {!languageData.filter((i) => i.locale === DEFAULT_I18_DATA.locale)
-          .length ? (
-          <Picker.Item
-            label={DEFAULT_I18_DATA.label || DEFAULT_I18_DATA.locale}
-            value={DEFAULT_I18_DATA.locale}
-            key={DEFAULT_I18_DATA.locale}
-          />
-        ) : null}
-      </Picker>
-    </>
+        label={''}
+        data={data}
+        onSelect={({value}) => {
+          setLanguageCode(value);
+        }}
+      />
+    </View>
   );
 };
 
 const style = StyleSheet.create({
+  label: {
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    marginBottom: 12,
+  },
   heading: {
     fontSize: 20,
     fontWeight: '700',

package/template/src/subComponents/LayoutIconButton.tsx

@@ -9,23 +9,28 @@ import {isMobileUA} from '../utils/common';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
 import {useWindowDimensions} from 'react-native';
 import {useContent} from 'customization-api';
+import {useActionSheet} from '../utils/useActionSheet';
+import {useString} from '../utils/useString';
+import {toolbarItemLayoutText} from '../language/default-labels/videoCallScreenLabels';
 
 export interface LayoutIconButtonInterface {
   render?: (onPress: () => void) => JSX.Element;
-  showLabel?: boolean;
 }
 
 const LayoutIconButton = (props: LayoutIconButtonInterface) => {
-  const {activeUids} = useContent();
+  const {activeUids, customContent} = useContent();
+  //const activeUidsLen = activeUids?.filter((i) => !customContent[i])?.length;
   const {height: windowHeight} = useWindowDimensions();
   const [modalPosition, setModalPosition] = useState(null);
   const layoutBtnRef = useRef();
   const [isHovered, setIsHoveredLocal] = useState(false);
   const [isHoveredOnModal, setIsHoveredOnModal] = useState(false);
   const isMobileView = isMobileUA();
-  const {showLabel = $config.ICON_TEXT} = props;
+  const {isOnActionSheet} = useActionSheet();
+  const showLabel = $config.ICON_TEXT ? true : false;
   const setIsHovered = (hovered: boolean) => {
     if (layoutBtnRef && layoutBtnRef.current) {
+      //@ts-ignore
       layoutBtnRef?.current?.measure((_fx, _fy, _w, h, _px, _py) => {
         setModalPosition({
           bottom: isMobileOrTablet()
@@ -37,14 +42,12 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
       });
     }
   };
-  //commented for v1 release
-  //const layoutLabel = useString('layoutLabel')('');
-  const layoutLabel = 'Layout';
+  const layoutLabel = useString(toolbarItemLayoutText)('');
   const layouts = useLayoutsData();
   const changeLayout = useChangeDefaultLayout();
   const {currentLayout, setLayout} = useLayout();
 
-  const layout = layouts.findIndex((item) => item.name === currentLayout);
+  const layout = layouts.findIndex(item => item.name === currentLayout);
   const renderLayoutIcon = (showDropdown?: boolean) => {
     let onPress = () => {};
     let renderContent = [];
@@ -67,6 +70,25 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
         textColor: $config.FONT_COLOR,
       },
     };
+    iconButtonProps.isOnActionSheet = isOnActionSheet;
+    if (isOnActionSheet) {
+      // iconButtonProps.containerStyle = {
+      //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+      //   width: 52,
+      //   height: 52,
+      //   borderRadius: 26,
+      //   justifyContent: 'center',
+      //   alignItems: 'center',
+      // };
+      iconButtonProps.btnTextProps.textStyle = {
+        color: $config.FONT_COLOR,
+        marginTop: 8,
+        fontSize: 12,
+        fontWeight: '400',
+        fontFamily: 'Source Sans Pro',
+        textAlign: 'center',
+      };
+    }
     const iconName = renderContent.push(
       props?.render ? (
         props.render(onPress)
@@ -95,7 +117,7 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
             containerStyle={{
               opacity: !activeUids || activeUids.length === 0 ? 0.6 : 1,
             }}
-            setRef={(ref) => {
+            setRef={ref => {
               layoutBtnRef.current = ref;
             }}
             key={'defaultLayoutIconWithName'}