Set avatar for users

User avatars are generally stored in the server. Call Kit (ZegoUIKitPrebuiltCall) does not know the real profile picture of each user, so it uses the first letter of the username to draw the user avatars by default, as shown below:

When a user in silence	When a user speaks

To configure the custom user avatars, you can use the avatarBuilder to set a custom builder method.

Warning

Please note that here you need to return different avatars for different users based on the user parameter in the callback parameters. If you hardcode a URL, then everyone's avatar will be the one you hardcoded.

Here is the reference code:

Basic call

With call invitation

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

export default function VoiceCallPage(props) {
    return (
        <View style={styles.container}>
            <ZegoUIKitPrebuiltCall
                appID={yourAppID}
                appSign={yourAppSign}
                userID={userID} // userID can be something like a phone number or the user id on your own user system. 
                userName={userName}
                callID={callID} // callID can be any unique string. 

                config={{
                    // You can also use ONE_ON_ONE_VOICE_CALL_CONFIG/GROUP_VIDEO_CALL_CONFIG/GROUP_VOICE_CALL_CONFIG to make more types of calls.
                    ...ONE_ON_ONE_VIDEO_CALL_CONFIG,
                    onOnlySelfInRoom: () => { props.navigation.navigate('HomePage') },
                    onHangUp: () => { props.navigation.navigate('HomePage') },
                    
                    // Set avatarBuilder.
                    // Please note that here you need to return different avatars for different users based on the user parameter in the callback parameters. 
                    // If you hardcode a URL, then everyone's avatar will be the one you hardcoded.
                    avatarBuilder: ({userInfo}) => {
                      return <View style={{width: '100%', height: '100%'}}>
                       <Image
                        style={{ width: '100%', height: '100%' }}
                        resizeMode="cover"
                        source={{ uri: `https://robohash.org/${userInfo.userID}.png` }}
                        />
                      </View>
                    },
                }}
            />
        </View>
    );
}

Copied!

import * as ZIM from 'zego-zim-react-native';
import * as ZPNs from 'zego-zpns-react-native';

const onUserLogin = async (userID, userName, props) => {
  return ZegoUIKitPrebuiltCallService.init(
    yourAppID, // You can get it from ZEGOCLOUD's console
    yourAppSign, // You can get it from ZEGOCLOUD's console
    userID, // It can be any valid characters, but we recommend using a phone number.
    userName,
    [ZIM, ZPNs],
    {
        ringtoneConfig: {
            incomingCallFileName: 'zego_incoming.mp3',
            outgoingCallFileName: 'zego_outgoing.mp3',
        },
        notifyWhenAppRunningInBackgroundOrQuit: true,
        androidNotificationConfig: {
            channelID: "ZegoUIKit",
            channelName: "ZegoUIKit",
        },
        
        // Set avatarBuilder
        // Please note that here you need to return different avatars for different users based on the user parameter in the callback parameters. 
        // If you hardcode a URL, then everyone's avatar will be the one you hardcoded.
        avatarBuilder: ({userInfo}) => {
            return <View style={{width: '100%', height: '100%'}}>
               <Image 
                style={{ width: '100%', height: '100%' }}
                resizeMode="cover"
                source={{ uri: `https://robohash.org/${userInfo.userID}.png` }}
                />
            </View>
        },
    });
}

const onUserLogout = async () => {
  return ZegoUIKitPrebuiltCallService.uninit()
}

Copied!

When complete, the Call Kit (ZegoUIKitPrebuiltCall) displays the custom user avatar that you set.