Avatar
Avatar component for displaying user profile images
(code example)
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