Set avatar for users

User avatars are generally stored on the server. Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) uses the first letter of the username to draw the user avatars by default. While we allow you to customize the user avatars as needed.

Here are two options for you to customize the user avatar:

If you need to display a user's avatar, set the avatar image URL (PNG, JGP, JGEP, BMP, GIF, and WEBP are supported) to avatar in ZegoUIKitPrebuiltLiveAudioRoomConfig. This way, Live Audio Room Kit will render the avatar for you based on the URL, rather than using the default letters.
If you need to display a more complex avatar component, such as you need to render some decorations on the avatar, etc., you can use avatarBuilder to achieve more flexible customization.

Note

The avatar must be within 64 bytes. If exceeds, the default background is displayed.
Even when using avatarBuilder, you can still set the avatar URL to avatar. After setting this, Live Audio Room Kit will synchronize each user's avatar in the room for you, and provide this parameter in avatarBuilder. This way, you can directly render each user's avatar in avatarBuilder.

Here is the reference code:

avatar

avatarBuilder

import React from 'react';
import { StyleSheet, View } from 'react-native';
import KeyCenter from './KeyCenter';
import ZegoUIKitPrebuiltLiveAudioRoom, { HOST_DEFAULT_CONFIG } 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,
                    avatar: 'https://www.zegocloud.com/_nuxt/img/discord_nav@2x.8739674.png', //Example
                }}
            />
        </View>
    );
}

Copied!

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

export default function HostPage(props) {
    const avatarBuilder = ({userInfo}) => {
        return <View style={{width: '100%', height: '100%'}}>
            {
                userInfo.inRoomAttributes && userInfo.inRoomAttributes.avatar ?
                <Image
                    style={{width: '100%', height: '100%', resizeMode: 'cover'}}
                    resizeMode='cover'
                    source={{uri: userInfo.inRoomAttributes.avatar}}
                /> : null
            }
        </View>
    };

    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,
                    avatar: 'https://www.zegocloud.com/_nuxt/img/discord_nav@2x.8739674.png', //Example
                    seatConfig: {
                        avatarBuilder,
                    }
                }}
            />
        </View>
    );
}

Copied!