react-native-elements

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Avatar · React Native Elements</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Avatars are found all over ui design from lists to profile screens. They are "/><meta name="docsearch:version" content="1.0.0"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Avatar · React Native Elements"/><meta property="og:type" content="website"/><meta property="og:url" content="https://react-native-training.github.io//react-native-elements/index.html"/><meta property="og:description" content="Avatars are found all over ui design from lists to profile screens. They are "/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native-elements/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="alternate" type="application/atom+xml" href="https://react-native-training.github.io//react-native-elements/blog/atom.xml" title="React Native Elements Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://react-native-training.github.io//react-native-elements/blog/feed.xml" title="React Native Elements Blog RSS Feed"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/react-native-elements/css/prism.css"/><link rel="stylesheet" href="/react-native-elements/css/main.css"/><script src="/react-native-elements/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native-elements/"><img class="logo" src="/react-native-elements/img/logo.png" alt="React Native Elements"/></a><a href="/react-native-elements/versions.html"><h3>1.0.0</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/react-native-elements/docs/getting_started.html" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/react-native-elements/docs/overview.html" target="_self">Components</a></li><li class=""><a href="/react-native-elements/help.html" target="_self">Help</a></li><li class=""><a href="https://github.com/react-native-training/react-native-elements" target="_self">GitHub</a></li><li class=""><a href="/react-native-elements/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"></div><h2>›Components</h2><div class="tocToggler" id="tocToggler"></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">It Starts Basic</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/getting_started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/overview.html">Overview</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/customization.html">Customization</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/troubleshooting.html">Troubleshooting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Components</h3><ul class=""><li class="navListItem navListItemActive"><a class="navItem" href="/react-native-elements/docs/avatar.html">Avatar</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/badge.html">Badge</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/button.html">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/button_group.html">ButtonGroup</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/card.html">Card</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/checkbox.html">CheckBox</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/divider.html">Divider</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/header.html">Header</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/icon.html">Icon</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/image.html">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/input.html">Input</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/listitem.html">ListItem</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/overlay.html">Overlay</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/pricing.html">Pricing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/rating.html">Rating</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/searchbar.html">SearchBar</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/slider.html">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/social_icon.html">SocialIcon</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/text.html">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/tile.html">Tile</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/tooltip.html">Tooltip</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Repo</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/contributing.html">Contributing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/testing.html">Testing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/labels.html">Label Guide</a></li></ul></div></div></section></div><script> var coll = document.getElementsByClassName('collapsible'); var checkActiveCategory = true; for (var i = 0; i < coll.length; i++) { var links = coll[i].nextElementSibling.getElementsByTagName('*'); if (checkActiveCategory){ for (var j = 0; j < links.length; j++) { if (links[j].classList.contains('navListItemActive')){ coll[i].nextElementSibling.classList.toggle('hide'); coll[i].childNodes[1].classList.toggle('rotate'); checkActiveCategory = false; break; } } } coll[i].addEventListener('click', function() { var arrow = this.childNodes[1]; arrow.classList.toggle('rotate'); var content = this.nextElementSibling; content.classList.toggle('hide'); }); } document.addEventListener('DOMContentLoaded', function() { createToggler('#navToggler', '#docsNav', 'docsSliderActive'); createToggler('#tocToggler', 'body', 'tocActive'); const headings = document.querySelector('.toc-headings'); headings && headings.addEventListener('click', function(event) { if (event.target.tagName === 'A') { document.body.classList.remove('tocActive'); } }, false); function createToggler(togglerSelector, targetSelector, className) { var toggler = document.querySelector(togglerSelector); var target = document.querySelector(targetSelector); if (!toggler) { return; } toggler.onclick = function(event) { event.preventDefault(); target.classList.toggle(className); }; } }); </script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/react-native-training/react-native-elements/edit/master/docs/avatar.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Avatar</h1></header><article><div>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. <div class="component-preview component-preview--grid"> <figure> <img src="/react-native-elements/img/avatar/avatar--photo.jpg" alt="Standard Avatar" /> <figcaption>Standard</figcaption> </figure> <figure> <img src="/react-native-elements/img/avatar/avatar--title.jpg" alt="Avatar with Title" /> <figcaption>Title</figcaption> </figure> <figure> <img src="/react-native-elements/img/avatar/avatar--icon.jpg" alt="Avatar with Icon" /> <figcaption>Icon</figcaption> </figure> <figure> <img src="/react-native-elements/img/avatar/avatar--edit.jpg" alt="Standard Avatar with edit button" /> <figcaption>Standard with edit button</figcaption> </figure> </div> <h2><a class="anchor" aria-hidden="true" id="usage"></a><a href="#usage" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Usage</h2> <pre><code class="hljs css language-js">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 /> </code></pre> <h4><a class="anchor" aria-hidden="true" id="avatar-with-initials"></a><a href="#avatar-with-initials" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Avatar with initials</h4> <img src="/react-native-elements/img/avatar_with_initials.png" width="500" > <pre><code class="hljs css language-js">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} /> </code></pre> <h4><a class="anchor" aria-hidden="true" id="avatar-with-icons"></a><a href="#avatar-with-icons" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Avatar with icons</h4> <img src="/react-native-elements/img/avatar_with_icons.png" width="500" > <pre><code class="hljs css language-js">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}} /> </code></pre> <h4><a class="anchor" aria-hidden="true" id="avatar-with-title-placeholder"></a><a href="#avatar-with-title-placeholder" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Avatar with title placeholder</h4> <img src="/react-native-elements/img/avatar_with_title_placeholder.gif" width="500" > <pre><code class="hljs css language-js">import { ListItem } from 'react-native-elements'; <ListItem leftAvatar={{ title: name[0], source: { uri: avatar_url }, showEditButton: true, }} title={name} subtitle={role} chevron />; </code></pre> <hr> <h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h2> <ul> <li><a href="#activeopacity"><code>activeOpacity</code></a></li> <li><a href="#avatarstyle"><code>avatarStyle</code></a></li> <li><a href="#containerstyle"><code>containerStyle</code></a></li> <li><a href="#editbutton"><code>editButton</code></a></li> <li><a href="#icon"><code>icon</code></a></li> <li><a href="#iconstyle"><code>iconStyle</code></a></li> <li><a href="#imageprops"><code>imageProps</code></a></li> <li><a href="#oneditpress"><code>onEditPress</code></a></li> <li><a href="#onlongpress"><code>onLongPress</code></a></li> <li><a href="#onpress"><code>onPress</code></a></li> <li><a href="#overlaycontainerstyle"><code>overlayContainerStyle</code></a></li> <li><a href="#placeholderstyle"><code>placeholderStyle</code></a></li> <li><a href="#rounded"><code>rounded</code></a></li> <li><a href="#size"><code>size</code></a></li> <li><a href="#showeditbutton"><code>showEditButton</code></a></li> <li><a href="#source"><code>source</code></a></li> <li><a href="#title"><code>title</code></a></li> <li><a href="#titlestyle"><code>titleStyle</code></a></li> <li><a href="#renderplaceholdercontent"><code>renderPlaceholderContent</code></a></li> <li><a href="#Component"><code>Component</code></a></li> <li><a href="#imagecomponent"><code>ImageComponent</code></a></li> </ul> <hr> <h2><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h2> <h3><a class="anchor" aria-hidden="true" id="activeopacity"></a><a href="#activeopacity" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>activeOpacity</code></h3> Opacity when pressed <table> <thead> <tr><th style="text-align:center">Type</th><th style="text-align:center">Default</th></tr> </thead> <tbody> <tr><td style="text-align:center">number</td><td style="text-align:center">0.2</td></tr> </tbody> </table> <hr> <h3><a class="anchor" aria-hidden="true" id="avatarstyle"></a><a href="#avatarstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>avatarStyle</code></h3> Style for avatar image <table> <thead> <tr><th style="text-align:center">Type</th><th style="text-align:center">Default</th></tr> </thead> <tbody> <tr><td style="text-align:center">object (style)</td><td style="text-align:center">none</td></tr> </tbody> </table> <hr> <h3><a class="anchor" aria-hidden="true" id="containerstyle"></a><a href="#containerstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>containerStyle</code></h3> Styling for outer container <table> <thead> <tr><th style="text-align:center">Type</th><th style="text-align:center">Default</th></tr> </thead> <tbody> <tr><td style="text-align:center">object (style)</td><td style="text-align:center">none</td></tr> </tbody> </table> <hr> <h3><a class="anchor" aria-hidden="true" id="editbutton"></a><a href="#editbutton" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>editButton</code></h3> Icon props to be user for edit button <table> <thead> <tr><th style="text-align:center">Type</th><th style="text-align:center">Default</th></tr> </thead> <tbody> <tr><td style="text-align:center">{<a href="/react-native-elements/docs/icon.html#icon-props">...Icon props</a>}</td><td style="text-align:center">{ name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' }</td></tr> </tbody> </table> <hr> <h3><a class="anchor" aria-hidden="true" id="icon"></a><a href="#icon" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>icon</code></h3> Displays an icon as the main content of the Avatar. Cannot be used alongside title. When used with the <code>source</code> prop it will be used as the placeholder. <table> <thead> <tr><th style="text-align:center">Type</th><th style="text-align:center">Default</th></tr> </thead> <tbody> <tr><td style="text-align:center">object {name: string, color: string, size: number, type: string (default is material, or choose from <a href="/react-native-elements/docs/icon.html#available-icon-sets">supported icon sets</a>), iconStyle: object(style)}</td><td style="text-align:center">none</td></tr> </tbody> </table> <hr> <h3><a class="anchor" aria-hidden="true" id="iconstyle"></a><a href="#iconstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>iconStyle</code></h3> Extra styling for icon component (optional) <table> <thead> <tr><th style="text-align:center">Type</th><th style="text-align:center">Default</th></tr> </thead> <tbody> <tr><td style="text-align:center">object (style)</td><td style="text-align:center">none</td></tr> </tbody> </table> <hr> <h3><a class="anchor" aria-hidden="true" id="imageprops"></a><a href="#imageprops" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>imageProps</code></h3> Optional properties to pass to the avatar e.g "resizeMode" <table> <thead> <tr><th style="text-align:center">Type</th><th style="text-align:center">Default</th></tr> </thead> <tbody> <tr><td style="text-align:center">object (imageProperties)</td><td style="text-align:center">none</td></tr> </tbody> </table> <hr> <h3><a class="anchor" aria-hidden="true" id="oneditpress"></a><a href="#oneditpress" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onEditPress</code></h3> Callback function when pressing on the edit button <table> <thead> <tr><th style="text-align:center">Type</th><th style="text-align:center">Default</th></tr> </thead> <tbody> <tr><td style="text-align:center">function</td><td style="text-align:center">none</td></tr> </tbody> </table> <hr> <h3><a class="anchor" aria-hidden="true" id="onlongpress"></a><a href="#onlongpress" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="