Version: 3.4.2

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 accessory
Standard with accessory

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 accessory
<Avatar
source={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
}}
>
<Avatar.Accessory {...accessoryProps} />
</Avatar>

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 { Avatar, ListItem } from 'react-native-elements';
<ListItem>
<Avatar
title={name[0]}
source={{ uri: avatar_url }}
/>
<ListItem.Content>
<ListItem.Title>{name}</ListItem.Title>
<ListItem.SubTitle>{role}</ListItem.Subtitle>
</ListItem.Content>
<ListItem.Chevron/>
/>;

Props#


Child Components#

Accessory#

Receives either all Icon or Image props.


Reference#

activeOpacity#

Opacity when pressed

TypeDefault
number0.2

avatarStyle#

Style for avatar image

TypeDefault
object (style)none

Component#

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

TypeDefault
functionTouchableHighlight

containerStyle#

Styling for outer container

TypeDefault
object (style)none

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

ImageComponent#

Custom ImageComponent for Avatar

TypeDefault
React component or elementImage

imageProps#

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

TypeDefault
{...Image props}none

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' }

renderPlaceholderContent#

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

TypeDefault
React component or elementnone

rounded#

Makes the avatar circular

TypeDefault
booleanfalse

size#

Size of the avatar

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

source#

Image source

TypeDefault
ImageSourcenone

title#

Renders title in the placeholder

TypeDefault
stringnone

titleStyle#

Style for the title

TypeDefault
object (style)none