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
DropdownAlert
ABOVE theStackNavigator
.- DropdownHolder example #1
- DropdownHolder example #2
- Redux + router flux example
- Repo: react-native-dropdownalert-router-sample Thanks @mitsuruog and @articolo
Inspired by: RKDropdownAlert