react-native-elements
Version:
React Native Elements & UI Toolkit
480 lines (475 loc) • 91.4 kB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Lists · React Native Elements</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<p>Components for managing lists. Includes <code>List</code> and <code>ListItem</code>.</p>
"/><meta name="docsearch:version" content="1.0.0"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Lists · 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="<p>Components for managing lists. Includes <code>List</code> and <code>ListItem</code>.</p>
"/><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=""><a href="/react-native-elements/docs/getting_started.html" target="_self">Docs</a></li><li class=""><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 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/lists.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Lists</h1></header><article><div><span><p>Components for managing lists. Includes <code>List</code> and <code>ListItem</code>.</p>
<p><img src="/react-native-elements/img/lists.png" alt="Lists"></p>
<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>
<h3><a class="anchor" aria-hidden="true" id="using-map-function-implemented-with-avatar"></a><a href="#using-map-function-implemented-with-avatar" 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>Using Map Function. Implemented with avatar.</h3>
<pre><code class="hljs css language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> List<span class="token punctuation">,</span> ListItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-elements'</span>
<span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Amy Farha'</span><span class="token punctuation">,</span>
avatar_url<span class="token punctuation">:</span> <span class="token string">'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'</span><span class="token punctuation">,</span>
subtitle<span class="token punctuation">:</span> <span class="token string">'Vice President'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Chris Jackson'</span><span class="token punctuation">,</span>
avatar_url<span class="token punctuation">:</span> <span class="token string">'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg'</span><span class="token punctuation">,</span>
subtitle<span class="token punctuation">:</span> <span class="token string">'Vice Chairman'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">...</span> <span class="token comment">// more items</span>
<span class="token punctuation">]</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>List</span> <span class="token attr-name">containerStyle</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginBottom<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>
list<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>l<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ListItem</span>
<span class="token attr-name">roundAvatar</span>
<span class="token attr-name">avatar</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span>l<span class="token punctuation">.</span>avatar_url<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>l<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span>
<span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>l<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>List</span><span class="token punctuation">></span></span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="using-flatlist-implemented-with-link-and-avatar"></a><a href="#using-flatlist-implemented-with-link-and-avatar" 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>Using FlatList. Implemented with link and avatar.</h3>
<pre><code class="hljs css language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> List<span class="token punctuation">,</span> ListItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-elements'</span>
<span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Amy Farha'</span><span class="token punctuation">,</span>
avatar_url<span class="token punctuation">:</span> <span class="token string">'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'</span><span class="token punctuation">,</span>
subtitle<span class="token punctuation">:</span> <span class="token string">'Vice President'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Chris Jackson'</span><span class="token punctuation">,</span>
avatar_url<span class="token punctuation">:</span> <span class="token string">'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg'</span><span class="token punctuation">,</span>
subtitle<span class="token punctuation">:</span> <span class="token string">'Vice Chairman'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">...</span> <span class="token comment">// more items</span>
<span class="token punctuation">]</span>
<span class="token function">renderRow</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> item <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ListItem</span>
<span class="token attr-name">roundAvatar</span>
<span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span>
<span class="token attr-name">subtitle</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>subtitle<span class="token punctuation">}</span></span>
<span class="token attr-name">avatar</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span>item<span class="token punctuation">.</span>avatar_url<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">render</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>List</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FlatList</span>
<span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>list<span class="token punctuation">}</span></span>
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>renderRow<span class="token punctuation">}</span></span>
<span class="token attr-name">keyExtractor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item <span class="token operator">=></span> item<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>List</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="list"></a><a href="#list" 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>List</h2>
<p>Container for list items</p>
<blockquote>
<p>Also receives all
<a href="https://facebook.github.io/react-native/docs/view#props">View</a> props</p>
</blockquote>
<ul>
<li><a href="#containerstyle-list"><code>containerStyle</code></a></li>
</ul>
<hr>
<h3><a class="anchor" aria-hidden="true" id="containerstyle-list"></a><a href="#containerstyle-list" 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> (List)</h3>
<p>style the list container</p>
<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">marginTop: 20, borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: #cbd2d9</td></tr>
</tbody>
</table>
<hr>
<h2><a class="anchor" aria-hidden="true" id="listitem"></a><a href="#listitem" 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>ListItem</h2>
<ul>
<li><a href="#avatar"><code>avatar</code></a></li>
<li><a href="#avatarcontainerstyle"><code>avatarContainerStyle</code></a></li>
<li><a href="#avataroverlaycontainerstyle"><code>avatarOverlayContainerStyle</code></a></li>
<li><a href="#avatarstyle"><code>avatarStyle</code></a></li>
<li><a href="#chevroncolor"><code>chevronColor</code></a></li>
<li><a href="#component"><code>component</code></a></li>
<li><a href="#containerstyle-listitem"><code>containerStyle</code></a></li>
<li><a href="#disabled"><code>disabled</code></a></li>
<li><a href="#disabledstyle"><code>disabledStyle</code></a></li>
<li><a href="#fontfamily"><code>fontFamily</code></a></li>
<li><a href="#hidechevron"><code>hideChevron</code></a></li>
<li><a href="#label"><code>label</code></a></li>
<li><a href="#lefticon"><code>leftIcon</code></a></li>
<li><a href="#lefticononlongpress"><code>leftIconOnLongPress</code></a></li>
<li><a href="#lefticononpress"><code>leftIconOnPress</code></a></li>
<li><a href="#lefticonunderlaycolor"><code>leftIconUnderlayColor</code></a></li>
<li><a href="#onlongpress"><code>onLongPress</code></a></li>
<li><a href="#onpress"><code>onPress</code></a></li>
<li><a href="#onpressrighticon"><code>onPressRightIcon</code></a></li>
<li><a href="#onswitch"><code>onSwitch</code></a></li>
<li><a href="#righticon"><code>rightIcon</code></a></li>
<li><a href="#righttitle"><code>rightTitle</code></a></li>
<li><a href="#righttitlecontainerstyle"><code>rightTitleContainerStyle</code></a></li>
<li><a href="#righttitlenumberoflines"><code>rightTitleNumberOfLines</code></a></li>
<li><a href="#righttitlestyle"><code>rightTitleStyle</code></a></li>
<li><a href="#roundavatar"><code>roundAvatar</code></a></li>
<li><a href="#subtitle"><code>subtitle</code></a></li>
<li><a href="#subtitlecontainerstyle"><code>subtitleContainerStyle</code></a></li>
<li><a href="#subtitlenumberoflines"><code>subtitleNumberOfLines</code></a></li>
<li><a href="#subtitlestyle"><code>subtitleStyle</code></a></li>
<li><a href="#switchbutton"><code>switchButton</code></a></li>
<li><a href="#switchdisabled"><code>switchDisabled</code></a></li>
<li><a href="#switched"><code>switched</code></a></li>
<li><a href="#switchontintcolor"><code>switchOnTintColor</code></a></li>
<li><a href="#switchthumbtintcolor"><code>switchThumbTintColor</code></a></li>
<li><a href="#switchtintcolor"><code>switchTintColor</code></a></li>
<li><a href="#textinput"><code>textInput</code></a></li>
<li><a href="#textinputautocapitalize"><code>textInputAutoCapitalize</code></a></li>
<li><a href="#textinputautocorrect"><code>textInputAutoCorrect</code></a></li>
<li><a href="#textinputautofocus"><code>textInputAutoFocus</code></a></li>
<li><a href="#textinputcontainerstyle"><code>textInputContainerStyle</code></a></li>
<li><a href="#textinputeditable"><code>textInputEditable</code></a></li>
<li><a href="#textinputkeyboardtype"><code>textInputKeyboardType</code></a></li>
<li><a href="#textinputmaxlength"><code>textInputMaxLength</code></a></li>
<li><a href="#textinputmultiline"><code>textInputMultiline</code></a></li>
<li><a href="#textinputonblur"><code>textInputOnBlur</code></a></li>
<li><a href="#textinputonchangetext"><code>textInputOnChangeText</code></a></li>
<li><a href="#textinputonfocus"><code>textInputOnFocus</code></a></li>
<li><a href="#textinputplaceholder"><code>textInputPlaceholder</code></a></li>
<li><a href="#textinputreturnkeytype"><code>textInputReturnKeyType</code></a></li>
<li><a href="#textinputsecure"><code>textInputSecure</code></a></li>
<li><a href="#textinputselecttextonfocus"><code>textInputSelectTextOnFocus</code></a></li>
<li><a href="#textinputstyle"><code>textInputStyle</code></a></li>
<li><a href="#textinputvalue"><code>textInputValue</code></a></li>
<li><a href="#title"><code>title</code></a></li>
<li><a href="#titlecontainerstyle"><code>titleContainerStyle</code></a></li>
<li><a href="#titlenumberoflines"><code>titleNumberOfLines</code></a></li>
<li><a href="#titlestyle"><code>titleStyle</code></a></li>
<li><a href="#underlaycolor"><code>underlayColor</code></a></li>
<li><a href="#wrapperstyle"><code>wrapperStyle</code></a></li>
</ul>
<hr>
<h3><a class="anchor" aria-hidden="true" id="avatar"></a><a href="#avatar" 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>avatar</code></h3>
<p>left avatar (optional). This is the <a href="https://facebook.github.io/react-native/docs/images.html">React Native Image</a> <code>source</code> prop. Avatar can be used in parallel to leftIcon if needed.</p>
<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 (source)</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="avatarcontainerstyle"></a><a href="#avatarcontainerstyle" 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>avatarContainerStyle</code></h3>
<p>Avatar outer container styling (optional)</p>
<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="avataroverlaycontainerstyle"></a><a href="#avataroverlaycontainerstyle" 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>avatarOverlayContainerStyle</code></h3>
<p>Avatar overlay container styling (optional)</p>
<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="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>
<p>avatar styling (optional). This is the <a href="https://facebook.github.io/react-native/docs/images.html">React Native Image</a> <code>style</code> prop</p>
<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="chevroncolor"></a><a href="#chevroncolor" 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>chevronColor</code></h3>
<p>set chevron color</p>
<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">string</td><td style="text-align:center">#bdc6cf</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="component"></a><a href="#component" 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>component</code></h3>
<p>replace element with custom element (optional)</p>
<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">React Native element</td><td style="text-align:center">View or TouchableHighlight if onPress method is added as prop</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="containerstyle-listitem"></a><a href="#containerstyle-listitem" 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> (ListItem)</h3>
<p>additional main container styling (optional)</p>
<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="disabled"></a><a href="#disabled" 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>disabled</code></h3>
<p>If true the user won't be able to perform any action on the list item. Default value is false.</p>
<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">boolean</td><td style="text-align:center"></td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="disabledstyle"></a><a href="#disabledstyle" 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>disabledStyle</code></h3>
<p>Specific styling to be used when list item is disabled.</p>
<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="fontfamily"></a><a href="#fontfamily" 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>fontFamily</code></h3>
<p>specify different font family</p>
<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">string</td><td style="text-align:center">HelveticaNeue (iOS), Sans Serif (android)</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="hidechevron"></a><a href="#hidechevron" 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>hideChevron</code></h3>
<p>set if you do not want a chevron (optional)</p>
<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">boolean</td><td style="text-align:center">false</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="label"></a><a href="#label" 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>label</code></h3>
<p>add a label with your own styling by providing a label={<SomeComponent />} prop to ListItem</p>
<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">react native component</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="lefticon"></a><a href="#lefticon" 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>leftIcon</code></h3>
<p>icon configuration for left icon (optional), either a name from the icon library (like material) or a React Native element like <code>Image</code>. leftIcon can be used in parallel to avatar if needed.</p>
<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, color, style, type} (type defaults to material icons) <br/><br/> <strong>OR</strong> <br/><br/> React Native element</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="lefticononlongpress"></a><a href="#lefticononlongpress" 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>leftIconOnLongPress</code></h3>
<p>Attaches an onLongPress on left Icon</p>
<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">none</td><td style="text-align:center">function</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="lefticononpress"></a><a href="#lefticononpress" 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>leftIconOnPress</code></h3>
<p>Attaches an onPress on left Icon</p>
<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">none</td><td style="text-align:center">function</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="lefticonunderlaycolor"></a><a href="#lefticonunderlaycolor" 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>leftIconUnderlayColor</code></h3>
<p>Underlay color for left Icon</p>
<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">white</td><td style="text-align:center">string</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="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>onLongPress</code></h3>
<p>onLongPress method for link (optional)</p>
<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="onpress"></a><a href="#onpress" 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>onPress</code></h3>
<p>onPress method for link (optional)</p>
<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="onpressrighticon"></a><a href="#onpressrighticon" 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>onPressRightIcon</code></h3>
<p>Attaches an onPress on right Icon</p>
<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">none</td><td style="text-align:center">function</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="onswitch"></a><a href="#onswitch" 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>onSwitch</code></h3>
<p>add a callback function when the switch is toggled</p>
<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="righticon"></a><a href="#righticon" 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>rightIcon</code></h3>
<p>icon configuration for right icon (optional), either a name from the icon library (like material) or a React Native element like <code>Image</code>. Shows up unless hideChevron is set</p>
<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, color, style, type} (type defaults to material icons) <br/><br/> <strong>OR</strong> <br/><br/> React Native element</td><td style="text-align:center">{name: 'chevron-right'}</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="righttitle"></a><a href="#righttitle" 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>rightTitle</code></h3>
<p>provide a rightTitle to have a title show up on the right side of the button</p>
<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">string</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="righttitlecontainerstyle"></a><a href="#righttitlecontainerstyle" 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>rightTitleContainerStyle</code></h3>
<p>style the outer container of the rightTitle text</p>
<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">flex: 1, alignItems: 'flex-end', justifyContent: 'center'</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="righttitlenumberoflines"></a><a href="#righttitlenumberoflines" 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>rightTitleNumberOfLines</code></h3>
<p>Number of lines for Right Title</p>
<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">1</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="righttitlestyle"></a><a href="#righttitlestyle" 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>rightTitleStyle</code></h3>
<p>style the text of the rightTitle text</p>
<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">marginRight: 5, color: '#bdc6cf'</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="roundavatar"></a><a href="#roundavatar" 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>roundAvatar</code></h3>
<p>make left avatar round</p>
<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">boolean</td><td style="text-align:center">false</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="subtitle"></a><a href="#subtitle" 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>subtitle</code></h3>
<p>subtitle text or custom view (optional)</p>
<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">string, number or object</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="subtitlecontainerstyle"></a><a href="#subtitlecontainerstyle" 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>subtitleContainerStyle</code></h3>
<p>provide styling for subtitle container</p>
<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="subtitlenumberoflines"></a><a href="#subtitlenumberoflines" 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>subtitleNumberOfLines</code></h3>
<p>Number of lines for Subtitle</p>
<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">1</td><td style="text-align:center">number</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="subtitlestyle"></a><a href="#subtitlestyle" 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