Skip to content

Latest commit

 

History

History
109 lines (98 loc) · 3.23 KB

README.md

File metadata and controls

109 lines (98 loc) · 3.23 KB

react-native-hud-view

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

Props

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

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

Method Args

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

Example of usage

render() {
  return(<HudView ref="hudView">
  </HudView>)
}
Show Spinner HUD
this.refs.hudView.showSpinner()
Hide HUD
this.refs.hudView.hide()
Show Error HUD
this.refs.hudView.showError()
Show Custom Icon HUD
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>)
}