react-native-elements
Version:
React Native Elements & UI Toolkit
305 lines (297 loc) • 47.2 kB
HTML
<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Header · React Native Elements</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<p>Headers are navigation components that display information and actions relating</p>
"/><meta name="docsearch:version" content="next"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Header · 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>Headers are navigation components that display information and actions relating</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>next</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/next/getting_started.html" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/react-native-elements/docs/next/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"><i></i></div><h2><i>›</i><span>Components</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></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/next/getting_started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/overview.html">Overview</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/customization.html">Customization</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/troubleshooting.html">Troubleshooting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Components</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/avatar.html">Avatar</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/badge.html">Badge</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/button.html">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/button_group.html">ButtonGroup</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/card.html">Card</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/checkbox.html">CheckBox</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/divider.html">Divider</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/react-native-elements/docs/next/header.html">Header</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/icon.html">Icon</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/image.html">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/input.html">Input</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/listitem.html">ListItem</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/overlay.html">Overlay</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/pricing.html">Pricing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/rating.html">Rating</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/searchbar.html">SearchBar</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/slider.html">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/social_icon.html">SocialIcon</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/text.html">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/tile.html">Tile</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/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/next/contributing.html">Contributing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/testing.html">Testing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/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/header.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Header</h1></header><article><div><span><p>Headers are navigation components that display information and actions relating
to the current screen.</p>
<p><img src="/react-native-elements/img/header.png" alt="Header"></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="header-with-default-components"></a><a href="#header-with-default-components" 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>Header with default components</h3>
<p>For quick setup we provide default components, which are React Native Elements
Icon for left/right buttons and React Native Text for title. You can customize
them with configuration objects passed in as props.</p>
<pre><code class="hljs css language-js"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Header</span>
<span class="token attr-name">leftComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> icon<span class="token punctuation">:</span> <span class="token string">'menu'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">centerComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'MY TITLE'</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">rightComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> icon<span class="token punctuation">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="left-aligned-center-component"></a><a href="#left-aligned-center-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>Left aligned center component</h3>
<p><img src="/react-native-elements/img/header-left.png" alt="Header"></p>
<pre><code class="hljs css language-js"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Header</span>
<span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span>
<span class="token attr-name">leftComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> icon<span class="token punctuation">:</span> <span class="token string">'menu'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">centerComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'MY TITLE'</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">rightComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> icon<span class="token punctuation">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="header-with-custom-components-passed-in-through-props"></a><a href="#header-with-custom-components-passed-in-through-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>Header with custom components passed in through props</h3>
<p>You can pass in your custom components like this too.</p>
<pre><code class="hljs css language-js"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Header</span>
<span class="token attr-name">leftComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyCustomLeftComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
<span class="token attr-name">centerComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyCustomCenterComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
<span class="token attr-name">rightComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyCustomRightComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="header-with-mixed-components"></a><a href="#header-with-mixed-components" 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>Header with mixed components</h3>
<p>You can also mix the content, for example you can have default components
defined by configuration combined with custom components. Passing a render
function that returns a React Element is valid too.</p>
<pre><code class="hljs css language-js"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Header</span>
<span class="token attr-name">leftComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyCustomLeftComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
<span class="token attr-name">centerComponent</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><span class="token function">renderCenterComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
<span class="token attr-name">rightComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> icon<span class="token punctuation">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="header-with-custom-components-passed-in-as-children"></a><a href="#header-with-custom-components-passed-in-as-children" 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>Header with custom components passed in as children</h3>
<pre><code class="hljs css language-js"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyCustomLeftComponent</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyCustomCenterComponent</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyCustomRightComponent</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Header</span><span class="token punctuation">></span></span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="component-precedence"></a><a href="#component-precedence" 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>Component precedence</h3>
<p>Components defined through props take precedence over components passed in as
children, so in this case only the left component with icon set to home will be
rendered.</p>
<pre><code class="hljs css language-js"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Header</span> <span class="token attr-name">leftComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> icon<span class="token punctuation">:</span> <span class="token string">'menu'</span> <span class="token punctuation">}</span><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>MyCustomLeftComponent</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyCustomCenterComponent</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyCustomRightComponent</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Header</span><span class="token punctuation">></span></span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="header-customisability"></a><a href="#header-customisability" 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>Header customisability</h3>
<p>We wanted the Header to be as customisable as possible, so you are free to try
different combinations of props. For example, if you want to change the left,
center, or right component's layout, you can adjust the <code>containerStyle</code></p>
<pre><code class="hljs css language-js"><span class="token operator"><</span>Header
statusBarProps<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> barStyle<span class="token punctuation">:</span> <span class="token string">'light-content'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
barStyle<span class="token operator">=</span><span class="token string">"light-content"</span> <span class="token comment">// or directly</span>
leftComponent<span class="token operator">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyCustomLeftComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>
centerComponent<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'MY TITLE'</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
containerStyle<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#3D6DCC'</span><span class="token punctuation">,</span>
justifyContent<span class="token punctuation">:</span> <span class="token string">'space-around'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">></span>
</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="#containerstyle"><code>containerStyle</code></a></li>
<li><a href="#backgroundcolor"><code>backgroundColor</code></a></li>
<li><a href="#backgroundimage"><code>backgroundImage</code></a></li>
<li><a href="#backgroundimagestyle"><code>backgroundImageStyle</code></a></li>
<li><a href="#leftcomponent"><code>leftComponent</code></a></li>
<li><a href="#centercomponent"><code>centerComponent</code></a></li>
<li><a href="#rightcomponent"><code>rightComponent</code></a></li>
<li><a href="#leftcontainerstyle"><code>leftContainerStyle</code></a></li>
<li><a href="#centercontainerstyle"><code>centerContainerStyle</code></a></li>
<li><a href="#rightcontainerstyle"><code>rightContainerStyle</code></a></li>
<li><a href="#placement"><code>placement</code></a></li>
<li><a href="#barstyle"><code>barStyle</code></a></li>
<li><a href="#statusbarprops"><code>statusBarProps</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="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>
<p>styling around the main 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">style</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="backgroundcolor"></a><a href="#backgroundcolor" 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>backgroundColor</code></h3>
<p>sets backgroundColor of the parent component</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="backgroundimage"></a><a href="#backgroundimage" 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>backgroundImage</code></h3>
<p>sets backgroundImage for parent component</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 (image)</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="backgroundimagestyle"></a><a href="#backgroundimagestyle" 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>backgroundImageStyle</code></h3>
<p>styling for backgroundImage in the main 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">style</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="leftcomponent"></a><a href="#leftcomponent" 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>leftComponent</code></h3>
<p>define your left component here</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">{ text: string, <a href="https://facebook.github.io/react-native/docs/text.html#props">...Text props</a>}<br/><strong>OR</strong><br/>{ icon: string, <a href="/react-native-elements/docs/icon.html#icon-props">...Icon props</a>} <br/><strong>OR</strong><br/> React element or component</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="centercomponent"></a><a href="#centercomponent" 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>centerComponent</code></h3>
<p>define your center component here</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">{ text: string, <a href="https://facebook.github.io/react-native/docs/text.html#props">...Text props</a>}<br/><strong>OR</strong><br/>{ icon: string, <a href="/react-native-elements/docs/icon.html#icon-props">...Icon props</a>} <br/><strong>OR</strong><br/> React element or component</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="rightcomponent"></a><a href="#rightcomponent" 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>rightComponent</code></h3>
<p>define your right component here</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">{ text: string, <a href="https://facebook.github.io/react-native/docs/text.html#props">...Text props</a>}<br/><strong>OR</strong><br/>{ icon: string, <a href="/react-native-elements/docs/icon.html#icon-props">...Icon props</a>} <br/><strong>OR</strong><br/> React element or component</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="leftcontainerstyle"></a><a href="#leftcontainerstyle" 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>leftContainerStyle</code></h3>
<p>styling for container around the leftComponent</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">style</td><td style="text-align:center">{ flex: 1 }</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="centercontainerstyle"></a><a href="#centercontainerstyle" 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>centerContainerStyle</code></h3>
<p>styling for container around the centerComponent</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">style</td><td style="text-align:center">{ flex: 3 }</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="rightcontainerstyle"></a><a href="#rightcontainerstyle" 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>rightContainerStyle</code></h3>
<p>styling for container around the rightComponent</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">style</td><td style="text-align:center">{ flex: 1 }</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="placement"></a><a href="#placement" 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>placement</code></h3>
<p>Alignment for 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">'left', 'center' or 'right'</td><td style="text-align:center">'center'</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="barstyle"></a><a href="#barstyle" 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>barStyle</code></h3>
<p>Sets the color of the status bar 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">'default', 'light-content', 'dark-content'</td><td style="text-align:center">'default' (<a href="https://facebook.github.io/react-native/docs/statusbar.html#barstyle">source</a>)</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="statusbarprops"></a><a href="#statusbarprops" 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>statusBarProps</code></h3>
<p>accepts all props for StatusBar</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">{ <a href="https://facebook.github.io/react-native/docs/statusbar.html#props">...StatusBar props</a> }</td><td style="text-align:center">none</td></tr>
</tbody>
</table>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native-elements/docs/next/divider.html"><span class="arrow-prev">← </span><span>Divider</span></a><a class="docs-next button" href="/react-native-elements/docs/next/icon.html"><span>Icon</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#usage">Usage</a><ul class="toc-headings"><li><a href="#header-with-default-components">Header with default components</a></li><li><a href="#left-aligned-center-component">Left aligned center component</a></li><li><a href="#header-with-custom-components-passed-in-through-props">Header with custom components passed in through props</a></li><li><a href="#header-with-mixed-components">Header with mixed components</a></li><li><a href="#header-with-custom-components-passed-in-as-children">Header with custom components passed in as children</a></li><li><a href="#component-precedence">Component precedence</a></li><li><a href="#header-customisability">Header customisability</a></li></ul></li><li><a href="#props">Props</a></li><li><a href="#reference">Reference</a><ul class="toc-headings"><li><a href="#containerstyle"><code>containerstyle</code></a></li><li><a href="#backgroundcolor"><code>backgroundColor</code></a></li><li><a href="#backgroundimage"><code>backgroundImage</code></a></li><li><a href="#backgroundimagestyle"><code>backgroundImageStyle</code></a></li><li><a href="#leftcomponent"><code>leftComponent</code></a></li><li><a href="#centercomponent"><code>centerComponent</code></a></li><li><a href="#rightcomponent"><code>rightComponent</code></a></li><li><a href="#leftcontainerstyle"><code>leftContainerStyle</code></a></li><li><a href="#centercontainerstyle"><code>centerContainerStyle</code></a></li><li><a href="#rightcontainerstyle"><code>rightContainerStyle</code></a></li><li><a href="#placement"><code>placement</code></a></li><li><a href="#barstyle"><code>barStyle</code></a></li><li><a href="#statusbarprops"><code>statusBarProps</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native-elements/" class="nav-home"><img src="/react-native-elements/img/logo.png" alt="React Native Elements" width="120" height="58"/></a><div><h5>Docs</h5><a href="/react-native-elements/docs/en/getting_started.html">Getting Started</a><a href="/react-native-elements/docs/en/overview.html">Components</a></div><div><h5>Community</h5><a href="https://reactnativetraining.herokuapp.com/" target="_blank">Chat with us on Slack</a><a href="https://github.com/react-native-training/react-native-elements/issues/" target="_blank">Submit a bug or feature</a><a href="https://opencollective.com/react-native-elements" target="_blank">Support us on Open Collective</a></div><div><h5>More</h5><a href="https://github.com/react-native-training/react-native-elements" target="blank">GitHub</a><a class="github-button" href="https://github.com/react-native-training/react-native-elements" data-icon="octicon-star" data-count-href="/facebook/docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright-logo-container"><a href="http://reactnative.training" target="_blank"><img src="/react-native-elements/img/react-native-training.png" alt="React Native Training" width="90"/></a></section><section class="copyright">Copyright © 2019 React Native Training</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search && search.focus();
}
});
</script><script>
var search = docsearch({
apiKey: '89e04a9445d16350e100c2d2421f2d39',
indexName: 'react_native_elements',
inputSelector: '#search_input_react'
});
</script></body></html>