title: How to implement custom header icons within a (nested) StackNavigator?
body: <p>This might be a noobish question, but although I read the documentation and other sources, I still did not figure out <strong>how to implement two or more additional, clickable icons in the header within a StackNavigator</strong>, just like in the picture. If the stackNavigator wants to show a back-icon, he is allowed to overwrite the menu-icon. </p>
  
  <p>This is how the (root) home-screen could look like. Once the user starts clicking on the content, the menu-item should be replaced with the back-button from the stackNavigator (ideally on any platform).
  <a href="https://i.stack.imgur.com/ee3e3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ee3e3.png" alt="Mockup of what I want to achieve."></a></p>
  
  <p><strong>What I did so far:</strong> I started from a brand-new template by choosing the options <code>tabs</code> when running <code>expo init</code>. I did some minor modifications in the file <strong>MainTabNavigator.js</strong></p>
  
  <pre><code>import React from 'react';
  import { Platform } from 'react-native';
  import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
  import CustomHeader from '../components/CustomHeader';
  import HomeScreen from '../screens/HomeScreen';    
  
  const HomeStack = createStackNavigator( { Home: HomeScreen }, {
     // default config for screens in the stack, so `Home` will use this title 
    navigationOptions: { 
      title: 'Protype Prompter: Browse',
      header: props =&gt; &lt;CustomHeader {...props} /&gt;,
      }}
  );
  // All other code stays like provided by expo init.
  export default createBottomTabNavigator({
    HomeStack,
  });
  </code></pre>
  
  <p>Next, I made sure that within <strong>HomeScreen.js</strong> the header is not overwritten:</p>
  
  <pre><code>export default class HomeScreen extends React.Component {
    /* static navigationOptions = {
      header: null,
    }; */
  </code></pre>
  
  <p>Please help me to with my <strong>CustomHeader.js</strong>. All my efforts so far so did not lead to any visible change on the home screen.</p>
  
  <pre><code>import React from "react";
  import { Header } from "react-navigation";
  import { View, Platform, Image, StyleSheet } from "react-native";
  import { SimpleLineIcons } from '@expo/vector-icons'; 
  const CustomHeader = props =&gt; {
    return (
      &lt;View&gt;
          &lt;SimpleLineIcons name="menu" size={24} color={tintColor} /&gt;
           &lt;Header headerLeft={&lt;SimpleLineIcons name="menu" size={24} color='#6a1b9a' /&gt;} {...props} /&gt;
      &lt;/View&gt;
    );
  };
  export default CustomHeader;
  </code></pre>
  
  <p>Beside other sources, I consulted so far the following websites:</p>
  
  <ol>
  <li>The documentation on <a href="https://reactnavigation.org/docs/en/headers.html" rel="noreferrer">headers</a> and <a href="https://reactnavigation.org/docs/en/header-buttons.html" rel="noreferrer">header buttons</a></li>
  <li>A <a href="https://github.com/react-navigation/react-navigation/issues/1989" rel="noreferrer">github discussion on a react-navitation issue</a></li>
  <li>A <a href="https://reactnavigation.org/docs/en/navigation-options-resolution.html" rel="noreferrer">howto on modifying headers</a> and another one on <a href="https://hackernoon.com/how-to-use-a-custom-header-and-custom-bottom-tab-bar-for-react-native-with-react-navigation-969a5d3cabb1" rel="noreferrer">customer headers with react-navigation</a>. The latter seemed to be a good starting point.</li>
  </ol>