title: absolute position on top of react-navigation nav header
body: <p>I'm making a loading screen and I've set it to absolute position the entire screen. However when using <code>react-navigation</code> it does not seem to cover the header. Is there a way to place my component on top of the navigation library's header component? </p>
  
  <p>When you use <code>react-navigation</code> you can configure a header for that screen. Usually when you navigate to a screen, any code you render within that screen is automatically placed underneath the nav header. However, I want my component to take the whole screen and cover the header. I want to header to remain, but I want to cover it with an opacity. Is this possible?</p>
  
  <pre><code>const navigationOptions = {
    title: "Some Title",
  };
  
      const Navigator = StackNavigator(
    {
      First: { screen: ScreenOne },
      Second: { screen: ScreenTwo },
      ...otherScreens,
    },
    {
      transitionConfig,
      navigationOptions, //this sets my header that I want to cover
    }
  );
  </code></pre>
  
  <p>Here's my loader.js</p>
  
  <pre><code>const backgroundStyle = {
    opacity: 0.5,
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 1,
  };
  
  const Loading = () =&gt;
    &lt;View style={backgroundStyle}&gt; 
        &lt;PlatformSpinner size="large" /&gt;
    &lt;/View&gt;;
  </code></pre>
  
  <p>In ScreenOne.js</p>
  
  <pre><code>class ScreenOne extends Component { 
    render(){
     if(loading) return &lt;Loading/&gt;;
     return (
       //other code when not loading that is placed under my header automatically
     )
    }
  }
  </code></pre>