Video View Customisation

Customize the main video container in CometChat React Native calls, including aspect ratio, full-screen button, name labels, zoom, and user list button positioning.

Quick Reference - Customize the main video container:

let videoSettings = new CometChat.MainVideoContainerSetting();
videoSettings.setMainVideoAspectRatio(CometChatCalls.CallSettings.ASPECT_RATIO_CONTAIN);
videoSettings.setFullScreenButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setNameLabelParams(CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT, true, "#333333");

// Pass to CallSettingsBuilder
new CometChatCalls.CallSettingsBuilder()
  .setMainVideoContainerSetting(videoSettings)
  .build();

Overview

This section guides you through customizing the main video container in your call UI.

Once you have decided to implement Ringing or Call Session calling and followed the steps to implement them, a few additional methods will help you quickly customize the main video container.

Please make sure your callSettings is configured accordingly for Ringing or Call Session.

Main Video Container Setting

The MainVideoContainerSetting class is required when you want to customise the main video view. You need to pass the object of the MainVideoContainerSetting class in the setMainVideoContainerSetting() method of the CallSettingsBuilder.

Setting	Description
setMainVideoAspectRatio(aspectRatio: string)	This method is used to set the aspect ratio of main video. The default value is contain. Possible Values: 1. CometChatCalls.CallSettings. ASPECT_RATIO_CONTAIN 2. CometChatCalls.CallSettings. ASPECT_RATIO_COVER
setFullScreenButtonParams(position: string, visibility: boolean)	This method is used to set the position & visibility parameter of the full screen button. By default the full screen button is visible in the bottom-right position. Possible Values for POSITION: 1. CometChatCalls.CallSettings. POSITION_TOP_LEFT 2. CometChatCalls.CallSettings. POSITION_TOP_RIGHT 3. CometChatCalls.CallSettings. POSITION_BOTTOM_LEFT 4. CometChatCalls.CallSettings. POSITION_BOTTOM_RIGHT Possible Values for VISIBILITY: 1. true 2. false
setNameLabelParams(position: string, visibility: boolean, backgroundColor: string)	This method is used to set the position, visibility & background color of the name label. By default the name label is visible in the bottom-left position with a background-color #333333 Possible Values for POSITION: 1. CometChatCalls.CallSettings. POSITION_TOP_LEFT 2. CometChatCalls.CallSettings. POSITION_TOP_RIGHT 3. CometChatCalls.CallSettings. POSITION_BOTTOM_LEFT 4. CometChatCalls.CallSettings. POSITION_BOTTOM_RIGHT Possible Values for VISIBILITY: 1. true 2. false
setZoomButtonParams(position: string, visibility: boolean)	This method is used to set the position, visibility of the zoom button. By default the zoom button is visible in the bottom-right position. Possible Values for POSITION: 1. CometChatCalls.CallSettings. POSITION_TOP_LEFT 2. CometChatCalls.CallSettings. POSITION_TOP_RIGHT 3. CometChatCalls.CallSettings. POSITION_BOTTOM_LEFT 4. CometChatCalls.CallSettings. POSITION_BOTTOM_RIGHT Possible Values for VISIBILITY: 1. true 2. false
setUserListButtonParams(position: string, visibility: boolean)	This method is used to set the position, visibility of the user list button. By default the user list button is visible in the bottom-right position. Possible Values for POSITION: 1. CometChatCalls.CallSettings. POSITION_TOP_LEFT 2. CometChatCalls.CallSettings. POSITION_TOP_RIGHT 3. CometChatCalls.CallSettings. POSITION_BOTTOM_LEFT 4. CometChatCalls.CallSettings. POSITION_BOTTOM_RIGHT Possible Values for VISIBILITY: 1. true 2. false

Example:

JavaScript

let videoSettings = new CometChat.MainVideoContainerSetting();

videoSettings.setMainVideoAspectRatio(CometChatCalls.CallSettings.ASPECT_RATIO_CONTAIN);	videoSettings.setFullScreenButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setNameLabelParams(CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT, true, "#333333");
videoSettings.setZoomButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setUserListButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);

Best Practices

Keep controls accessible

Avoid placing multiple buttons in the same corner position. Overlapping controls can make the UI confusing and hard to interact with. Spread controls across different corners for a clean layout.

Use ASPECT_RATIO_CONTAIN for most use cases

The ASPECT_RATIO_CONTAIN mode ensures the full video frame is visible without cropping. Use ASPECT_RATIO_COVER only when you want the video to fill the container and are okay with some edges being clipped.

Test on multiple screen sizes

Video container customizations can look different across devices. Test your button positions and label visibility on both small phones and larger tablets to ensure a consistent experience.

Troubleshooting

Custom settings not applied

Ensure you pass the MainVideoContainerSetting object to setMainVideoContainerSetting() on the CallSettingsBuilder before calling .build(). Settings applied after building won’t take effect.

Buttons not visible

Check that the visibility parameter is set to true for the button you want to show. Also verify that enableDefaultLayout(true) is set in your CallSettingsBuilder, as custom video settings work alongside the default layout.

---

Next Steps

Call Session

Start and manage call sessions with full configuration options

Recording

Record call sessions for playback and compliance

Presenter Mode

Enable screen sharing and presenter layouts in calls

Ringing

Implement a complete calling experience with incoming and outgoing call UI