Skip to main content
Version: 4.0.0-rc.3

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.

Import

import { Avatar } from "@rneui/themed";

Usage

Props

NameTypeDefaultDescription
ComponentReact ComponentPress handlers present then Pressable else ViewComponent for enclosing element (eg: TouchableHighlight, View, etc).
ImageComponentComponentClass<{}, any>Custom ImageComponent for Avatar.
activeOpacitynumberOpacity when pressed.
avatarStyleImageStyleStyle for avatar image.
containerStyleView StyleStyling for outer container.
iconAvatarIconDisplays 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.
iconStyleText StyleExtra styling for icon component.
imagePropsImageProps(Object)Optional properties to pass to the avatar e.g "resizeMode".
onLongPressFunctionCallback function when long pressing component.
onPressFunctionCallback function when pressing component.
onPressInGestureResponderEventHandlerCalled when a touch is engaged before onPress.
onPressOutGestureResponderEventHandlerCalled when a touch is released before onPress.
overlayContainerStyleText StyleStyle for the view outside image or icon.
placeholderStyleView StyleAdds style to the placeholder wrapper.
pressablePropsPressableProps except click handlersNone
renderPlaceholderContentReactElement<{}, string or JSXElementConstructor<any>>Custom placeholder element (by default, it's the title).
roundedbooleanMakes the avatar circular.
sizenumber or small or medium or large or xlargesmallSize of the avatar.
sourceImageSourcePropTypeImage source to be displayed on avatar.
titlestringRenders title in the placeholder.
titleStyleText StyleStyle for the title.

Playground

Loading...