> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Video View Customisation

> CometChat Calling SDK v4 - Stable Release - Video View Customisation for React Native

<Info>
  **Quick Reference** - Customize the main video container:

  ```javascript theme={null}
  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");

  new CometChatCalls.CallSettingsBuilder()
    .setMainVideoContainerSetting(videoSettings)
    .build();
  ```
</Info>

## Overview

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

Once you have decided to implement [Ringing](/calls/v4/react-native/ringing) or [Call Session](/calls/v4/react-native/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](/calls/v4/react-native/ringing) or [Call Session](/calls/v4/react-native/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)`                                       | Sets the aspect ratio of main video. Default: **contain.** Possible Values: `ASPECT_RATIO_CONTAIN`, `ASPECT_RATIO_COVER`                  |
| `setFullScreenButtonParams(position: string, visibility: boolean)`                   | Sets the position & visibility of the full screen button. Default: visible in **bottom-right** position.                                  |
| `setNameLabelParams(position: string, visibility: boolean, backgroundColor: string)` | Sets the position, visibility & background color of the name label. Default: visible in **bottom-left** with background-color **#333333** |
| `setZoomButtonParams(position: string, visibility: boolean)`                         | Sets the position, visibility of the zoom button. Default: visible in **bottom-right** position.                                          |
| `setUserListButtonParams(position: string, visibility: boolean)`                     | Sets the position, visibility of the user list button. Default: visible in **bottom-right** position.                                     |

**Position values:** `POSITION_TOP_LEFT`, `POSITION_TOP_RIGHT`, `POSITION_BOTTOM_LEFT`, `POSITION_BOTTOM_RIGHT`

Example:

```javascript theme={null}
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);
```

<AccordionGroup>
  <Accordion title="Best Practices">
    * Avoid placing multiple buttons in the same corner position to prevent overlapping controls
    * Use `ASPECT_RATIO_CONTAIN` for most use cases to ensure the full video frame is visible
    * Test on multiple screen sizes to ensure consistent experience
  </Accordion>

  <Accordion title="Troubleshooting">
    * **Custom settings not applied:** Ensure you pass the `MainVideoContainerSetting` object to `setMainVideoContainerSetting()` before calling `.build()`
    * **Buttons not visible:** Check that the `visibility` parameter is set to `true` and `enableDefaultLayout(true)` is set
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Call Session" icon="video" href="/calls/v4/react-native/call-session">
    Start and manage call sessions with full configuration options
  </Card>

  <Card title="Recording" icon="circle-dot" href="/calls/v4/react-native/recording">
    Record call sessions for playback and compliance
  </Card>

  <Card title="Presenter Mode" icon="presentation-screen" href="/calls/v4/react-native/presenter-mode">
    Enable screen sharing and presenter layouts in calls
  </Card>

  <Card title="Ringing" icon="phone-volume" href="/calls/v4/react-native/ringing">
    Implement a complete calling experience with incoming and outgoing call UI
  </Card>
</CardGroup>