title: React-Native: Remove whitespace at top of screen on android
body: <p>I am trying to remove the whitespace at the top of the screen on iPhone and Android, as seen in the image below (iPhone left, Android right):</p>
  
  <p><a href="https://i.stack.imgur.com/nPY4i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nPY4i.png" alt="enter image description here"></a></p>
  
  <p>Rendered with the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>return (
            &lt;ScrollView style={{backgroundColor: colors.JBTan}}&gt;
            &lt;/ScrollView&gt;
        );</code></pre>
  </div>
  </div>
  </p>
  
  <p>Adding the following code to my main index file (where AppRegistry is used), I am able to remove the whitespace, but only on iPhone:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import {AppRegistry} from 'react-native';
  import App from './app/index';
  import {SafeAreaView} from 'react-navigation'; //added this import
  
  SafeAreaView.setStatusBarHeight(0); //added this line
  
  AppRegistry.registerComponent('XXXXX', () =&gt; App);</code></pre>
  </div>
  </div>
  </p>
  
  <p>This produces the following result (whitespace is gone on iPhone but not on Android):</p>
  
  <p><a href="https://i.stack.imgur.com/ecd5P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ecd5P.png" alt="enter image description here"></a></p>
  
  <p>How can I get the same result on Android?</p>