Live Audio Room Kit(RN) Customize the bottom menu bar buttons

Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) allows you to configure the buttons of the menu bar. You can remove the default buttons or add custom ones. If necessary, you can configure the bottomMenuBarConfig:

(Similarly, to configure top menu bar buttons or add custom buttons to the top menu bar, use the topMenuBarConfig.)

hostButtons: Use this to set the prebuilt-in buttons for a host to use.
speakerButtons : Use this to set the prebuilt-in buttons for a speaker to use.
audienceButtons : Use this to set the prebuilt-in buttons for an audience to use.
hostExtendButtons: Use this to set the custom buttons for a host to use.
speakerExtendButtons: Use this to set the custom buttons for a speaker to use.
audienceExtendButtons: Use this to set the custom buttons for the audience to use.
maxCount: Maximum number of buttons that can be displayed by the menu bar. Value range [1 - 5], the default value is
showInRoomMessageButton : Whether to display the message button, displayed by default.

The default button types supported by the component are as follows:

ZegoMenuBarButtonName.toggleMicrophoneButton: The button to toggle the microphone.
ZegoMenuBarButtonName.switchAudioOutputButton: The button to switch the audio output on/off.
ZegoMenuBarButtonName.showMemberListButton: The button to show the member list.
ZegoMenuBarButtonName.applyToTakeSeatButton: The button to apply to take a speaker seat.
ZegoMenuBarButtonName.closeSeatButton: The button to close/open a speaker seat.
ZegoMenuBarButtonName.minimizingButton: The button to minimize the window.
ZegoMenuBarButtonName.leaveButton: The button to leave the room.

If the total number of built-in buttons and custom buttons does not exceed the maxCount, all buttons will be displayed. Otherwise, other buttons that cannot be displayed will be hidden in the three dots (⋮) button. Clicking this button will pop up the bottom sheet to display the remaining buttons. The following shows the effect and the reference code:

Untitled

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import KeyCenter from './KeyCenter';
import ZegoUIKitPrebuiltLiveAudioRoom, {
  HOST_DEFAULT_CONFIG,
  ZegoLiveAudioRoomLayoutAlignment,
} from '@zegocloud/zego-uikit-prebuilt-live-audio-room-rn';

export default function HostPage(props) {
    return (
        <View style={styles.container}>
            <ZegoUIKitPrebuiltLiveAudioRoom
                appID={KeyCenter.appID}
                appSign={KeyCenter.appSign}
                userID={userID}
                userName={userName}
                roomID={roomID}
                
                // Modify your custom configurations here.
                config={{
                    ...HOST_DEFAULT_CONFIG,
                    bottomMenuBarConfig: {          
                        hostButtons: [
                            ZegoMenuBarButtonName.toggleMicrophoneButton,
                            ZegoMenuBarButtonName.showMemberListButton,
                        ],
                        speakerButtons: [
                            ZegoMenuBarButtonName.toggleMicrophoneButton,
                            ZegoMenuBarButtonName.showMemberListButton,
                        ],
                        audienceButtons: [ZegoMenuBarButtonName.showMemberListButton],
                        hostExtendButtons: [
                            <MyIconButton icon={Icons.phone} />,
                            <MyIconButton icon={Icons.cookie} />,
                            <MyIconButton icon={Icons.speaker} />,
                            <MyIconButton icon={Icons.air} />,
                            <MyIconButton icon={Icons.blender} />,
                            <MyIconButton icon={Icons.file_copy} />,
                            <MyIconButton icon={Icons.place} />,
                            <MyIconButton icon={Icons.phone_android} />,
                            <MyIconButton icon={Icons.phone_iphone} />,
                        ],
                        speakerExtendButtons: [],
                        audienceExtendButtons: [],
                        maxCount: 5, 
                        showInRoomMessageButton: true,
                    }
                }}
            />
        </View>
    );
}

Copied!