title: How to prevent layout from overlapping with iOS status bar
body: <p>I am working on <a href="http://facebook.github.io/react-native/docs/using-navigators.html#content" rel="noreferrer">tutorial</a> for React Native navigation. I found out that all layout starts loading from top of screen instead of below of the status bar. This causes most layouts to overlap with the status bar. I can fix this by adding a padding to the view when loading them. Is this the actual way to do it? I don' think manually adding padding is an actual way to solve it. Is there a more elegant way to fix this?</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, Navigator } from 'react-native';
  
  export default class MyScene extends Component {
      static get defaultProps() {
              return {
                      title : 'MyScene'    
              };  
      }   
      render() {
              return (
                      &lt;View style={{padding: 20}}&gt; //padding to prevent overlap
                              &lt;Text&gt;Hi! My name is {this.props.title}.&lt;/Text&gt;
                      &lt;/View&gt; 
              )   
      }    
  }
  </code></pre>
  
  <p>Below shows the screenshots before and after the padding is added.
  <a href="https://i.stack.imgur.com/e25r1.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/e25r1.jpg" alt="enter image description here"></a></p>