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.

---

videoCall :

VideoCallComponent | VideoCallInterface

video screen

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 the Precall screen.

However if Precall Screen is disabled in the Builder,

Precall toggle

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:

Before

After

VideoCallInterface

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.

videoCall.bottomBar :

BottomBarComponent

bottom bar

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:

Before

After

videoCall.topBar :

TopBarComponent

Top Bar

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:

Before

After

videoCall.chat :

ChatInterface

chat

The Chat component displays the ui to send and view the chat messages.

Overrides:

ChatInterface

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.

videoCall.chat.chatTextInput :

ChatTextInputComponent

Chat Text Input

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:

Before

After

videoCall.chat.chatSendButton :

ChatSendButtonComponent

Chat Send Button

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:

Before

After

videoCall.chat.chatBubble :

ChatBubbleComponent

Chat Bubble

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:

Before

After

videoCall.participantsPanel :

ParticipantsPanelComponent

Participant Panel

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:

Before

After

videoCall.customContent :

RenderingComponentInterface

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:

RenderingComponentInterface

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:

Before

After

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:

Before

After

videoCall.customLayout :

customLayoutsOverrideFunction

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:

Before

After

---