The simplest network load indicator of react-native

Datetime:2017-04-18 05:32:06         Topic: ReactNative          Share        Original >>
Here to See The Original Article!!!

The simplest network load indicator of react-native

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

Design sketch

DownLoad Project

git clone


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


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

import jsonData from './data.json';

class ExamplePage extends  mixin(RNProgressHUD.Mixin){
<!--mixin(RNProgressHUD.Mixin) replace Component-->
            <View style={{flex: 1,backgroundColor: 'white'}}>
                    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

Showing the HUD

You can display the HUD by calling:


Dismissing the HUD

It can be hide by calling:



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.


Put your ads here, just $200 per month.