Avatar

Avatar component for displaying user profile images
(code example)

info

This component extends TouchableOpacity, Image props.

Usage

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

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