Skip to main content
Version: Next

Avatar

Avatars are found all over ui design from lists to profile screens.

They are commonly used to represent a user and can contain photos, icons, or even text.

Components#

Usage#


Props#

Avatar#

Avatar.Accessory#

Reference#

Avatar#

Component#

Component for enclosing element (eg: TouchableHighlight, View, etc).

TypeDefault
React ComponentTouchableOpacity or View

ImageComponent#

Custom ImageComponent for Avatar.

TypeDefault
anyNone

activeOpacity#

Opacity when pressed.

TypeDefault
numberNone

avatarStyle#

Style for avatar image.

TypeDefault
ImageStyleNone

containerStyle#

Styling for outer container.

TypeDefault
View style(Object)None

icon#

Displays an icon as the main content of the Avatar. Cannot be used alongside title. When used with the source prop it will be used as the placeholder.

TypeDefault
AvatarIconNone

iconStyle#

Extra styling for icon component.

TypeDefault
Text Style(Object)None

imageProps#

Optional properties to pass to the avatar e.g "resizeMode".

TypeDefault
ImageProps(Object)None

onLongPress#

Callback function when long pressing component.

TypeDefault
FunctionNone

onPress#

Callback function when pressing component.

TypeDefault
FunctionNone

overlayContainerStyle#

Style for the view outside image or icon.

TypeDefault
Text Style(Object)None

placeholderStyle#

Adds style to the placeholder wrapper.

TypeDefault
View style(Object)None

renderPlaceholderContent#

Custom placeholder element (by default, it's the title).

TypeDefault
anyNone

rounded#

Makes the avatar circular.

TypeDefault
booleanNone

size#

Size of the avatar.

TypeDefault
number or "small" or "medium" or "large" or "xlarge"small

source#

Image source to be displayed on avatar.

TypeDefault
ImageSourcePropTypeNone

title#

Renders title in the placeholder.

TypeDefault
stringNone

titleStyle#

Style for the title.

TypeDefault
Text Style(Object)None

Avatar.Accessory#

style#

Style prop inherited from TextProps and TouchableWithoutFeedbackProperties

Only exist here so we can have ViewStyle or TextStyle

Style

Add custom styling to the accessory of avatar.

TypeDefault
Text Style(Object)None

underlayColor#

The color of the underlay that will show through when the touch is active.

Add underlay color to the accessory of avatar.

TypeDefault
ColorValue#000