react-native-dropdownalert travis-ci npm

A simple alert to notify users about new chat messages, something went wrong or everything is ok.

react-native-dropdownalert

Platform npm version npm version Build Status Join the chat at https://gitter.im/react-native-dropdownalert/Lobby License

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

screenshot

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}
}
// ...

Types

| info | warn | error | success | custom | ———— | ————- | ———— |———— |———— |———— | |screenshot |screenshot |screenshot|screenshot|screenshot

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 Fires when alert closes either by user or closeInterval Returns: data = {type, title, message} 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} null
showCancel Bool whether or not to show cancel button false
tapToCloseEnabled Bool enable close with tap true
panResponderEnabled Bool enable close with pan responder true
replaceEnabled Bool enables the alert to either state change without dismissal or go to next alert with dismissal true
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

Related Repositories

react-native-dropdownalert

react-native-dropdownalert

A simple alert to notify users about new chat messages, something went wrong or everything is ok. ...

react-native-dropdownalert

react-native-dropdownalert

An alert to display some info without breaking immersion. Feel free to leave feedback. ...


Top Contributors

testshallpass lucianomlima trymbill ivpusic EyMaddis mehdihz kevinresol Enricopv gbrlcustodio Maxeh gitter-badger ma96o ngandhy

Releases

-   v2.5.0 zip tar
-   3.7.0 zip tar
-   3.6.0 zip tar
-   3.5.0 zip tar
-   3.4.1 zip tar
-   3.4.0 zip tar
-   3.3.1 zip tar
-   3.3.0 zip tar
-   3.2.0 zip tar
-   3.1.3 zip tar
-   3.1.2 zip tar
-   3.1.1 zip tar
-   3.1.0 zip tar
-   3.0.0 zip tar
-   2.13.0 zip tar
-   2.12.0 zip tar
-   2.11.0 zip tar
-   2.10.0 zip tar
-   2.9.0 zip tar
-   2.8.0 zip tar
-   2.6.2 zip tar
-   2.6.1 zip tar
-   2.6.0 zip tar