Skip to content

A dropdown alert that allows you to display bits of information to your users.

License

Notifications You must be signed in to change notification settings

CRAlpha/react-native-dropdownalert

 
 

Repository files navigation

react-native-dropdownalert

Platform npm version npm version Build Status License

A dropdown alert that allows you to display bits of information to your users. Try 1 of 3 pre-defined types or roll your own custom type (see props below). The user can tap the alert to close it or it will close automatically after 4 seconds or you can choose how long (see closeInterval prop).

Announcement >= v1.9.0

To make this highly customizable and scalable a few props have been removed (see props below). New style props have been added to take over the work and provide more flexibly.

Installation


npm i react-native-dropdownalert --save

Demo


screenshot

Usage


import DropdownAlert from 'react-native-dropdownalert'
// ...
render() {
  return (
    <View>
      <DropdownAlert ref={'dropdown'} onClose={this.onClose} />
    </View>
  )
}
// ...
handleServerResponse(err, response) {
  if (err != null) {
    // Inform the user of the error.
    this.refs.dropdown.alert('error', 'Error', err)
  }
}
// ...
onClose(data) {
  // data = {type, title, message}
}
// ...

Types


| Info | Warn | Error | Custom | ------------ | ------------- | ------------ |------------ |------------ | |screenshot |screenshot |screenshot|screenshot

Props


Name Type Description Default Status
closeInterval Number dismiss alert at a certain time in milliseconds 4000 Available
backgroundColor String background color of view steelblue Removed (use containerStyle)
imageUri String network image '' Available
imageSrc Number local image null Available
textColor String color for title and message white Removed (use messageStyle or titleStyle)
fontFamily String font for title and message HelveticaNeue Removed (use messageStyle or titleStyle)
startDelta Number where view starts at -200 Available
endDelta Number where view ends at 0 Available
statusBarHidden Boolean status bar visibility false Removed
onClose Function Fires when alert dismisses either by user or closeInterval & will pass this: data = {type, title, message} null Available
containerStyle View.propTypes.style look & feel of container for custom type only { padding: 12, flexDirection: 'row', alignItems: 'center', backgroundColor: 'dimgray' } Available
titleStyle Text.propTypes.style look & feel of title for all types { fontSize: 16, textAlign: 'left', fontWeight: 'bold', color: 'white', backgroundColor: 'transparent' } Available
messageStyle Text.propTypes.style look & feel of message for all types { fontSize: 14, textAlign: 'left', fontWeight: 'bold', color: 'white', backgroundColor: 'transparent' } Available
imageStyle Image.propTypes.style look & feel of image for all types { padding: 8, width: 36, height: 36 } Available
titleNumOfLines Number number of lines (set to 0 for unlimited) 1 Available
messageNumOfLines Number number of lines (set to 0 for unlimited) 3 Available

Inspired by: RKDropdownAlert

About

A dropdown alert that allows you to display bits of information to your users.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 63.6%
  • Objective-C 24.0%
  • Python 7.6%
  • Java 4.8%