react-native-dropdownalert

A simple alert to notify users about new chat messages, something went wrong or everything is ok. It can be dismissed by onPress, cancel onPress, automatically with closeInterval prop, pan responder up gesture or programmatically.

Installation

npm i react-native-dropdownalert --save

Demo

Usage

import DropdownAlert from 'react-native-dropdownalert'
// ...
render() {
  return (
    <View>
      // !!! Make sure it's the last component in your document tree.
      <DropdownAlert
        ref={(ref) => this.dropdown = ref}
        onClose={(data) => this.onClose(data)} />
    </View>
  )
}
// ...
handleRequestCallback(err, response) {
  if (err != null) {
    this.dropdown.alertWithType('error', 'Error', err)
  }
}
// ...
onClose(data) {
  // data = {type, title, message, action}
  // action means how the alert was dismissed. returns: automatic, programmatic, tap, pan or cancel
}
// ...

Predefined Types

info	warn	error	success

Props

Name	Type	Description	Default
closeInterval	Number	dismiss alert at a certain time in milliseconds	4000
imageSrc	String or Number	local or network source	null
startDelta	Number	where the container starts (changes based on container height onLayout)	-100
endDelta	Number	where the container ends	0
onClose	Function	Invoked when alert is closed Returns: data = {type, title, message, action}	null
cancelBtnImageSrc	String or Number	local or network source	require('./assets/cancel.png')
titleNumOfLines	Number	number of lines	1
messageNumOfLines	Number	number of lines	3
onCancel	Function	Cancel button action. Returns: data = {type, title, message, action}	null
showCancel	Bool	whether or not to show cancel button	false
tapToCloseEnabled	Bool	enable/disable close with tap	true
panResponderEnabled	Bool	enable/disable close with pan responder	true
replaceEnabled	Bool	enables the alert to either state change without dismissal or go to next alert with dismissal	true
translucent	Bool	StatusBar prop	false
activeStatusBarStyle	String	StatusBar barStyle when alert is open	light-content
activeStatusBarBackgroundColor	String	StatusBar backgroundColor when alert is open	It takes on the backgroundColor of alert if predefined else default or provided prop
inactiveStatusBarStyle	String	StatusBar barStyle when alert dismisses	StatusBar._defaultProps.barStyle.value
inactiveStatusBarBackgroundColor	String	StatusBar backgroundColor when alert dismisses	StatusBar._defaultProps.backgroundColor.value
containerStyle	View.propTypes.style	styles for container for custom type only	{ padding: 16, flexDirection: 'row' }
titleStyle	Text.propTypes.style	styles for title for all types	{ fontSize: 16, textAlign: 'left', fontWeight: 'bold', color: 'white', backgroundColor: 'transparent' }
messageStyle	Text.propTypes.style	styles for message for all types	{ fontSize: 14, textAlign: 'left', fontWeight: 'bold', color: 'white', backgroundColor: 'transparent' }
imageStyle	Image.propTypes.style	styles for image for all types	{ padding: 8, width: 36, height: 36, alignSelf: 'center' }
cancelBtnImageStyle	Image.propTypes.style	styles for image for all types	{ padding: 8, width: 36, height: 36, alignSelf: 'center' }
successColor	String	Default background color of success message	#32A54A
infoColor	String	Default background color of info message	#2B73B6
warnColor	String	Default background color of warn message	#cd853f
errorColor	String	Default background color of error message	#cc3232

Inspired by: RKDropdownAlert