Simple in progress (hud) component.

readme.md

All you have to do is pass a "visible" prop and optionally an onPress handler.

export default class Home extends Component {
  
  state = {
    loading: true
  };

  componentDidMount() {
    // do your async stuff.
    setTimeout(()=>{
      this.setState({
        loading: false //remove hud
      });
    }, 5000);
  }

  render() {
    // make sure you add the hud at the end of the container.
    return (
      <View style={styles.container}>
        <Text>All your view goes here.</Text>
        <Hud visible={ this.state.loading } />
      </View>
    );
  }
}

hud.js

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

export default class HudComponent extends Component {
  
  static propTypes = {
    visible: PropTypes.bool,
    onPress: PropTypes.func
  };

  handleOnPress() {
    if (this.props.onPress) {
      this.props.onPress();
    }
  }

  render() {
    if (!this.props.visible) return null;

    return (
      <View style={ styles.overlay } onPress={ this.handleOnPress.bind(this) }>
        <View style={ styles.container }>
          <ActivityIndicator />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  overlay: {
    backgroundColor: '#c3c3c3',
    opacity: 0.5,
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 100,
    height: 100,
    borderRadius: 16,
    backgroundColor: '#3f3f3f'
  }
});