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.
- 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.hide()
this.refs.hudView.showError()
this.refs.hudView.showCustomIcon('ionicons', 'star')
this.refs.hudView.showCustomIcon('ionicons', 'star', true, false)
var customComponent = (<Text style={{color: "#ffffff"}}>Loading</Text>)
this.refs.hudView.showCustomComponent(customComponent)
var customComponent = (<Text style={{color: "#ffffff"}}>Spinning</Text>)
this.refs.hudView.showCustomComponent(customComponent, true, false)
All methods returns a promise if hideOnCompletion is set to true.
hudView.showSuccess().then(() => {
alert("Success view did complete.")
})
render() {
return(<HudView isVisible={this.state.isHudVisible} type={this.state.hudType}>
</HudView>)
}