Components API
Provides API for granular overriding of various aspects of the App Builder user interface ranging from entire screens such as the “VideoCall” screen to specific components within these screens such as the “BottomBar” component.
The overrides are applied by supplying values as an object under the top-level components
key to the Customization API config object.
The VideoCall screen displays the active video call / livestream UI. This UI is shown when a user has joined a meeting.
Hence it is displayed after:
- The user clicks on
JoinButton
inside thePrecall
screen.
However if Precall Screen is disabled in the Builder,
the videoCall screen is directly displayed after:
- The user clicks on the “Start Meeting” button inside the
Share
screen - The user clicks on a meeting invite link.
tip
To make the customizations powerful, you can use the libraries to access the internal app state, send custom events, or re-use prebuilt subcomponents
Overrides:
VideoCallComponent : React.ComponentType
You can override the entire VideoCall screen by pasing in a React.ComponentType under the videoCall
key to the Components Api Object
Use the example code given below showcasing reconstruction of the default video call ui as a guide.
import {customize} from 'customization-api';
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const VideoCallPage = () => {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>
Here is your new video call page. Use app-state and sub-components to
customize your video call page
</Text>
</View>
</View>
);
};
const customization = customize({
components: {
videoCall: VideoCallPage,
},
});
export default customization;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#90EE90',
justifyContent: 'center',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 1,
maxHeight: 200,
borderRadius: 30,
},
textStyle: {
padding: 10,
fontSize: 18,
textAlign: 'center',
lineHeight: 30,
},
});
Result:


You can override specific parts of the VideoCall screen by pasing in this object with key and values corresponding to the part you want to override under the videoCall
key to the Components Api Object
Key | Type | Description |
---|---|---|
bottomBar ?: | BottomBarComponent | Customize the Bottom Bar by passing in your own component |
chat ?: | ChatInterface | Customize the entire chat panel or pass in an object to override a subcomponent |
customContent ?: | RenderingComponentInterface | Add custom content to the layouts by passing in your own Render object |
customLayouts ?: | CustomLayoutsOverrideFunction | Customize the available layouts or pass in your own layout. |
participantsPanel ?: | ParticipantPanelComponent | Customize the Participants Panel by passing in your own component. |
The BottomBarComponent occupies the bottom part of the VideoCall screen and displays all the meeting controls.
note
The controls displayed change depending on the operating sytem/platform and the user config
Overrides:
BottomBarComponent : React.ComponentType
You can override the BottomBar component by passing in a React Component under the bottomBar
key to the VideoCallInterface Object
To reuse parts of default bottom bar ui you can import them from the SubComponents Library accessible under the customization-api
module.
Use the example code given below showcasing reconstruction of the default bottom bar ui as a guide.
import {customize} from 'customization-api';
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const BottomBar = () => {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>
Here is your new bottom bar component. Use app-state and
sub-components to customize your bottom bar
</Text>
</View>
</View>
);
};
const customization = customize({
components: {
videoCall: {
bottomBar: BottomBar,
},
},
});
export default customization;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#90EE90',
justifyContent: 'center',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 1,
maxHeight: 200,
borderRadius: 30,
},
textStyle: {
padding: 10,
fontSize: 18,
textAlign: 'center',
lineHeight: 30,
},
});
Result:


The TopBarComponent occupies the bottom part of the VideoCall screen and displays all the meeting controls.
note
The controls displayed change depending on the operating sytem/platform and the user config
Overrides:
TopBarComponent : React.ComponentType
You can override the TopBar component by passing in a React Component under the topBar
key to the VideoCallInterface Object
To reuse parts of default top bar ui you can import them from the SubComponents Library accessible under the customization-api
module.
Use the example code given below showcasing reconstruction of the default top bar ui as a guide.
import {customize} from 'customization-api';
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const TopBar = () => {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>
Here is your new top bar component. Use app-state and sub-components
to customize your top bar
</Text>
</View>
</View>
);
};
const customization = customize({
components: {
videoCall: {
topBar: TopBar,
},
},
});
export default customization;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#90EE90',
justifyContent: 'center',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 1,
maxHeight: 200,
borderRadius: 30,
},
textStyle: {
padding: 10,
fontSize: 18,
textAlign: 'center',
lineHeight: 30,
},
});
Result:


The Chat component displays the ui to send and view the chat messages.
Overrides:
You can override the specific parts chat ui by pasing in this object with key and values corresponding to the part you want to overrid under the chat
key to the VideoCallInterface
Method | Description |
---|---|
chat.chatBubble ?: | Customize the chat Bubble component. |
chat.chatTextInput ?: | Customize the chat input component. |
chat.chatSendButton ?: | Customize the chat send button component. |
The ChatTextInput component displays the input box used to enter message text inside the chat ui.
Overrides :
ChatTextInputComponent: React.ComponentType<ChatTextInputProps>
You can override the ChatTextInput component component by passing in a React Component under the chatTextInput
key to the ChatInterface Object
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 |
Use the code example given below showcasing overriding of the default chat bubble ui as a guide.
import {customize} from 'customization-api';
import React from 'react';
import {View, StyleSheet} from 'react-native';
const ChatInput = () => {
return <View style={styles.container}></View>;
};
const customization = customize({
components: {
videoCall: {
chat: {
chatInput: ChatInput,
},
},
},
});
export default customization;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#90EE90',
justifyContent: 'center',
height: 40,
alignSelf: 'center',
},
});
Result:


The ChatSendButton component displays the send button used to send messages inside the chat ui.
Overrides :
ChatSendButtonComponent: React.ComponentType<ChatSendButtonProps>
You can override the ChatSendButton component by passing in a React Component under the chatSendButton
key to the ChatInterface Object
ChatSendButtonProps
Prop | Type | Description |
---|---|---|
render? | ( onPress: () => void ) => JSX.Element | Render method for ChatTextInput |
Use the code example given below showcasing overriding of the default chat bubble ui as a guide.
import {customize} from 'customization-api';
import React from 'react';
import {View, StyleSheet} from 'react-native';
const ChatSendButton = () => {
return <View style={styles.container}></View>;
};
const customization = customize({
components: {
videoCall: {
chat: {
chatSentButton: ChatSendButton,
},
},
},
});
export default customization;
const styles = StyleSheet.create({
container: {
backgroundColor: '#90EE90',
marginLeft: 10,
width: 30,
height: 30,
alignSelf: 'center',
justifyContent: 'center',
},
});
Result:


The Chat Bubble component displays the message inside the chat ui. It is conditionally styled based on message origin (ie local or remote).
Overrides :
ChatBubbleComponent: React.ComponentType<ChatBubbleProps>
You can override the ChatBubble component by passing in a React Component under the chatBubble
key to the ChatInterface Object
ChatBubbleProps
Prop | Type | Description |
---|---|---|
message | string | Content of the chat message |
isLocal | boolean | Specifies if the message is from a local user or if it is from a remote user |
uid | UidType | Name of the user who sent the message |
timestamp | number | Timestamp of the message |
render? | ( msg: string, isLocal: boolean, uid: string, ts: number) => JSX.Element | Render method for chat bubble to provide a custom jsx |
Use the code example given below showcasing overriding of the default chat bubble ui as a guide.
import {customize} from 'customization-api';
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const ChatBubble = () => {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>
Here is your new chat bubble component. Use app-state and
sub-components to customize your chat
</Text>
</View>
</View>
);
};
const customization = customize({
components: {
videoCall: {
chat: {
chatBubble: ChatBubble,
},
},
},
});
export default customization;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#90EE90',
justifyContent: 'center',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 1,
maxHeight: 200,
borderRadius: 30,
},
textStyle: {
padding: 10,
fontSize: 18,
textAlign: 'center',
lineHeight: 30,
},
});
Result:


The participantsPanel component 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
.
Overrides:
ParticipantsPanelComponent: React.ComponentType
You can override the entire participantsPanel component by pasing in a React.ComponentType under the participanPanel
key to the VideocallInterface Object
You can import parts of default participantsPanel ui from the SubComponents Library accessible under the customization-api
module to reuse them in your component.
Use the example code given below showcasing reconstruction of the default participantsPanel ui as a guide.
import {customize} from 'customization-api';
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const ParticipantsPanel = () => {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>
Here is your new participants panel component. Use app-state and
sub-components to customize your participants panel
</Text>
</View>
</View>
);
};
const customization = customize({
components: {
videoCall: {
participantsPanel: ParticipantsPanel,
},
},
});
export default customization;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#90EE90',
justifyContent: 'center',
width: '20%',
minWidth: 200,
maxWidth: 300,
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 1,
maxHeight: 200,
borderRadius: 30,
},
textStyle: {
padding: 10,
fontSize: 18,
textAlign: 'center',
lineHeight: 30,
},
});
Result:


The constomContent object specifies the react component to be used for rendering each custom content type including user inserted and default types present in the Render Context.
Overrides:
You can override the render component for each content type present in the Render Context by passing in this object with key corresponding to the custom content type you want to override under the customContent
key to the VideoCallInterface
.
Key | Type | Description |
---|---|---|
rtc ?: | React.ComponentType | Specifies the component to be used for rendering the default RTC video feed. |
[customKey:string] ?: | React.ComponentType | Component to be rendered corresponding to type property of custom content object added to render context. |
Use the example code given below showcasing overriding of the default render component for rtc
content type as a guide.
import {customize} from 'customization-api';
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const CustomVideoView = () => {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>
Here is your new video view component. Use app-state and
sub-components to customize your video view
</Text>
</View>
</View>
);
};
const customization = customize({
components: {
videoCall: {
customContent: {
rtc: CustomVideoView,
},
},
},
});
export default customization;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#90EE90',
justifyContent: 'center',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 1,
maxHeight: 200,
borderRadius: 30,
},
textStyle: {
padding: 10,
fontSize: 18,
textAlign: 'center',
lineHeight: 30,
},
});
Result:


Use the example code given below showcasing overriding of the default render component for rtc
content type as a guide.
import {customize, useRtc} from 'customization-api';
import React, {useEffect} from 'react';
import {View, Text, StyleSheet} from 'react-native';
const CustomView = () => {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>
Here is your new video view component. Use app-state and
sub-components to customize your video view
</Text>
</View>
</View>
);
};
const customization = customize({
components: {
videoCall: {
customContent: {
//customview is key
customview: CustomView,
},
useUserContext: function useUserContext() {
const {dispatch} = useRtc();
useEffect(() => {
dispatch({
type: 'AddCustomContent',
//value 0 = uid
//value 1 = user data
//type should match the customContent key otherwise it will fallback to default view
value: [new Date().getTime(), {name: 'user', type: 'customview'}],
});
}, []);
},
},
},
});
export default customization;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#90EE90',
justifyContent: 'center',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 1,
maxHeight: 200,
borderRadius: 30,
},
textStyle: {
padding: 10,
fontSize: 18,
textAlign: 'center',
lineHeight: 30,
},
});
Result:


Customize the layout through LayoutInterface
Overrides:
customLayoutsOverrideFunction: ( DefaultLayouts ) => LayoutObjectType[]
You can override the layouts by providing a function with LayoutInterface[] return type to the customLayouts
under VideoCallInterface
object.
This function recieves an array of default layouts and expects you to return an array of LayoutObjects that represent your layouts.
DefaultLayouts: Array <LayoutInterface>
Index | Type | Value |
---|---|---|
0 | LayoutInterface | { name: 'pinned', icon: PinnedIcon, component: PinnedLayoutComponent } |
1 | LayoutInterface | { name: 'grid', icon: GridIcon, component: GridLayoutComponent } |
LayoutObjectType: LayoutObjectWithIcon | LayoutObjectWithIconName
LayoutObjectWithIcon
Key | Type | Description |
---|---|---|
name : | string | Name of the layout |
label : | string | Label of the layout to be displayed in UI |
icon : | string | Can be a 1. Base 64 Image string 2. CDN URL 3. Bunder imported string |
component : | LayoutComponent | Layout component to be used to render the video feeds |
LayoutObjectWithIconName
Key | Type | Description |
---|---|---|
name : | string | Name of the layout |
label : | string | Label of the layout to be displayed in UI |
iconName : | keyof IconsInterface | Name of the icon to be displayed in UI for the layout |
component : | LayoutComponent | Layout component to be used to render the video feeds |
LayoutComponent: React.Component<{ renderStateInterface["renderPosition"] }>
Use the example code given below showcasing appending a custom layout as a guide.
import {customize} from 'customization-api';
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const CustomLayout = () => {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>
Here is your new custom layout view. Use app-state and sub-components
to customize your layout
</Text>
</View>
</View>
);
};
const customization = customize({
components: {
videoCall: {
customLayout: (defaultLayouts) => [
...defaultLayouts,
{
component: CustomLayout,
label: 'Custom Layout',
name: 'CustomLayout',
iconName: 'clipboard',
},
],
},
},
});
export default customization;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#90EE90',
justifyContent: 'center',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 1,
maxHeight: 200,
borderRadius: 30,
},
textStyle: {
padding: 10,
fontSize: 18,
textAlign: 'center',
lineHeight: 30,
},
});
Result:

