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-hudUsage
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. |