Skip to content

liyuechun/react-native-simplest-hud

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

The simplest network load indicator of react-native

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

Design sketch

progress-hud-screen progress-hud-screen progress-hud-screen progress-hud-screen progress-hud-screen

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.