title: Hidden StatusBar in Expo React Native App Leaves Whitespace
body: <p>In our Expo React Native app, the status bar currently shown on all the app's screens. However, one screen <em>Welcome</em> needs to have the status bar hidden.</p>
  
  <p>In the <em>Welcome</em> screen, dropping in <code>react-native</code>'s <code>StatusBar</code> component with <code>hidden</code> props set to <code>true</code> hides the status bar (on a physical iPhone) but leaves behind a white region.</p>
  
  <p><strong>Problem:</strong> This white region where the status bar used to be, should be transparent or removed to show the background image that is covering the rest of the screen.</p>
  
  <p>How can we achieve this?</p>
  
  <p><strong>Before hiding</strong></p>
  
  <p><a href="https://i.stack.imgur.com/QYLqXm.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/QYLqXm.jpg" alt="enter image description here"></a></p>
  
  <p><strong>After hiding</strong></p>
  
  <p><em>Note: Its hard to see the white region on the white background of Stack Overflow</em></p>
  
  <p><a href="https://i.stack.imgur.com/jIalym.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/jIalym.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Routes/index.js</strong></p>
  
  <pre><code>import { createStackNavigator, createSwitchNavigation } from 'react-navigation';
  
  ...
  
  const AuthStack = createStackNavigator({
      Welcome: WelcomeScreen,
      Login: LoginScreen,
  }, {
      headerMode: 'none',
  })
  
  ...
  </code></pre>
  
  <p><strong>Welcome.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, ImageBackground, StatusBar } from 'react-native';
  import { SafeAreaView } from 'react-navigation';
  
  export class WelcomeScreen extends Component {
  
      render() {
          return (
              &lt;View&gt;
                  &lt;StatusBar hidden={true} /&gt;
                  &lt;SafeAreaView style={{height: '100%'}}&gt;
                      &lt;Layout style={{flex:1, justifyContent: 'center', alignItems: 'center'}}&gt;
                          &lt;ImageBackground source={myBackgroundImage} style={{width: '100%', height: '100%'}}&gt;
  
  ...
  
  </code></pre>
  
  <p>Using</p>
  
  <ul>
  <li><code>react@16.8.3</code></li>
  <li><code>react-native@0.59.8</code> (Expo SDK 34 fork)</li>
  <li><code>react-navigation@3.11.1</code></li>
  <li>expo SDK 34</li>
  </ul>