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

Shape

Loading...

Sizes

Loading...

Image Avatar

Loading...

Letter Avatar

Loading...

Props

Name	Type	Default	Description
Component	React Component	Press handlers present then Pressable else View	Component for enclosing element (eg: TouchableHighlight, View, etc).
ImageComponent	ComponentClass<{}, any>		Custom ImageComponent for Avatar.
avatarStyle	ImageStyle		Style for avatar image.
containerStyle	View Style		Styling for outer container.
icon	AvatarIcon		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.
iconStyle	Text Style		Extra styling for icon component.
imageProps	ImageProps(Object)		Optional properties to pass to the avatar e.g "resizeMode".
onLongPress	Function		Callback function when long pressing component.
onPress	Function		Callback function when pressing component.
onPressIn	GestureResponderEventHandler		Called when a touch is engaged before onPress.
onPressOut	GestureResponderEventHandler		Called when a touch is released before onPress.
overlayContainerStyle	Text Style		Style for the view outside image or icon.
placeholderStyle	View Style		Adds style to the placeholder wrapper.
pressableProps	PressableProps except click handlers	None
renderPlaceholderContent	ReactElement<{}, string | JSXElementConstructor<any>>		Custom placeholder element (by default, it's the title).
rounded	boolean		Makes the avatar circular.
size	number | small | medium | large | xlarge	small	Size of the avatar.
source	ImageSourcePropType		Image source to be displayed on avatar.
title	string		Renders title in the placeholder.
titleStyle	Text Style		Style for the title.

Playground

Loading...