Skip to main content
Version: Bleeding Edge 🚧

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.

Usage

Import

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

Theme Key

Avatar

Props

NameTypeDefaultDescription
ComponentReact ComponentPress handlers present then Pressable else ViewComponent for enclosing element (eg: TouchableHighlight, View, etc).
ImageComponentComponentClass<{}, any>Custom ImageComponent for Avatar.
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 | JSXElementConstructor<any>>Custom placeholder element (by default, it's the title).
roundedbooleanMakes the avatar circular.
sizenumber | small | medium | large | xlargesmallSize of the avatar.
sourceImageSourcePropTypeImage source to be displayed on avatar.
titlestringRenders title in the placeholder.
titleStyleText StyleStyle for the title.

Playground

Loading...