🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A React Native component that provides a simple way to display a dropdown-style alert message.

Notification React Native

Documentation

react-native-dropdownalert

Platform npm version npm version Build Status codecov License

screenshot screenshot screenshot screenshot

Table of contents

  1. Support
  2. Installation
  3. Demo
  4. Usage
  5. Props
  6. Caveats

A simple alert to notify users about new chat messages, something went wrong or everything is ok. It can be closed by tap, cancel button, automatically with closeInterval, pan responder up gesture or programmatically (this.dropDownAlertRef.closeAction()).

Support

react-native version package version reason
0.50.0 >=3.2.0 Added SafeAreaView (iPhone X)
0.44.0 >=2.12.0 Added ViewPropTypes

Installation

npm i react-native-dropdownalert --save

Demo

screenshot

Usage

import DropdownAlert from 'react-native-dropdownalert'; export default class App extends Component {   componentDidMount() {     this._fetchData();   }   _fetchData = async () => {     try {       await fetch('https://mywebsite.com/endpoint/');       // alertWithType parameters: type, title, message, payload, interval.       // There are 4 pre-defined types: info, warn, success, error.       // payload object with source property overrides image source prop. (optional)       // interval overrides closeInterval prop. (optional)       this.dropDownAlertRef.alertWithType('success', 'Success', 'Fetch data is complete.');     } catch (error) {       this.dropDownAlertRef.alertWithType('error', 'Error', error.message);     }   };   render() {     // Make sure DropdownAlert is the last component in the document tree.     return (       <View>         <DropdownAlert ref={ref => this.dropDownAlertRef = ref} />       </View>     );   } }

Caveats

Inspired by: RKDropdownAlert


You May Also Like