title: React Navigation Custom Header rendering multiple times
body: <p>I have a simple React Navigation 5 stack component. I am inserting a custom Header component into the screenOptions of the navigator like so:</p>
  <pre><code>    &lt;NavigationContainer&gt;
        &lt;Stack.Navigator screenOptions={ {headerShow:true, header:(p)=&gt;
          &lt;Header/&gt; }}&gt;
          &lt;Stack.Screen name=&quot;Home&quot; component={Home} /&gt;
          &lt;Stack.Screen name=&quot;Notifications&quot; component={AssetExample} /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
  </code></pre>
  <p>My header component is quite simple as well.</p>
  <pre><code>export default function Header({
    navigation
  }) {
    console.log(&quot;WHATS HAPPENING HERE&quot;)
    return ( 
      &lt;View style = {styles.container}&gt;
          &lt;Text style = {styles.paragraph}&gt;
            Something text here 
          &lt;/Text&gt;
  
      &lt;/View&gt;
    );
  }
  </code></pre>
  <p>The console log statement in the header prints multiple times and I am unsure why that's happening.</p>
  <p>Here is the link to the snack as well <a href="https://snack.expo.io/@mmanojr/restless-crackers" rel="nofollow noreferrer">https://snack.expo.io/@mmanojr/restless-crackers</a></p>
  <p>Any help is much appreciated.</p>