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>	undefined	Custom ImageComponent for Avatar.
avatarStyle	ImageStyle	undefined	Style for avatar image.
containerStyle	View Style	undefined	Styling for outer container.
icon	AvatarIcon	undefined	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	undefined	Extra styling for icon component.
imageProps	ImageProps(Object)	undefined	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	undefined	Style for the view outside image or icon.
pressableProps	PressableProps except click handlers	None
renderCustomContent	ReactElement<{}, string | JSXElementConstructor<any>>	undefined	Custom element inside the avatar (by default, it's the title).
rounded	boolean	false	Makes the avatar circular.
size	number | small | medium | large | xlarge	small	Size of the avatar.
source	ImageSourcePropType	undefined	Image source to be displayed on avatar.
title	string	undefined	Renders title in the placeholder.
titleStyle	Text Style	undefined	Style for the title.

Playground

Loading...