title: How to make react native top tab and stack navigator display correctly with status bar?
body: <p>I'm trying to make an application in react native that has a tab navigation screen as the main screen and a button that goes to another screen. I'm having a problem in making everything looking correct with the status bar.</p>
  
  <p>I have this as my navigator:</p>
  
  <pre><code>const tabConfiguration = {
      DecksList: {
          screen: DecksList,
          navigationOptions: {
              title: 'Deck List'
          }
      },
      NewDeck: {
          screen: NewDeck,
          navigationOptions: {
              title: 'New Deck'
          }
      },
  };
  
  const TabNavigator =
      Platform.select({
          ios: createBottomTabNavigator(tabConfiguration),
          android: createMaterialTopTabNavigator(tabConfiguration)
      });
  
  const StackNavigator = createStackNavigator({
          Main: {
              screen: TabNavigator,
              navigationOptions: {
                  header: null
              }
          },
          Deck: {
              screen: Deck,
              navigationOptions: {
                  title: 'Deck'
              }
          }
      });
  
  export default createAppContainer(StackNavigator);
  </code></pre>
  
  <p>And my <code>App.js</code> is like this:</p>
  
  <pre><code>export default class App extends React.Component {
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;StatusBarView backgroundColor={'red'}
                                 barStyle="light-content"/&gt;
                  &lt;AppNavigator/&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>The <code>StatusBarView</code> is:</p>
  
  <pre><code>const StatusBarView = props =&gt; {
      const {backgroundColor} = props;
      return (
          &lt;View style={{backgroundColor, height: Constants.statusBarHeight}}&gt;
              &lt;StatusBar translucent backgroundColor={backgroundColor} {...props} /&gt;
          &lt;/View&gt;
      );
  };
  </code></pre>
  
  <p>With the code like that, my tab screen like this:
  <a href="https://i.stack.imgur.com/7i4sH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7i4sH.png" alt="enter image description here"></a>
  And my other screen end like this:
  <a href="https://i.stack.imgur.com/igcS7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/igcS7.png" alt="enter image description here"></a>
  This second screen has a header higher than it should because of the <code>StatusBarView</code>. If I remove it, the second screen looks OK:
  <a href="https://i.stack.imgur.com/K0Wcw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K0Wcw.png" alt="enter image description here"></a>
  But the tabs screen goes behind the status bar:
  <a href="https://i.stack.imgur.com/VUXH2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VUXH2.png" alt="enter image description here"></a>
  Does anyone know how can properly handle this? I need the status bar for one screen (the tabs one) and can't have it for the other screen (the one without tabs).</p>
  
  <p>I made a snack here: <a href="https://snack.expo.io/@esscheffer/flashcards-start" rel="nofollow noreferrer">https://snack.expo.io/@esscheffer/flashcards-start</a></p>