ProgressHUD like loader in React Native

I order to create a loader or Head-Up Display for react native app we will create a simple component with activity indicator, which can cover full screen and disable all user action till the time it is showing. Given below is the code of Loader. Create an ActivityOverlay.js file and add the given code to it.

import React, { Component } from 'react';

import { View, ActivityIndicator } from 'react-native';

export default class ActivityOverlay extends Component {
  render() {
    const { isVisible } = this.props;
    return isVisible ? (
      <View
        style={{
          backgroundColor: 'rgba(5,5,5,0.6)',
          position: 'absolute',
          top: 0,
          bottom: 0,
          left: 0,
          right: 0, 
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <ActivityIndicator size='large' color={'#fff'} />
      </View>
    ) : null;
  }
}

This is it now you just need to import it in your component and add it at the very bottom of the render method like

<ActivityOverlay isVisible={this.state.loading} /> 

Whenever the loading property of the state is true loader will start showing. example

  this.setState({ loading: true });
  setTimeOut(() => {
  this.setState({ loading: false })
},10000);

The above-given code will show loader for 10 seconds.