How to Cover entire Screen with <View> in react native?

Question

My Goal is to display an ActivityIndicator over the entire screen when the app first loads up to check whether or not the user is already logged in. If so, I navigate to the App. Otherwise I stay in the Login. My current Code:

constructor(props){
   super(props)
   ...
   this.state = {
      loading: true
   }

componentDidMount(){
//look in the database and check whether or not he is logged in and set 'loading' accordingly
}

render(){
    return(
        <View style={{flex: 1, position: "relative}} >
            {/*creates a View over everything else*/
            this.state.loading &&
            <View style={{
              position: "absolute",
              width: "100%",
              height: "100%",
              backgroundColor: "rgba(0, 0, 0, 0.5)",
              justifyContent: "center",
              alignItems: "center",
            }}>
              <ActivityIndicator size={"large"}/>
          </View>
        }
        ...other views and stuff...
        </View>
    );
}

This is working but it does not cover the header:

Is it possible without using headerShown: false?

Help is much appreciated!

Thanks in advance

Answer 1

It should be a new screen with headerShown option set to false. You can add this to your main navigator and render conditionally. Why you don't want to use the headerShown property?