Avatar

The Avatar component is generally used to show the image and/or name of participants of a video call. If no image is provided it will display the name of the user.

Of course, it can also be used in any other circumstances that you like, for example, in user lists, profiles, and much more.

General usage

The way you can use the Avatar element in a react component is like this:

import { Avatar, useLocalParticipant } from '@stream-io/video-react-native-sdk';

export function AvatarExample() {
  const localParticipant = useLocalParticipant();
  return <Avatar size={80} participant={localParticipant} />;
}

Props

participant

Type
StreamVideoParticipant

The StreamVideoParticipant object.

size

Type	Default Value
number | undefined	100

The size of the avatar. The width and height is set to this number.

style

Type
{container:ViewStyle; image:ImageStyle; text: TextStyle}