react-native-simplest-hud v3.0.0

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: