Skip to main content
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