Skip to main content

Avatar

Avatar component for displaying user profile images
(code example)

info

This component extends TouchableOpacity, Image props.

Usage​

Live Editor
<Avatar source={{uri: 'https://lh3.googleusercontent.com/-cw77lUnOvmI/AAAAAAAAAAI/AAAAAAAAAAA/WMNck32dKbc/s181-c/104220521160525129167.jpg'}} label={IT}/>
Result
Loading...

API​

animate​

Adds fade in animation when Avatar image loads boolean

autoColorsConfig​

Send this to use the name to infer a backgroundColor AutoColorsProps

backgroundColor​

Background color for Avatar string

badgePosition​

Badge location on Avatar TOP_RIGHT | TOP_LEFT | BOTTOM_RIGHT | BOTTOM_LEFT

badgeProps​

Badge props passed down to Badge component BadgeProps

containerStyle​

Additional spacing styles for the container ViewStyle

customRibbon​

Custom ribbon JSX.Element

imageProps​

Image props object ImageProps

imageStyle​

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

isOnline​

Determine if to show online badge boolean

label​

Label that can represent initials string

labelColor​

The label color string

name​

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. string

onImageLoadEnd​

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

onImageLoadError​

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

onImageLoadStart​

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

onPress​

Press handler (props: any) => void

ribbonLabel​

Ribbon label to display on the avatar string

ribbonLabelStyle​

Ribbon label custom style TextStyle

ribbonStyle​

Ribbon custom style ViewStyle

size​

Custom size for the Avatar number

source​

The image source (external or from assets) ImageSourcePropType

status​

AWAY, ONLINE, OFFLINE or NONE mode (if set to a value other then 'NONE' will override isOnline prop) StatusModes

testID​

Test identifier string

useAutoColors​

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