title: React Native and React Navigation — How to get screen title to show in header and bottom tab navigator to also show
body: <p>I am teaching myself React Native and building a fairly simple app,<a href="https://github.com/davesag/irMobile" rel="nofollow noreferrer"><code>irMobile</code></a>.</p>
  
  <p>I've set up each screen with (using the About screen as an example)</p>
  
  <pre><code>static navigationOptions = () =&gt; ({
    title: 'About'
  })
  </code></pre>
  
  <p>and in my app's main component</p>
  
  <pre><code>const MainNavigator = createBottomTabNavigator({ About })
  const StackNavigator = createStackNavigator({ MainNavigator })
  const AppContainer = createAppContainer(StackNavigator)
  </code></pre>
  
  <p>then in the component itself</p>
  
  <pre><code>  render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;AppContainer /&gt;
        &lt;/View&gt;
      )
    }
  </code></pre>
  
  <p>My screens render with a nice nav bar at the bottom but I don't get any titles in the header, just an empty space.</p>
  
  <p>I've gone through <a href="https://reactnavigation.org/docs/en/headers.html" rel="nofollow noreferrer">the docs</a> several times looking to see what I have missed and I'm stumped.</p>
  
  <p>If I use the inspector in the iOS simulator I can select the header and it shows it to be a <code>View</code> at <code>x: 0, y: 44</code> with <code>width: 375</code> and <code>height: 43.7</code>, so the thing is there I just can't see it.</p>
  
  <p>I've tried setting a <code>headerStyle</code> to <code>{ backgroundColor: 'red' }</code> to see if I can at least see that, but no.</p>
  
  <p><a href="https://i.stack.imgur.com/F33vK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F33vK.png" alt="screen snap of iPhone simulator showing header"></a></p>
  
  <p>However, if I change the <code>StackNavigator</code> to put the <code>About</code> screen in there along with the <code>MainNavigator</code> as follows:</p>
  
  <pre><code>const StackNavigator = createStackNavigator({ About, MainNavigator })
  </code></pre>
  
  <p>Then I get my header showing up as expected, but the bottom tab bar no longer shows.</p>
  
  <p><a href="https://i.stack.imgur.com/G0L2E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G0L2E.png" alt="screensnap of iPhone showing header but missing tab navigator"></a></p>
  
  <p>So that's confusing.</p>
  
  <p>The docs are a bit vague on how to get both a header and a bottom tab navigator into the same app.  Clearly, being a bit of a React Native noob here, I am missing something really obvious and simple.</p>
  
  <p>What am I failing to understand and how do I fix this?</p>
  
  <p>Source code at <a href="https://github.com/davesag/irMobile" rel="nofollow noreferrer">github.com/davesag/irMobile</a>.</p>