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](/img/avatar/avatar--photo.jpg)
![Avatar with Title](/img/avatar/avatar--title.jpg)
![Avatar with Icon](/img/avatar/avatar--icon.jpg)
![Standard Avatar with accessory](/img/avatar/avatar--edit.jpg)
#
Usageimport { Avatar, Accessory } 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', }} > <Accessory /></Avatar>
#
Avatar with initials![](/img/avatar_with_initials.png)
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![](/img/avatar_with_icons.png)
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![](/img/avatar_with_title_placeholder.gif)
import { ListItem } from 'react-native-elements';
<ListItem leftAvatar={{ title: name[0], source: { uri: avatar_url }, showAccessory: true, }} title={name} subtitle={role} chevron/>;
#
PropsactiveOpacity
avatarStyle
containerStyle
icon
iconStyle
imageProps
onLongPress
onPress
overlayContainerStyle
placeholderStyle
rounded
size
source
title
titleStyle
renderPlaceholderContent
Component
ImageComponent
#
Child Components#
Accessory#
ReferenceactiveOpacity
#
Opacity when pressed
Type | Default |
---|---|
number | 0.2 |
avatarStyle
#
Style for avatar image
Type | Default |
---|---|
object (style) | none |
containerStyle
#
Styling for outer container
Type | Default |
---|---|
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.
Type | Default |
---|---|
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)
Type | Default |
---|---|
object (style) | none |
imageProps
#
Optional properties to pass to the avatar e.g "resizeMode"
Type | Default |
---|---|
{...Image props} | none |
onLongPress
#
Callback function when long pressing component
Type | Default |
---|---|
function | none |
onPress
#
Callback function when pressing component
Type | Default |
---|---|
function | none |
overlayContainerStyle
#
Style for the view outside image or icon
Type | Default |
---|---|
object (style) | none |
placeholderStyle
#
Adds style to the placeholder wrapper
Type | Default |
---|---|
object (style) | { backgroundColor: '#BDBDBD' } |
rounded
#
Makes the avatar circular
Type | Default |
---|---|
boolean | false |
showAccessory
#
Shows an accessory over the avatar (optional)
Type | Default |
---|---|
boolean | false |
size
#
Size of the avatar
Type | Default |
---|---|
string(small , medium , large , xlarge ) or number | small |
source
#
Image source
Type | Default |
---|---|
ImageSource | none |
title
#
Renders title in the placeholder
Type | Default |
---|---|
string | none |
titleStyle
#
Style for the title
Type | Default |
---|---|
object (style) | none |
renderPlaceholderContent
#
Custom placeholder element (by default, it's the title)
Type | Default |
---|---|
React component or element | none |
Component
#
Component for enclosing element (eg: TouchableHighlight, View, etc)
Type | Default |
---|---|
function | TouchableHighlight |
ImageComponent
#
Custom ImageComponent for Avatar
Type | Default |
---|---|
React component or element | Image |