HudView is a React Native Component for showing HUDs. HudView is based on react-native-vector-icons but can also be used with custom components.
Supports the following vector icons:
- Ionicons
- Entypo
- EvilIcons
- FontAwesome
- MaterialIcons
- Octicons
- Zocial
- Foundation
Name |
Type |
Default |
fadeDuration |
Number |
700 |
hudBackgroundColor |
String |
#000000 |
hudOpacity |
Number |
0.8 |
hudWidth |
Number |
80 |
hudHeight |
Number |
80 |
hudBorderRadius |
Number |
5 |
hudAdditionalStyles |
Object |
{} |
iconSize |
Number |
42 |
iconColor |
Number |
#FFFFFF |
isVisible |
Boolean |
false |
type |
String (success, error, customComponent, customIcon, spinner) |
success |
successComponent |
React Native Component |
react-native-vector-icons FontAwesome check icon |
errorComponent |
React Native Component |
react-native-vector-icons FontAwesome exclamation-triangle icon |
spinnerComponent |
React Native Component |
react-native-vector-icons FontAwesome circle-o-notch icon |
Methods |
Args |
Values |
showSpinner |
None |
|
showSuccess |
None |
|
showError |
None |
|
showCustomIcon |
setName, iconName, rotate, hideOnCompletion |
|
showCustomComponent |
component, rotate, hideOnCompletion |
|
show |
type (default: spinner) |
success, error, customComponent, customIcon, spinner |
hide |
None |
|
Name |
Type |
Default |
Alternatives |
setName |
String |
fontawesome |
ionicons, entypo, evilicons, fontawesome, materialicons, octicons, zocial, foundation |
iconName |
String |
null |
See font icon documentation |
rotate |
Boolean |
false |
true/false |
hideOnCompletion |
Boolean |
true |
true/false |
component |
React Native Component |
null |
N/A |
render() {
return(<HudView ref="hudView">
</HudView>)
}
this.refs.hudView.showSpinner()
this.refs.hudView.showError()
this.refs.hudView.showCustomIcon('ionicons', 'star')
Show Custom Icon HUD as Spinner
this.refs.hudView.showCustomIcon('ionicons', 'star', true, false)
Show custom component HUD
var customComponent = (<Text style={{color: "#ffffff"}}>Loading</Text>)
this.refs.hudView.showCustomComponent(customComponent)
Show custom component HUD as spinner
var customComponent = (<Text style={{color: "#ffffff"}}>Spinning</Text>)
this.refs.hudView.showCustomComponent(customComponent, true, false)
Do something on HUD completion
All methods returns a promise if hideOnCompletion is set to true.
hudView.showSuccess().then(() => {
alert("Success view did complete.")
})
Example of usage with a declarative API
render() {
return(<HudView isVisible={this.state.isHudVisible} type={this.state.hudType}>
</HudView>)
}