title: React Native Expo StackNavigator overlaps Notification bar
body: <p>I am trying to implement navigation bar for my React Native Expo app. Here is a problem:</p>
  
  <p><a href="https://i.stack.imgur.com/aj6tu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aj6tu.png" alt="enter image description here"></a></p>
  
  <pre><code>"dependencies": {
      "expo": "^18.0.3",
      "react": "16.0.0-alpha.12",
      "react-native": "^0.45.1",
      "react-navigation": "^1.0.0-beta.11"
  }
  </code></pre>
  
  <p>I don't know where and how I can set up styles for this component to make it not overlap with notifications bar. I tried to set <code>marginTop: StatusBar.currentHeight</code> for my root View but it didn't work. It applied the margin on the View but not on the navigation bar.</p>
  
  <p>My App:</p>
  
  <pre><code>import {StackNavigator} from 'react-navigation';
  import Home from './app/screens/Home';
  
  export default App = StackNavigator({
    Home: { screen: Home }
  })
  </code></pre>
  
  <p>Home:</p>
  
  <pre><code>export default class Home extends Component {
      constructor() {
          super();  
          // &lt;...&gt;
      }
  
      static navigationOptions = {
          title: 'Welcome'
      };
  
      // &lt;...&gt;
  }
  </code></pre>