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

Property	Component
Image
Initials

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

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

imageProps

ImageProps

Image props object

imageStyle

ImageStyle

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

label

string

Label that can represent initials

labelColor

string

The label color. Default is Colors.grey10

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

ViewStyle

Ribbon custom style

size

number

Custom size for the Avatar. Default is 50

source

ImageSourcePropType

The image source (external or from assets)

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.