Configure layouts
Call Kit (ZegoUIKitPrebuiltCall) currently supports picture-in-picture and gallery layouts, each layout has its own configurations.
To select and configure the layout you want, use the layout parameter in the config:
The configurations supported by the picture-in-picture layout are:
switchLargeOrSmallViewByClick: Whether to allow users to click on the small view for switching between large view and small view. It’s allowed by default.smallViewBorderRadius: The border radius of small audioVideo view.smallViewPosition: The position of small audioVieo view.smallViewSize: The size of small audioVideo view.
Here is the reference code:
import React, { Component } from 'react';
import ZegoUIKitPrebuiltCallService, { ONE_ON_ONE_VIDEO_CALL_CONFIG } from '@zegocloud/zego-uikit-prebuilt-call-rn';
import { ZegoLayoutMode, ZegoViewPosition } from '@zegocloud/zego-uikit-rn'
import * as ZIM from 'zego-zim-react-native';
import * as ZPNs from 'zego-zpns-react-native';
ZegoUIKitPrebuiltCallService.init(
KeyCenter.appID,
KeyCenter.appSign,
userID,
userName,
[ZIM, ZPNs],
{
requireConfig: (data) => {
const callConfig =
data.invitees.length > 1
? ZegoInvitationType.videoCall === data.type
? GROUP_VIDEO_CALL_CONFIG
: GROUP_VOICE_CALL_CONFIG
: ZegoInvitationType.videoCall === data.type
? ONE_ON_ONE_VIDEO_CALL_CONFIG
: ONE_ON_ONE_VOICE_CALL_CONFIG;
return {
...callConfig,
//\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
layout: {
mode: ZegoLayoutMode.pictureInPicture,
config: {
switchLargeOrSmallViewByClick: true,
smallViewBorderRadius: 10,
smallViewPosition: ZegoViewPosition.topRight,
smallViewSize: { width: 85, height: 151 },
}
}
///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
};
},
},
)Gallery layout
The configuration supported by the gallery layout is:
addBorderRadiusAndSpacingBetweenView: In gallery layout, this can be used to add border radius and spacing between speaker views. true: enabled (by default). false: disabled.
The effect is as follows:
| Adding border radius and spacing | Without border radius and spacing |
|---|---|
 |  |
Here is the reference code:
import React, { Component } from 'react';
import ZegoUIKitPrebuiltCallService, { GROUP_VIDEO_CALL_CONFIG } from '@zegocloud/zego-uikit-prebuilt-call-rn';
import { ZegoLayoutMode } from '@zegocloud/zego-uikit-rn'
import * as ZIM from 'zego-zim-react-native';
import * as ZPNs from 'zego-zpns-react-native';
ZegoUIKitPrebuiltCallService.init(
KeyCenter.appID,
KeyCenter.appSign,
userID,
userName,
[ZIM, ZPNs],
{
ringtoneConfig: {
incomingCallFileName: 'zego_incoming.mp3',
outgoingCallFileName: 'zego_outgoing.mp3',
},
requireConfig: (data) => {
const callConfig =
data.invitees.length > 1
? ZegoInvitationType.videoCall === data.type
? GROUP_VIDEO_CALL_CONFIG
: GROUP_VOICE_CALL_CONFIG
: ZegoInvitationType.videoCall === data.type
? ONE_ON_ONE_VIDEO_CALL_CONFIG
: ONE_ON_ONE_VOICE_CALL_CONFIG;
return {
...callConfig,
//\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
layout:{
mode: ZegoLayoutMode.gallery,
config: {
addBorderRadiusAndSpacingBetweenView: false
}
}
///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
};
},
notifyWhenAppRunningInBackgroundOrQuit: true,
isIOSSandboxEnvironment: true,
androidNotificationConfig: {
channelID: "ZegoUIKit",
channelName: "ZegoUIKit",
},
},
)