react-native/website/versioned_docs/0.39/toolbarandroid.md

---
id: version-0.39-toolbarandroid
title: toolbarandroid
original_id: toolbarandroid
---
<a id="content"></a><h1><a class="anchor" name="toolbarandroid"></a>ToolbarAndroid <a class="hash-link" href="docs/toolbarandroid.html#toolbarandroid">#</a></h1><div><div><p>React component that wraps the Android-only <a href="https://developer.android.com/reference/android/support/v7/widget/Toolbar.html" target="_blank"><code>Toolbar</code> widget</a>. A Toolbar can display a logo,
navigation icon (e.g. hamburger menu), a title &amp; subtitle and a list of actions. The title and
subtitle are expanded so the logo and navigation icons are displayed on the left, title and
subtitle in the middle and the actions on the right.</p><p>If the toolbar has an only child, it will be displayed between the title and actions.</p><p>Although the Toolbar supports remote images for the logo, navigation and action icons, this
should only be used in DEV mode where <code>require('./some_icon.png')</code> translates into a packager
URL. In release mode you should always use a drawable resource for these icons. Using
<code>require('./some_icon.png')</code> will do this automatically for you, so as long as you don't
explicitly use e.g. <code>{uri: 'http://...'}</code>, you will be good.</p><p>Example:</p><div class="prism language-javascript">render<span class="token punctuation">:</span> <span class="token keyword">function</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>
    &lt;ToolbarAndroid
      logo<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./app_logo.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
      title<span class="token operator">=</span><span class="token string">"AwesomeApp"</span>
      actions<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Settings'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./icon_settings.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> show<span class="token punctuation">:</span> <span class="token string">'always'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
      onActionSelected<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onActionSelected<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
onActionSelected<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>position<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>position <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // index of 'Settings'
</span>    <span class="token function">showSettings<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/toolbarandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/toolbarandroid.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="actions"></a>actions <span class="propType"><span>[{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}]</span></span> <a class="hash-link" href="docs/toolbarandroid.html#actions">#</a></h4><div><p>Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
or text on the right side of the widget. If they don't fit they are placed in an 'overflow'
menu.</p><p>This property takes an array of objects, where each object has the following keys:</p><ul><li><code>title</code>: <strong>required</strong>, the title of this action</li><li><code>icon</code>: the icon for this action, e.g. <code>require('./some_icon.png')</code></li><li><code>show</code>: when to show this action as an icon or hide it in the overflow menu: <code>always</code>,
<code>ifRoom</code> or <code>never</code></li><li><code>showWithText</code>: boolean, whether to show text alongside the icon or not</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetend"></a>contentInsetEnd <span class="propType">number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetend">#</a></h4><div><p>Sets the content inset for the toolbar ending edge.</p><p>The content inset affects the valid area for Toolbar content other than
the navigation button and menu. Insets define the minimum margin for
these components and can be used to effectively align Toolbar content
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetstart"></a>contentInsetStart <span class="propType">number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetstart">#</a></h4><div><p>Sets the content inset for the toolbar starting edge.</p><p>The content inset affects the valid area for Toolbar content other than
the navigation button and menu. Insets define the minimum margin for
these components and can be used to effectively align Toolbar content
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="logo"></a>logo <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#logo">#</a></h4><div><p>Sets the toolbar logo.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navicon"></a>navIcon <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#navicon">#</a></h4><div><p>Sets the navigation icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onactionselected"></a>onActionSelected <span class="propType">function</span> <a class="hash-link" href="docs/toolbarandroid.html#onactionselected">#</a></h4><div><p>Callback that is called when an action is selected. The only argument that is passed to the
callback is the position of the action in the actions array.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oniconclicked"></a>onIconClicked <span class="propType">function</span> <a class="hash-link" href="docs/toolbarandroid.html#oniconclicked">#</a></h4><div><p>Callback called when the icon is selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overflowicon"></a>overflowIcon <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#overflowicon">#</a></h4><div><p>Sets the overflow icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rtl"></a>rtl <span class="propType">bool</span> <a class="hash-link" href="docs/toolbarandroid.html#rtl">#</a></h4><div><p>Used to set the toolbar direction to RTL.
In addition to this property you need to add</p><p>  android:supportsRtl="true"</p><p>to your application AndroidManifest.xml and then call
<code>setLayoutDirection(LayoutDirection.RTL)</code> in your MainActivity
<code>onCreate</code> method.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitle"></a>subtitle <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#subtitle">#</a></h4><div><p>Sets the toolbar subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitlecolor"></a>subtitleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#subtitlecolor">#</a></h4><div><p>Sets the toolbar subtitle color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#title">#</a></h4><div><p>Sets the toolbar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a>titleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#titlecolor">#</a></h4><div><p>Sets the toolbar title color.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js">edit the content above on GitHub</a> and send us a pull request!</p><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/toolbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/ToolbarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> nativeImageSource <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'nativeImageSource'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>
  StyleSheet<span class="token punctuation">,</span>
  Text<span class="token punctuation">,</span>
  View<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
<span class="token keyword">var</span> UIExplorerBlock <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerBlock'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> UIExplorerPage <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerPage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> Switch <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'Switch'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ToolbarAndroid <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'ToolbarAndroid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

class <span class="token class-name">ToolbarAndroidExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  static title <span class="token operator">=</span> <span class="token string">'&lt;ToolbarAndroid&gt;'</span><span class="token punctuation">;</span>
  static description <span class="token operator">=</span> <span class="token string">'Examples of using the Android toolbar.'</span><span class="token punctuation">;</span>

  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    actionText<span class="token punctuation">:</span> <span class="token string">'Example app with toolbar component'</span><span class="token punctuation">,</span>
    toolbarSwitch<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    colorProps<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      titleColor<span class="token punctuation">:</span> <span class="token string">'#3b5998'</span><span class="token punctuation">,</span>
      subtitleColor<span class="token punctuation">:</span> <span class="token string">'#6a7180'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      &lt;UIExplorerPage title<span class="token operator">=</span><span class="token string">"&lt;ToolbarAndroid&gt;"</span><span class="token operator">&gt;</span>
        &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Toolbar with title/subtitle and actions"</span><span class="token operator">&gt;</span>
          &lt;ToolbarAndroid
            actions<span class="token operator">=</span><span class="token punctuation">{</span>toolbarActions<span class="token punctuation">}</span>
            navIcon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">nativeImageSource<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
              android<span class="token punctuation">:</span> <span class="token string">'ic_menu_black_24dp'</span><span class="token punctuation">,</span>
              width<span class="token punctuation">:</span> <span class="token number">48</span><span class="token punctuation">,</span>
              height<span class="token punctuation">:</span> <span class="token number">48</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            onActionSelected<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onActionSelected<span class="token punctuation">}</span>
            onIconClicked<span class="token operator">=</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">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>actionText<span class="token punctuation">:</span> <span class="token string">'Icon clicked'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span>
            subtitle<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>actionText<span class="token punctuation">}</span>
            title<span class="token operator">=</span><span class="token string">"Toolbar"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
          &lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>actionText<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
        &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Toolbar with logo &amp; custom title view (a View with Switch+Text)"</span><span class="token operator">&gt;</span>
          &lt;ToolbarAndroid
            logo<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">nativeImageSource<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
              android<span class="token punctuation">:</span> <span class="token string">'launcher_icon'</span><span class="token punctuation">,</span>
              width<span class="token punctuation">:</span> <span class="token number">132</span><span class="token punctuation">,</span>
              height<span class="token punctuation">:</span> <span class="token number">144</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span><span class="token operator">&gt;</span>
            &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>height<span class="token punctuation">:</span> <span class="token number">56</span><span class="token punctuation">,</span> flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
              &lt;Switch
                value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>toolbarSwitch<span class="token punctuation">}</span>
                onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token string">'toolbarSwitch'</span><span class="token punctuation">:</span> value<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
              &lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token string">'\'Tis but a switch'</span><span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
            &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
          &lt;<span class="token operator">/</span>ToolbarAndroid<span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
        &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Toolbar with no icon"</span><span class="token operator">&gt;</span>
          &lt;ToolbarAndroid
            actions<span class="token operator">=</span><span class="token punctuation">{</span>toolbarActions<span class="token punctuation">}</span>
            style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span>
            subtitle<span class="token operator">=</span><span class="token string">"There be no icon here"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
        &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Toolbar with navIcon &amp; logo, no title"</span><span class="token operator">&gt;</span>
          &lt;ToolbarAndroid
            actions<span class="token operator">=</span><span class="token punctuation">{</span>toolbarActions<span class="token punctuation">}</span>
            logo<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">nativeImageSource<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
              android<span class="token punctuation">:</span> <span class="token string">'launcher_icon'</span><span class="token punctuation">,</span>
              width<span class="token punctuation">:</span> <span class="token number">132</span><span class="token punctuation">,</span>
              height<span class="token punctuation">:</span> <span class="token number">144</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            navIcon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">nativeImageSource<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
              android<span class="token punctuation">:</span> <span class="token string">'ic_menu_black_24dp'</span><span class="token punctuation">,</span>
              width<span class="token punctuation">:</span> <span class="token number">48</span><span class="token punctuation">,</span>
              height<span class="token punctuation">:</span> <span class="token number">48</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
        &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Toolbar with custom title colors"</span><span class="token operator">&gt;</span>
          &lt;ToolbarAndroid
            navIcon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">nativeImageSource<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
              android<span class="token punctuation">:</span> <span class="token string">'ic_menu_black_24dp'</span><span class="token punctuation">,</span>
              width<span class="token punctuation">:</span> <span class="token number">48</span><span class="token punctuation">,</span>
              height<span class="token punctuation">:</span> <span class="token number">48</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            onIconClicked<span class="token operator">=</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">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>colorProps<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            title<span class="token operator">=</span><span class="token string">"Wow, such toolbar"</span>
            style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span>
            subtitle<span class="token operator">=</span><span class="token string">"Much native"</span>
            <span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>colorProps<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
          &lt;Text<span class="token operator">&gt;</span>
            Touch the icon to reset the custom colors to the default <span class="token punctuation">(</span>theme<span class="token operator">-</span>provided<span class="token punctuation">)</span> ones<span class="token punctuation">.</span>
          &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
        &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Toolbar with remote logo &amp; navIcon"</span><span class="token operator">&gt;</span>
          &lt;ToolbarAndroid
            actions<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Bunny'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./bunny.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> show<span class="token punctuation">:</span> <span class="token string">'always'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
            logo<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./hawk.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            navIcon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./bunny.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            title<span class="token operator">=</span><span class="token string">"Bunny and Hawk"</span>
            style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
        &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Toolbar with custom overflowIcon"</span><span class="token operator">&gt;</span>
          &lt;ToolbarAndroid
            actions<span class="token operator">=</span><span class="token punctuation">{</span>toolbarActions<span class="token punctuation">}</span>
            overflowIcon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./bunny.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>toolbar<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>UIExplorerPage<span class="token operator">&gt;</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  _onActionSelected <span class="token operator">=</span> <span class="token punctuation">(</span>position<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
      actionText<span class="token punctuation">:</span> <span class="token string">'Selected '</span> <span class="token operator">+</span> toolbarActions<span class="token punctuation">[</span>position<span class="token punctuation">]</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> toolbarActions <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Create'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token function">nativeImageSource<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
    android<span class="token punctuation">:</span> <span class="token string">'ic_create_black_48dp'</span><span class="token punctuation">,</span>
    width<span class="token punctuation">:</span> <span class="token number">96</span><span class="token punctuation">,</span>
    height<span class="token punctuation">:</span> <span class="token number">96</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> show<span class="token punctuation">:</span> <span class="token string">'always'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Filter'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Settings'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token function">nativeImageSource<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
    android<span class="token punctuation">:</span> <span class="token string">'ic_settings_black_48dp'</span><span class="token punctuation">,</span>
    width<span class="token punctuation">:</span> <span class="token number">96</span><span class="token punctuation">,</span>
    height<span class="token punctuation">:</span> <span class="token number">96</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> show<span class="token punctuation">:</span> <span class="token string">'always'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
  toolbar<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    backgroundColor<span class="token punctuation">:</span> <span class="token string">'#e9eaed'</span><span class="token punctuation">,</span>
    height<span class="token punctuation">:</span> <span class="token number">56</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ToolbarAndroidExample<span class="token punctuation">;</span></div><div class="embedded-simulator"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&amp;scale=65&amp;autoplay=false&amp;orientation=portrait&amp;deviceColor=white&amp;params=%7B%22route%22%3A%22ToolbarAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/textinput.html#content">← Prev</a><a class="docs-next" href="docs/touchablehighlight.html#content">Next →</a></div>