Skip to main content
Version: 1.2.0

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.

Standard Avatar
Standard
Avatar with Title
Title
Avatar with Icon
Icon
Standard Avatar with edit button
Standard with edit button

Usage#

import { Avatar } from 'react-native-elements';
// Standard Avatar<Avatar  rounded  source={{    uri:      'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',  }}/>
// Avatar with Title<Avatar rounded title="MD" />
// Avatar with Icon<Avatar rounded icon={{ name: 'home' }} />
// Standard Avatar with edit button<Avatar  source={{    uri:      'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',  }}  showEditButton/>

Avatar with initials#

import { Avatar } from "react-native-elements";
<Avatar  size="small"  rounded  title="MT"  onPress={() => console.log("Works!")}  activeOpacity={0.7}/><Avatar  size="medium"  title="BP"  onPress={() => console.log("Works!")}  activeOpacity={0.7}/><Avatar  size="large"  title="LW"  onPress={() => console.log("Works!")}  activeOpacity={0.7}/><Avatar  size="xlarge"  rounded  title="CR"  onPress={() => console.log("Works!")}  activeOpacity={0.7}/>

Avatar with icons#

import { Avatar } from "react-native-elements";
<Avatar  rounded  icon={{name: 'user', type: 'font-awesome'}}  onPress={() => console.log("Works!")}  activeOpacity={0.7}  containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}}/><Avatar  size="small"  rounded  icon={{name: 'user', type: 'font-awesome'}}  onPress={() => console.log("Works!")}  activeOpacity={0.7}  containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}}/><Avatar  size="medium"  overlayContainerStyle={{backgroundColor: 'blue'}}  icon={{name: 'meetup', color: 'red', type: 'font-awesome'}}  onPress={() => console.log("Works!")}  activeOpacity={0.7}  containerStyle={{flex: 3, marginTop: 100}}/><Avatar  size="large"  icon={{name: 'rocket', color: 'orange', type: 'font-awesome'}}  overlayContainerStyle={{backgroundColor: 'white'}}  onPress={() => console.log("Works!")}  activeOpacity={0.7}  containerStyle={{flex: 4, marginTop: 75}}/><Avatar  size="xlarge"  rounded  icon={{name: 'home', type: 'font-awesome'}}  onPress={() => console.log("Works!")}  activeOpacity={0.7}  containerStyle={{flex: 5, marginRight: 60}}/><Avatar  size={200}  rounded  icon={{name: 'user', type: 'font-awesome'}}  onPress={() => console.log("Works!")}  activeOpacity={0.7}  containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}}/>

Avatar with title placeholder#

import { ListItem } from 'react-native-elements';
<ListItem  leftAvatar={{    title: name[0],    source: { uri: avatar_url },    showEditButton: true,  }}  title={name}  subtitle={role}  chevron/>;

Props#


Reference#

activeOpacity#

Opacity when pressed

TypeDefault
number0.2

avatarStyle#

Style for avatar image

TypeDefault
object (style)none

containerStyle#

Styling for outer container

TypeDefault
object (style)none

editButton#

Icon props to be user for edit button

TypeDefault
{...Icon props}{ name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' }

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
object {name: string, color: string, size: number, type: string (default is material, or choose from supported icon sets), iconStyle: object(style)}none

iconStyle#

Extra styling for icon component (optional)

TypeDefault
object (style)none

imageProps#

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

TypeDefault
{...Image props}none

onEditPress#

Callback function when pressing on the edit button

TypeDefault
functionnone

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
object (style)none

placeholderStyle#

Adds style to the placeholder wrapper

TypeDefault
object (style){ backgroundColor: '#BDBDBD' }

rounded#

Makes the avatar circular

TypeDefault
booleanfalse

size#

Size of the avatar

TypeDefault
string(small, medium, large, xlarge) or numbersmall

showEditButton#

Shows an edit button over the avatar (optional)

TypeDefault
booleanfalse

source#

Image source

TypeDefault
ImageSourcenone

title#

Renders title in the placeholder

TypeDefault
stringnone

titleStyle#

Style for the title

TypeDefault
object (style)none

renderPlaceholderContent#

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

TypeDefault
React component or elementnone

Component#

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

TypeDefault
functionTouchableHighlight

ImageComponent#

Custom ImageComponent for Avatar

TypeDefault
React component or elementImage