AvatarAn Avatar component is a visual representation of a user or entity, often displayed as a circular image, icon, or placeholder with initials. In mobile app design systems, it is used to personalize the interface by representing users in profiles, chats, notifications, or lists. Avatars help users quickly recognize people, accounts, or items, enhancing both engagement and navigational clarity.

Overview

Avatar Types

Property	Component
Image
Placeholder / User
Placeholder / Group
Initials

Avatar Sizes

Property	Component
XLarge
Large
Medium
Small
XSmall
XXSmall
3XSmall

Avatar Accessories

Property	Component
Badge (online indication)
Badge with icon Not supported in XXSmall and 3Xsmall.
Label Supported only in XLarge, Large and Medium.

UX Guidelines

Avatar LoadingNot cached avatar:First display skeleton, then load in the image with fade-in animation: easeInOutQuadFade: 0>1 150ms

Dev

PlaygroundCode Example

TIP

This component extends the basic/TouchableOpacity, media/Image props.

APIThis is the list of additional props for the component

animate

boolean

Adds fade in animation when Avatar image loads. This prop isn't supported on web (will be set to false by default when using web).. Default is false

autoColorsConfig

AutoColorsProps

Send this to use the name to infer a backgroundColor

backgroundColor

string

Background color for Avatar

badgePosition

TOP_RIGHT | TOP_LEFT | BOTTOM_RIGHT | BOTTOM_LEFT

Badge location on Avatar. Default is BadgePosition.TOP_RIGHT

badgeProps

BadgeProps

Badge props passed down to Badge component

containerStyle

ViewStyle

Additional spacing styles for the container

customRibbon

JSX.Element

Custom ribbon

imageId

string

ImageId identifier

imageProps

ImageProps

Avatar's Image component Props

imageProps

ImageProps

Image props object

imageStyle

ImageStyle

Image style object used to pass additional style props by components which render image

index

number

Index number

label

string

Label that can represent initials

labelColor

string

The label color. Default is Colors.grey10

name

string

The name of the avatar user

name

string

The name of the avatar user. If no label is provided, the initials will be generated from the name. autoColorsConfig will use the name to create the background color of the Avatar.

onImageLoadEnd

ImagePropsBase['onLoadEnd']

Listener-callback for when an image's (uri) loading either succeeds or fails (equiv. to Image.onLoadEnd()).

onImageLoadError

ImagePropsBase['onError']

Listener-callback for when an image's (uri) loading fails (equiv. to Image.onError()).

onImageLoadStart

ImagePropsBase['onLoadStart']

Listener-callback for when an image's (uri) loading starts (equiv. to Image.onLoadStart()).

onPress

(props: any) => void

Press handler

ribbonLabel

string

Ribbon label to display on the avatar

ribbonLabelStyle

TextStyle

Ribbon label custom style

ribbonStyle

TextStyle

Ribbon (Label) component styling

ribbonStyle

ViewStyle

Ribbon custom style

size

number | AvatarSize (XLarge | Large | Medium | Small | XSmall | XXSmall | XXXSMALL)

Avatar size

size

number

Custom size for the Avatar. Default is 50

source

ImageSourcePropType

The image source (external or from assets)

style

ViewStyle

Additional style

testID

string

Component Test id

testID

string

Test identifier

useAutoColors

boolean

Hash the name (or label) to get a color, so each name will have a specific color. Default is false.