react-native-dropdownalert
Table of contents
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
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
- Modals can overlap DropdownAlert if it's not inside the modal's document tree.
- It is important you place the
DropdownAlertABOVE theStackNavigator.- DropdownHolder example #1
- DropdownHolder example #2
- Redux + router flux example
- Repo: react-native-dropdownalert-router-sample Thanks @mitsuruog and @articolo
Inspired by: RKDropdownAlert
