absolute position on top of react-navigation nav header

I'm making a loading screen and I've set it to absolute position the entire screen. However when using react-navigation 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?

When you use react-navigation 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?

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
  }
);

Here's my loader.js

const backgroundStyle = {
  opacity: 0.5,
  flex: 1,
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  zIndex: 1,
};

const Loading = () =>
  <View style={backgroundStyle}> 
      <PlatformSpinner size="large" />
  </View>;

In ScreenOne.js

class ScreenOne extends Component { 
  render(){
   if(loading) return <Loading/>;
   return (
     //other code when not loading that is placed under my header automatically
   )
  }
}