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:

With call invitation

Basic call

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 },
                    }
                }
                ///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
            };
        },
    },
)

Copied!

import React, { Component } from 'react';
import {ZegoUIKitPrebuiltCall, ONE_ON_ONE_VIDEO_CALL_CONFIG } from '@zegocloud/zego-uikit-prebuilt-call-rn';
import { ZegoLayoutMode, ZegoViewPosition } from '@zegocloud/zego-uikit-rn'

export default function CallPage(props) {
    return (
        <View >
            <ZegoUIKitPrebuiltCall
                appID={yourAppID}
                appSign={yourAppSign}
                userID={userID}
                userName={userName}
                callID={callID}
                
                config={{
                    ...ONE_ON_ONE_VIDEO_CALL_CONFIG,
                    onOnlySelfInRoom: () => {props.navigation.navigate('HomePage')},
                    onHangUp: () => {props.navigation.navigate('HomePage')},
                    //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
                    layout:{
                        mode: ZegoLayoutMode.pictureInPicture,
                        config: {
                            switchLargeOrSmallViewByClick: true,
                            smallViewBorderRadius: 10,
                            smallViewPosition: ZegoViewPosition.topRight,
                            smallViewSize: { width: 85, height: 151 },
                        }
                    }
                    ///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
                }}
            />
        </View>
    );
}

Copied!

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:

With call invitation

Basic call

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",
        },
    },
)

Copied!

import React, { Component } from 'react';
import { ZegoUIKitPrebuiltCall, GROUP_VIDEO_CALL_CONFIG } from '@zegocloud/zego-uikit-prebuilt-call-rn';
import { ZegoLayoutMode } from '@zegocloud/zego-uikit-rn'

export default function CallPage(props) {
    return (
        <View >
            <ZegoUIKitPrebuiltCall
                appID={yourAppID}
                appSign={yourAppSign}
                userID={userID}
                userName={userName}
                callID={callID}
                
                config={{
                    ...GROUP_VIDEO_CALL_CONFIG,
                    onOnlySelfInRoom: () => {props.navigation.navigate('HomePage')},
                    onHangUp: () => {props.navigation.navigate('HomePage')},
                    //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
                    layout:{
                        mode: ZegoLayoutMode.gallery,
                        config: {
                            addBorderRadiusAndSpacingBetweenView: false
                        }
                    }
                    ///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
                }}
            />
        </View>
    );
}

Copied!