Subcomponents Library
Set of components to be composed as needed by the user.
You can access them under the customization-api
module as a named export.
The object containing all the default icons used in the ui.
import { icons } from "customization-api";
IconsInterface
Icon | Name | Type |
---|---|---|
![]() | videocam | string |
![]() | videocamOff | string |
![]() | mic | string |
![]() | micOff | string |
![]() | recordingIcon | string |
![]() | recordingActiveIcon | string |
![]() | screenshareIcon | string |
![]() | screenshareOffIcon | string |
![]() | raiseHandIcon | string |
![]() | endCall | string |
![]() | gridLayoutIcon | string |
![]() | gridLayoutFilledIcon | string |
![]() | pinnedLayoutIcon | string |
![]() | participantIcon | string |
![]() | participantFilledIcon | string |
![]() | chatIcon | string |
![]() | chatIconFilled | string |
![]() | settings | string |
![]() | settingFilled | string |
![]() | clipboard | string |
![]() | checkCircleIcon | string |
![]() | crossCircleIcon | string |
![]() | demoteIcon | string |
![]() | exlamationIcon | string |
![]() | backBtn | string |
![]() ![]() ![]() ![]() | networkIcons | { Excellent: string, Unsupported: string, Good: string, Bad: string, VeryBad: string, Loading: string, } |
The ChatSendButton component displays the chat send button. Relies on ChatUiControl app state to determine required information.
import { ChatSendButton } from "customization-api";
ChatSendButtonProps
Prop | Type | Description |
---|---|---|
render? | ( onPress: () => void ) => JSX.Element | Render method for ChatSendButton |
The ChatTextInput component displays the chat input box. Relies on ChatUiControl app state to determine required information.
import { ChatTextInput } from "customization-api";
ChatTextInputProps
Prop | Type | Description |
---|---|---|
render? | (ChatTextInputRenderProps) => JSX.Element | Render method for ChatTextInput |
ChatTextInputRenderProps
Prop | Type |
---|---|
message | string |
onChangeText | ( text: string ) => void, |
onSubmitEditing | () => void, |
chatMessageInputPlaceholder | string |
The Chat Bubble component displays the message inside the chat ui. It is conditionally styled based on message origin (ie local or remote).
import { ChatBubble } from "customization-api";
ChatBubbleProps
Prop | Type | Description |
---|---|---|
msgId | string | Message id |
message | string | Content of the chat message |
uid | UidType | Name of the user who sent the message |
isLocal | boolean | Specifies if the message is from a local user or if it is from a remote user |
isDeleted | boolean | Specifies if the message has been deleted |
createdTimestamp | number | Message creation timestamp |
updatedTimestamp | number | Last message update timestamp |
render? | ( msg: string, isLocal: boolean, uid: string, ts: number) => JSX.Element | Render method for chat bubble to provide a custom jsx |

The Chat component displays the chat sidepanel. Relies on ChatUiControl app state to determine required information.
import { Chat } from "customization-api";
ChatProps
Prop | Type | Description |
---|---|---|
chatBubble? | React.ComponentType<ChatBubbleProps> | ChatBubble component to be used |
chatTextInput? | React.ComponentType<ChatTextInputProps> | ChatTextInput component to be used |
chatSendButton? | React.ComponentType<ChatSendButtonProps> | ChatSendButton component to be used |

The MaxVideoView component is used to render the user video feed using UiKitMaxVideoView along with overlay components like NameWithMicStatus, NetworkQualityPill etc.
import { MaxVideoView } from "customization-api";
MaxVideoRendererProps
Prop | Type | Description |
---|---|---|
user : | RenderInterface | The user object you need to display the video feed off |

The GridLayout component is used to render the user video feeds in a responsive grid parttern.
import { GridLayout } from "customization-api";

The PinnedLayout component is used to render the user video feeds in a pinned view with a collapsible sidebar displaying unpinned user feeds.
import { PinnedLayout } from "customization-api";

The VideoComponent is used to automatically render the user video feeds in the selected layout.
import { VideoComponent } from "customization-api";

The NameWithMicIcon component is used to render the user name along with their mic muted state.
import { NameWithMicIcon } from "customization-api";
NameWithMicIconProps
Prop | Type | Description |
---|---|---|
user : | RenderInterface | The user object you need to display the name and mic status of |

The NetworkQualityPill component is used to render the user network quality in a pill container that expands when hovered over.
import { NetworkQualityPill } from "customization-api";
NetworkQualityPillProps
Prop | Type | Description |
---|---|---|
user : | RenderInterface | The user object you need to display the network quality of |

The VideoCallScreen component is used to render the entire video call screen.
import { VideoCallScreen } from "customization-api";

The SettingsView component is used to render the settings side panel.
import { SettingsView } from "customization-api";

The ParticipantsView component is used to render the participant panel that lists all the users in the video call / livestream along with their audio and video status. Hosts additionally are able to see user controls such as mute participant
, remove participant from call
.
import { ParticipantsView } from "customization-api";
The Controls component is used to render all the meeting controls.
import { Controls } from "customization-api";
note
The controls displayed change depending on the operating sytem/platform and the user config
The NavBar component displays the nav bar.
import { NavBar } from "customization-api";
NavBarProps
Prop | Type | Description |
---|---|---|
message | string | Content of the chat message |

The HorizontalRule component displays a horizontal line.
import { HorizontalRule } from "customization-api";
HorizontalRuleProps
Prop | Type | Description |
---|---|---|
style | viewProps | custom css to override existing style |
The Render component handles rendering the correct content view component as defined in custom content api based on the content type corresponding to the uid
as defined in the Render app state.
import { RenderComponent } from "customization-api";
RenderComponentProps
Prop | Type | Description |
---|---|---|
uid | uidtype | uid of renderObject to be rendered |

The TextInput component is used to render a text input box.
import { TextInput } from "customization-api";

The PrimaryButton component is used to render a button with app builder primary button styling.
import { PrimaryButton } from "customization-api";
PrimaryButtonProps
Prop | Type | Description |
---|---|---|
text | string | Text to be displayed on the button |

The SecondaryButton component is used to render a button with app builder primary button styling.
import { SecondaryButton } from "customization-api";
SecondaryButtonProps
Prop | Type | Description |
---|---|---|
text | string | Text to be displayed on the button |
The UiKitBtnTemplate component renders a button in UiKit button structure.
import { UiKitBtnTemplate } from "customization-api";

The UiKitMaxVideoView component is used to render the user video feed along with a fallback component in case user video feed is disabled.
import { UiKitMaxVideoView } from "customization-api";

The UiKitImageIcon component is used to render a given icon within a wrapper component.
import { UiKitImageIcon } from "customization-api";

The NavBarComponentsArray is an array of all buttons present on the default nav bar component.
Index | Name | Type | Description |
---|---|---|---|
0 | CopyJoinInfo | CopyJoinInfoComponent | Button to copy meeting invite |
1 | ParticipantsCountView | ParticipantsCountViewComponent | Element to show number of participant in the chat |
2 | ParticipantsIconButton | ParticipantsIconButtonComponent | Button to toggle participants sidepanel |
3 | ChatIconButton | ChatIconButtonComponent | Button to toggle chat sidepanel |
4 | LayoutIconButton | LayoutIconButtonComponent | Button to switch layouts |
5 | SettingsIconButton | SettingsIconButtonComponent | Button to toggle setting sidepanel |
import { NavBarComponentsArray } from "customization-api";
Navbar Components:
CopyJoinInfoComponent: React.ComponentType<CopyJoinInfoProps>
CopyJoinInfoProps
Key | Type | Description |
---|---|---|
showText | boolean | Flag to determine whether to show text besides button |
buttonTemplateName | buttonTemplateName | Type of button template to be used for the button |
render? | ( onPress: ()=>void , buttonTemplateName: buttonTemplateName ) => JSX.Element | Component to be used to render the button |
ParticipantsCountViewComponent: React.ComponentType
ParticipantsIconButtonComponent: React.ComponentType<ParticipantsIconButtonProps>
ParticipantsIconButtonProps
Key | Type | Description |
---|---|---|
badgeContainerPosition | { top?: number , right?: number , left?: number , bottom?: number } | Position for pending chat messages alert badge |
badgeTextStyle | TextStyle | custom style for badge text |
buttonTemplateName | buttonTemplateName | Type of button template to be used for the button |
render? | ( onPress: ()=>void , isPanelActive: boolean , totalUnreadCount: number , buttonTemplateName: buttonTemplateName ) => JSX.Element | Function to be used to render the button |
ChatIconButtonComponent: React.ComponentType<ChatIconButtonProps>
ChatIconButtonProps
Key | Type | Description |
---|---|---|
liveStreamingRequestAlertIconPosition | { top?: number , right?: number , left?: number , bottom?: number } | Position for pending raise hand requests alert badge |
buttonTemplateName | buttonTemplateName | Type of button template to be used for the button |
render? | ( onPress: ()=>void , isPanelActive: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element | Function to be used to render the button |
LayoutIconButtonComponent: React.ComponentType<LayoutIconButtonProps>
LayoutIconButtonProps
Key | Type | Description |
---|---|---|
modalPosition | { top?: number , right?: number , left?: number , bottom?: number } | Position of the switch layout modal |
buttonTemplateName | buttonTemplateName | Type of button template to be used for the button |
render? | ( onPress: ()=>void , buttonTemplateName: buttonTemplateName ) => JSX.Element | Function to be used to render the button |
SettingsIconButtonComponent: React.ComponentType<SettingsIconButtonProps>
SettingsIconButtonProps
Key | Type | Description |
---|---|---|
buttonTemplateName | buttonTemplateName | Type of button template to be used for the button |
render? | ( onPress: ()=>void , buttonTemplateName: buttonTemplateName ) => JSX.Element | Function to be used to render the button |

The ControlsComponentArray is an array of all meeting control button subcomponents listed below.
Index | Name | Type | Description |
---|---|---|---|
0 | LocalAudioMute | LocalAudioMuteComponent | Control button to mute/unmute local user audio |
1 | LocalVideoMute | LocalVideoMuteComponent | Control button to mute/unmute local user video |
2 | LocalSwitchCamera | LocalSwitchCameraComponent | Control button to switch local user video camera |
3 | ScreenshareButton | ScreenshareButtonComponent | Control button to start/stop screenshare |
4 | Recording | RecordingComponent | Control button to start/stop meeting recording |
5 | LocalEndCall | LocalEndCallComponent | Control button to end local user call |
6 | LiveStreamControls | LiveStreamControlsComponent | Control button to send/recall local user raise hand request |
import { ControlsComponentArray } from "customization-api";
Control Components:
LocalAudioMuteComponent: React.ComponentType<LocalAudioMuteProps>
LocalAudioMuteProps
Key | Type | Description |
---|---|---|
buttonTemplateName | buttonTemplateName | Type of button template to be used for the button |
render? | ( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element | Component to be used to render the button |
LocalVideoMuteComponent: React.ComponentType<LocalVideoMuteProps>
LocalVideoMuteProps
Key | Type | Description |
---|---|---|
buttonTemplateName | buttonTemplateName | Type of button template to be used for the button |
render? | ( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element | Function to be used to render the button |
LocalSwitchCameraComponent: React.ComponentType<LocalSwitchCameraProps>
LocalSwitchCameraProps
Key | Type | Description |
---|---|---|
buttonTemplateName | buttonTemplateName | Type of button template to be used for the button |
render? | ( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element | Function to be used to render the button |
ScreenshareButtonComponent: React.ComponentType<ScreenshareButtonProps>
ScreenshareButtonProps
Key | Type | Description |
---|---|---|
buttonTemplateName | buttonTemplateName | Type of button template to be used for the button |
render? | ( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element | Function to be used to render the button |
RecordingComponent: React.ComponentType<RecordingProps>
RecordingProps
Key | Type | Description |
---|---|---|
buttonTemplateName | buttonTemplateName | Type of button template to be used for the button |
render? | ( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element | Function to be used to render the button |
LocalEndCallComponent: React.ComponentType<LocalEndCallProps>
LocalEndCallProps
Key | Type | Description |
---|---|---|
buttonTemplateName | buttonTemplateName | Type of button template to be used for the button |
render? | ( onPress: ()=>void , buttonTemplateName: buttonTemplateName ) => JSX.Element | Function to be used to render the button |
LiveStreamControlsComponent : React.ComponentType<LiveStreamControlsProps>
LiveStreamControlsProps
Key | Type | Description |
---|---|---|
showControls | boolean | Determines if livestream controls are renders |

The SidePanelButtonsArray is an array of all the side panel button subcomponents listed below.
Index | Name | Type | Description |
---|---|---|---|
0 | RemoteAudioMute | RemoteAudioMuteComponent | Side panel button to mute remote user audio |
1 | RemoteVideoMute | RemoteVideoMuteComponent | Side panel button to mute remote user video |
2 | RemoteEndCall | RemoteEndCallComponent | Side panel button to remote remote user from call |
3 | RemoteLiveStreamApprovedRequestRecall | RemoteLiveStreamApprovedRequestRecallComponent | Side panel button to recall attendee raise hand request |
4 | RemoteLiveStreamRequestApprove | RemoteLiveStreamRequestApproveComponent | Side panel button to approve attendee raise hand request |
5 | RemoteLiveStreamRequestReject | RemoteLiveStreamRequestRejectComponent | Side panel button to reject attendee raise hand request |
6 | ChatSendButton | ChatSendButtonComponent | Side panel button send chat message |
7 | MuteAllAudioButton | MuteAllAudioButtonComponent | Side panel button to mute all remote users audio |
8 | MuteAllVideoButton | MuteAllVideoButtonComponent | Side panel button to mute all remote users video |
import { SidePanelButtonsArray } from "customization-api";
SidePanel Button Components:
RemoteAudioMuteComponent : React.ComponentType<RemoteAudioMuteProps>
RemoteVideoMuteComponent : React.ComponentType<RemoteVideoMuteProps>
RemoteEndCallComponent : React.ComponentType<RemoteEndCallProps>
RemoteLiveStreamApprovedRequestRecallComponent : React.ComponentType<RemoteLiveStreamApprovedRequestRecallProps>
RemoteLiveStreamRequestApproveComponent : React.ComponentType<RemoteLiveStreamControlApproveProps>
RemoteLiveStreamRequestRejectComponent : React.ComponentType<RemoteLiveStreamControlRejectProps>
ChatSendButtonComponent : React.ComponentType<ChatSendButtonProps>
ChatSendButtonProps
Key | Type | Description |
---|---|---|
render | (onPress: () => void) => JSX.Element | Function to be used to render the button |
MuteAllAudioButtonComponent : React.ComponentType<MuteAllAudioButtonProps>
MuteAllAudioButtonProps
Key | Type | Description |
---|---|---|
render | (onPress: () => void) => JSX.Element | Function to be used to render the button |
MuteAllVideoButtonComponent: React.ComponentType<MuteAllVideoButtonProps>
MuteAllVideoButtonProps
Key | Type | Description |
---|---|---|
render | (onPress: () => void) => JSX.Element | Function to be used to render the button |