absolute position on top of react-navigation nav header

Question

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

Answer 1

From your question what I understand is, you want to render a spinner component above all other components including the navigation header with opacity.

One way to do this is render a Modal component which wraps your spinner. Modal component takes the full screen and you can give props transparent = true. And customise the Parent View of Modal to have background colour with opacity as shown. Now show/hide this Modal component everywhere to handle loading.

Demo using snack : https://snack.expo.io/SyZxWnZPZ

Sample code below

import React, { Component } from 'react';
import { View, StyleSheet,Modal,ActivityIndicator,Button } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  state = {
    isShowModal: false,
  }
  render() {
    return (
      <View style={styles.container}>
        <Button title='show modal' onPress={() => this.setState({isShowModal: true})} />
        {this.state.isShowModal && this.showModal()}
      </View>
    );
  }

  showModal() {
    setTimeout(() => this.setState({isShowModal: false}), 5000); // just to mimic loading
    return(
      <Modal
        animationType='fade'
        transparent={true}
        visible={true}>

        <View style={{flex:1,backgroundColor:'rgba(0,0,0,.2)'}}>
          <ActivityIndicator size='large' color='red' style={{flex:1}} />
        </View>
      </Modal>
    )
  }
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});