title: React Native Android Blank Space Between Status Bar And Header
body: <p>i have created a react-native application.Using react-navigation/native for navigation. My android screen has a blank space between application header and android status bar. I can't do anything there. I tried inspecting but there is nothing to inspect.</p>
  <p><code>App.js</code></p>
  <pre class="lang-js prettyprint-override"><code>import { NavigationContainer } from '@react-navigation/native';
  import React, { useContext } from 'react';
  import { HomePage } from './pages';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  export default App = () =&gt; {
  const Stack = createNativeStackNavigator();
  return (
      &lt;NavigationContainer&gt;
            &lt;Stack.Navigator&gt;
              &lt;Stack.Screen name=&quot;Home&quot; component={HomePage}&gt;&lt;/Stack.Screen&gt;
            &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
   );
  };
  </code></pre>
  <p><code>index.js</code></p>
  <pre class="lang-js prettyprint-override"><code>import App from './src/App';
  import { Navigation } from &quot;react-native-navigation&quot;;
  
  Navigation.registerComponent('com.app.MyApp', () =&gt; App);
  Navigation.events().registerAppLaunchedListener(() =&gt; {
      Navigation.setRoot({
          root: {
              stack: {
                  children: [
                      {
                          component: {
                              name: 'com.app.MyApp'
                          }
                      }
                  ]
              }
          }
      });
  });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/mmOCZ.png" rel="nofollow noreferrer">You can see the output here</a></p>
  <p>Why there is a huge blank space between my header and status bar?</p>
  <p>Thanks for helping.</p>