React Native, Cover (Overlay) the Requested Page with Loading Indicator and setTimeout() to Hide it

Question

I have this code and it works fine to shows the overlay the requested page for 5sec and Hide to shows the requested page's contents, But when the Loader indicator disappeared its (red) background still there, how to hide the background too? It has two part firsts one for creating Loading Indicator to be hidden after 5 sec. Working example on Expo.io: Live Demo - This is requested page's code: (Please, notice has to be called from /screens)

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Loader from './screens/Loader';

export default function App() {
return (
<View style={styles.container}>
<Loader /> //<--- I put the Loader here
  <Text style={styles.paragraph}>
    This is the requested page should be be covered by indicator background (Red color) <br/ >
    The Loader disappear after 5 sec.<br />
    But, its background still there!!
  </Text>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

And the Loader.js code is :

import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

class Loader extends Component {
state = { animating: true }

closeActivityIndicator = () => setTimeout(() => this.setState({
animating: false }), 5000)

componentDidMount = () => this.closeActivityIndicator()
render() {
  const animating = this.state.animating
  return (
     <View style = {styles.container}>
        <ActivityIndicator
           animating = {animating}
           color = '#bc2b78'
           size = "large"
           style = {styles.activityIndicator}/>
     </View>
  )
  }
  }
 export default Loader
 const styles = StyleSheet.create ({
 container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  marginTop: 0,
  position: 'absolute',
  height: "100%",
  width: "100%",
  backgroundColor: 'red',
  opacity: 0.7
  },
  activityIndicator: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  }
  })

Answer 1

The problem is you are always rendering the Loader and its always visible, so the easiest way to handle this would be to return null and hide the loader when its not necessary like below.

   render() {
      const animating = this.state.animating;

      if(!this.state.animating)
        return null;

      return (
         <View style = {styles.container}>
            <ActivityIndicator
               animating = {animating}
               color = '#bc2b78'
               size = "large"
               style = {styles.activityIndicator}/>
         </View>
      )
   }