The simplest network load indicator of react-native

If you want to learn React-Native cross platform project，Check out ComicBook.

Design sketch

Install

npm install --save react-native-simplest-hud

Usage

import { RNProgressHUD,mixin } from 'react-native-simplest-hud';

import jsonData from './data.json';

class ExamplePage extends  mixin(RNProgressHUD.Mixin){
<!--mixin(RNProgressHUD.Mixin) replace Component-->
    ...
    render(){
        return(
            <View style={{flex: 1,backgroundColor: 'white'}}>
                ...
                <RNProgressHUD
                    isVisible={this.state.is_hud_visible} //Fixed writing
                    color='rgb(69,149,252)' //hud color
                    label="Loading..."  //"" or "Prompt string"
                    isActivityIndicator={true} //true or false
                />
                ...
            </View>
        );
    }
}

Showing the HUD

You can display the HUD by calling:

  this.showHUD();

Dismissing the HUD

It can be hide by calling:

  this.hideHUD();

Props

The following props can be used to modify the HUD's style and/or behaviour:

Prop	Type	Opt/Required	Default	Note
isVisible	Boolean	Required	N/A	Displays the HUD when set to true.
isActivityIndicator	Boolean	Optional	false	When set to true, the HUD is show by the ActivityIndicator style,or showing by the Rotating ring style.
label	String	Optional	Loading...	Sets Prompt string of the HUD.
color	String	Optional	rgb(69,149,252)	Sets the color of the HUD spinner.